Layout Guide : étape par étape.
Comment définir un bon Layout ?
Le layout, c’est une association d’éléments de design tels que les couleurs, les formes, les espacements.
Regroupés ensemble , les éléments doivent transmettre le bon message à la bonne personne et si chaque designer doit connaître les règles, il doit aussi savoir les briser pour transmettre un message unique et se distinguer de la concurrence.
Présentation du système des grilles.
Les grilles vont être une base structurelle, la colonne vertébrale de votre projet, elles vont permettre d’organiser vos éléments de design tels que les textes, images, boutons, etc. de manière consistante.
Les grilles se composent de 3 éléments principaux:
Les collones.
Les gutters ou gouttières.
Les marges.
Qu’en est-il des grilles verticales?
On distingue deux systèmes : Hard et soft grids.
Les hard grids, grilles dures, alignent le contenu sur une grille verticale fixe, tandis que les soft grids, grilles souples, définissent l'espace entre les éléments de la page.
Pour savoir comment utiliser le système de grilles dans Figma , je vous recommande de regarder cette vidéo pour une page web et cette vidéo pour les smartphones.
Si l’utilisation d’une grille dure pour des blocs de textes est efficace, l’utilisation de cette-derniere ne peut pas être appliquée avec tous les éléments d’un écran tels que les boutons, champs de recherches, etc.
Dans ce cas, il est préférable d’utiliser une grille souple comme le suggère cette vidéo.
Organiser la mise en page avec un système de grille est indispensable. De cette manière, lorsque vous choisirez de ne pas respecter les règles, cela aura l’air intentionnel.
Soyez créatifs!
Les autres éléments de design.
La mise en page ne consite pas uniquement à aligner ses composants sur une grille mais doit aussi transmettre un message.
C’est à vous en tant que designer de choisir comment appliquer les autres éléments de design tels que les couleurs, les espaces, les formes et la disposition de vos éléments. Pour le dernier point, je vous recommande de voir cette vidéo.
La suite Fibonacci.
Si vous souhaitez sortir des systèmes de grilles à 8pt, dans cette vidéo l’auteur présente un autre système basé sur la suite Fibonacci, une série de nombres dans lequel chaque nombre est la somme des deux précédents.
Ce système peut s’appliquer aux espacements, à la taille de la police mais aussi au dégradés de couleurs.