1) Général
La grille est la structure invisible du Design System. Elle garantit l’harmonie des échelles, le placement des éléments, le rythme visuel et typographique.
L’ensemble de la flotte informatique étant uniforme, le nombre de résolutions à supporter est limité : 19201080 px sur plus de 80% des postes, 16801050 px sur les postes plus anciens.
2) Colonnes
a) Les colonnes mesurent 96 px de large.
b) La grille est composée de 12 colonnes.
3) Gouttières
a) Les gouttières mesurent 16 px de large.
4) Adaptative, responsive
L’affichage étant constant en dimension pour les utilisateurs, les notions d’adaptive ou responsive design ne sont pas traitées.
5) Lignes de force
Issu des règles de composition de la peinture occidentale, la ligne de force est une ligne invisible facilitant la lecture. Dans le domaine de la mise en page, située au même endroit, elle sert généralement à marquer le début du contenu, dans un livre ou sur un site. Elle sera définie sur l’ensemble d’un produit, mais pourra légèrement varier entre les produits selon les besoins.
6) Zones d’écran
Dans une interface, les utilisateurs s’attendent à retrouver certains types de contenus à certains endroits, c’est le principe de familiarité présenté par Jakob Nielsen. Il est important que les principes de navigation soient cohérent entre les produits, mais aussi avec les principes de navigation acquis du web: menus principaux, secondaires, options, compte, affichage du contenu.
