1. Übersicht
Auf der Google I/O 2019 wurde im Rahmen von Material Design eine Anleitung zum Erstellen eines dunklen Designs vorgestellt, das das vorhandene Material-Design Ihres Produkts ergänzt. Helle Designs eignen sich hervorragend für das Lesen längerer Texte und bieten einen besseren Kontrast. Das dunkle Design mit seiner geringeren Leuchtdichte ist in dunklen Umgebungen sicherer und kann die Augen weniger anstrengen.
In Material sind dunkle Designs als Ergänzung zu einem hellen Standarddesign gedacht. Die einzigartige Identität Ihrer App (einschließlich Stilen für Farbe, Form, Typ und Erhebung) wird durch eine differenzierte und nachtfreundliche Darstellung beibehalten.
In diesem Designlab werden wir die erforderlichen Schritte zum Erstellen eines dunklen Designs auf Grundlage eines vorhandenen Material-Designs durchgehen. Dazu verwenden wir eine unserer Material Studies.
Wir arbeiten mit Reply zusammen, einer E‑Mail-App, die auf Klarheit, Lesbarkeit, Intuitivität und Benutzerfreundlichkeit ausgelegt ist. Wir werden uns mit der Identität von Reply vertraut machen und sorgfältig entscheiden, wie wir Markenelemente in der App beibehalten und gleichzeitig ein Design entwickeln, das auch im Dunkeln angenehm ist.
Wir werden das Design weiterentwickeln und mit benutzerdefinierten Oberflächenfarben arbeiten, die über das grundlegende dunkle Design hinausgehen, um die einzigartige Persönlichkeit von Reply zu unterstreichen.
Erforderliche Materialien:
2. Erforderliche Dateien zusammenstellen
Bevor Sie beginnen, müssen Sie unsere Figma-Startdatei herunterladen. Alles, was Sie für das Designlab benötigen, ist in dieser Datei enthalten.
3. Umgebung einrichten
Als Nächstes müssen Sie Ihre Designumgebung einrichten.
Melden Sie sich zuerst in Figma an oder erstellen Sie ein Konto.
Nachdem Sie sich angemeldet haben, importieren Sie die Datei, die Sie im vorherigen Schritt heruntergeladen haben. Suchen Sie dazu einfach in der oberen linken Ecke des Bildschirms „Figma-Dateien“ nach dem Symbol „Datei importieren“ und suchen Sie die Datei im Ordner „Downloads“.
Sehen Sie sich die Datei kurz an. Es enthält ein helles Design, eine vorgefertigte tonale Palette, die auf der Marke der App basiert, und eine Kopie des endgültigen dunklen Designs, das wir erstellen werden.
- Öffnen Sie in einem anderen Tab die Material Design-Richtlinien für dunkle Designs. Wir werden in diesem Designlab immer wieder auf diese Richtlinien verweisen.
4. Identität des Produkts
Bevor wir mit der Gestaltung des dunklen Designs für Reply beginnen, müssen wir einige Markenmerkmale von Reply kennen. So können wir fundierte Entscheidungen bezüglich unseres Designs treffen, damit die Identität und Marke von Reply sowohl im hellen als auch im dunklen Design einheitlich dargestellt werden.
Bei Reply wird großer Wert auf Kommunikation gelegt. Bei der App werden funktionale Aspekte priorisiert. Die Benutzerfreundlichkeit hat Vorrang vor Designelementen, die keinen funktionalen Zweck haben.
Für unsere Zwecke in diesem Designlab sind die wichtigsten Elemente der Markendarstellung in Reply Farbe, Schriftart und Form.
Farbe
Das Farbdesign von Reply verwendet eine dunkelblaue Primärfarbe in Kombination mit einer orange-gelben Sekundärfarbe.
Da die sekundäre Farbe selten verwendet wird, ist die Benutzeroberfläche von Reply oft monochrom und nutzt Variationen der primären Farbe. Dieses dezente Farbdesign ermöglicht es, Inhalte ohne Ablenkung zu lesen, und sorgt dafür, dass fotografische Avatare gut zu sehen sind.
Die sekundäre Farbe von Reply hat daher überall dort, wo sie verwendet wird, eine überproportionale Wirkung. Sie unterstreicht wichtige Aktionen und hebt Markenmomente in der gesamten App deutlich hervor.
Typ
Da sich die App stark auf textbasierte Inhalte und Effizienz konzentriert, sind Schriftart und Typografie von zentraler Bedeutung für die Identität von Reply. Die App verwendet Work Sans für die gesamte Typografie und nutzt eine Vielzahl von Stilen, die sechs Schriftstärken von Work Sans umfassen: Light, Regular, Medium, SemiBold und Bold.
Die gesamte Typografie basiert auf Work Sans. So erhält Reply eine einheitliche und vorhersehbare, aber auch organische und gut lesbare Typografie.
Laut Wei Huang, dem Designer von Work Sans, ist die Schriftartfamilie für die Verwendung auf dem Bildschirm optimiert. Das macht die Funktion ideal, um Textpassagen in E‑Mails oder anderen Inhalten effizient zu lesen. Die lockere Grundlage in den Formen der frühen Grotesken verleiht ihr eine etwas freundlichere und menschlichere Ästhetik, während der größere Laufweite für ein flüssigeres Lesen sorgt.
Form
Die Antwort hat eine differenzierte Formgeschichte, die runde und scharfe Komponenten so kombiniert, dass die Effizienz und Funktionalität der E‑Mail-Liste unterstrichen werden, während wichtige Aktionen und größere Komponenten weicher gestaltet sind.
- Kleine Komponenten
- Media-Komponenten
- Große Komponenten
Kleine Komponenten wie Schaltflächen und der FAB sind vollständig abgerundet, während mittelgroße Komponenten wie E‑Mail-Karten und die untere App-Leiste vollständig quadratisch sind. Große Komponenten wie die Kontoauswahl und das Bottom Sheet haben leicht abgerundete Ecken.
Diese Formen werden kombiniert, um den Nutzern zu verdeutlichen, wo sie sich in der App befinden und wie die einzelnen Komponenten konzipiert sind und sich auf den Rest der Benutzeroberfläche beziehen.
5. Mit Farben arbeiten
Wenn wir wissen, wie sich die Farben im standardmäßigen hellen Design von Reply auf die Markenidentität auswirken, können wir fundierte Anpassungen an der Palette vornehmen, um ein nutzbares und ausdrucksstarkes dunkles Design zu erstellen.
In Material basieren Farbsysteme auf Tonpaletten. Diese Paletten verwenden Ihre Markenfarben, um eine Reihe harmonischer Varianten zu erstellen, die in einem umfassenden Farbsystem zusammengefasst werden, das in Ihrer gesamten App angewendet wird und für Stil und Lesbarkeit sorgt.
In der Figma-Datei finden Sie die primären und sekundären Tonpaletten von Reply. Die hellen Pfeile über jeder Palette geben die Werte an, die im hellen Design von Reply verwendet werden, während die dunklen Pfeile die Varianten angeben, die im dunklen Design verwendet werden.
Bei der Entwicklung eines dunklen Designs mit Material werden hellere Varianten ausgewählt, damit Ihr Farbsystem ausdrucksstark bleibt und ein angemessener Kontrast beibehalten wird, ohne die Augen zu überanstrengen. Stärker gesättigte Farben „vibrieren“ optisch vor dunkleren Hintergründen, was die Lesbarkeit erschwert. Helle Töne bieten auch mehr Flexibilität bei der Farbgestaltung von erhöhten Oberflächen, was wir uns gleich ansehen werden.
6. Oberflächenfarben anpassen
Nachdem wir uns mit den Tonpaletten von Reply und den Farben, die wir in unserem dunklen Design verwenden werden, vertraut gemacht haben, können wir nun mit der Anpassung der Farbwerte in unserem Mockup beginnen.
In dunklen Material-Designs ist die unterste Ebene der Benutzeroberfläche in der Regel dunkelgrau mit dem Hexadezimalwert #121212.
- Suchen Sie in der Figma-Datei nach dem Artboard mit dem Namen Reply Starter (Antwort-Starter) und wählen Sie die Ebene mit dem Namen Background (Hintergrund) aus.
- Legen Sie im Eigenschaftenbereich auf der rechten Seite des Bildschirms unter Füllung den Farbwert auf 121212 fest und drücken Sie die Eingabetaste.
- Ihr Zeichenbereich sollte so aussehen:
In der monochromen Ansicht des Posteingangs in Reply haben E-Mail-Karten eine etwas hellere Farbe als der Hintergrund. Wir sollten die Karten im dunklen Design entsprechend gestalten, um die visuelle Hierarchie des Posteingangs beizubehalten.
- Erweitern Sie auf demselben Artboard die Gruppe E-Mail-Karten und wählen Sie alle Ebenen mit dem Namen E-Mail-Karte aus.
- Wählen Sie wie zuvor im Eigenschaftenbereich den Wert Füllen aus. Legen Sie den Wert auf 121212 fest und drücken Sie die Eingabetaste.
- Wählen Sie jetzt nur die Ebenen mit dem Namen E-Mail-Karten-Overlay aus. Mit diesen Ebenen können wir ein Overlay erstellen, das die E‑Mail-Karten vom Hintergrund abhebt.
- Geben Sie den Layern eine Füllung und legen Sie sie auf FFFFFF bei einer Deckkraft von 2% fest.
Da die E‑Mail-Karten jetzt abgedunkelt sind, ist der Text nicht mehr lesbar. Als Nächstes sehen wir uns die Textfarben an.
7. Textfarben anpassen
Um Textfarben in dunklen Designs zu verstehen, ist es wichtig, zu wissen, wie Farben im Material Design-System allgemein auf Text angewendet werden.
In Material Components wird der Begriff „on“-Farben definiert. Diese Farben werden so genannt, weil sie „auf“ Komponenten und wichtigen Oberflächen angezeigt werden, für die Primär-, Sekundär-, Oberflächen-, Hintergrund- oder Fehlerfarben verwendet werden. „On“-Farben werden hauptsächlich für Text verwendet, damit er auf diesen Oberflächen lesbar bleibt.
Die Standardfarben für „Ein“ in Material sind Weiß (#FFFFFF) und Schwarz (#000000). Da eine schwarze oder dunkle „Ein“-Farbe auf unseren abgedunkelten Oberflächen nicht geeignet wäre, verwenden wir Weiß.
Das System zum Festlegen der Texthierarchie mit dieser „on“-Farbe ist einfach. Text mit hoher Betonung hat eine Deckkraft von 87%, Text mit mittlerer Betonung wird mit 60 % und deaktivierter Text mit einer Deckkraft von 38 % dargestellt.
Text mit hoher Priorität ist nicht reinweiß, da #FFFFFF – eine helle Farbe – wie in Schritt 5 beschrieben auf unseren dunklen Hintergründen visuell „vibriert“. Außerdem kann reiner #FFFFFF-Text auf einem dunklen Hintergrund die Lesbarkeit beeinträchtigen, da das Licht des Textes auf dem dunklen Hintergrund zu verschwimmen scheint.
Nachdem wir das wissen, können wir die Textfarben in unserem dunklen Design korrigieren.
- Der gesamte Text in unserem Startlayout ist für einen einfachen Zugriff gruppiert. Suchen Sie die Gruppe Eingangstext und maximieren Sie sie, um alle zugehörigen Ebenen zu sehen.
- Wählen Sie alle Ebenen aus, denen Hi – vorangestellt ist. Das sind alle Textteile in unserem Layout, die stark hervorgehoben werden sollen.
- Legen Sie im Bereich „Inspector“ (Eigenschaften-Inspektor) die Füllung auf FFFFFF mit einer Deckkraft von 87 % fest.
- Wählen Sie in der Gruppe Posteingangstext alle Ebenen aus, denen „Med –“ vorangestellt ist.
- Legen Sie im Bereich „Inspector“ (Eigenschaften) die Füllung auf FFFFFF mit einer Deckkraft von 60 % fest.
8. Komponentenfarben anpassen
In dunklen Designs, die mit Material erstellt wurden, werden erhöhte Oberflächen und Komponenten mit Overlays eingefärbt. Je höher die Oberfläche ist, desto stärker und heller wird das Overlay. So lassen sich Erhebung und Hierarchie darstellen, wenn der Hintergrund zu dunkel ist, um dunkle Schatten zuverlässig darzustellen.
Untere App-Leiste
Für die untere App-Leiste von Reply, die über dem Rest der Posteingangs-UI liegt, wenden wir ein dezentes Overlay an.
- Suchen Sie in der Ebenenliste nach der Gruppe Untere App-Leiste und maximieren Sie sie, damit Sie die zugehörigen Ebenen sehen.
- Suchen Sie in dieser Gruppe nach der Ebene mit dem Namen Surface und legen Sie den Wert für Fill auf 121212 fest.
- Suchen Sie die darüber liegende Ebene mit dem Namen Surface overlay (Oberflächen-Overlay) und geben Sie ihr den Fill-Wert (Füllwert) FFFFFF mit einer Deckkraft von 12%.
Unverankerte Aktionsschaltfläche
Als Nächstes weisen wir dem schwebenden Aktionsbutton eine neue Farbe zu. Gehen Sie dazu zurück zu den Farbpaletten, die wir uns zuvor angesehen haben, und kopieren Sie den 700-Wert der sekundären Farbe von Reply.
Optional können Sie für kleine, aber wirkungsvolle Komponenten in Ihrer eigenen App eine etwas gesättigtere Farbe auswählen, sofern sie den richtigen Kontrast zu den zugrunde liegenden Farben beibehält. Wir werden uns diese Option in einem späteren Schritt ansehen.
- Suchen Sie in der Liste der Ebenen nach der Gruppe FAB und maximieren Sie sie, um die einzelnen Teile zu sehen.
- Suchen Sie die Ebene Oberfläche und wählen Sie sie aus. Legen Sie die Füllung auf FCC13B fest.
Ausgewählte Karten
Möglicherweise sehen Sie, dass die gleiche wirkungsvolle orange-gelbe Farbe auch in der Ecke ausgewählter E-Mail-Karten im Posteingang von „Antworten“ angezeigt wird. Dies ist ein weiterer Moment mit starkem Branding, der sich aber nicht eindeutig in Komponenten, Oberflächen oder Text einordnen lässt.
In solchen Fällen ist es am besten, mit der sekundären Farbvariante (#FFFBE6) zu beginnen und rückwärts zu arbeiten, um eine Farbe zu finden, die angemessen ausdrucksstark ist, ohne die funktionale Ästhetik von Reply zu beeinträchtigen. Für „Antworten“ können wir bei unserer normalen sekundären Variante bleiben.
- Wählen Sie die Ebene Earmark aus und legen Sie die Füllung auf FFF5A0 fest.
9. Noch mehr Möglichkeiten: benutzerdefinierte Oberflächen
Wie wir bereits gelernt haben, ist die schwebende Aktionsschaltfläche (Floating Action Button, FAB) in Reply eine stark betonte Komponente, die auch einen stark gebrandeten Moment in der App darstellt. Aus diesem Grund entscheiden wir uns möglicherweise, die Farbdarstellung im dunklen Design von Reply beizubehalten, indem wir die ursprüngliche sekundäre Farbe von Reply verwenden.
- Suchen Sie in der Liste der Ebenen nach der Gruppe FAB und maximieren Sie sie, um die einzelnen Teile zu sehen.
- Suchen Sie die Ebene Oberfläche und wählen Sie sie aus. Stellen Sie die Füllung wieder auf F9AA33 ein.
Außerdem möchten wir möglicherweise die Primärfarbe von Reply als benutzerdefinierte Oberflächenfarbe für die untere App-Leiste und die E‑Mail-Karten zurückbringen. Dazu müssten wir nur das Overlay so ändern, dass die dunkle Primärfarbe verwendet wird, die in der Tonwertpalette angegeben ist, auf die wir uns beziehen.
- Suchen Sie in der Ebenenliste nach der Gruppe Untere App-Leiste und maximieren Sie sie, damit Sie die zugehörigen Ebenen sehen.
- Suchen Sie die Ebene mit dem Namen Surface overlay und geben Sie ihr einen neuen Fill-Wert von 344955 mit einer Deckkraft von 48%. So erhält die Schaltfläche eine stärkere Markenfarbe, während der Kontrast ausreichend bleibt.
- Suchen Sie in der Liste der Ebenen nach den Ebenen mit dem Namen Email card overlay und wählen Sie alle aus.
- Legen Sie für die Füllung den Wert ADC0CB mit einer Deckkraft von 4% fest.
10. Zusammenfassung
Im Material Design sind dunkle Designs eine durchdachte und bewusste Erweiterung der einzigartigen Identität Ihres Produkts, wie sie im hellen Design zum Ausdruck kommt. Durch einfache Anpassungen der Farbe und der Art und Weise, wie die Höhe dargestellt wird, haben Sie gerade Ihr erstes dunkles Material-Design erstellt. Glückwunsch!
Die Schritte in diesem Design-Lab sind als Rahmen für das Verständnis und die Definition des Dark Mode Ihres eigenen Produkts gedacht. Berücksichtigen Sie dabei immer die Eigenschaften und Ziele Ihrer Marke und Ihres Produkts.
Weitere Informationen zum dunklen Design finden Sie in der Material Design-Spezifikation für dunkle Designs.
Wenn Sie Fragen haben, können Sie uns jederzeit über @MaterialDesign auf Twitter kontaktieren.
Auf dem YouTube-Kanal von Google Design findest du weitere Designinhalte und Tutorials.