Baissez la lumière, reposez vos yeux et faites des économies d’énergie. Le dark mode (ou « mode sombre ») est l’une des plus grandes tendances du design en ce moment, et les grandes marques comme WhatsApp, Instagram, Google, Facebook et Apple s’y sont déjà mises.

Illustration d'un design d'application en dark mode
Illustration en dark mode réalisée par Vladanland

Examinons de plus près comment ces grandes marques ont implémenté le dark mode et comment vous pouvez, vous aussi, intégrer une interface utilisateur en mode sombre dans vos designs. Nous verrons également les avantages et les inconvénients de ce mode, ainsi que leurs éléments clés, afin de que les sites web et les applications mobiles que vous créez fonctionnent parfaitement.

Qu’est-ce que le dark mode ?

Le mode sombre est une interface utilisateur (UI) à faible luminosité, avec un fond de couleur sombre (généralement du noir ou une nuance de gris). C’est en fait tout l’inverse de l’interface utilisateur classique toute blanche que les graphistes utilisent par défaut depuis des décennies. En réponse à l’augmentation du temps que nous passons devant les écrans, les développeurs ont créé le dark mode en réalisant que cela nous aide à soulager la fatigue oculaire, en particulier dans les situations de faible luminosité, comme c’est le cas la nuit. Et moins de fatigue oculaire signifie moins de maux de tête et une meilleure expérience de travail !

Design d'Instagram en dark mode
UI Instagram en dark mode
Google Fit dark mode UI
UI de Google Fit en dark mode via The Verge
WhatsApp on desktop dark mode UI
UI de WhatsApp en dark mode sur ordinateur via What’s App

Mais, en réalité, le mode sombre n’a rien de nouveau.

Vous vous souvenez du code informatique vert fluo en cascade sur un fond noir dans Matrix ? C’était un clin d’œil au mode sombre d’origine et aux vieux moniteurs monochromes des premiers ordinateurs.

Un des premiers ordinateurs avec du texte vert sur fond noir
Les premiers ordinateurs étaient déjà en mode sombre

Ce look s’est démodé dans les années 80 au profit d’un texte noir sur fond blanc conçu pour imiter l’apparence de l’encre sur le papier.

Et ce fut la norme pendant près de trois décennies, jusqu’à ce que le mode sombre fasse un premier retour dans Windows Phone 7, en 2010. Google a ensuite vérifié que le mode sombre permettait d’économiser la batterie des appareils, avant d’ajouter la fonctionnalité dark mode à son système d’exploitation Android en 2018. Un an plus tard, Apple lui emboîtait le pas avec un mode sombre disponible sur iOS et iPadOS.

Mode sombre vs mode clair sur le design d'iOS 13
Dark mode sur iOS 13 via 9to5Mac

Les avantages du dark mode

Non seulement le mode sombre est agréable pour les yeux (lorsqu’il est bien fait), mais il permet aussi d’économiser la batterie de son téléphone. Voyons voir de plus près les avantages pratiques du mode sombre par rapport au mode clair.

Entraîne moins de fatigue oculaire

On n’est pas censé « sentir » ses yeux… Mais tous ceux qui ont déjà passé des heures et des heures devant un écran savent très bien qu’après un certain temps, c’est exactement ce qu’il se passe. Résultat, on a mal aux yeux, notre vision se trouble, voire se dédouble, le mal de tête guette, sans parler du mal de cou/dos, etc. Le mode sombre peut vraiment vous aider à réduire tous ces symptômes.

Design d'application mobile en dark mode
Ce logo vert fonctionne très bien sur un fond sombre. Design réalisé par Anish Daga

Améliore la lisibilité en situation de faible éclairage

Quand on dort et que quelqu’un allume la lumière d’un coup, on a mal aux yeux. Eh bien le même principe s’applique à ceux qui travaillent devant un écran d’ordinateur tard dans la nuit ou tôt le matin. Le mode sombre réduit cette forte luminosité et facilite la lisibilité du contenu lorsque la lumière est faible.

Fait des économies d’énergie

Certains gadgets numériques équipés d’écrans DELO peuvent désactiver les pixels noirs lorsqu’ils ne sont pas utilisés. Le mode sombre utilise un nombre accru de pixels noirs, ce qui oblige l’appareil à utiliser moins d’énergie.

Permet de prendre soin de soi

Beaucoup sont adeptes du dark mode pour reposer leurs yeux et faire des économies d’énergie, plutôt que pour des raisons esthétiques. Le mode sombre leur donne la sensation de prendre soin d’eux, et donc leur donne une meilleure image d’eux-mêmes.

Diminue les troubles du déficit de l’attention

En quelque sorte. La lumière et les couleurs blanches ont tendance à nous distraire et nous rende donc la concentration plus difficile. L’interface utilisateur en mode sombre peut augmenter la concentration en dirigeant notre concentration vers les zones de contenu de l’interface. Tout ce qui est secondaire disparaît.

Les inconvénients du dark mode

Comme pour tout, le dark mode n’a pas que des avantages. Passons donc maintenant aux inconvénients.

Réduit le lien émotionnel

Les couleurs vives peuvent créer des émotions tout aussi vives. Si c’est ce que vos clients recherchent, la gradation des couleurs peut créer chez eux une barrière mentale. Ils auront plus de mal à établir un lien émotionnel avec le thème sombre. Si votre marque est de nature motivante, inspirante ou spirituelle, l’interface utilisateur en mode sombre n’est pas forcément la plus facile à implémenter. Si des couleurs vives peuvent créer des émotions vives, l’inverse peut également s’avérer vrai… La question est donc de savoir qui est votre public et ce qu’il recherche.

Rétrécit l’espace

Si vous peignez les murs de votre salon avec une couleur sombre, vous verrez que vous vous sentirez très vite à l’étroit. Et le mode sombre peut avoir le même effet. Si vous voulez donner un sentiment d’espace à votre public, le dark mode n’est pas la solution idéale pour vous.

Réduit la lisibilité

Il est important de bien choisir ses couleurs pour créer le mode sombre dans un design de site web ou d’application mobile, car les contrastes de couleurs trop faibles peuvent réduire la lisibilité du texte.

Comment utiliser le mode sombre en design

On peut implémenter un design sombre n’importe où : applications mobiles, montres connectées, interfaces TV… Et cette tendance peut vous aider à développer votre marque comme jamais. Encore faut-il bien s’y prendre, car un mauvais design pourrait avoir l’effet inverse et rebuter vos utilisateurs. Voici nos meilleurs conseils à prendre en compte pour créer un thème sombre réussi :

Quand utiliser le mode sombre

Reprenez la palette de couleurs de votre marque

Si la palette de couleurs de votre marque est déjà compatible avec le dark mode, tant mieux pour vous.

Design d'application en mode sombre
Design d’application mobile en mode sombre réalisé par velinsi

Mais si ce n’est pas votre cas, réfléchissez-y à deux fois si vous devez changer le branding de votre marque pour vous adapter au mode sombre. De même, si vous utilisez un large éventail de couleurs pour votre marque, vous devrez peut-être envisager une interface utilisateur plus claire, car les couleurs ne sont pas toujours très lisibles sur un fond sombre.

Mettez en valeur votre secteur d’activité

Le mode sombre fonctionne particulièrement bien pour certains secteurs d’activité. Par exemple, les entreprises axées sur la vie nocturne et le divertissement sont parfaitement adaptées au mode sombre, car leurs marques sont souvent associées à une ambiance sombre dans la vie réelle.

Montrez vous minimaliste

Là aussi, si vous avez déjà un design minimaliste, tant mieux pour vous : vous aurez plus de facilité à créer un mode sombre pour votre plateforme. En revanche, si vous avez du texte comme contenu principal, sachez que le mode sombre n’aidera pas la lisibilité… En règle générale, le mode sombre amplifie les designs : si votre design est surchargé, il le sera encore plus.

Jouez sur les émotions

Si vous essayez de créer une certaine réponse émotionnelle ou une ambiance mystérieuse et théâtrale, le dark mode est fait pour vous, car en diminuant la luminosité d’un design, on suscite davantage la curiosité tout en amplifiant la « tension émotionnelle ».

Design de site web en dark mode
Design de site web en dark réalisé par novidraft

Symbolisez votre statut

Les couleurs sombres évoquent souvent le luxe et la richesse. Si vous souhaitez attirer l’attention sur la qualité de vos produits, par exemple, le mode sombre peut vous être utile.

Design de site web en mode sombre pour une marque de montres de luxe
Design de site web élégant et raffiné en mode sombre réalisé par Aneley

Nos conseils pour réussir son thème sombre

Il y a plusieurs choses auxquelles faire attention pour que votre interface utilisateur fonctionne bien avec un mode sombre. Prenez en compte chacun des éléments de la liste ci-dessous pour être sûr de réussir votre coup.

1. Des couleurs sombres, mais pas trop quand même

On n’utilise pas du papier complètement blanc pour imprimer les livres, parce que le contraste avec l’encre noire est trop marqué. Ça fait mal aux yeux et peut même provoquer des maux de tête. Il en va de même pour les appareils numériques : évitez le noir complet, car les forts contrastes font mal aux yeux. Optez plutôt pour des nuances de gris associées à des couleurs peu saturées.

Un design d'application en mode sombre pour un magazine digital
Un design d’application en mode sombre réalisé par Neolist

2. Du contraste

Les fonds d’écrans en mode sombre doivent être justement suffisamment sombres pour afficher du texte blanc. Google Material Design suggère d’utiliser un niveau de contraste texte-arrière-plan d’au moins 15,8 : 1.

3. Des couleurs désaturées

Évitez de mettre des couleurs très saturées sur un fond sombre, car les couleurs vives donnent l’impression de « vibrer » lorsqu’elles sont juxtaposées à une surface sombre. Optez plutôt pour des couleurs peu saturées, c’est-à-dire auxquelles on a ajouté du gris et du blanc, comme les pastels.

Pensez également à ajuster la palette de couleurs de votre marque. Le bleu de votre entreprise peut avoir un effet différent sur un fond clair ou sombre. Il est souvent nécessaire de modifier ses couleurs pour qu’elles aient le même effet en mode sombre.

Vidéo via Sergey Zolotnikov

4. « On colors »

Qu’est-ce qu’une couleur « on », exactement ? C’est la couleur qui se trouve sur les éléments clés d’un design. Elles sont généralement utilisées pour le lettrage. La couleur « on » par défaut du dark mode est le blanc pur (#FFFFFF), mais optez plutôt pour un gris clair afin de préserver les yeux de vos visiteurs.

5. Pas d’inversion

Ne vous contentez pas d’inverser les couleurs de votre thème d’origine, car vous perdrez probablement des indices visuels précieux dans le thème d’origine et perdrez ainsi l’intérêt psychologique et émotionnel de certaines couleurs. Tout comme pour votre thème d’origine, choisissez soigneusement les couleurs de votre dark mode.

6. Une hiérarchie visuelle

Créez une hiérarchie visuelle en choisissant les couleurs les plus claires pour les couches qui sont le plus à la surface de votre design, c’est-à-dire pour les éléments les plus utilisés.

Dark mode visual hierarchy
Les couleurs plus claires en haut créent une hiérarchie. Via Sublime Text

7. Testez vos designs

Testez les versions en mode sombre et en mode clair de votre design et effectuez les ajustements appropriés en fonction des commentaires des utilisateurs. Vous pourriez être surpris par les préférences de vos utilisateurs. Offrez-leur la possibilité de passer d’un mode à l’autre afin qu’ils aient un plein contrôle de leur propre expérience.

Passez du côté obscur

La révolution du dark mode est en marche. C’est donc le moment idéal de vous y mettre et de faire preuve de créativité. Préparez-vous à devenir un pionnier du mode sombre !

Vous voulez en savoir plus sur le design de site web ? Consultez notre article à ce sujet.

Vous cherchez le dark mode parfait pour votre marque ?
Laissez notre communauté de designers vous le créer.