7 conseils utiles pour concevoir une interface utilisateur sombre

Les interfaces utilisateur sombres ont gagné en popularité et de nombreuses applications offrent désormais la possibilité de basculer entre un mode clair et un mode sombre. Cependant, la mise en œuvre d'une interface utilisateur sombre peut être une tâche difficile qui nécessite une attention particulière aux couleurs, aux polices, aux images et à l'espacement utilisés.

Toute erreur dans ces éléments peut entraîner une mauvaise expérience utilisateur. Les conseils suivants devraient vous aider lors de la conception de votre première interface utilisateur sombre.

1. N'utilisez pas de noir pur

Lors de la conception d'une interface utilisateur sombre, évitez d'utiliser des arrière-plans noirs purs. Il est préférable d'utiliser une nuance de gris foncé. Par exemple, Thème de conception matérielle de Google recommande la couleur #121212.

Un fond noir combiné à du texte blanc peut avoir trop de contraste et provoquer une fatigue oculaire. Des nuances de gris plus foncées peuvent à la place montrer facilement les ombres, la profondeur et l'élévation.

2. Assurez-vous que le contraste du texte respecte les directives WCAG 2.0

Choisissez une combinaison de couleurs qui offre un bon niveau de contraste, de sorte que le texte soit lisible. Les directives WCAG 2.0 stipulent que le texte ou les images de texte doivent avoir un rapport de contraste d'au moins 4,5: 1 avec un texte de grande taille (au moins 18 points ou 14 points en gras) doit avoir un rapport de contraste d'au moins 3: 1.

Il existe plusieurs outils pour vérifier le contraste des couleurs, y compris le VAGUE Extension Chrome qui vérifie également l'accessibilité des couleurs.

3. Choisissez le bon style de police

Vous devez également prendre en compte les styles de police de votre texte, notamment la taille, l'épaisseur et la hauteur de ligne. Si vous cherchez des options de police, n'oubliez pas qu'il y en a beaucoup de sites qui proposent des polices gratuites. En ce qui concerne la taille de la police, utilisez des valeurs suffisantes pour que le texte soit clair et visible sur un fond sombre.

Considérez les styles suivants pour une page Web :

corps {
famille de polices: "CourrierNouveau", monospace;
taille de police: 12pixels;
poids de la police: 200;
hauteur de la ligne: 1; 
couleur: #333333;
}

La famille de polices est difficile à lire, la taille de la police est trop petite et le poids de la police est trop léger. Ces styles rendent la page difficile à lire comme vous pouvez le voir sur la capture d'écran ci-dessous.

Vous trouverez ci-dessous quelques styles appropriés que vous pourriez utiliser à la place.

corps {
famille de polices: "Arial", sans empattement;
taille de police: 16pixels; 
poids de la police: 400; 
hauteur de la ligne: 1.5; 
couleur: #FFFFFF;
Couleur de l'arrière plan: #121212; 
}

Et voici la page résultante :

4. Évitez les couleurs d'accent saturées

Les couleurs saturées peuvent être trop vives et floues sur des arrière-plans sombres. Au lieu de cela, utilisez des couleurs moins intenses et atténuées. De cette façon, vous créez une interface utilisateur qui contient du texte visible.

Pour illustrer, considérez ces deux styles de bouton :

/* Bleu saturé */
.btn-bleu-saturé {
Couleur de l'arrière plan: #121212;
couleur: #0e0bf6;
}
/* Bleu assourdi */
.btn-muted-blue {
Couleur de l'arrière plan: #121212; 
couleur: #4c5ab3;
}

La couleur bleue saturée peut être trop lumineuse et difficile à lire sur un fond sombre, tandis que la couleur bleue atténuée offre un bon contraste et est plus facile à lire.

Un outil comme colorable est utile pour générer des combinaisons de couleurs qui respectent les directives d'accessibilité.

5. Utiliser l'espace négatif pour empêcher la création d'une interface utilisateur lourde

Une palette de couleurs sombres peut rendre l'interface utilisateur lourde pour les utilisateurs. Lorsqu'il est utilisé correctement, l'espace négatif peut vous aider à mettre en évidence des éléments importants de l'interface utilisateur et à faciliter la numérisation du texte. Un espacement suffisant peut également rendre le design plus propre et plus moderne.

Prenez, par exemple, La page de destination d'Apple. L'espace entre les éléments donne à la page un aspect très moderne et visuellement intéressant, permettant aux éléments importants de se démarquer.

6. Utilisez différentes nuances de couleur pour ajouter de la profondeur à l'interface utilisateur

Lors de la conception d'interfaces utilisateur claires, vous pouvez utiliser des ombres pour ajouter de la profondeur et de l'élévation aux éléments. Cependant, en raison des arrière-plans sombres, les ombres sont parfois difficiles à voir dans les interfaces utilisateur sombres.

Vous pouvez obtenir de la profondeur dans une interface utilisateur sombre en utilisant plusieurs nuances de couleurs sombres. Par exemple, au lieu d'un seul fond sombre, vous pouvez ajouter des nuances plus claires de la même couleur à différents éléments comme les boutons et les modaux.

7. Assurez-vous que vos images correspondent à l'interface utilisateur sombre

Vous n'avez pas besoin d'utiliser les mêmes images pour le mode clair et le mode sombre. Vous pouvez utiliser le mode sombre Requêtes média CSS pour désactiver les images qui correspondent à l'interface utilisateur sombre chaque fois que l'utilisateur bascule en mode sombre.

Par exemple, pour appliquer un motif d'arrière-plan spécifique à des sections de votre page en mode sombre, vous pouvez utiliser le nom de classe .bgpattern et ajouter le code suivant à votre feuille de style.

@médias (prefere-color-scheme: sombre) {
/* Appliquer ce style en mode sombre uniquement */
.bgpattern {
image de fond: URL("/sombre.jpg");
 }
}

Cette requête multimédia garantit que l'image d'arrière-plan référencée ne s'affiche que lorsque la palette de couleurs préférée de l'utilisateur est sombre.

Quand utiliser une interface utilisateur sombre

Les conceptions d'interface utilisateur sombres sont un excellent moyen de donner une esthétique moderne à votre site Web ou à votre application. Ils peuvent également minimiser la fatigue oculaire et économiser la durée de vie de la batterie. Cependant, les interfaces utilisateur sombres ne conviennent pas à toutes les applications et vous devez toujours tenir compte de la marque et de la base d'utilisateurs.

En règle générale, les interfaces utilisateur sombres conviennent mieux aux marques qui privilégient le luxe, le prestige, le minimalisme ou le mystère. Ils peuvent également être un excellent choix pour les tableaux de bord et les outils de visualisation.