Les templates sombre sont l’une des fonctionnalités les plus demandées au cours des dernières années. Apple et Google ont tous deux fait un thème sombre une option essentielle de l’interface utilisateur. La réduction de la luminosité des sites internet réduit la conso des batteries mais aussi minimise la fatigue oculaire.
Voici 8 conseils à retenir lors de la conception d’un template sombre pour votre site web. Même google vient de déployer son moteur de recherche en mode noir. Il faudrait que je songe d’ailleurs à faire une nouvelle version d’olybop.fr en mode sombre…
1 – oubliez le noir #000000
Il est plus sûr d’utiliser le gris (très) foncé comme couleur de surface principale pour les composants, plutôt que le vrai noir (# 000000). Les surfaces gris foncé réduisent la fatigue oculaire — le texte clair sur une surface gris foncé a moins de contraste que le texte clair sur une surface noire. Les surfaces gris foncé peuvent exprimer une plus large gamme de couleurs, d’élévation et de profondeur, car il est plus facile de voir les ombres sur le gris (au lieu d’un vrai noir).
Google et son matérial design recommande par ex le #121212 ou #333333
2 mettez des couleurs non-saturées
Les couleurs saturées qui peuvent avoir un rendu magnifique sur les surfaces claires, peuvent vibrer visuellement contre les surfaces sombres, les rendant plus difficiles à lire. Désaturez les couleurs afin de créer un contraste suffisant avec la surface sombre.
Utilisez des tons plus clairs (couleurs comprises entre 200 et 50) car ils offrent une meilleure lisibilité sur les surfaces à thème sombre. Les variantes plus légères ne rendront pas l’interface utilisateur moins expressive, mais elles vous aident à maintenir un contraste approprié sans causer de fatigue oculaire.
3 N’oubliez pas de respecter les contrastes
Assurez-vous que votre contenu reste confortablement lisible en mode sombre. Les surfaces de thème sombres doivent être suffisamment sombres pour afficher du texte blanc. Google Material Design recommande d’utiliser un niveau de contraste d’au moins 15,8:1 entre le texte et l’arrière-plan.
4 une couleur de base ultra clair (genre blanc)
Les couleurs « activées » sont des couleurs qui apparaissent « sur » au-dessus des composants et des surfaces clés. Ils sont généralement utilisés pour les textes.
Les couleurs par défaut pour un thème sombre sont le blanc pur (#FFFFFF) et autres couleurs très claires. Mais #FFFFFF est une couleur vive et elle « vibrerait » visuellement sur des arrière-plans sombres. C’est pourquoi Google Material design recommande d’utiliser un blanc légèrement plus foncé.
5 un thème sombre ok mais s’il est utile.
Lorsqu’il s’agit de concevoir un thème sombre pour une application ou créer un site internet, vous souhaiterez probablement communiquer le même spectre d’émotions en mode sombre. Mais il vaut mieux ne pas le faire et/ou l’adapter. Pourquoi? Parce que les couleurs sont perçues différemment selon leur approche sombre ou claire.
6 l’élévation : l’ombre portée du template sombre.
En mode clair, nous utilisons des ombres pour exprimer l’élévation. Plus la surface est élevée, plus l’ombre qu’elle projette est large (shadow, ombre portée…). La même approche ne fonctionnerait pas dans un thème sombre – il est difficile de voir une ombre sur un fond sombre. Il vaut mieux éclairer la surface de chaque niveau.
Dans les thèmes sombres, les surfaces et les composants surélevés sont colorés à l’aide de superpositions. Plus l’altitude d’une surface est élevée, plus cette surface devient claire. Du coup, vous pouvez utiliser des « ombres portée claires » pour faire simple, plus c’est claire, plus c’est haut.
7 bonus : pouvoir switcher entre les 2 mode.
Si cela s’y prête, Il est tentant de laisser l’utilisateur décider quand activer ou désactiver le thème sombre. Cependant, cette décision de conception peut conduire à une mauvaise UX. Ple contrôle de l’utilisateur et faites en sorte que le système décide pour lui. Par exemple un changement de mode grâce à l’heure (clair le jour et sombre la nuit)
