Une grille est la base de presque n'importe quelle conception de site Web. Ces lignes invisibles aident à créer un espace rythmique et un flux visuel, de sorte que chaque projet est porteur d'organisation et d'harmonie.
Mais vous n'êtes pas obligé de vous en tenir à la grille 100% du temps. Vous pouvez même casser la grille de temps en temps sans faire de gâchis total. Voici comment procéder, tout en conservant un site Web agréable à utiliser!
Comprendre les systèmes de grille
Avant de pouvoir casser la grille, vous devez comprendre pourquoi elle existe. Quel que soit le type de système que vous utilisez, la grille est un élément fondamental du processus de conception. Les grilles vous aident à déterminer où placer les éléments, comment ils peuvent se briser ou s'empiler sur différentes tailles d'écran et permettent généralement de garder les choses organisées.
La grille est une base invisible qui vous aide à concevoir quelque chose qui se sent organisé, propre et facile à suivre pour les utilisateurs.
Les concepteurs utilisent depuis longtemps les grilles. Revenez en arrière et regardez de vieux journaux et livres - le texte est aligné en colonnes. Même les vieux écrits sur les tablettes incluent cette structure harmonieuse.
Les grilles peuvent effectuer les tâches suivantes:
- Gardez le contenu organisé et fluide. Les utilisateurs sont habitués aux éléments alignés horizontalement et verticalement et qui suivent cette approche de gauche à droite (et arrière) en lecture.
- Rendez le travail de conception plus efficace, car vous verrez simplement où placer les éléments et l'espace entre eux.
- Aidez un site Web à paraître cohérent d'une page à l'autre.
- Créez juste le bon espace entre les éléments pour que la conception reste épurée.
- L'équilibre est moins difficile. Suivez la grille et les éléments vont presque se mettre en place à mesure que vous redimensionnez les éléments dans les paramètres définis.
Alors, pourquoi voudriez-vous même penser à casser la grille?
Briser la grille peut ajouter une emphase supplémentaire à un élément spécifique. C'est l'une de ces règles de conception qui, lorsqu'elles sont économiquement modérées, peuvent améliorer le sens d'un projet. Lorsque vous cassez la grille, il est important de suivre de nombreuses autres règles. de conception. (Utilisez juste cette astuce pour en tirer le meilleur parti.)
Créer des calques
La superposition d'éléments vous permet de quitter la grille tout en conservant l'unité dans la conception. Parce que les éléments se touchent et se croisent, ils se sentent comme faisant partie de la même unité.
Cette technique est devenue assez populaire récemment, grâce aux influences de Material Design et au fait que de plus en plus de designers prennent des risques avec des éléments à l'écran. Cela peut être difficile cependant; les éléments qui se chevauchent d'une manière ou d'une autre doivent rester distinguables pour fonctionner efficacement.
Cmmnty fait cela avec une ligne large et du texte, créant une sorte de balance offset utilisant la typographie et les espaces. Vous pouvez presque voir plusieurs minuscules grilles dans la conception, telles que la navigation et l'alignement des éléments de texte à gauche, mais pas de motif cohérent. Cette rupture de la grille est parfaitement équilibrée et facile à comprendre pour l'utilisateur.
Design Espace blanc utile
L'une des raisons pour sortir du tracé d'une grille est de créer davantage d'espace blanc en mettant davantage l'accent sur les bons endroits. Cela peut être pour mettre en évidence des éléments de texte ou de la marque ou une image stellaire.
Une chose qui est souvent confondue avec le fait de sortir de la grille est un alignement impair. Bien que l'alignement continu puisse faire partie intégrante de l'utilisation d'un système de grille - horizontalement ou verticalement -, les éléments peuvent être alignés tout en s'éloignant de la grille.
Lorsque vous cassez la grille pour ajouter des espaces, envisagez de tout aligner. Cela aidera à créer un groupe d'éléments qui attire le regard, tel que le texte et l'appel à l'action de Surfers Against Sewage, avec suffisamment d'espace pour que l'élément se sente plus important que les autres. L'exemple ci-dessus fonctionne à merveille car l'espace permet d'attirer les utilisateurs vers l'appel à l'action.
Mettre des éléments dans un conteneur
Lorsque les éléments sont contenus d'une manière ou d'une autre, ils se sentent ensemble, même lorsque la grille est cassée. Cela peut inclure l'utilisation d'un arrière-plan coloré, l'insertion d'éléments dans des blocs ou la superposition de texte sur une photo ou une vidéo, comme dans l'exemple ci-dessus.
La bonne chose à propos de tout élément conteneur est qu’il indique aux utilisateurs que tout ce qu’ils contiennent est lié d’une manière ou d’une autre. Le lien des éléments.
Sortir de la grille dans un modèle de style conteneur est un moyen visuellement intéressant de casser ce qui finit souvent par ressembler à une carte à jouer. De nombreuses conceptions de type conteneur se terminent par une conception parfaitement symétrique; sortir de la grille est un moyen infaillible d'ajouter de l'étincelle à la conception et de briser la monotonie.
Jouer avec des éléments spécifiques
La meilleure façon de sortir de la grille est avec un détail simple. Si toute la conception manque d'un système de grille, vous allez probablement vous retrouver avec un désordre. (Et c'est précisément ce que nous essayons d'éviter.)
Commencez avec un élément de fond ou d'accent pour attirer l'attention. Des swashes sympas ou des formes intéressantes sont un bon point de départ. Pensez également à ajouter une couleur audacieuse pour mettre en évidence l'élément.
The Land of Nod le fait efficacement avec des lignes épaisses en angle pour indiquer aux utilisateurs où se trouvent les meilleures ventes sur le site Web. Ces lignes sont parfois contenues dans des images et parfois transforment des espaces blancs en images. La variation est visuellement intéressante et garantit que les ruptures de réseau occasionnelles sont suffisamment inhabituelles pour attirer l’attention, mais correspondent suffisamment au reste de la conception pour donner l’impression d’appartenir.
Le déplacer
Utilisez mouvement et mouvement pour retirer des éléments de la grille, ou peut-être même simplement le décaler un peu. De simples animations ou des éléments qui fonctionnent de concert avec une vidéo peuvent donner l’impression d’une grille moins semblable à celle d’une grille.
Ce concept fonctionne vraiment bien avec des conceptions qui se concentrent sur un seul élément.
Ci-dessus, l'accent est mis sur le graphique des dépenses de voyage. Il ne change pas d'emplacement tout au long de la conception du site. Mais tout le reste bouge, de la vidéo sur l'écran d'accueil aux informations sur l'application effectuant un zoom avant à l'aide du défilement de la parallaxe cliquable.Cet élément rassemble le reste d'un design hors réseau et hors réseau avec une fantaisie et un flair modernes.
Créer une illusion de briser la grille
Vous pouvez casser la grille sans la casser du tout.
Utilisez une petite grille verticale pour créer des combinaisons intéressantes de formes et d’alignements tout en restant sur la grille (même si elle ne lui ressemble pas).
La bonne chose à propos de ne pas casser la grille pour créer ce type de conception est que vous conservez tous les avantages d'une conception basée sur une grille tout en faisant quelque chose de légèrement différent. Les meilleures options incluent souvent des conceptions qui fonctionnent en dehors de multiples de la grille - trois, cinq, sept, etc. - afin que les formes ne soient jamais parfaitement alignées, mais qu'elles se ressemblent toujours.
Marche Notre Dame, ci-dessus, utilise ce concept pour présenter des images de son emplacement. Le motif de grille hors grille est utilisé verticalement et horizontalement pour créer un collage avec juste le bon espace blanc. C’est un bon moyen de sortir des anciens modèles de maçonnerie pour des photos qui semblent être pratiquement partout.
Conclusion
Casser la grille n'est pas toujours facile à faire. Plusieurs fois, il peut finir par devenir tout à fait le désordre.
Les meilleures utilisations sont appliquées à une page ou à un ensemble d’éléments afin d’empêcher la conception de déraper. Cela est également utile lorsque vous réfléchissez à la réactivité et à la manière de traiter les éléments qui pourraient ne pas s’adapter aux écrans plus petits, car vous n’auriez pas à traiter autant d’étranges bizarreries.
Rupture de la grille - quand bien fait - peut être une façon amusante et attrayante d'essayer quelque chose de différent.