La grille des 8pt

Quel est le problème ? 

Je suis arrivé jusqu’ici sans utiliser le système 8 points.

J’ai utilisé des systèmes de conception comme Bootstrap ou Foundation pour relancer des projets Web.

Ce n’est que récemment que j’ai réalisé que des composants tels que les boutons peuvent être magnifiquement disposés individuellement, mais dégrader la conception globale lorsqu’ils sont définis en une plus grande soupe d’éléments et de contenu. En effet, il est difficile de créer de manière cohérente une composition esthétique sur la page globale. Je peux utiliser mon œil de design pour pousser quelques éléments ici ou là, mais je ne peux pas compter sur une équipe de designers et de développeurs pour partager ma même vision. Sans un système pour définir les relations d’espacement de mes éléments, il est difficile de créer de la cohérence.

Dans cette comparaison, vous pouvez voir un système de grille de 8 points alignant verticalement les éléments d’un formulaire par rapport à un système de conception populaire qui utilise des nombres arbitraires pour espacer et dimensionner les éléments.

Pourquoi mon interface doit-elle être cohérente ?

Si vous voulez avoir une apparence professionnelle et digne de confiance, il le devrait. Si vous avez déjà effectué des achats en ligne, vous avez ressenti l’hésitation lorsque vous cliquez sur acheter et que le formulaire d’inscription par carte de crédit est différent du reste du site. Il est important de garder une cohérence tout au long du parcours utilisateurs afin qu’il ne se sent pas perdu. 

Pourquoi l’adoption de Bootstrap ou d’un système similaire ne suffit-elle pas?

Bootstrap est une bibliothèque de composants avisés qui permet aux concepteurs / développeurs de se concentrer sur le contenu et l’expérience utilisateur. Il a amélioré la qualité d’innombrables sites Web sur le Web. Mais ne pas avoir une unité de mesure cohérente peut entraîner des incohérences de mise en page entre les pages, en particulier sur les projets avec deux concepteurs ou plus.

En effet, si plusieurs équipes travaillent sur un même design, il est fort probable que des différences apparaissent : au niveau des espaces, des radius, des tailles de titres etc…

Personne n’a tort ou raison. Ils ont des hauteurs et des rembourrages différents, mais sans système en place pour expliquer clairement le raisonnement derrière une règle de style, pourquoi devriez-vous la suivre?

Le système de grille 8 points. Utilisez des espaces de 8 pixels pour dimensionner et espacer les éléments sur une page. Pour moi, cela signifie que toute hauteur ou largeur définie, marge ou remplissage sera un incrément de 8.

Pourquoi 8pts?

La variété des tailles d’écran et des densités de pixels a continué d’augmenter, rendant le travail de génération d’actifs plus compliqué pour les concepteurs. L’utilisation d’un nombre pair tel que 8 pour les éléments de taille et d’espace rend la mise à l’échelle pour une grande variété d’appareils facile et cohérente.

Par exemple, les appareils qui ont une résolution de 1,5x auront du mal à rendre proprement un nombre impair. La mise à l’échelle de 5px par 1,5x entraînera un décalage d’un demi-pixel.

Ok, j’ai le chiffre pair, mais sérieusement, pourquoi pas 6 ou 10?

La majorité des tailles d’écran populaires sont divisibles par 8, ce qui facilite l’ajustement. La mise à l’échelle par incréments de 8 offre une bonne quantité d’options sans vous surcharger avec des variables comme un système à 6 points, ou vous limiter comme un système à 10 points. En fin de compte, vous devez décider quelle taille convient à votre public. Le «système» n’est bon que s’il est facile à suivre et à répéter.

Quelle est la valeur du système 8pt?

Pour les designers: efficacité, moins de décisions à prendre tout en maintenant un rythme de qualité entre vos éléments.

Pour les équipes: Un système de communication facile entre les concepteurs et les développeurs (pas de soucis sur les pixels). Un développeur peut facilement observer un incrément de 8 points au lieu d’avoir à mesurer à chaque fois.

Pour les utilisateurs: esthétique cohérente de la marque en laquelle ils ont confiance. Aucun décalage de demi-pixel flou sur leur appareil préféré.

Dans l’exemple ci-dessous, il y a 72 cercles. Nous reconnaissons les cercles en groupes, en fonction de la distance qui les sépare. De manière catégorique, nous percevons également qu’il existe un groupe de 36 cercles sur le côté gauche de l’image et 3 groupes de 12 cercles sur le côté droit de l’image.

Je pense que cet exemple montre clairement qu’il est nécessaire de regrouper les éléments lors de la conception d’une interface utilisateur, ainsi que l’importance d’être prudent lors de l’assemblage, car les utilisateurs peuvent naturellement penser qu’ils sont associés les uns aux autres.