Comment utiliser l'équilibre dans la conception Web
L'équilibre dans la conception de sites Web demande de la réflexion, des efforts et des compétences, mais cela en vaut absolument la peine. La grande chose à propos de l’équilibre, qui peut s’appliquer à la catégorie plus large de la conception dans son ensemble, est qu’elle empêche de créer un gâchis excessif et surchargé qui ne répond pas aux besoins de l’utilisateur. En d’autres termes, l’équilibre dans la conception de sites Web garantit que vous, en tant que concepteur, n’atteignez que la modération. Pas trop, mais pas trop. Pas trop bruyant, mais pas trop subtil. Il maintient votre conception entière en harmonie tout en atteignant tous les objectifs d'utilisabilité de vos clients. Maintenant, c'est une compétence à mettre définitivement dans la boîte à outils de votre concepteur! Dans cet article, nous examinerons comment intégrer un bon équilibre dans les sites Web de vos clients.
Équilibre symétrique
L'un des exemples les plus courants d'équilibre que vous rencontrez lorsque vous naviguez sur des sites Web est la symétrie, bien que vous ne le réalisiez peut-être pas, car elle est présentée de manière si transparente. La symétrie est naturellement agréable à regarder et crée un design esthétiquement bien organisé et harmonieux. L'équilibre symétrique est défini en plaçant les éléments de manière égale de chaque côté d'un axe central horizontal ou vertical. En d'autres termes, les deux côtés d'une ligne de plongée imaginaire au milieu de la page sont essentiellement des images en miroir l'une de l'autre. Bien que certains critiques puissent considérer que ce type d’équilibre est ennuyeux ou prévisible, il a néanmoins résisté à l’épreuve du temps et reste l’un des meilleurs moyens de montrer un équilibre dans la conception de sites Web.
Le site de Cisco a opté pour cette approche éprouvée et éprouvée du design. Notez comment le site est parfaitement équilibré sur son axe vertical. Si vous avez pris une ligne imaginaire et l'avez divisée au milieu de la page d'accueil de Cisco, vous remarquerez ce qui suit:
- Le même nombre d'éléments dans la barre de navigation (y compris l'icône de recherche) des deux côtés
- Le titre et le sous-titre sont également longs des deux côtés
- Le bouton d'appel à l'action est parfaitement centré
- Le même nombre d'éléments sous la rubrique "Tâches rapides" des deux côtés
Bien que le site ne soit peut-être pas le site le plus excitant, il n’est pas nécessaire de le faire depuis que l’entreprise vend des équipements réseau. De plus, le site est utilisable et fonctionnel, deux attributs que ses clients peuvent apprécier. Regardons deux autres exemples de symétrie:
IWC Schaffhausen , l’horloger suisse, dispose d’un site à l’équilibre horizontal et symétrique. Si nous divisons la page sur un axe central au centre, les deux côtés ont une symétrie.
Même chose pour le Site Web Beanstalk App . Avec un design simple et minimal, son axe central descend au milieu de la page d'accueil, ce qui laisse les deux moitiés de la page avec un équilibre horizontal symétrique.
Équilibre asymétrique
À l'opposé de la symétrie, l'équilibre asymétrique est également possible. Ne vous laissez pas berner par le fait que l'asymétrie signifie un manque d'équivalence entre les parties! Comme vous le verrez bientôt, l’équilibre asymétrique crée également un système de contrepoids dans la conception… mais pas du tout. L'asymétrie peut être représentée de différentes manières sur une page Web. Par exemple, une moitié de l'écran, verticalement ou horizontalement, pourrait présenter un élément plus intense tandis que l'autre moitié pourrait avoir des éléments plus subtils. Malgré cette inégalité, à la fois en force et en nombre, l’équilibre est créé par la juxtaposition des éléments contradictoires. De cette façon, l'asymétrie peut être vraiment belle, peut-être plus que la simple symétrie, car elle joue sur le concept de dissimilarité pour créer un équilibre. C'est un paradoxe de conception, mais qui fonctionne si bien sur n'importe quel site. L’équilibre asymétrique est donc plus intéressant et plus stimulant que la symétrie prévisible. Il évoque des thèmes de modernisme, d'énergie et d'émerveillement. Les concepteurs doivent toutefois noter que créer une asymétrie sur une page nécessite plus de travail que la symétrie régulière. Après tout, vous devez représenter des relations plus complexes entre des éléments de conception.
Honda nous donne un exemple limpide d'asymétrie dans la conception de sites Web. Sous le pli, sur sa page d’accueil, la société utilise un design basé sur des cartes, mais cela produit un aspect quelque peu désorganisé qui, bien que visuellement attrayant et coloré, crée un manque d’égalité de part et d’autre. D'une part, les cartes elles-mêmes sont toujours de différentes longueurs, horizontalement, et ne peuvent pas toujours être empilées dans une colonne ou une ligne uniforme. Cela crée une asymétrie majeure qui est très intéressante à regarder. C'est presque un petit labyrinthe sur la page d'accueil de la compagnie automobile! Il y a aussi d'autres exemples intéressants:
Typographisme est un cas parfait d'asymétrie dans la conception de sites Web. Son site comporte deux éléments déséquilibrés. Le logo TG et le tampon vert dans le coin supérieur droit créent une asymétrie.
Duplos l'asymétrie est plus forte. Son site présente une conception à éléments flottants qui ne s'alignent pas de manière cohérente avec l'autre moitié, que l'axe central soit vertical ou horizontal. Dans l'ensemble, il produit une apparence attirante qui est intéressante à prendre en compte.
Équilibre radial
L'équilibre radial est assez simple. Comme son nom l'indique, l'équilibre radial survient lorsque tous les éléments de conception d'une page émettent des points équidistants à partir d'un point central et unificateur. Donc, si vous divisez la page verticalement ou horizontalement le long d'un axe central, les éléments des deux côtés seront également éloignés du point central. Certains des exemples les plus fondamentaux de l’équilibre radial sont des choses comme les rayons du soleil provenant d’un point central ou d’un étang qui a des ondulations à sa surface. Ce qui rend cette forme d’équilibre plus spéciale, c’est que l’effet rayonnant va dans les deux sens: de même que l’attention s'éloigne du point central, elle y renvoie aussi le centre commun. De ce fait, garder un point focal est facile.
Le meilleur exemple d’équilibre radial - qui est assez rare sur les sites Web, en particulier les pages d’accueil - est Vlog . C'est la quintessence de l'équilibre radial, car tout irradie du point central du type blanc de "Vlog.it".
Toutes sortes d'équilibre
À l'heure actuelle, il devrait être assez évident que tous les types d'équilibre ont des liens communs. Il existe des facteurs uniformes qui apparaissent systématiquement dans toute conception présentant un équilibre attractif et intéressant. L'équilibre dans la conception Web est tout autour de vous. Il y a des chances que vous ayez négligé de l'apprécier sur tous les différents sites que vous avez parcourus au cours de votre vie. mais c'est uniquement parce que l'équilibre n'est pas vraiment la première chose à laquelle vous pensez lorsque vous naviguez sur un site. Néanmoins, l'équilibre est important pour la conception du site. Il ne fournit pas seulement des touches esthétiques intéressantes d'un point de vue visuel. Cela peut également aider l'utilisateur en rendant l'information visuelle sur un site plus facile à absorber, sans parler de l'amélioration de la navigation sur le site. Les concepteurs peuvent s'efforcer d'inclure un meilleur équilibre dans leur conception Web en accordant une attention particulière à l'harmonie, aux contrepoids et à l'équidistance. Le résultat final d'un bon équilibre rapporte des bénéfices incalculables à vos clients et à l'expérience utilisateur.