Utiliser les repères facilite la mise en page
Un dessin peut avoir un impact. Il peut avoir du style. Mais cela ne suffit pas.
Pour bien fonctionner, un design doit avoir des éléments qui jouent sur les forces de chacun. Heureusement, chaque élément de contenu comporte des directives inhérentes.
La mise en page, ou la disposition du contenu sur une page Web, est essentielle au succès du design. Entre autres choses, la mise en page privilégie le contenu pour amener les utilisateurs d’un élément à l’autre.
Si cela est fait correctement, les gens seront tellement intéressés par le contenu qu'ils ne remarqueront rien d'autre.
Lisez la suite pour plus de détails et des conseils pour créer des mises en page fonctionnant dans vos conceptions.
Avec l'exemple ci-dessous, la plupart des gens remarqueront la photo ou le titre en premier, puis le texte et enfin les liens.
Ils peuvent ne pas remarquer que le titre, le texte et le visage du modèle sont placés un tiers et deux tiers dans la page respectivement (respect de la règle des tiers), ou que le titre et les liens sont écrits dans les couleurs du modèle, courbe de son épaule conduit l'œil vers les appels à l'action.
Le texte, la photo et les titres constituent une composition. Si on tombe en panne, la pièce entière échoue.
Arrangement basé sur le respect mutuel
Où mettons-nous les choses? Laissez-les nous dire. Les bizarreries des graphiques, des photos et des morceaux de texte deviennent apparentes lorsqu'elles se rencontrent sur une page. Certains fonctionnent mieux ensemble que d'autres et certains ne fonctionnent que lorsqu'ils sont placés d'une certaine manière. Par exemple, notre mise en page fonctionne de deux manières:
La figure 1 montre la disposition utilisée dans notre exemple ci-dessus. Les blocs gris représentent le titre, la photo et le texte.
La figure 2 montre comment les mêmes principes s’appliqueraient à son inversion: un grand élément équilibré par deux éléments plus petits. Cette photo en particulier semble mieux à droite, cependant.
Notre modèle regarde vers la gauche. Dans la figure 1, elle regarde le texte. Dans la figure 2, elle regarde loin du texte. Cela aurait pu marcher si elle regardait la caméra, mais comme elle détourne le regard, elle perd de son impact. Pas grand chose, mais assez important.
Le modèle montre alternativement son intérêt pour le texte et, lorsqu'il est inversé, l'ignore. La disposition des éléments établit une attitude positive ou négative.
Alignement basé sur les repères
Parfois, la chose qui fait fonctionner les éléments d'une certaine manière fournit également des indices sur l'espace et l'alignement. Nous avons noté que les yeux du modèle sont orientés vers la gauche, mais que la photo et le texte contiennent d’autres indices visuels.
Les lignes implicites entre les repères de la typographie et l'image abondent dans cette composition:
- L'œil et les lèvres du modèle et le bord de son nez rencontrent le bord de la colonne de droite.
- La colonne de texte à gauche correspond au bord gauche du titre. Il atteint presque le bord des cheveux du modèle, mais il reste court pour rester cohérent avec la colonne de droite.
- Le visage du modèle (en particulier les yeux et la bouche) définit l’espace vertical du titre.
- Le bas de la photo marque le tiers inférieur de la composition (dans la règle des tiers).
- Les yeux du modèle sont un tiers du haut de la composition.
- Le centre de la face du modèle et le bord droit du titre se rencontrent au tiers et aux deux tiers de la largeur de la composition.
Certains points de repère ont plus de pouvoir que d'autres. Les concepteurs et les photographes pourraient débattre, par exemple, si les yeux du modèle ont plus d'influence que sa silhouette. Mais une mise en page basée sur des points de repère est préférable à une mise en page qui les ignore.
Utilisation de fonctionnalités pour créer une harmonie
Les non-concepteurs qui s'essayent à des mises en page organisent parfois des éléments en fonction de leur place sur la page. L'espace doit être respecté, mais cela ne conduit pas toujours au meilleur design.
La figure 5 aligne les éléments sur l'espace de la page et base tout sur les limites de la toile.
La figure 6 , cependant, base sa disposition sur les points focaux de la photo. Le résultat est une apparence plus rationalisée.
La figure 5 est inefficace car les spectateurs se déplacent entre les points focaux: vers le titre, vers le bas, jusqu'au texte. La ligne la plus simple est droite. Par conséquent, la figure 6 guide le regard du spectateur facilement de gauche à droite, d’un élément à l’autre. Le nœud de la deuxième mise en page est une bande étroite située le long de l’alignement titre-face-texte.
Dans ces images, les lecteurs sont attirés par le visage, le titre et le texte du modèle, généralement dans cet ordre. C'est trois domaines différents à regarder. Leur alignement donne le focus de la mise en page.
La bonne réponse
Les trois mises en page ci-dessous utilisent les mêmes éléments de titre, photo et texte:
La première mise en page a le plus de "respiration". La seconde respecte le texte. La troisième disposition utilise un espace négatif pour atteindre l'équilibre. Les trois utilisent des repères mais de différentes manières. Est-ce le meilleur?
Chercher une réponse peut nous rendre aveugle à l'évidence: de multiples solutions peuvent être tout aussi valables lorsque les éléments fonctionnent ensemble. Les repères visuels sont des opportunités et non des règles. Jetez un autre coup d'oeil au premier dessin.
Plus les éléments sont conformes aux lignes implicites, plus un élément non-conforme ressortira. Ici, le concepteur casse le mot "Repères" à partir de l'alignement vertical de l'autre texte, accentuant ainsi le mot-clé.
Il n'y a aucun doute sur la promotion de la page. Le succès n'est pas mesuré par la stricte conformité des éléments aux principes de conception, mais par la manière dont la page communique son message.
Écrit exclusivement pour Webdesigner Depot par Ben Gremillion. Ben est un écrivain et designer indépendant qui résout les problèmes de communication avec une meilleure conception.
Comment suivez-vous les repères sur vos conceptions? Qu'est-ce qui fonctionne le mieux pour vous et ce qui ne fonctionne pas?