Forces invisibles taille, contraste et équilibre

Cet article est le deuxième d’une série d’articles en trois parties sur les «forces invisibles» dans la conception. Dans l'article précédent, nous avons appris comment utiliser l'alignement pour créer une direction et une focalisation. Dans cet article, nous verrons comment le fait de travailler avec des changements de taille peut créer un contraste et un équilibre et aider vos conceptions à communiquer plus clairement..

Plus gros semble plus important

Il est évident que lorsque vous agrandissez un élément, il a tendance à paraître 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 à peu près le même niveau d'importance, car ils ont la même taille:

Si quelque chose, vous verriez l'élément du haut avant de voir l'élément du bas.

Mais si vous faites l’élément inférieur plus grand que l’élément supérieur, il aura l’air plus important.

Cependant, d'autres éléments tels que le poids visuel (utilisez-vous une police grasse ou claire) ou le contraste des couleurs peuvent-ils inverser les effets d'une taille plus grande?.

Dans cette illustration, l'élément plus léger semble moins important, même s'il est plus gros.

Mais juste en donnant à la même illustration un arrière-plan sombre, l’élément le plus clair (et le plus grand) est désormais dominant, car il contraste davantage avec le fond que le plus petit..

Faire des changements de taille significatifs

Surtout lors de la conception pour les écrans minuscules de l'âge d'aujourd'hui, vous devriez utiliser des changements de taille avec un but. Il ne sert à rien de faire une police plus grande - et donc de prendre un précieux fond d'é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. Cependant, tôt ou tard, vous devez créer une chose plus grande qu'une autre. Juste ne le fais pas au hasard.

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

Maintenant, ce qui se lit plus clairement pour vous: cette mise en page, ou celle-ci?

Les éléments du deuxième exemple sont dimensionnés en fonction d'une échelle variée. Chaque taille de police correspond à la taille la plus petite suivante avec la même relation mathématique que la taille la plus grande.

Les tailles de caractères de l’échelle variée ont une relation proportionnelle entre elles. Les proportions permettent de faire en sorte que certaines parties de vos conceptions se ressemblent.

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

Chacun des cercles qui composent les caractéristiques du chimpanzé est lié par un facteur de 0,75. Le cercle qui constitue la zone du ventre correspond, par exemple, à 0,75. De la taille du cercle qui constitue le corps. Hicks Design, la firme qui a conçu ce logo, l'a fait exprès!

Ne vous fiez pas à l'or des fous

Vous êtes probablement nombreux à penser à ce qu'on appelle le «Golden Ratio» (rapport d’or) qui fait beaucoup parler de lui. Le nombre d'or est d'environ 1: 1,618. Oui, le chimpanzé serait toujours attrayant s’il était basé sur le nombre d’or, mais il ne serait objectivement pas plus attrayant. Malgré le battage médiatique, rien ne prouve que The Golden Ratio soit plus attrayant que d’autres ratios populaires tels que .75 ou .67.

Pour illustrer cela, j’ai une fois interrogé ma liste d’emails sur lequel des rectangles ci-dessus ils trouvaient le plus attrayant. L'un d'eux est un carré, un autre est un rectangle 0,75, un autre est un rectangle 0,67 et un autre est un rectangle «doré». Quel rectangle vous semble le plus attrayant?

Voici les résultats du sondage:

  • en haut à gauche (Carré): 8%
  • en haut à droite (rectangle 3: 4): 29%
  • en bas à gauche (rectangle 2: 3): 37%
  • en bas à droite (Ratio "Golden"): 25%

Comme vous pouvez le constater, le rectangle dit doré s’est très bien comporté, mais il n’est pas devenu le rectangle le plus attrayant..

Le rectangle 2: 3 a gagné dans ce cas, mais ne lisez pas trop dans cela. Le fait est que tout, du nombre d'or au 3: 4, sera plus attrayant qu'un carré.

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

Par exemple, ce sont les tailles de police que j'utilise toujours. Chaque taille correspond environ à 0,75 fois la taille de la taille précédente (avec un peu d’arrondi).

Un avantage secondaire à utiliser une échelle de 0,75 au lieu du nombre d'or est que le calcul est beaucoup plus facile à faire dans votre tête: quelle est la proportion de 75% de 16? Facile! Quel est 61,8% de 16? Errr.

Conclusion

En réfléchissant aux changements de taille que vous apportez, vos conceptions seront plus nettes, plus lisibles et plus utilisables, tout en convertissant mieux. Si vous utilisez une gamme variée, vous pouvez réellement créer de superbes conceptions plus rapidement!

Restez à l'affût du dernier article de cette série, dans lequel vous apprendrez comment façonner la page par l'alignement et le redimensionnement et réfléchir à votre espace blanc permet de donner à vos conceptions encore plus de clarté..