Lorsqu'un élément utilise un espace asymétrique, il se distingue des autres éléments environnants. Cela semblera plus dynamique, ce qui est particulièrement utile si vous concevez des zones d'une page où un lien / bouton demande plus d'attention que d'autres.
Aujourd'hui, nous allons examiner de plus près l'asymétrie exprimée par le contraste, l'espacement et la mise en page. Nous pensons au contraste observable et à la manière dont l’espace attire l’attention.
L'asymétrie ne concerne pas toujours les relations externes avec les marges, le rembourrage ou les gouttières.
L'asymétrie peut également concerner les relations internes telles que les vignettes d'images ou l'alignement du texte. Par exemple, une galerie d'images peut présenter 5 vignettes lorsque le pouce du milieu est légèrement plus grand que les autres, principalement utilisé pour attirer l'attention. L'asymétrie est idéale pour attirer l'attention sur un domaine particulier de la page ou sur un élément particulier de la page.
Et, comme nous l'avons décrit dans le livre électronique gratuit Web UI Design pour l'œil humain, l'asymétrie est parfois utile, ne serait-ce que par souci d'asymétrie.
Examinons de plus près l'asymétrie exprimée par le contraste, l'espacement et la disposition.
Contraste observable
En supprimant les distractions, vous obligez les utilisateurs à se concentrer uniquement sur ce qui est immédiatement visible.
Vous pouvez ensuite appliquer des effets de conception à ces zones, comme les dégradés d’arrière-plan ou même les animations jQuery. Ces effets peuvent être utilisés sur un ou deux éléments pour les distinguer des autres.
Un de nos exemples préférés de cet effet se trouve sur la page d'accueil de Sketch by Bohemian Coding. La page d'accueil mélange des couleurs sombres et claires afin de mélanger les contrastes dans une mise en page unifiée.
Dans la section d'en-tête, vous remarquerez qu'il y a deux boutons: l'un pour un essai gratuit et l'autre pour l'achat du logiciel. Les deux boutons sont colorés en bleu et occupent le même espace. Cependant, le bouton d'essai gratuit utilise un? Vide? fond qui est communément appelé un bouton fantôme. Couché sur l'en-tête sombre, le bouton d'essai gratuit semble flou dans l'arrière-plan.
Étant donné que le bouton d’achat utilise un arrière-plan bleu clair et du texte blanc, il se détache fort et fort contre le fond sombre. Lorsque vous balayez rapidement vos yeux sur l'en-tête, il est évident que le bouton d'achat attire votre attention presque immédiatement. Cela est dû aux choix de couleurs mais aussi aux espaces blancs ajoutés entre les éléments.
Les espaces blancs verticaux et horizontaux sont utilisés de sorte que les boutons apparaissent séparés du texte de l'en-tête. Puisqu'un bouton est plus lumineux que l'autre, il se démarque naturellement car il y a beaucoup d'espace et pas grand-chose d'autre pour capter l'attention.
Vous pouvez voir un style de bouton similaire dans la zone de pied de page:
Dans ce cas, les utilisateurs ont uniquement la possibilité de soumettre leur courrier électronique ou de ne pas divulguer les informations.
Sketch souhaitant que vous envoyiez votre courrier électronique le plus rapidement possible après l'avoir saisi, l'espacement est beaucoup plus étroit entre le champ de saisie et le bouton Soumettre. Cela correspond à la loi de Fitts, car si vous réduisez la distance (et que la taille reste fixe), vous accélérez le temps nécessaire pour se déplacer entre les éléments.
Enfin, notez que la taille asymétrique du formulaire de saisie par rapport au bouton Soumettre attire également votre attention sur cette partie de la page, qui correspond exactement à ce que Sketch souhaite.
Utilisez les espaces blancs à votre avantage pour attirer les yeux errants sur certains éléments de la page. Pour expérimenter et découvrir ce qui fonctionne le mieux, essayez différentes méthodes de test A / B pour différentes valeurs d'espacement.
Voici quelques notes générales à extraire du site Web de Sketch:
- Le contraste ne fait pas toujours référence à la couleur. Il peut également faire référence à des éléments contrastés d'espace, de taille et de position par rapport à d'autres éléments de la page.
- L'espace vide peut être évident ou invisible selon le contexte.
- Les éléments environnants jouent un rôle important dans la visibilité naturelle des autres éléments.
- La symétrie crée la mémoire et l'harmonie, alors que l'asymétrie attire l'attention. Équilibrer les deux en conséquence.
Space Drives Attention
Vous trouverez un exemple légèrement différent sur la page d'accueil de Procreate, un outil de dessin et de peinture numérique pour iPad. En parcourant la page, vous remarquerez que la mise en page est sombre et comporte des éléments de page extrêmement surdimensionnés.
La conception montre comment attirer l'attention sur des éléments singuliers sur une très grande page. Les captures d'écran, les peintures de démonstration et les fonctionnalités occupent toutes leur propre section.
Un espace blanc sépare le texte et le contenu visuel. La conception est particulièrement remarquable par son utilisation des couleurs de texte pour distinguer les en-têtes (contraste plus élevé) du texte général de la page (contraste plus faible).
En scindant une page en sections, vous créez une hiérarchie de contenu naturelle. En divisant ensuite ces sections avec des styles uniques (arrière-plans plein écran, typographie surdimensionnée, captures d'écran des applications), les divisions deviennent encore plus apparentes.
Gardez à l'esprit que tous les sites Web ne peuvent pas bénéficier de grandes divisions de contenu - mais cela semble être une tendance très populaire parmi les concepteurs. Il a l'air fantastique lorsqu'il est exécuté correctement.
La disposition en alternance
En surface, alterner le contenu peut sembler gênant parce que vous forcez le regard du lecteur à sauter. Mais comme le contenu est si bien espacé, il est beaucoup plus facile de lire un motif Z que vous ne le pensiez.
Le motif oblige également les visiteurs à rester sur leurs gardes puisque la conception ne fournit pas d'informations à la cuillère. Bien entendu, ce modèle n’est possible que parce que l’espace blanc de bon goût trace la voie à suivre pour la numérisation.
En regardant la page de Wunderlist, on peut voir ce motif asymétrique émerger dans l’espace blanc. L'espacement asymétrique est soigneusement exécuté afin qu'il ait l'air intéressant sans être exaspérant.
Nous pouvons apprendre beaucoup des modèles de conception mis en évidence par l'utilisation de l'espacement par Wunderlist:
- L'asymétrie a sa raison d'être lorsque vous essayez d'attirer l'attention sur certaines zones de la page.
- L'asymétrie dans un motif répétitif devient une symétrie.
- Les motifs d'espace entre le texte ou les graphiques apparaîtront également comme un motif plus grand.
- Les espaces blancs devraient faciliter la navigation dans le contenu et le rendre plus prévisible.
Lectures complémentaires
Vous pouvez apprendre davantage de techniques de conception exploitables dans l'ebook gratuit Web Design Trends 2016. Le guide de 185 pages explique 10 bonnes pratiques de manière très détaillée. Vous trouverez 165 exemples analysés des plus grandes entreprises d'aujourd'hui.