L’équilibre visuel d’un site Web a un impact immédiat (et généralement instinctif) sur l’expérience de l’utilisateur. Une composition équilibrée donne une impression de justesse et les utilisateurs ont tendance à la percevoir immédiatement. L’utilisation de la symétrie et de l’asymétrie est la base d’un bon équilibre visuel.
Atteindre l’équilibre symétrique et asymétrique dans votre conception Web est assez simple en théorie, mais y parvenir à chaque fois demande de la pratique. Dans cet article, nous allons examiner les principes de la symétrie et de l’asymétrie dans la conception pour avoir une meilleure idée de la façon dont ils fonctionnent ensemble pour atteindre l’équilibre visuel.
C’est parti !
Qu’est-ce qu’une composition équilibrée ?
L’équilibre visuel procure un sentiment de bien-être aux personnes qui le voient. La différence entre l’équilibre visuel et le déséquilibre visuel est le sentiment de confort et de satisfaction par rapport à un sentiment d’aversion et d’inconfort. Lorsqu’un objet est bien équilibré visuellement, il prend immédiatement tout son sens. Il donne la sensation que rien n’est déplacé et que la composition est exactement comme elle doit être.
La symétrie et l’asymétrie sont deux techniques de conception que les designers utilisent pour atteindre l’équilibre visuel dans une composition. La symétrie et l’asymétrie sont des antonymes, donc l’équilibre symétrique et l’équilibre asymétrique sont l’opposé l’un de l’autre.
Examinons de plus près la définition de chaque terme.
Qu’est-ce que la symétrie
La symétrie est une règle mathématique visuelle qui stipule que si une ligne est tracée à travers le centre d’une image, les deux côtés seront très similaires, voire identiques. Cette ligne peut être tracée horizontalement, verticalement ou en diagonale, ce qui donne lieu à une symétrie horizontale, une symétrie verticale et une symétrie diagonale. Ces trois types de symétrie sont considérés comme des « symétries de réflexion », car c’est comme si l’image se reflétait elle-même.
En outre, il existe trois autres types de symétrie : radiale, translationnelle et de réflexion guidée. Vous pouvez utiliser n’importe lequel de ces quatre styles de symétrie pour obtenir une composition équilibrée.
Symétrie réfléchie
Le type de symétrie le plus courant est la symétrie de réflexion. L’idée est que chaque côté de la ligne de démarcation est presque identique à l’autre. Par exemple, une pomme coupée en deux ou un papillons aux ailes ouvertes.
Symétrie radiale
La symétrie radiale se répète autour d’une forme circulaire ou radiale. Par exemple, des mandalas et des badges circulaires.
Symétrie translationnelle
La symétrie translationnelle se produit lorsqu’une forme est répétée encore et encore dans un espace visuel. Comme certains tissus à motifs.
La symétrie réflexion guidée
La symétrie de réflexion guidée est similaire à la symétrie de réflexion mais glisse sur un axe. Par exemple, les empreintes de pas.
Qu’est-ce que l’asymétrie
L’asymétrie est le contraire de la symétrie. Visuellement, chaque côté de la composition est différent de l’autre. Contrairement à la symétrie, qui est une technique visuelle équilibrée dès le départ, l’asymétrie est plus difficile à équilibrer. La meilleure façon de comprendre comment fonctionne l’équilibre asymétrique est l’art de l’équilibrage des roches. Dans l’image ci-dessous, vous pouvez voir un groupe de pierres en équilibre. La composition n’est pas symétrique même si les pierres semblent parfaitement équilibrées. Même si les côtés ne sont pas égaux, la composition évoque toujours l’harmonie et l’équilibre visuel.
Étant donné que l’équilibre asymétrique est plus difficile à atteindre, il est également beaucoup plus agréable qu’un équilibre symétrique normal. C’est pourquoi il n’est pas surprenant que de nombreux sites Web et magazines utilisent une mise en page asymétrique pour créer une composition équilibrée.
Exemples d’équilibre symétrique dans la conception Web
Nous savons maintenant ce que sont la symétrie et l’asymétrie et comment ces techniques peuvent vous aider à atteindre un équilibre visuel. Transférons ces connaissances à la conception de sites Web et regardons quelques exemples pour inspirer vos propres créations.
Portfolio de l’artiste Max Shkret
Ce site web de portfolio de conception de Max Shkret présente une symétrie de réflexion d’une manière légèrement différente. La symétrie s’étend jusqu’aux bords. Le reste du site est symétrique, mais pas aussi parfait que la page de chargement.
Portfolio – Olivier Ouendeno
Ce site portfolio du designer Olivier Ouendeno est un excellent exemple de symétrie de réflexion guidée. Il est à la fois horizontal et vertical, réalisant un équilibre visuel unique qui ressemble presque à un chaos ordonné.
Exemples d’équilibre asymétrique dans la conception Web
Comme je l’ai mentionné plus haut, l’équilibre asymétrique n’est pas aussi facile à atteindre que l’équilibre symétrique. Néanmoins, lorsqu’un concepteur de sites Web parvient à un équilibre asymétrique, les résultats sont somptueux. Jetons un coup d’œil à quelques exemples d’équilibre asymétrique dans la conception de sites Web. Ils inspireront certainement votre esprit créatif.
Home Société Designer
Lorsque vous arrivez pour la première fois sur le site Web de Home Société , vous êtes accueilli par ce qui ressemble à une partie d’un magazine. Une image pleine hauteur sur la gauche encadre un menu vertical. À droite, les parties d’une phrase sont en caractères à empattement fin. Ce site Web est agréable à première vue, mais lorsque vous utilisez le défilement horizontal, il prend vie. L’ensemble du site présente un équilibre asymétrique impeccable.
Adjuvant capital
Le site Web d’ Adjuvant Capital utilise un équilibre asymétrique en diagonale qui est encore plus beau lorsque l’écran est plus petit. Le triangle à droite est une vidéo et il équilibre le bloc de texte en haut à gauche.
Modèles Divi avec équilibre symétrique et asymétrique
Qu’en pensez-vous ? Quelle technique est la meilleure pour un équilibre visuel, symétrique ou asymétrique ? Je pense que les deux sont assez étonnantes. Après avoir regardé quelques inspirations, vous devez avoir envie d’essayer vous-même ces techniques d’équilibre visuel. Heureusement, la bibliothèque du thème WordPress, Divi propose de nombreuses mises en page pour vous aider à démarrer.
Jetons-y un coup d’œil.
Crypto-monnaie – Équilibre symétrique
La mise en page Cryptocurrency Consulting a un bel équilibre symétrique réfléchissant. Le bouton blanc à droite ressort très bien sur le fond bleu car il force une asymétrie visuelle par rapport à la symétrie globale.
Okape Juice Shop – Équilibre symétrique
Une autre disposition magnifiquement symétrique de Divi est la disposition Okape Juice Shop . Trois bouteilles sont centrées sur l’écran pour créer la symétrie principale. Le reste de la mise en page maintient une subtile symétrie de réflexion de guidage.
Services chiropratiques – Équilibre asymétrique
La disposition Chiropratique a un bel équilibre asymétrique. Elle a une grande image sur la gauche et un bouton orange sur la droite qui s’équilibre avec l’ombre de la boîte d’image orange. Chaque section de la mise en page est configurée avec un équilibre asymétrique, mais lorsque vous faites défiler le tout, cela ressemble également à une symétrie de réflexion de guidage.
Visites guidées – Équilibre asymétrique
Cette disposition pour les visites guidées est le type d’équilibre asymétrique qui ressemble à un beau chaos. L’équilibre visuel est attrayant en raison des lignes droites des boîtes entrelacées avec les bords flous et saccadés des photos.
À vous de concevoir avec un équilibre visuel
Avec toute cette inspiration visuelle, c’est à votre tour d’appliquer la symétrie et l’asymétrie à vos créations. Rappelez-vous les règles de symétrie et d’asymétrie et comment une composition équilibrée peut être obtenue.
0 commentaires