Lors de votre arrivée sur un projet en tant que designer, vous avez dû entendre le terme grid 8 ou grille de 8 en français. Non, ce n’est pas le cas ? Mince, nous allons remédier tout de suite à ça. Et surtout, vous serez l’initiateur de cette bonne pratique sur le produit digital que vous êtes en train de créer au sein de votre équipe projet.
Jusqu’ici, vous faisiez du design sans utiliser la grille de 8
Vous utilisiez peut-être des systèmes de conceptions comme Bootstrap ou Fondation pour lancer vos projets web. Ces librairies ne sont pas très cohérentes en terme de design. Le mieux reste de partir from scratch en démarrant un vrai design system sur la base du grid 8.
Si vous faisiez encore partie des designers qui mettent un espace de 5 ou 10 pixels entre deux éléments. J’ai une mauvaise nouvelle pour vous, il va falloir oublier ces nombres. Mais j’ai une bonne nouvelle, il faut juste en retenir un seul chiffre. Il s’agit du 8.
Pourquoi un design system sur la base du grid 8 ?
Un design system sur la base du grid 8 va vous permettre d’avoir un produit au design d’une cohérence harmonieuse entre les différents éléments et pages. Cela permet de diminuer une dette graphique qui dégrader la conception globale d’un projet. Et va réduire les coûts de temps de production en design. Parce que c’est votre fichier de design system qui permettra aux autres designers d’avoir les éléments ou pages déjà bien templates. Ils pourront aller plus vite.
La base du grid 8 signifie que vous devez utiliser des espacements et éléments de 8 pixels partout. Hauteur, largeur, marge… bref partout.
N’oublions pas le principale. Pourquoi la base du grid 8 ?
Parce qu’en 2007, nous avons crée le premier smartphone et que depuis nous sommes tous mobile-first. Aujourd’hui, la densité des tailles d’écran une bonne variété de dimensions différentes. Malgré cela un point commun les réunit tous, le grid 8.
La majorité des tailles d’écrans populaires sont divisibles par 8, ce qui permet un ajustement facile. La mise à l’échelle par des éléments et des espacements de 8 pixels offre une bonne qualité de votre produit digital sur la majorité des tailles de nos écrans de téléphone.
Testons la grid de 5px (éléments et espacement) et la grid de 8 px ci-dessous. Le test visuel est marquant la grid de 8 est bien adapté à tous les éléments sur l’écran. De même pour les exports en 1,5x.
Grid 5
1x
1,5x
Grid 8
1x
1,5x
La valeur ajoutée de la grille de 8
Les designers assurent une qualité du produit. Ainsi, les développeurs sont livrés avec des maquettes aux bonnes spécifications. Les utilisateurs ont accès à des applications et sites internet bien adaptés à leurs appareils.
