Guide

La taille de police de base d'une page web est de 16 pixels.
Cette taille est défini sur la balise html du CSS.
Pour designer de manière efficace et adapté aux réglages utilisateurs, les tailles de textes doivent être défini en utilisant des unités relatives comme les REM.

Il est préférable d'avoir une taille minimum de 14px (0.875rem).

Pour les hauteurs de lignes, le plus simple et efficace est de multiplier la taille de la police fois 1,6. Par exemple, un texte de 16px aura une line-height de 25,6 (16*1,6 = 25,6).

Pour garder une consistante, utiliser uniquement des valeurs paires est idéale.

Il est important de savoir jouer avec les font-weight, qui vont de 100 à 900 en général et qui dépende de la font.

Utiliser les bonnes unités de mesure est primordiale dans la conception responsive.

Pour les font le mieux est d'utiliser les REM ou EM, qui sont relatives aux réglages de l'utilisateur.

Pour les structure, on peut utiliser des pixels pour les margin, padding ou encore des boutons qui contiennet seulement une icône et qui doivent être rond. On peut les utiliser pour les structures en faisant des breakpoints précis en CSS.
Le plus simple étant d'utilisé les % ou les fr (CSS Grid). Les unités comme le VW (ViewportWidth) ou VH (ViewportHeight) sont utiles dans certains cas précis, à ne pas utiliser partout.

Les propriétés de min-width ; min-height ; max-height ; max-height sont pratiques dans le responsive car cela fixe des limites.

Utiliser la règle de 8 au maximum pour les padding, margin garantie un équilibre dans le design. Il est parfois autorisé d'utiliser du 2px ou du 4px. Mais avoir une cohérence de 8px, 16px, 24px assure une cohérence graphique entre les pages et les éléments.

Il est très important d'avoir une cohérence des icônes.

Mais également de pouvoir les différencier et les distinguer facilement.
Avoir un style graphique trop commun entre les icônes apporte une cohérence graphique mais perd énormément en lisibilité.
Comme l'a fait Google récemment (2020)avec ces nouvelles icônes. C'est certes assez joli mais pour différencier les applications cela devient plus dur comparé au systèmed'Apple.
Apple à trouvé comment avoir une cohérence entre les icônes et les faires uniques et distinguables.

Pour les icônes dans un produit, on peut appliquer les mêmes règles.
Les icônes doivent être distinguable et les comprendres rapidement.
Il est donc recommandé d'avoir une librairie d'icône à utiliser et s'il faut en créer de nouvelles, bien respecter les dimensions, espaces blancs, espacement et proportions.

Une bonne structure de page est responsive, bien hiérarchisé et logique.

Pour arriver à créer des structures efficacement le mieux est d'utiliser le Flex et le Grid CSS.
Ces deux propriétés permettent également de centrer très facilement des éléments avec les propriétés align-items ou justify-content.

Le Grid possède un très grand avantage comparé au flex, c'est de pouvoir décrire la structure voulu, par exemple 2 colonnes. On peut écrire grid-tempalte-columns: 1fr 1fr; ou grid-tempalte-columns: 50% 50%;

Et pourvoir mixer des pixels et des unités relatives : grid-tempalte-columns: 48px 1fr;. De cette manière on aura toujours un espace de 48px et le reste sera adapté à l'espace restant.

Pour assurer que les boutons et liens soient cliquables il est important d'avoir des zones d'actions reconnaissables et assez grandes pour une souris ou un doigt.

Une bonne règle de base est d'avoir un minimum de 40px de hauteur pour tous les boutons, et si le bouton contient uniquement une icône, avoir une hauteur/largeur minimum de 48px.

De la même manière les inputs doivent être suffisamment espacé les uns des autres pour ne pas remplir le mauvais. Et les labels écrient assez gros pour être facilement lues. Un minimum de 56px est une bonne base.

Texte