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

Forces invisibles : Taille, contraste et équilibre

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Alignment, Direction, and Focus
Invisible Forces: Spacing and Shape

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

C’est la deuxième partie d’une série d’articles en trois volets sur les « forces invisibles » dans le design. Dans l’article précédent, nous avons appris comment l’alignement peut être utilisé pour créer la direction et l'emphase. Dans cet article, nous apprendrons sur comment le fait de travailler avec des changements de taille peut créer contraste et équilibre et aider vos designs à communiquer plus clairement.

Les trucs les plus gros semblent plus importants

Il est évident que lorsque vous faites un élément plus grand, il a tendance à avoir l'air plus important que les éléments plus petits.

Mais, cela doit être pris en compte avec d’autres facteurs qui affectent la hiérarchie visuelle. Par exemple, ces deux éléments prennent approximativement le même niveau d’importance, parce qu’ils ont la même taille :

Quoi qu'il en soit, vous verriez l’élément du haut avant que vous voyiez l’élément du bas.

Mais si vous rendez l’élément du bas plus grand que l’élément du haut, il semblera plus important.

Toutefois, d'autres choses telles que le poids visuel (vous utilisez une police grasse ou légère), ou les contrastes de couleur, peuvent inverser les effets de grande taille.

Dans cette illustration, l’élément le plus léger semble moins important, même s’il est plus grand.

Mais juste appliquer un fond sombre à la même illustration, rend l’élément plus léger (et plu) dominant, grâce au fait qu’il contraste avec le fond par rapport à l'élément plus petit.

Apporter des modifications de taille signifiantes

En particulier lors du design pour les écrans minuscules de l’époque actuelle, vous devriez utiliser les changements de taille avec intention. Il n’y a aucun intérêt à faire une police plus grande – et occuper ainsi le précieux espace vital de l'écran – si ce n’est pas nécessaire.

Dans la mesure du possible, vous pouvez utiliser les facteurs mentionnés ci-dessus pour modifier votre hiérarchie visuelle, mais tôt ou tard, vous avez besoin de faire une chose plus qu'une autre. Ne le faites pas juste au hasard.

Regardez ces différents éléments, chacun d’eux plus grand que le précédent.

Maintenant, laquelle se lit le mieux pour vous : cette disposition, ou celle-ci ?

Les éléments du deuxième exemple sont dimensionnés selon une échelle variée. Chaque taille de la police se rapporte à la taille plus petite avec la même relation mathématique en ce qui concerne la taille la plus grande.

Les dimensions de police dans l’échelle variée ont une relation proportionnelle entre eux. Les proportions aident à rendre les parties de vos designs cohérentes.

Vous pouvez voir les proportions en action dans le logo de MailChimp.

Chacun des cercles qui constitue les caractéristiques du chimpanzé se rapportent les uns aux autres par un facteur de .75. Le cercle qui compose la région du ventre est de .75 la taille du cercle qui compose le corps, par exemple. Hicks Design, la firme qui a conçu ce logo, l’a fait exprès !

Ne soyez pas dupé par l’or des fous

Beaucoup d'entre vous vont probablement penser à ce que l'on appelle « nombre d’or » qui reçoit beaucoup de battage médiatique. Le nombre d’or est à peu près 1:1.618. Oui, le chimpanzé serait encore attrayant s'il se basait sur le nombre d’or, mais il ne serait pas objectivement plus attrayant. Malgré le battage médiatique, il n’y a aucune preuve que le nombre d’or est plus attrayant que les autres ratios populaires tels que .75 ou .67.

Pour illustrer ceci, j’ai une fois sondé ma liste de courriel à propos des rectangles ci-dessus, lequel ils ont trouvé plus attrayant. L’un d’eux est un carré, un autre est un rectangle.75, un autre est un rectangle.67 et un autre est un rectangle « d'Or ». Quel rectangle vous semble plus attrayant ?

Voici les résultats du sondage :

  • en haut à gauche (carré) : 8%
  • en haut à droite (rectangle 3:4) : 29%
  • en bas à gauche (rectangle de 2:3) : 37 %
  • en bas à droite (nombre « d'Or ») : 25%

Comme vous pouvez le voir, ce qu’on appelle rectangle d'or très bien performé, mais il ne s'est pas révélé être le rectangle le plus attrayant.

Le rectangle 2:3 a gagné dans ce cas, mais ne vous attardez pas trop là-dessus. Le fait est qu'importe, du nombre du nombre d'or au 3:4 sera plus attrayant qu’un carré.

Vous pouvez utiliser cette connaissance pour rendre belle votre typographie et gagner du temps si vous travaillez avec une échelle prédéfinie variée pour votre typographie.

Par exemple, voici les tailles de police que j’utilise toujours. Chaque taille est à peu près de .75 la taille de la valeur précédente (avec un peu d’arrondi)

Un avantage supplémentaire de travailler avec une échelle.75 plutôt que le nombre d’or, est que le calcul est beaucoup plus facile à faire dans votre tête : ce qui est de 75% de 16 ? Facile ! Ce qui est de 61,8% de 16 ? Euh.

Conclusion

En pensant aux changements de taille que vous effectuez, vos design seront de plus en plus propre et plus clair et tout en étant plus utilisable, et convertiront mieux. Si vous utilisez une échelle variée, vous pouvez effectivement réaliser de grands designs plus vite !

Rester dans les parages pour le dernier article de cette série, où nous apprendrons comment façonner la page grâce à l’alignement et l'échelle et penser à votre espace vierge, contribue à donner à vos créations encore plus de clarté.

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.