Règles de design visuel que l’on peut suivre en toute sécurité

• Il n’est pas obligatoire de les suivre à la lettre, mais ces règles peuvent presque toujours être appliquées telles quelles

Utiliser des couleurs proches du noir et du blanc plutôt que du noir/blanc purs

• Le noir pur paraît artificiel sur un écran, et le blanc pur est trop lumineux
• Utiliser #222222 et #F2F2F2 au lieu de #000000 et #FFFFFF
• Par la suite, quand on parle de noir/blanc, on parle de ces couleurs

Teinter les couleurs neutres

• Les couleurs neutres sont généralement le noir, le blanc et le gris
• Si vous utilisez de la couleur, ajoutez-en seulement un peu aux neutres (light red au lieu de grey, dark blue au lieu de black)
• Cela rend la palette de couleurs plus cohérente
• Si vous utilisez HSB, ajoutez simplement environ 5 % de saturation ou moins

Utiliser un contraste élevé pour les éléments importants

• Tous les éléments sur lesquels l’utilisateur doit se concentrer : boutons, contenu, etc.
• Pour les séparateurs, les ombres portées, etc., utiliser le moins de contraste possible

Chaque élément du design doit être intentionnel

• Cela inclut les marges, l’alignement, la taille, l’espacement, la couleur et l’ombre
• Si quelqu’un vous demande pourquoi une partie du design est ainsi, vous devez pouvoir l’expliquer

L’alignement optique est souvent préférable à l’alignement mathématique

• Certaines formes sont mieux perçues lorsqu’elles semblent alignées à l’œil
• S’aligner à l’œil demande de la pratique, mais on l’acquiert vite avec l’habitude

Réduire l’interlettrage et la hauteur de ligne pour les grands textes, les augmenter pour les petits

• Cela s’applique à tout le texte
• Plus le texte est grand, moins il a besoin d’espace entre les lettres et entre les lignes, et inversement

La bordure d’un conteneur doit contraster avec le conteneur et l’arrière-plan

• La bordure doit être d’une couleur plus sombre que l’arrière-plan, et non d’une couleur intermédiaire entre l’intérieur du conteneur et l’arrière-plan

Tout doit être aligné avec autre chose

• L’alignement indique que les choses ont un lien entre elles
• Si quelque chose n’est aligné avec rien d’autre, cela donne l’impression que l’élément n’appartient pas au design
• Idéalement, chaque élément devrait être aligné avec les autres selon une certaine logique

Les couleurs de la palette doivent avoir des valeurs de luminosité propres

• Si les couleurs ont des luminosités différentes, elles auront une identité visuelle distincte non seulement par leur teinte, mais aussi par leur luminosité
• On obtient ainsi une meilleure palette, car les couleurs se concurrencent moins

Si vous teintez les neutres, utilisez soit des tons chauds, soit des tons froids, mais pas les deux

• Mélanger des neutres chauds et froids donne une palette moins cohérente

Les tailles doivent avoir un lien mathématique entre elles

• L’espacement, les dimensions, etc. doivent être déterminés selon une échelle. Cela aide le design à paraître cohérent
• Dans l’exemple, tous les éléments utilisent des multiples de 8. Espacements : 8/16/24/32, hauteurs de ligne : 48/40/24, tailles de texte : 40/32/16

Les éléments doivent être disposés selon leur poids visuel

• S’il y a plusieurs éléments sur une ligne ou une colonne et que certains sont visuellement plus lourds que d’autres (par exemple 2 boutons et 3 liens),
  l’élément visuellement le plus lourd doit venir en premier, puis les plus légers dans l’ordre jusqu’au dernier
• À noter : l’élément visuellement le plus lourd doit aussi être placé le plus à l’extérieur

Si vous utilisez une grille horizontale, utilisez 12 colonnes

• Avec 12 colonnes, vous pouvez facilement utiliser des divisions en 1, 2, 3 ou 4 colonnes, ce qui offre beaucoup de souplesse

Laisser de l’espace entre les zones de fort contraste

• Comme notre œil repère les bords des éléments grâce au contraste, il s’attend à trouver un espace entre deux zones contrastées

Les éléments plus proches doivent être plus lumineux

• Plus un élément à l’écran est proche de l’utilisateur (ou paraît au premier plan), plus il devrait être lumineux
• Cela s’applique aussi au mode clair/sombre, car c’est ainsi que fonctionne le monde réel

Définir le flou d’une ombre portée à deux fois sa distance

• Si une ombre s’étend de 4 pixels sur l’axe Y, régler le flou sur 8 pixels
• Quand un élément se rapproche du spectateur, il est aussi préférable de réduire l’opacité de l’ombre

Placer du simple sur du complexe, ou du complexe sur du simple

• Un arrière-plan complexe (comme un dégradé chargé) fonctionne mieux quand le premier plan (comme le texte) est simple
• Si le premier plan est complexe, un arrière-plan simple est le plus adapté
• Du simple sur du simple est possible, mais peut paraître fade
• Du complexe sur du complexe crée de la confusion visuelle et doit être évité

Garder les couleurs des conteneurs dans une limite de luminosité

• L’écart de luminosité entre l’arrière-plan et le conteneur doit rester inférieur à 12 % dans une interface sombre, et à 7 % dans une interface claire (selon la valeur de luminosité du système HSB)
• Cela vient d’une étude ayant comparé la luminosité des conteneurs à celle de leur arrière-plan sur environ 100 sites web bien conçus

Le padding externe doit être égal ou supérieur au padding interne

• Le padding interne correspond à l’espace entre les éléments à l’intérieur du conteneur. Le padding externe correspond à l’espace entre les éléments et les bords du conteneur
• Le padding externe doit être égal ou supérieur au padding interne

Garder le texte courant à 16px minimum

• 16px est la taille de texte par défaut dans la plupart des navigateurs
• En dessous de cette taille, le texte est difficile à lire ; mieux vaut donc ne pas l’utiliser pour le corps de texte

Utiliser une longueur de ligne d’environ 70 caractères

• Que la ligne fasse 60 ou 80 caractères n’a pas une énorme importance, mais s’en éloigner trop peut poser des problèmes de lisibilité

Définir le padding horizontal des boutons à deux fois le padding vertical

• Le motif standard d’un bouton est plus large que haut
• Si vous voulez que les gens l’identifient comme un bouton, il vaut mieux suivre ce schéma

Utiliser au maximum 2 polices

• La seconde police est une occasion de renforcer le concept derrière le design
• Elle aide aussi à ajouter de la variété au design
• Il est rarement nécessaire d’en utiliser plus de deux, et cela peut rendre le design visuellement confus

Bien gérer les coins imbriqués

• Il arrive que deux coins arrondis ou plus soient imbriqués
• Pour que cela paraisse correct, définir le rayon du coin intérieur comme le rayon du coin extérieur moins la distance entre les deux
• Exemple : si le rayon extérieur est de 30px et que le coin intérieur se trouve à 20px, alors le rayon intérieur doit être de 10px

Ne pas placer deux séparateurs côte à côte

• Les transitions d’arrière-plan, les bords de conteneur et les lignes de séparation sont difficiles à distinguer visuellement
• Éviter que deux séparateurs ou plus soient accolés

[sungwoo]

@xguru
Pour améliorer la lisibilité de GeekNews, je l’affiche avec le style ci-dessous. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper

Merci.

[metis041]

C’est vraiment très bien... Le design me posait toujours problème, donc avec ce genre de guide, on pourrait nettement gagner en productivité.

[greenhead]

Merci pour la traduction ! Cela m’a beaucoup aidé.

[laeyoung]

C'est vraiment super !

[cbk1411]

@xguru
Je vous le signale car il y a une erreur de traduction.
"Les éléments plus proches doivent être plus légers" -> "Les éléments plus proches doivent être plus lumineux"

[xguru]

Ah oui, en effet, merci~ !