design
1.0.0
3.1 N'utilisez jamais plus de trois polices sur une page à la fois.
Pourquoi? Une gamme de polices utilisées sur une seule page montre une marque mal définie et peut apparaître paresseuse et encombrée. Tout au plus, trois polices différentes peuvent être utilisées en même temps (logo, en-têtes, contenu corporel).
3.3 Maintenir une hiérarchie de type cohérente. Vous ne devriez jamais utiliser une poignée de tailles de police et un ou deux poids de police pour développer la hiérarchie de type. Pensez aux balises d'en-tête HTML H1, H2, H3, etc. Vous devez avoir des styles visuels distincts pour au moins quatre d'entre eux, en utilisant des variations de luminosité, de taille et de poids pour indiquer l'importance du texte. Pour un excellent exemple de hiérarchie de type, consultez les directives d'interface humaine d'Apple.
[3.4] Gardez le texte de votre corps un poids normal et bien espacé. Le texte doit toujours être lisible, donc réserver des polices légères ou audacieuses pour les grands en-têtes ou les cas dans lesquels le poids de la police aura peu d'impact sur la lisibilité du texte. De plus, gardez toujours l'espacement de la ligne de votre texte de corps à 1,15 à 1,5 (selon la taille) pour maximiser la lisibilité. Par exemple, cet article a environ un espacement de la ligne REM de 1,5. La justification de vos paragraphes de corps ne fait pas non plus mal non plus.
3.1 Les arrière-plans du corps doivent toujours être l'ombre de gris
Pourquoi? Des arrière-plans colorés, même des gris très foncés, peuvent facilement créer une pression sur les yeux. Pour un contenu important tel que le corps de texte d'une page Web ou d'une application, il est que des utilisateurs cruciaux puissent lire et entièrement la page en toute simplicité.
3.3 Dans la plupart des cas, utilisez du texte blanc sur n'importe quelle image, couleur ou fond de dégradé. Si nécessaire, appliquez une ombre de chute très légère (<= 10% d'opacité) au texte.
Pourquoi? White-on-Dark est souvent plus attrayant et plus facile à créer des variantes. Décider d'une couleur sombre à utiliser sur un fond coloré peut souvent être difficile. Cependant, assurez-vous que le combo de couleurs que vous choisissez est également accessible.
3.4 N'utilisez jamais les noirs absolus.
Pourquoi? Le noir pur et opaque (# 000) est souvent trop dur pour la plupart des pages Web. Même la couleur de police du corps de Github est # 24292E, pas # 000. En cas de doute, vous pouvez utiliser des codes hexadécimaux en niveaux de gris numérique (# 111, # 222 ... #AAA, #BBB, etc.).
3.5 Assurez-vous que les composants colorés ne se bordent pas.
Pourquoi? À moins que les couleurs ne soient des compléments très forts les uns des autres, le contraste de deux couleurs voisines peut créer un sentiment de polarisation et de division qui brise le flux de votre page. Dans le cas où une barre de navigation peut toucher un héros coloré, optez plutôt pour un fond de Navbar transparent.
Assurer la cohérence sur tous les composants. Une fois que vous avez défini une source lumineuse pour votre page, assurez-vous que toutes les ombres suivent sa direction. Si la lumière "frappe" votre page à 135 degrés, alors chaque ombre et dégradé devrait tomber à 135 degrés. Utilisez des ombres comme outil pour présenter la hiérarchie ou l'état. Les ombres doivent être utilisées pour mettre en évidence les composants de la page, fournir une structure de page ou représenter l'état. Par exemple, vous pouvez représenter qu'un bouton est enfoncé en abaissant son élévation plutôt que pour changer sa couleur. Trop d'ombres peuvent présenter trop de dimensionnalité, alors soyez prudent (par exemple, ne créez pas un site avec 18 élévations uniques). Le décalage de votre ombre doit être égal à environ la moitié de son rayon flou. Par exemple, une ombre avec un décalage x / y de 10px devrait avoir un rayon flou d'environ 20px. Cette approche rend l'ombre la plus authentique. Gardez toujours l'opacité des ombres à moins de 25%. Err du côté de la subtilité afin de ne pas nuire à votre conception. Si vous utilisez un fond sombre, dans certains cas, vous devrez peut-être augmenter l'opacité de votre ombre afin d'assurer sa visibilité. Les ombres n'ont pas toujours besoin d'être noires. Lorsque vous utilisez des ombres sur des surfaces colorées, il est souvent avantageux d'utiliser une variante très sombre ou terne de la couleur d'arrière-plan pour améliorer le mélange de l'ombre.
