Tirer le meilleur parti de l’équilibre symétrique et asymétrique dans votre conception Web

Architecture symétrique

8 Nov, 2021

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.

Réflexion-Symétrie

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-radiale

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.

Symétrie-Translationnelle

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.

Guide-Réflexion-Symétrie

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.

Asymétrie

É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.

max-shrekt

PortfolioOlivier 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é.

olivier-ouendeno-site-web-asymétrique

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.

Accueil-Societe-Screenshot-Asymétrique

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

site-responsable-adjuvant-capital

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.

crypto-monnaie-Divi-symmetry-layout-

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.

okape-balance-symetrique

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.

asymétrique-chiropratique

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.

visites-touristiques-asymétrie

À 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.

Plus d’articles

Les nouveaux arrière-plans Divi sont arrivés !
Les nouveaux arrière-plans Divi sont arrivés !

Créez de superbes arrière-plans en combinant des couleurs, des dégradés, des images, des masques et des motifs ! Aujourd’hui, nous sommes ravis de vous présenter les masques d’arrière-plan et les motifs d’arrière-plan pour Divi, deux nouveaux paramètres de conception...

lire plus
Comment rendre vos sites Web conformes au RGPD
Comment rendre vos sites Web conformes au RGPD

De nombreux changements sont survenus sur WordPress ces dernières années, et pas des moindres : le règlement général sur la protection des données (RGPD) que l'Union européenne a mis en place le 25 mai 2018.  Le RGPD dit que les utilisateurs doivent avoir un contrôle...

lire plus

Laisser un commentaire

0 commentaires
Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.