Équilibre asymétrique dans la conception Web
Quand j'ai d'abord couvert l'idée de motifs de conception symétriques Ici, sur Webdesigner Depot, je n'avais aucune intention de creuser la notion de conception asymétrique.
Cependant, plus j'y réfléchissais, plus je me sentais obligé de couvrir le sujet pour contraster certaines des idées qui tournaient autour de modèles de conception symétriques.
Dans la conception asymétrique, nous trouvons des conceptions contenant des éléments qui ne créent pas d'image miroir. Le plus souvent, ces conceptions asymétriques sont en fait équilibrées, mais pas à travers des moitiés parfaitement similaires.
Ce type de conception est en réalité beaucoup plus facile à trouver, car la plupart des contenus ne se prêtent pas à une symétrie parfaite.
Considérons une variété de sites qui mettent cette approche de conception au travail et découvrez peut-être des idées qui peuvent avoir un impact sur votre propre travail de conception.
Introduction à l'utilisation de l'asymétrie
Bully Entertainment
En guise d'introduction à la notion de conception asymétrique, cette conception dramatique constitue un point de départ plutôt intéressant. Bien qu'il n'y ait pas vraiment de raison pour que ce design ne puisse pas être reconfiguré pour produire une symétrie parfaite, cela ne fonctionnerait pas aussi bien. Les grandes conceptions richement illustrées compensent magnifiquement le texte de la page d'accueil. Leur taille leur permet d'être extrêmement visibles et constituent le principal moteur visuel de la conception. Cet équilibre naturel entre un seul gros élément et une alternative plus dense est une approche très courante.
Jorge Rigabert
Cette mise en page présente une mise en page Web assez standard. Une petite colonne latérale contenant la navigation par clé, associée à une colonne beaucoup plus grande pour le contenu du site. C'est peut-être l'une des rares mises en page standard utilisées quotidiennement par les concepteurs. Je crois qu'une grande partie du processus de conception dans ce cas se produit de manière semi-automatique. Considérez la barre latérale dans ce cas qui équilibre de manière asymétrique la colonne de contenu. La barre latérale a une couleur plus sombre, ce qui lui permet de compenser le contenu plus léger. Sans l'arrière-plan plus sombre, la barre latérale serait probablement perdue et ne se démarquerait pas aussi bien.
Images pour équilibrer le texte
Une autre approche assez classique de la conception Web qui devient un élément de conception asymétrique consiste à associer du texte à des images. Comme vous le verrez dans les exemples ci-dessous, chacun a une grande image. Cette image est appariée d'une manière ou d'une autre avec un bloc de texte. Cette combinaison est extrêmement commune.
L'astuce est assez évidente, assurez-vous simplement que les deux se complètent d'une certaine manière. Étant donné que ces deux éléments créent généralement une boucle pour les yeux, il est important qu'ils travaillent ensemble. L'approche la plus évidente consiste à faire en sorte que l'image illustre ou montre littéralement de quoi parle le texte. Une autre tactique courante consiste à faire en sorte que l'image étende l'idée présentée dans le texte.
Voici quelques exemples à considérer.
Gâteau Gâteau Doux
Cette conception est certainement très équilibrée, mais elle utilise plusieurs éléments asymétriques pour y parvenir. Notez la grande image d'un gâteau combiné avec le texte. Les images sont assez évidentes, mais fondamentalement importantes. Dans ce cas, le gâteau nous informe non seulement qu'il s'agit d'une pâtisserie, mais quel style particulier ils pourraient offrir. Combinez cela avec le texte de clarification qui lui est associé et vous avez un argument de vente très clair. Cela ne veut même pas mentionner le design incroyablement savoureux de ce site.
Plus de soude
Cet exemple utilise également des éléments de conception asymétriques basés sur une grande image combinée à un bloc de texte. Dans ce cas, la connexion n'est pas aussi claire. Il n'y a pas d'élément de vente évident impliqué. Au lieu de cela, l'image devient plus décorative et crée un sentiment général de style pour le site. À mon avis, il est légèrement moins fonctionnel, mais il est vraiment difficile de dire sans savoir exactement quelle est l’efficacité du site. Il semblerait qu'un visuel comme celui-ci vise à vous inciter à creuser un peu plus pour voir de quoi il s'agit. Une sorte de teaser, si vous voulez.
Conception Web Adaptative
Comme vous l'avez probablement déjà compris, ce motif est à peu près aussi commun que la couleur bleue. J'oserais spéculer que presque tous les sites finissent par mettre en place un outil visuel comme celui-ci. Je pense que cette nature de lieu commun en fait un sujet qui mérite d'être discuté. Souvent, je trouve le plus d'inspiration et de nouvelles idées à partir de reconsidérer des choses que je fais sans réfléchir.
Ce site simple fait la promotion d'un livre. Et bien sûr, l’élément principal en atterrissant est une grande image du livre. Combinez cela avec le gros bloc de texte et vous avez une zone bien équilibrée qui contient tous les éléments critiques. Plus important encore, il est terminé avec un appel à l’action attrayant. La continuité de cette zone est simple et précise. Les yeux le traversent facilement et consomment les informations critiques. Ce n'est pas déroutant, compliqué, astucieux ou délicat. L'approche est simple et claire.
Éléments de premier plan et d'arrière-plan
Une nouvelle approche de la conception asymétrique consiste à utiliser des éléments d'arrière-plan qui équilibrent de manière asymétrique ceux de premier plan. Ce type d’approche crée une dynamique intéressante dans laquelle l’arrière-plan joue un rôle plus fonctionnel dans le contenu, et pourtant, il fait toujours partie du contexte du site. Le plus souvent, cela se fait par de simples chevauchements qui créent l’illusion de la profondeur. Voici quelques exemples à considérer.
Peter McLeavey Gallery
Les sites Web de cette galerie sont une démonstration parfaite de cette idée. L'élément d'arrière-plan remplit plusieurs rôles. Tout d'abord, au point de cette section, il crée une balance asymétrique avec le grand cercle gris au premier plan. Cette combinaison visuelle crée deux zones qui font rebondir les yeux. Ceci, à mon avis, est une bonne chose.
L'élément à gauche contient la marque principale et les liens vers le contenu du site, tandis que l'élément d'arrière-plan vous informe du contexte du site. Vous êtes en train de regarder un site de la galerie, et cela devient évident en quelques secondes après l’atterrissage sur le site. J'aime le fait qu'un élément aussi informatif que l'arrière-plan puisse également jouer un rôle majeur dans la conception et le style général du site. Surtout quand il résonne si parfaitement avec le contexte du produit que propose le site. Une approche si simple, mais très efficace.
Aleksandar Grkinic
C'est simple À propos de moi La page embrasse également cette idée simple où un élément d'arrière-plan équilibre un premier plan de manière asymétrique. Dans ce cas, cependant, l'arrière-plan n'est pas tout à fait clair. Et c'est ce que j'aime vraiment à ce sujet. L'illusion de la profondeur est totalement présente, et sans aucune sorte de chevauchement, il est en fait difficile de déterminer le contexte réel. Je suppose que nous pourrions soutenir que la personne qui saute n'est pas du tout en arrière-plan. Quoi qu'il en soit, l'équilibre asymétrique est clair. Et sans la belle combinaison de différents éléments, la page n'existerait pas. Le design est, à bien des égards, uniquement basé sur le concept d'équilibre asymétrique. Souvent, il semble que des conceptions extrêmement simples peuvent sembler extraordinaires avec de beaux contrastes comme celui-ci.
Robert Dabi
Dans ce cas, l'arrière-plan joue un rôle intéressant dans la conception, mais ne produit pas les éléments asymétriques que nous avons vus jusqu'ici. À mon avis, le grand visuel est clairement un élément de premier plan du dessin. Ce que j'adore cependant, c'est la manière dont cette ligne est brouillée avec quelque chose d'aussi simple que l'ombre sous l'image. Cela le fusionne efficacement avec le fond et crée une belle dynamique. De toute évidence, la grande image est asymétriquement équilibrée avec la copie à côté. Parcourez les pages du site et vous découvrirez agréablement que l’arrière-plan change et fusionne avec les éléments visuels de manière très intéressante. Un design époustouflant qui se sent frais, propre et super lisse. Cela me semble une sacrée bonne présentation pour un site de portfolio.
Dix autres dessins
Ci-dessous, j'ai fourni dix conceptions supplémentaires qui utilisent des éléments asymétriques. Comme je l’ai déjà mentionné, je pourrais placer beaucoup de sites Web dans cette catégorie. Ainsi, aux fins de cet article, j'ai soigneusement sélectionné des modèles qui, selon moi, utilisent cette approche de manière légèrement atypique et créative. Considérez chaque modèle à la lumière de ce sujet et j'espère que vous allez acquérir de nouvelles idées pour inspirer votre prochain design.
Greenluv
Andersson Wise
Prévoir
13 épouses
Institution Raffles
Urban Svensson
Carrousel
Purlize
Bus à la brasserie
Humaan
Conclusion
L'équilibre est un élément fondamental du processus de conception et l'utilisation d'éléments asymétriques est également fondamentale. J'adore toujours revenir aux bases du design, car je constate que je le comprends toujours d'une manière nouvelle qui a un impact sur le travail que je fais. Il existe d'innombrables façons d'aborder les choses et briser nos modèles peut souvent mener à de nouvelles conceptions qui rajeunissent notre passion pour nos emplois.
Quels sont vos designs de sites Web asymétriques préférés? Qui fait quelque chose de différent avec l'asymétrie? Faites le nous savoir dans les commentaires!