1. Présentation
Lors de Google I/O 2019, Material Design a présenté des conseils pour créer un thème sombre qui complète le thème Material existant de votre produit. Si les thèmes clairs sont parfaits pour la lecture de longs textes et offrent un contraste plus lisible, la luminance réduite d'un thème sombre est plus adaptée aux environnements sombres et peut minimiser la fatigue oculaire.
Dans Material, les thèmes sombres sont conçus pour être utilisés comme mode supplémentaire à un thème clair par défaut. Ils permettent de conserver l'identité unique de votre application (y compris les styles de couleur, de forme, de typographie et d'élévation) grâce à une présentation nuancée et adaptée à la nuit.
Dans cet atelier de conception, nous allons vous guider à travers les étapes nécessaires pour créer un thème sombre basé sur un thème Material existant, en utilisant l'une de nos études Material.
Nous allons travailler avec Reply, une application de messagerie conçue pour la clarté, la lisibilité, l'intuitivité et la facilité d'utilisation. Nous allons découvrir l'identité de Reply et prendre des décisions judicieuses pour conserver les moments de marque dans l'application tout en créant un thème qui reste confortable dans l'obscurité.
Nous allons également aller plus loin avec le thème et utiliser des couleurs de surface personnalisées qui vont au-delà du thème sombre de base pour réaffirmer la personnalité unique de Reply.
Matériaux requis :
2. Rassembler les fichiers requis
Avant de commencer, vous devez télécharger notre fichier de démarrage Figma. Tout ce dont vous avez besoin pour l'atelier de conception est inclus dans ce fichier.
3. Configurer votre environnement
Vous devez ensuite configurer votre environnement de conception.
Tout d'abord, connectez-vous à Figma ou créez un compte.
Une fois connecté, importez le fichier que vous avez téléchargé à l'étape précédente. Pour ce faire, il vous suffit de trouver l'icône "Importer un fichier" en haut à gauche de l'écran des fichiers Figma et de localiser le fichier dans votre dossier "Téléchargements".
Prenez quelques instants pour explorer le fichier. Il contient un thème clair, une palette tonale prédéfinie basée sur la marque de l'application et une copie du thème sombre final que nous allons créer.
- Dans un autre onglet, ouvrez les conseils Material Design pour les thèmes sombres. Nous ferons référence à ces consignes tout au long de l'atelier de conception.
4. Comprendre l'identité du produit
Avant de commencer à travailler sur le thème sombre de Reply, nous devons comprendre certaines caractéristiques de la marque Reply. Cela nous aidera à faire des choix éclairés concernant notre thème afin que l'identité et la marque de Reply soient exprimées de manière cohérente dans les thèmes clair et sombre.
La marque Reply met l'accent sur la communication. L'application privilégie les qualités fonctionnelles, en favorisant la facilité d'utilisation par rapport aux éléments de conception qui n'ont pas de but fonctionnel.
Pour ce designlab, les éléments les plus importants de l'expression de la marque dans Reply sont la couleur, la typographie et la forme.
Couleur
Le thème de couleurs de Reply utilise une couleur primaire bleu-gris foncé associée à une couleur secondaire jaune-orange.
Comme la couleur secondaire est rarement utilisée, l'UI de Reply est souvent monochrome et utilise des variations de sa couleur principale. Ce thème de couleurs subtiles permet de lire facilement le contenu sans distraction et de voir facilement les avatars photographiques.
La couleur secondaire de Reply a donc un impact considérable partout où elle est utilisée. Elle met en évidence les actions critiques et souligne clairement les moments clés de la marque dans l'application.
Type
En tant qu'application axée sur le contenu textuel et l'efficacité, la typographie est au cœur de l'identité de Reply. L'application s'appuie sur Work Sans pour son échelle typographique complète, en utilisant différents styles qui intègrent six épaisseurs de Work Sans : Light, Regular, Medium, SemiBold et Bold.
La typographie de Reply est cohérente, prévisible, organique et lisible, car elle est entièrement basée sur Work Sans.
Selon Wei Huang, le concepteur de Work Sans, la famille est optimisée pour une utilisation à l'écran. Il est donc idéal pour lire efficacement des passages de texte dans des e-mails ou d'autres contenus. Son style, vaguement inspiré des premières grotesques, lui confère une esthétique plus conviviale et humaine, tandis que l'espacement plus large facilite la lecture.
Forme
Reply présente une histoire de forme nuancée, associant des composants ronds et pointus de manière à renforcer l'efficacité et la nature fonctionnelle de la liste d'e-mails, tout en adoucissant les actions clés et les composants plus volumineux.
- Petits composants
- Composants du support
- Composants volumineux
Les petits composants, comme les boutons et le bouton d'action flottant, sont complètement arrondis, tandis que les composants de taille moyenne, comme les cartes d'e-mails et la barre d'application inférieure, sont complètement carrés. Les grands composants, tels que le sélecteur de compte et la bottom sheet, ont des angles légèrement arrondis.
Ces formes se combinent pour aider l'utilisateur à comprendre où il se trouve dans l'application, comment chaque composant est conçu et comment il est lié au reste de l'interface.
5. Utiliser des couleurs
En sachant comment la couleur se rapporte à l'expression de la marque Reply dans son thème clair par défaut, nous pouvons ajuster sa palette de manière éclairée pour un thème sombre utilisable et expressif.
Dans Material, les systèmes de couleurs sont basés sur des palettes tonales. Ces palettes utilisent les couleurs de votre marque pour créer un ensemble de variantes harmonieuses qui se combinent dans un système de couleurs complet appliqué à votre application, garantissant ainsi style et lisibilité.
Dans le fichier Figma, vous pouvez voir les palettes tonales principales et secondaires de Reply. Les flèches claires au-dessus de chaque palette indiquent les valeurs utilisées dans le thème clair de Reply, tandis que les flèches sombres indiquent les variantes que nous utiliserons dans notre thème sombre.
Lorsque vous créez un thème sombre avec Material, des variantes plus claires sont choisies pour que votre système de couleurs reste expressif et maintienne un contraste approprié sans fatiguer les yeux. Les couleurs plus saturées ont tendance à "vibrer" visuellement sur des arrière-plans plus sombres, ce qui les rend plus difficiles à lire. Les tons plus clairs offrent également plus de flexibilité pour varier la couleur des surfaces surélevées, ce que nous verrons sous peu.
6. Ajuster les couleurs de surface
Maintenant que nous avons une idée des palettes tonales de Reply et des couleurs que nous allons utiliser dans notre thème sombre, il est temps de commencer à ajuster les valeurs de couleur dans notre maquette.
Dans les thèmes sombres Material, la couche la plus basse de l'interface est généralement gris foncé, avec la valeur hexadécimale #121212.
- Dans le fichier Figma, recherchez le plan de travail intitulé Reply Starter (Déclencheur de réponse), puis sélectionnez le calque Background (Arrière-plan).
- Sous Remplissage dans le panneau d'inspection à droite de l'écran, définissez la valeur de couleur sur 121212, puis appuyez sur Retour.
- Votre plan de travail devrait se présenter comme suit :
Dans la vue monochrome de la boîte de réception de Reply, les fiches d'e-mails ont une couleur légèrement plus claire que l'arrière-plan. Nous devons donc appliquer le même traitement aux fiches dans le thème sombre pour maintenir la hiérarchie visuelle de la boîte de réception.
- Sur le même plan de travail, développez le groupe Cartes d'e-mail et sélectionnez tous les calques intitulés Carte d'e-mail.
- Comme avant, sélectionnez la valeur Remplir dans le panneau de l'inspecteur. Définissez la valeur sur 121212 et appuyez sur Retour.
- Sélectionnez ensuite uniquement les calques intitulés Email card overlay. Ces calques nous permettront de créer un calque de superposition qui distingue les cartes d'e-mails de leur arrière-plan.
- Attribuez un Remplissage aux calques et définissez-le sur FFFFFF avec une opacité de 2 %.
Maintenant que les cartes d'e-mails ont été assombries, notre texte est illisible. Nous aborderons les couleurs de texte dans la prochaine section.
7. Ajuster les couleurs du texte
Pour comprendre les couleurs de texte dans les thèmes sombres, il est important de comprendre comment la couleur est appliquée au texte dans le système Material Design plus large.
Les composants Material définissent la notion de couleurs "on", qui sont ainsi nommées parce qu'elles apparaissent "au-dessus" des composants et des surfaces clés qui utilisent les couleurs primaire, secondaire, de surface, d'arrière-plan ou d'erreur. Les couleurs "On" sont principalement utilisées pour le texte, afin de garantir sa lisibilité sur ces surfaces.
Les couleurs par défaut "activées" dans Material sont le blanc (#FFFFFF) et le noir (#000000). Étant donné qu'une couleur "on" noire ou foncée ne conviendrait pas sur nos surfaces assombries, nous utiliserons le blanc.
Le système permettant d'établir la hiérarchie du texte avec cette couleur "activée" est simple. Le texte à forte emphase a une opacité de 87 %, tandis que le texte à emphase moyenne est appliqué à 60 % et le texte désactivé utilise une opacité de 38 %.
Le texte à priorité élevée n'est pas blanc pur, car, comme indiqué à l'étape 5, la couleur vive #FFFFFF "vibrerait" visuellement sur nos arrière-plans foncés. De plus, un texte #FFFFFF pur sur un arrière-plan sombre peut nuire à la lisibilité, car la lumière du texte semble se diffuser ou se flouter sur l'arrière-plan sombre.
Maintenant que nous savons tout cela, corrigeons les couleurs du texte dans notre thème sombre.
- Tout le texte de notre mise en page de démarrage est regroupé pour faciliter l'accès. Recherchez le groupe Texte de la boîte de réception et développez-le pour afficher tous les calques qui le composent.
- Sélectionnez tous les calques précédés de Hi -". Il s'agit de tous les éléments de texte à forte emphase de notre mise en page.
- Dans le panneau "Inspector" (Inspecteur), définissez le remplissage sur FFFFFF avec une opacité de 87 %.
- De retour dans le groupe Texte de la boîte de réception, sélectionnez tous les calques précédés de "Med -".
- Dans le panneau "Inspecteur", définissez la couleur de remplissage sur FFFFFF avec une opacité de 60 %.
8. Ajuster les couleurs des composants
Dans les thèmes sombres conçus avec Material, les surfaces et les composants surélevés sont colorés à l'aide de superpositions. Plus la surface est élevée, plus l'incrustation devient forte et lumineuse. Cela permet de communiquer l'élévation et la hiérarchie lorsque l'arrière-plan est trop sombre pour représenter de manière fiable les ombres foncées.
Barre d'application inférieure
Pour la barre d'application inférieure de Reply, qui est surélevée par rapport au reste de l'interface utilisateur de la boîte de réception, nous allons appliquer une superposition subtile.
- Recherchez le groupe Barre d'application inférieure dans la liste des calques et développez-le pour afficher les calques qui le composent.
- Dans ce groupe, recherchez le calque Surface et définissez sa valeur Remplissage sur 121212.
- Recherchez le calque au-dessus, appelé Surface overlay (Superposition de surface), et attribuez-lui une valeur Fill (Remplissage) de FFFFFF avec une opacité de 12 %.
Bouton d'action flottant
Nous allons ensuite appliquer une nouvelle couleur au bouton d'action flottant. Pour ce faire, revenez aux palettes tonales que nous avons examinées précédemment et récupérez la valeur 700 de la couleur secondaire de Reply.
Vous pouvez également sélectionner une couleur légèrement plus saturée pour les composants de votre application qui sont petits, mais à fort impact, à condition qu'elle conserve le bon contraste avec les couleurs sous-jacentes. Nous examinerons cette option lors d'une étape ultérieure.
- Recherchez le groupe FAB dans la liste des calques et développez-le pour afficher ses composants.
- Recherchez le calque Surface et sélectionnez-le. Définissez sa couleur de remplissage sur FCC13B.
Cartes sélectionnées
Vous remarquerez peut-être que la même couleur orange-jaune percutante apparaît également dans l'angle des fiches d'e-mails sélectionnés dans la boîte de réception de Répondre. Il s'agit d'un autre moment fortement associé à la marque, mais qui ne s'intègre pas clairement dans les composants, les surfaces ou le texte.
Dans ce type de situation, il est préférable de commencer par la couleur de notre variante secondaire (dans ce cas, #FFFBE6) et de revenir en arrière pour trouver une couleur suffisamment expressive sans distraire de l'esthétique fonctionnelle de Reply. Pour la réponse, nous pouvons conserver notre variante secondaire habituelle.
- Sélectionnez le calque Earmark et définissez sa couleur de remplissage sur FFF5A0.
9. Aller encore plus loin : les surfaces personnalisées
Comme nous l'avons vu précédemment, le bouton d'action flottant (ou FAB) dans Reply est un composant très visible qui représente également un moment fortement associé à la marque dans l'application. C'est pourquoi nous pouvons décider de conserver son expression de couleur dans le thème sombre de Reply en utilisant la couleur secondaire d'origine de Reply.
- Recherchez le groupe FAB dans la liste des calques et développez-le pour afficher ses composants.
- Recherchez le calque Surface et sélectionnez-le. Définissez à nouveau la couleur de remplissage sur F9AA33.
Nous pouvons également réutiliser la couleur primaire de Reply en tant que couleur de surface personnalisée pour la barre d'application inférieure et les cartes d'e-mails. Pour ce faire, il nous suffirait de modifier la superposition pour utiliser la couleur principale sombre indiquée dans la palette tonale à laquelle nous faisons référence.
- Recherchez le groupe Barre d'application inférieure dans la liste des calques et développez-le pour afficher les calques qui le composent.
- Recherchez le calque Surface overlay (Superposition de surface) et attribuez-lui une nouvelle valeur Remplissage de 344955 avec une opacité de 48 %. Cela lui donnera une couleur de marque plus forte tout en conservant un contraste adéquat.
- Dans la liste des calques, recherchez ceux intitulés Email card overlay (Superposition de carte d'e-mail) et sélectionnez-les tous.
- Définissez la couleur de remplissage sur ADC0CB avec une opacité de 4 %.
10. Conclusion
Dans Material, les thèmes sombres sont une extension réfléchie et intentionnelle de l'identité unique de votre produit telle qu'elle est exprimée dans le thème clair. En ajustant simplement la couleur et la façon dont l'élévation est représentée, vous venez de créer votre premier thème sombre Material. Félicitations !
Considérez les étapes de cet atelier de conception comme un cadre pour comprendre et définir le thème sombre de votre propre produit. Gardez toujours à l'esprit les propriétés et les objectifs de votre marque et de votre produit.
Pour en savoir plus sur le thème sombre, consultez les spécifications Material Design pour les thèmes sombres.
Si vous avez des questions, n'hésitez pas à nous contacter à tout moment à l'adresse @MaterialDesign sur Twitter.
Suivez-nous pour d'autres contenus et tutoriels de conception sur la chaîne YouTube Google Design.