Examinons trois sujets qui, à première vue, peuvent vous sembler incroyablement simples et explicites : répétition, motifs et rythme. Cependant, même s’ils semblent ne pas avoir besoin d’être introduits, nous devrions les étudier. En comprenant ces concepts, vous pourrez les appliquer plus efficacement pour captiver l’attention de vos utilisateurs tout en rendant vos créations plus efficaces.
Dites « répétition » et vous pourriez penser à quelqu’un qui dit la même chose encore et encore. Cependant, le design est différent. Répéter les choses ne doit pas être ennuyeux ! En fait, ça peut permettre à un design d’être utilisé correctement. Cela permet également de mieux comprendre les messages. En tant que designers, nous avons trois méthodes de répétition : la répétition, les motifs et le rythme.
Répétition, motifs et rythme : répétition
La répétition consiste simplement à répéter un seul élément plusieurs fois dans un design. Par exemple, vous pouvez dessiner une ligne horizontalement puis en dessiner plusieurs autres.
La répétition peut être utile dans le design de sites web et d’applications. Par exemple, vous vous attendez à ce que le logo d’une entreprise soit répété sur chaque page et au même endroit. Les éléments de menu sont souvent répétés au même endroit sur une page. Cela permet de fournir une expérience utilisateur cohérente.
En répétant des éléments, en tant que designers, nous ne livrons pas seulement selon les attentes de nos utilisateurs, mais nous améliorons également leur expérience.
Notre cohérence rend les utilisateurs plus à l’aise. Rappelez-vous que l’œil fonctionne d’une certaine manière par défaut. En utilisant la répétition pour garder l’œil alerte sur des éléments de notre création, nous profitons de cette tendance. Nous pouvons également utiliser des formes, des couleurs, des textures, des polices, etc. pour maintenir cette cohérence via la répétition.
Vous pouvez également obtenir des répétitions en utilisant des messages répétés. Si vous voulez que vos clients sachent que vous êtes le moins cher ou le plus rapide de l’industrie, vous voudrez le leur dire plus d’une fois si vous souhaitez que le message soit retenu. Dans ce cas, nous utilisons la répétition pour le renforcement. Vous vous souvenez peut-être d’avoir appris vos tables périodiques en les répétant jusqu’à ce que vous les entassiez dans votre esprit. Le principe ici est le même. Nous retenons mieux les informations le plus souvent et les internalisons.
Répétition, motifs et rythme : motifs
Les motifs sont simplement une répétition de plus d’un élément de design travaillant de concert. Un motif homogène est un motif où chaque élément d’un design (peu importe la fréquence de répétition) se combine pour former un tout. C’est le plus commun dans les arrière-plans sur les pages web et les pages d’application. Il est également populaire dans le design de tapis et de papiers peints.
Regardez autour de vous : votre couverture de lit, votre mur, votre couverture de cahier. Si vous voyez un motif homogène, regardez-le de près. Voyez-vous comment les éléments (cercles, spirales, cônes, ananas, etc.) apparaissent encore et encore de la même manière ? Parfois, ils se touchent ; parfois, ils ont de l’espace entre eux.
Comme vous vous en doutez, les designers fondent la plupart des motifs sur des couleurs, des textures et des formes plutôt que sur des mots. Nous pouvons reconnaître les formes beaucoup plus rapidement que les mots, que nous devons lire, aussi rapidement que possible.
Vous pouvez également trouver de tels motifs dans l’architecture. Les architectes ont tendance à inclure un motif unificateur à l’intérieur et à l’extérieur des bâtiments pour améliorer l’attrait esthétique.
Ce n’est pas nouveau. Pensez aux anciens bâtiments grecs tels que le Parthénon. Les designers anciens pourraient être ingénieux dans leur utilisation de motifs d’éléments tels que les lignes et les spirales.
Mise en garde sur l’utilisation des motifs
Lorsque vous envisagez d’utiliser des motifs dans votre design web ou votre application, vous devez réfléchir à la complexité du motif. Bien que cela puisse sembler une bonne idée de créer une seule image en arrière-plan, cela peut rendre la lecture du texte sur le motif beaucoup plus difficile.
Si vous souhaitez créer un design pour un site traitant des voyages en Grèce, vous pouvez utiliser le haut d’une colonne ancienne pour votre design. Au début, ça a l’air génial ; vous avez un beau design avec des cercles et des feuilles de vigne.
Cependant, vous devez encore ajouter du texte. Donc, en écrivant cela, vous remarquez rapidement un problème. L’écriture sombre tombe parfois sur les lignes sombres de l’image. Vous pouvez utiliser un texte plus clair, tel que le blanc ou le jaune, mais vous constaterez que la pierre grise la rend difficile à lire.
Vous avez des difficultés à le lire, de même que vos utilisateurs. Ils veulent participer à votre design, pas travailler pour essayer de lire du texte. La simplicité et la subtilité sont des considérations essentielles si vous souhaitez conserver l’expérience utilisateur, en gardant les utilisateurs sur votre page.
Répétition, motifs et rythme : rythme
Lorsque vous répétez des éléments, les intervalles entre ces répétitions peuvent créer un sentiment de rythme chez l’observateur et un sentiment de mouvement. Les musiciens rythment l’espacement entre les notes, ce qui fait que ces lacunes « silencieuses » jouent sur les notes. Les designers insèrent un espacement entre les éléments pour créer du rythme. Il existe, en gros, cinq types de rythme visuel.
Rythme aléatoire
La répétition d’éléments sans intervalle régulier spécifique crée des rythmes aléatoires. L’espacement pourrait être d’un millimètre ici, un centimètre là, alors que les éléments pourraient être partout. Pensez à la neige qui tombe, aux cailloux sur la plage, aux mouvements de la circulation : ce sont tous des exemples de rythmes aléatoires en action.
Il convient également de noter qu’un rythme peut apparaître aléatoire si vous examinez une petite partie du rythme. Cependant, si vous prenez du recul et examinez une section plus grande, il se peut qu’il y ait un rythme régulier mais complexe appliqué au design.
Rappelez-vous que vous avez des images positives et négatives, que vous pouvez utiliser pour que les éléments et les espaces entre eux rendent votre design difficile à « prédire ». En utilisant une plus grande série d’éléments, vous aurez des possibilités pratiquement illimitées. L’artiste René Magritte a fait un usage particulièrement intéressant du rythme aléatoire.
Rythme régulier
Comme le battement d’un cœur, le rythme régulier suit les mêmes intervalles, encore et encore. Vous pouvez facilement créer un rythme régulier simplement en créant une grille ou une série de lignes verticales.
L’œil de l’utilisateur reconnaîtra instantanément un rythme régulier, en recherchant les irrégularités du processus. Rappelez-vous que l’œil « aime » être attiré par des éléments exceptionnels. Par conséquent, il existe un risque que, lorsque vous utilisez un rythme régulier dans un design, il devienne monotone (comme un égouttement).
Rythme alternatif
Vous pouvez répéter plus d’un élément dans un design. En alternance, vous utilisez un modèle 1-2-1-2-1-2. Pensez aux carrés noir et blanc sur l’échiquier : c’est un rythme alterné en jeu. Un rythme alternatif est en fait un rythme régulier avec plus de complexité. Cela pourrait être aussi simple que notre échiquier, ou nous pourrions envisager quelque chose de plus complexe.
Certains rythmes alternatifs fantastiques comprennent des rangées de poissons, d’oiseaux ou d’autres animaux. En prenant le poisson comme exemple, nous pouvons voir que chaque poisson identique en suit un autre. En-dessous, la séquence est répétée.
Cependant, l’espace négatif entre les rangées montre les poissons de l’autre couleur (que nous prenons comme arrière-plan) nageant dans l’autre sens, les fines lignes de leurs nageoires et leurs queues s’imbriquant dans celles du premier motif de poisson.
Le Lézard de M.C. Escher (1942) en est un autre bon exemple. Il incorpore trois couleurs de lézards avec une paire de lézards de chaque couleur qui se font face, queue contre queue. Aussi simple ou complexe que l’on veuille faire d’un rythme alternatif, il peut être un moyen facile de briser la monotonie d’un rythme régulier.
Rythme fluide
Un rythme fluide montre les éléments répétés suivant les courbures, les courbes et les ondulations. Dans la nature, vous pouvez voir cela dans les vagues sur une plage ou des dunes de sable. En tant que designers, nous pouvons imiter la nature en créant de magnifiques motifs d’éléments au rythme fluide. Nous pouvons montrer des touffes d’algues sous l’eau, leurs brins faisant doucement face à une série de directions. L’utilisateur les imagine se lover les uns contre les autres.
Rythme progressif
Nous pouvons réaliser un rythme progressif en changeant simplement une caractéristique d’un motif au fur et à mesure que nous le répétons. Nous pourrions dessiner une série de cercles, les uns au-dessus des autres, en les agrandissant. Voyez-vous comment le plus grand en bas semble être le plus proche de vous ? Nous pouvons faire un changement progressif de rythme de façon subtile ou spectaculaire.
Vous pouvez ajouter de l’ombre aux petits cercles au fur et à mesure, de sorte que le plus petit en haut soit sombre, le milieu en mi-ombre et le plus grand légèrement ombré. Les rythmes progressifs nous entourent. Si vous deviez filmer quelqu’un en train de danser et ensuite examiner cette vidéo image par image, vous auriez un rythme progressif.
Le design avec la répétition, les motifs et le rythme
L’utilisation d’éléments visuels répétés est une technique couramment utilisée par les designers dans le design de sites web. Vous pouvez répéter des éléments de design, par exemple, pour fournir une expérience visuelle cohérente. Cela permettra aux utilisateurs de se concentrer plus facilement sur le contenu, car ils savent où trouver des types de contenu ou des options de navigation spécifiques.
Vous pouvez également utiliser la répétition pour attirer l’attention sur un domaine particulier du contenu ou du design. Vous pouvez également l’utiliser pour afficher les relations entre les blocs de contenu.
En outre, vous pouvez utiliser des motifs pour les arrière-plans pour ajouter de la texture et de la cohérence, et vous pouvez les déployer pour fournir une cohérence entre les pages du même type.
En tant que designers, nous pouvons utiliser le rythme pour créer de l’excitation (construire progressivement au fil du temps) ou rassurer (un battement de cœur peut être parfait sur une page destinée aux femmes enceintes, par exemple). Ou, nous pouvons l’utiliser pour influencer d’autres émotions.
Ce qu’il faut retenir sur la répétition, les motifs et le rythme
En tant que designer, vous avez trois types de répétition :
- Répétition
- Motifs
- Rythme
Vous pouvez les utiliser pour définir l’expérience utilisateur de votre site web ou de votre application. Par la répétition, les motifs ou le rythme, vous définissez « l’ambiance » de l’interface utilisateur et utilisez ces éléments pour renforcer votre message et/ou créer l’apparence de votre produit.
La répétition est l’élément le plus simple que vous pouvez utiliser. Le motif est une combinaison d’éléments répétés. Le rythme consiste à utiliser des intervalles ou des espaces entre les éléments pour donner à l’utilisateur une impression de rythme ou de mouvement. Nous pouvons utiliser cinq types de rythme :
- Rythme aléatoire
- Rythme régulier
- Rythme alternatif
- Rythme rythmique
- Rythme progressif
Il y a aussi un autre design du motif qui vient de l’architecte Christopher Alexander. Nous examinerons cela dans un article ultérieur. Le rythme, comme en musique, aide à créer une cadence dans votre création, engageant vos utilisateurs avec toutes sortes de variations intéressantes. Avec un peu de réflexion, vous pouvez maximiser l’impact de votre message en travaillant le bon rythme dans votre design.
Références et où en savoir plus
Design dans l’art : répétition, motif et rythme. Sophia Learning. Extrait de : http://www.sophia.org/tutorials/design-in-art-repetition-pattern-and-rhythm
Swinburne. Principes de design fondamentaux. Extrait de : http://www.swinburne.edu.au/design/tutorials/design/design/#four
