Que pensez-vous du design asymétrique? Cette simple question peut parfois susciter beaucoup de débats parmi les concepteurs. La conception asymétrique peut être l’une des techniques les plus compliquées à utiliser, mais si elle est bien réalisée, elle permet d’obtenir des conceptions attrayantes.
Bien que la définition de l'asymétrie soit l'absence de symétrie ou l'égalité entre les deux moitiés; ce n'est pas un manque d'équilibre, comme certains le supposent à tort. Les concepteurs peuvent utiliser l’asymétrie pour créer un équilibre et une harmonie, même si les deux côtés de la conception ne se reflètent pas. Voici comment commencer.
Pourquoi l'asymétrie?
L'asymétrie peut être l'un des concepts les plus percutants de votre boîte à outils de conception. C'est une technique qui attire l'attention, qui est intéressante et qui fait réfléchir.
Cela peut être délicat à utiliser, ce qui explique pourquoi certains concepteurs s'éloignent des projets totalement asymétriques. Mais tu n'es pas obligé. L'utilisation de l'asymétrie est quelque chose que chaque concepteur peut faire; il faut juste planifier.
Le meilleur endroit pour commencer est de mélanger et d'associer des concepts symétriques et asymétriques dans un projet de conception. Si vous divisez la conception en sections plus petites, il y aura des pièces contenant différents types d'équilibrage. (Pensez aux panneaux des sites de défilement parallaxe ou à la conception d'une image dans le canevas.)
Réfléchissez à la raison pour laquelle vous utilisez également l'asymétrie. En sachant ce que vous voulez accomplir avec les éléments visuels, vous pourrez déterminer comment utiliser au mieux les techniques pour le réaliser. L'asymétrie est active et attire l'attention; cela peut être lourd mais naturel. Et une fois que vous avez quelque chose sur la toile, faites confiance à votre instinct. Est-ce que ça a l'air correct ou est-ce que ça fait?
Atteindre l'équilibre est cet entre-deux magique. Une bonne conception asymétrique comprend un équilibre de sorte qu'aucune partie du projet ne soit trop lourde pour le reste. Vous pouvez créer un équilibre en décalant les éléments avec de l'espace, en créant une emphase avec le mouvement, en comprenant le poids, en ajoutant le focus en couleur et en utilisant une grille pour l'alignement et l'organisation.
Utiliser l'espace
L'un des endroits où l'asymétrie commence vraiment à fleurir est la tendance en matière de design minimalisme. Avec les concepteurs utilisant autant d’espace, il est facile d’équilibrer un objet ou une image simple sur un fond blanc ou noir plus large.
L'équilibre entre l'espace blanc ou négatif et les éléments de la conception doit créer un contraste. Cela dirigera le mouvement de l'œil sur le dessin.
Exemple: Ike Kligerman Barkley utilise un équilibre dramatique pour attirer les utilisateurs. Le tirant directionnel de l'image situé dans le coin inférieur de l'écran et le nom de navigation situé dans le coin opposé tirent l'œil entre les éléments, vous empêchant presque de regarder. L'image vous donne une idée des raisons pour lesquelles vous avez trouvé le site Web et le cadre minimal encourage à cliquer sur les liens.
Souligner le mouvement
Pensez à un pneu qui roule sur une colline. Vous pouvez immédiatement sentir la motion. La même chose se produit lorsque vous concevez ce mouvement de manière asymétrique.
- L'œil se déplace naturellement de la partie la plus grande et la plus lourde de l'écran à la partie la plus claire.
- L'œil suivra des signaux de direction tels qu'une flèche ou une forme qui semble pointer dans une direction particulière.
- L'œil suivra le trajet des yeux dans l'image à l'écran, de sorte qu'un utilisateur regarde dans la même direction et la personne dans la conception.
- Le flux directionnel s'inclinera de gauche à droite, à moins d'une forte traction dans une autre direction.
Exemple: Leen Heyne Fine Jewelry utilise le mouvement pour attirer l'attention sur le produit présenté. Les formes géométriques dirigent littéralement l'œil dans la bonne direction, tout en donnant l'impression que le bracelet (ou la bague) pourrait simplement rouler naturellement sur la toile. Cette influence directionnelle fait aussi autre chose - elle pointe l'utilisation vers les flèches de navigation pour passer à la page suivante.
Ajouter le focus avec la couleur
Les motifs de couleurs asymétriques sont généralement riches en contrastes et combinaisons de couleurs. Pensez à des teintes lumineuses contre une photo en noir ou ton sur laquelle est imprimée une typographie blanche audacieuse. Un contraste de couleur élevé sera la focalisation et le poids visuel sur des parties spécifiques de la conception.
Des combinaisons de couleurs asymétriques peuvent être créées à l'aide de la roue chromatique. Optez pour des combinaisons de couleurs et des combinaisons qui ne respectent pas les règles de couleur traditionnelles pour un sentiment d'asymétrie. Pensez aux couleurs qui sont rarement utilisées pour l’impact. Utilisez la couleur pour mettre en évidence et souligner les autres éléments du contour asymétrique. La couleur fonctionne très bien avec des éléments tels que des formes géométriques, la typographie ou même à l’arrière-plan et sert de point focal secondaire pour atteindre l’équilibre.
Exemple: HLK Agency utilise la couleur pour prendre un dessin presque symétrique et vous faire réfléchir à nouveau. Le soulignement et le bouton bleus créent une mise au point simple avec une asymétrie qui équilibre le subtil menu de hamburgers et les icônes de la marque dans les coins supérieurs.
N'oubliez pas la grille
Bien que vous n'utilisiez pas de grille pour créer des images miroir, elles constituent toujours un élément essentiel du processus de conception. L'utilisation d'une grille pour créer une asymétrie vous aidera à atteindre l'équilibre et l'organisation.
Considérez chaque élément de la grille comme vous le feriez avec tout autre projet. Les choses se reposent-elles d'une certaine manière horizontalement et verticalement? Y a-t-il un poids compensateur de chaque côté de la toile - de gauche à droite et de haut en bas?
Considérez la grille comme une échelle: pour chaque élément ajouté d’un côté, il faut que quelque chose de l’autre côté le compense. Pour créer une asymétrie immédiate, considérons une grille de colonnes avec un nombre impair de colonnes; d'un côté de la grille, créez des éléments égaux à la largeur d'une colonne, de l'autre, doublez-la.
Exemple: BrightByte Studio utilise une grille de création de colonnes qui maintient les éléments alignés et organisés en un mélange d'éléments symétriques et asymétriques. (Mais le premier que vous voyez est probablement le texte aligné à gauche au milieu de l'écran. Cette utilisation d'une grille crée un équilibre inné entre les éléments.Notez comment la navigation en bas de page et les liens en haut de page s'alignent, ainsi que l'espace occupé par le texte principal et les éléments de navigation.
Créer un poids
L'asymétrie est enracinée dans l'idée que quelque chose est si lourd? que vous y serez attiré en premier. Déterminez quelle partie de votre image aura ce poids visuel. Ce peut être une image ou une typographie ou même des espaces.
Équilibrez l'élément lourd avec le contraste - un élément plus léger, quelque chose qui attire l'attention des utilisateurs différemment. Le poids fonctionne mieux lorsqu'il est combiné aux autres techniques ci-dessus, de sorte que l'élément pondéré ne domine pas le dessin et ne vous emporte pas.
Exemple: Cranes of Cambridge utilise une photo attrayante comme "poids". de la conception. Il est équilibré par deux éléments - un que vous pourriez ne pas remarquer au premier abord. Le texte et le logo plus légers sont significativement? Plus légers? que les personnes dans l'image, ce qui vous fait regarder des personnes au texte (en suivant également le mouvement implicite de leurs yeux). Il est également compensé par une navigation en colonnes qui vous aide à vous déplacer à travers l'écran.
Conclusion
L'asymétrie peut être une technique de conception belle et harmonieuse. Bien que les tendances en matière de conception se soient récemment concentrées sur beaucoup de symétrie, il est probable que l'on reviendra vers une partie de cette «déséquilibre». conception équilibrée. Il est visuellement intriguant et aide les utilisateurs directs à travers une conception avec subtilité.
L'asymétrie a également un impact et fonctionne particulièrement bien en tant que concept utilisé avec symétrie dans le cadre d'un projet complet. Expérimentez l'asymétrie et tombez sous le charme de cette technique de conception dynamique.