Share
Le design est plein de «forces invisibles», qui contribuent toutes à une communication propre et claire. Même si vous êtes tenté de chercher la bonne police de caractères ou la bonne combinaison de couleurs, votre conception échouera misérablement si vous ne faites pas attention à ces forces invisibles.
C’est la première d’une série en trois parties sur ces forces. Commençons donc par l’alignement, la direction et la focalisation..
Pour vraiment penser aux forces invisibles du design, vous devez cesser de penser à votre design en tant que polices, couleurs, images et texte, et commencer à penser à toutes ces choses en tant qu '«éléments»..
Chaque en-tête est un “élément”, chaque paragraphe du corps du texte est un grand “élément” et chaque image est un “élément”..
Un autre élément se trouve dans chacun de ces éléments. Vous pouvez également les appeler «sous-éléments». Votre logo peut comporter un élément «symbole» et un élément «texte». Et chaque lettre de la portion de texte peut être considérée comme son propre élément.
Tous ces éléments me font penser au cours de chimie (que je n'ai jamais suivi), mais c'est en fait approprié. Lorsque vous arrangez les éléments correctement, vous obtenez quelque chose d'explosif qui sort de la page. Lorsque vous les organisez au hasard, vous obtenez un raté.
Le design est un défi car il faut occuper un espace bidimensionnel ennuyeux et le rendre intéressant tout en communiquant clairement. Surtout aujourd'hui, avec de minuscules écrans portables et portables, 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 les uns avec les autres, vous pouvez en dire beaucoup.
Par exemple, ces carrés sont tous alignés.
Et si nous changeons la façon dont ils sont alignés, cela change complètement la composition.
Et si on casse cet alignement, ça a l'air chaotique.
Si, au lieu des carrés, nous utilisons des icônes de réseaux sociaux, vous pouvez voir directement comment l'alignement devient utile. Et si ces icônes de réseaux sociaux:
Au lieu de cela ressemblait à ceci:
Lorsque vous alignez des éléments, vous créez une direction avec une ligne imaginaire. Les concepteurs vraiment fantaisistes appellent cette ligne imaginaire un «axe». Pensez-y comme à un axe sur une roue: tout le poids de la roue tourne autour de cet axe. Il doit être équilibré. De même, un axe permet de contrôler l'équilibre d'une composition.
Voir tous ces éléments qui sont alignés? Vous pourriez les appeler un axe sur cette composition.
Si vous alignez d'autres éléments près de cet axe, il domine et contrôle toujours la composition..
Ton grand-père avait raison: tu dois faire attention avec tes haches. Par exemple, évitez de mélanger du texte aligné au centre avec une composition "asymétrique".
Quelle que soit la manière dont vous organisez votre texte: centré, aligné à gauche ou à droite (évitez de justifier la saisie sur le Web), vous créez un axe le long de cet alignement..
Lorsque vous centrez le texte, vous créez un axe et tout le poids du texte tourne autour de cet axe. Le reste de la composition veut également être centré autour de cet axe.
Donc, si vous jetez du texte de couleur à gauche à côté de ce texte centré, la composition commence à devenir confuse. Maintenant, vous avez deux axes qui se combattent, et est-ce pas une pensée effrayante?
L'exception à cette règle est lorsqu'un élément aligné au centre s'étend sur la largeur de la composition et que les éléments à gauche ou à droite sont dans cette composition. Alors les axes ne se combattent pas.
Notez que les deux colonnes de contenu sont alignées à gauche.
C'est un modèle que vous voyez couramment dans la conception mobile. Dans cette capture d'écran de l'application Yelp, les barres de menu supérieure et inférieure ont une orientation centrée, tandis que le reste de l'écran est défini en fond à gauche..
Vous pouvez également créer un axe hors de la gouttière en alignant une colonne à droite et l'autre colonne à gauche..
Jusqu'à présent, je me suis concentré sur les axes verticaux. Vous pouvez également avoir des axes horizontaux (ou en diagonale, mais cela sera rare dans le design Web et mobile).
Lorsque deux axes forts se croisent, vous créez généralement un domaine focal. L'œil suit naturellement n'importe quel axe puissant, donc si deux axes se croisent, l'œil passera beaucoup de temps à cet endroit..
À tout moment, dans une conception Web ou mobile, vous souhaitez probablement que votre utilisateur se concentre sur quelque chose. Vous pouvez donc utiliser les axes qui se croisent pour attirer l'attention sur cet endroit, comme dans cette page de destination:
Le texte de gauche aligné crée un axe et l'alignement du bouton «acheter maintenant» avec l'image en crée un autre. Là où ils se croisent, cela a créé un domaine de concentration.
En utilisant l'alignement pour construire des axes, contrôler la direction et établir des zones focales, vous pouvez mieux atteindre vos objectifs de conception: améliorer la lisibilité ou conduire une conversion..
Restez dans mon prochain article, où je vais expliquer comment vous pouvez ajuster la taille de vos éléments pour créer des motifs harmonieux, beaux et clairs..
Accentsconagua