Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Forces invisibles : Alignement, direction et emphase

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

French (Français) translation by Henri Lotin (you can also view the original English article)

Le design est plein de « forces invisibles », toutes, pour faciliter la communication propre et claire. Autant que vous pouvez être tenté d’être obsédé par seulement l’obtention de la bonne police, ou juste la sélection de la bonne combinaison de couleurs, votre design échouera lamentablement si vous ne faites pas attention à ces forces invisibles.

Ceci est le premier volet d’une série en trois parties sur ces forces, nous allons donc commencer par l'alignement, la direction et l'emphase.

Présentons les « Eléments »

Pour vraiment penser à travers les forces invisibles du design, vous devez cesser de penser à votre design en termes de polices, couleurs, images et texte et commencer à penser à toutes ces choses comme à des « éléments ».

Chacun de vos titres est un « élément », chaque paragraphe du corps de texte est un gros « élément », et chaque image est un « élément ».

Au sein de chacun de ces éléments existe un autre élément – que vous pourriez aussi appeler « sous-éléments ». Votre logo peut avoir un élément de « symbole » et un élément de « texte ». Et chaque lettre dans la partie texte pourrait être considéré comme son propre élément.

Tous de cet exposé sur les éléments me fait penser à des cours de chimie (auxquels je n’ai jamais assisté), mais c’est en fait approprié. Lorsque vous organisez correctement les éléments, vous obtenez quelque chose d'explosif qui saute hors de la page. Lorsque vous les arranger au hasard, vous obtenez un raté.

Alignement

Le design est difficile parce qu’il faut prendre un espace bidimensionnel ennuyeux et le rendre intéressant, tout en communiquant clairement. Surtout aujourd'hui, avec des écrans mobiles et wearables minuscules, il est important de le faire aussi efficacement que possible. Chaque petit pixel doit faire son travail.

C’est pourquoi l’alignement est si important. En alignant les éléments entre eux, vous pouvez dire beaucoup.

Par exemple, ces carrés sont tous alignés.

Et si nous changeons la façon dont ils sont alignés, ça change la composition complètement.

Et si nous brisons cette alignement, ça semble chaotique.

Si, au lieu de carrés, nous utilisons des icônes de médias sociaux, vous pouvez voir directement comment l'alignement devient utile. Que se passe-t-il si ces icônes de médias sociaux :

Avaient plutôt cette apparence :

Direction

Lorsque vous alignez les éléments, vous créez un sens de l’orientation avec une ligne imaginaire. Les designers vraiment fantaisistes appellent cette ligne imaginaire un « axe ». Pensez-y comme un axe de roue : tout le poids de la roue tourne autour de cet axe. Il doit être équilibré. De même, un axe aide à contrôler l’équilibre d’une composition.

Voyez-vous tous ces éléments alignés ? Vous pourriez les qualifier d'axe sur cette composition.

Si vous alignez d'autres éléments près de cet axe, il domine et contrôle toujours la composition.

Votre grand-père avait raison : il faut être prudent avec vos axes. Par exemple, éviter de mélanger du texte aligné au centre avec une composition « asymétrique ».

Cependant vous organisez votre texte : centré, aligné à gauche, ou aligné a droite (évitez la justification de texte sur le web), vous créez un axe le long de cet alignement.

Lorsque vous centrez du texte, vous créez un axe, et tout le poids du texte tourne autour de cet axe. Le reste de la composition doit être évidemment centré autour de cet axe.

Donc, si vous jetez un texte aligné à gauche à côté de ce texte centré, la composition commence à devenir une source de confusion. Maintenant, vous avez deux axes qui se battent entre eux et n’est-ce pas une pensée effrayante ?

L’exception à cette règle c'est lorsqu’un élément aligné au centre s’étend sur la largeur de la composition, et que les éléments alignés à droite ou à gauche sont encastrés dans cette composition. Ainsi les axes ne s’affrontent pas.

Remarquez que les deux colonnes de contenu sont définies avec un alignement à gauche.

Ceci est un motif que vous voyez communément dans le design mobile. Sur cette capture d’écran de l’application Yelp, les barres de menus supérieures et inférieures ont une orientation centrée, tandis que le reste de l’écran se trouve aligné à gauche.

Ou, vous pourriez créer un axe dans la gouttière (espace vertical entre les colonnes, ndlt) en alignant une colonne à droite et l’autre à gauche.

Emphase

Jusqu’ici, je me suis concentré sur les axes verticaux. Vous pouvez avoir des axes horizontaux, aussi (ou diagonaux, mais qui seront rares dans le design web ou mobile).

Lorsque deux axes forts se croisent, vous allez créer généralement une zone d'emphase. Le œil suit naturellement tout axe fort, alors si deux axes se croisent, l'œil va passer beaucoup de temps à cet endroit.

À un moment donné en design web ou mobile, il y a probablement quelque chose sur quoi vous voulez que votre utilisateur se concentre, alors vous pouvez utiliser des axes qui se croisent pour attirer l’attention sur ce point, comme dans cette page d’accueil :

Le texte aligné à gauche crée un axe, et l’alignement du bouton « Acheter maintenant » avec l’image en crée un autre. Lorsqu’ils se croisent, ils créent une zone d'emphase.

Conclusion

En utilisant l’alignement pour construire des axes, contrôler la direction et établir les principales zones d'emphase, vous pouvez mieux répondre à vos objectifs de design : qu'il sagisse d'améliorer la lisibilité, ou générer une conversion.

Restez dans les parages pour mon prochain article, où je vais parler de comment vous pouvez ajuster la taille de vos éléments pour faire des designs qui sont harmonieux, beaux et clairs.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.