Vous avez méticuleusement étudié les couleurs possibles pour votre interface web et vous avez opté pour un design sombre ? C’est un bon choix pour instaurer une ambiance élégante, et il est tout à fait adapté pour les jeunes adultes.

Mais le noir appauvri souvent la lisibilité du contenu et si vous ne faites pas attention à certains détails, vous risquez de faire fuir vos visiteurs.

Pour utiliser correctement une interface sombre, voici quelques erreurs à ne pas commettre.

1. Ne pas laisser d’espaces blancs

Dans notre cas nous devrions peut-être appeler cela « espaces noirs » ? Trêve de plaisanterie, cette notion revient souvent en web design mais il est important d’insister dessus, surtout si votre interface est sombre.

La couleur noire alourdie le design et donne une impression d’encombrement.

Vous devez laisser respirer vos éléments pour que vos visiteurs puissent payer attention à tout ce qui se trouve sur votre site.

Les espaces blancs serviront aussi à le guider dans sa lecture.

Prenez par exemple le site de Yukie Nail. Le background est entièrement noir, pourtant le design est réussi car les images et les textes sont assez espacés.

2. Oublier d’adapter la taille du texte…

Nous sommes habitués à lire sur fond blanc, alors lorsque nous passons sur un background sombre la lecture est naturellement plus difficile.

Vous devez prêter attention à la lisibilité de votre texte par le biais :

Notez que plus votre police d’écriture sera grande, plus vous devrez laisser de l’espace blanc autour de votre texte.

Source : TTP

3. … sa couleur…

Toujours dans un soucis de lisibilité vous ne devez pas négliger la couleur de votre texte. Si vous optez pour des couleurs vives vos visiteurs finiront par avoir mal aux yeux.

Vous devez donc trouver le contraste parfait entre l’arrière-plan sombre de votre site et la couleur claire de votre texte.

Vous pouvez rester dans la simplicité avec des tonalités variant du blanc au gris.

Pour faire votre choix, l’idéal est de faire des essais avec différents backgrounds. Vous verrez que le blanc n’est pas forcément la meilleure solution sur un arrière-plan totalement noir.

4. … et sa police d’écriture

Dernier aspect à prendre en compte pour la lisibilité de votre texte : la police d’écriture.

Il existe toute sorte de typographies, de la plus simple à la plus fantaisiste. Mais sur une interface sombre, vous devez rester dans la simplicité.

La police sans-serif est certainement le meilleur choix, mais beaucoup de designers optent pour une police serif à cause de l’élégance quelle apporte au design.

Je vous conseille d’utiliser une police serif uniquement pour les titres. Appliquée au corps du texte vous constaterez que ce dernier est plus difficile à lire.

5. Choisir une palette de couleurs trop vive

Je suis navrée de vous l’annoncer, mais vous pourrez difficilement combiner des couleurs vives à une interface sombre.

Regardez plutôt l’exemple ci-dessous :

Vous voyez que l’utilisation de couleurs trop vives fonctionne moins bien sur un fond noir que sur un fond clair.

De la même manière, vous ne pourrez pas utiliser des couleurs sombres.

Quelle est la bonne solution dans ce cas ? Encore une fois : la simplicité. Limitez-vous à une ou deux couleurs et intégrez des tons pastels.

Souvent utilisée pour des designs minimalistes et élégants, l’interface sombre doit toutefois être développée avec précaution. Vous ne pourrez pas tout faire.

Notez également que ce type de web design n’est pas approprié si votre site contient beaucoup de texte (un blog par exemple).