Digital
Product
Design.

Icon Digital Product Design white Designsensor AG

Design System

In 10 Schritten zum konsistenten Design System für Digitale Produkte.
(Teil 2 von 2)

Ein konsistentes, ansprechendes und funktionales Design System basiert auf unzähligen Vorarbeiten und Teilen wie Produktvision, Nutzergruppen, Branding, UX-Writing, Designsprache, Interaction Design, Screen Architektur – um nur ein paar zu nennen. Ein Design System ist mehr als ein Framework, UI Toolkit oder eine Komponenten Library – es ist ein Regelwerk, um ein Digitales Produkt gezielt entwickeln zu können.

Bevor wir mit der effektiven Gestaltung des Digitalen Produktes starten können, sollten mindestens die folgenden 10 Punkte definiert sein. Sobald diese definiert sind, können diese Einzelteile in eine zusammenhängende Sprache umgesetzt werden.

Teilen macht Freude

Schritt 6 – Schwarz und Weiss

Was man schwarz auf weiss besitzt, kann man getrost nach Hause tragen.

Faust 1, Studierzimmer. (Schüler)
Design System 06 black white 02 Design System 06 black white 01

In Graustufen zu gestalten vereinfacht die komplexesten Arbeiten des Visuellen Designs und zwingt Sie dazu, dass Sie sich auf das Verteilen und Layouten der Elemente konzentrieren, bevor Sie Farben hinzufügen. Diese Einschränkung ist gut. Man setzt sich zuerst mit den schwierigeren Themen auseinander. Gestalten Sie zuerst in Schwarz und Weiss. Beginnen Sie mit der schwierigen Aufgabe, das Produkt schön und rundum benutzbar zu machen, aber ohne die Hilfe von Farbe. Fügen Sie Farben erst am Ende hinzu und auch dann nur zweckgebunden! Schwarz-Weiss zwingt Sie dazu, sich zuerst auf Themen wie Abstände, Grössen und Layout zu konzentrieren.

Schritt 7 – Farbklima

Es ist heilsam, sich mit farbigen Dingen zu umgeben. Was das Auge freut, erfrischt den Geist, und was den Geist erfrischt, erfrischt den Körper.

Prentice Mulford (1834 – 1891), US-amerikanischer Journalist, Erzieher, Goldgräber und Warenhausbesitzer
Branding

Farbe ist eines der wichtigsten Elemente Ihrer Markenidentität. Denken Sie nur an das Blau in Facebook oder das Schwarz-Weiss-Thema mit Petrol von UBER. Wenn Sie ein starkes Farbklima für Ihr Produkt entwickelt haben, bleiben Sie dabei. Material Design beispielsweise bietet einen einfachen, intelligenten Ansatz, harmonische Farbkonzepte zu erstellen, unabhängig davon, ob Sie eine vorgegebene Palette verwenden oder Ihr eigenes Farbkonzept anwenden.

Erste Schritte zum passenden Farbkonzept

Denken Sie an Ihre Marke. Bevor Sie anfangen, Farben zu definieren, sollten Sie sich Gedanken zur Identität Ihres Produktes machen.
Dabei können folgende Fragen dienen:

  • Die Geschichte des Unternehmens resp. des Produkts
  • Was ist die Ursprungsgeschichte?
  • Warum wurde das Produkt entwickelt?
  • Was macht Ihre Marke anders als die Konkurrenz?
  • Was bieten Sie an?
  • Denken Sie wieder an Ihren Elevator Pitch oder die Produkt Tweets.
Ihre (Produkt) Vision
  • Welche Ziele haben Sie für Ihre Marke?
  • Wo möchten Sie in 5-10 Jahren stehen?
  • Stellen Sie sich vor, dass Ihre Marke klein bleibt oder mit starken Mitbewerbern konkurriert?
Nutzen-/Wertversprechen
  • Welchen Wert hat Ihr Unternehmen, oder welches Problem lösen Sie mit Ihrem Produkt?
  • Welche Gefühle möchten Sie wecken?
Persönlichkeit + Stimme
  • Denken Sie sich Ihre Marke als Person.
  • Welche beschreibenden Worte würden Sie benutzen, um sie zu beschreiben (warm, optimistisch, anspruchsvoll usw.)?
  • Wie drücken Sie sich aus?
  • Diese Art von Gedankenexperiment hilft, die Stimme und den Ton Ihres Unternehmens oder Produkts zu definieren.
Storytelling Identity
  • Welche Farben fühlen Sie sich am besten an für Ihre Marke oder Ihr Produkt?
  • Welche Texturen passen?
  • Wenn Ihre Marke eine Ära wäre, was für eine Ära wäre es?
  • Diese abstrakten Überlegungen helfen, die richtige Ansätze zu finden und können hilfreich sein, um die Nuancen Ihrer Marke zu verstehen.
Emotionale Essenz
  • Wie sollen sich Ihre Kunden resp. die Nutzer fühlen, wenn sie sich mit Ihrer Marke resp. Ihrem Produkt beschäftigen?
  • Identifizieren Sie Attribute, die Ihre Marke / Ihr Produkt von Ihren Mitbewerbern unterscheidet.

Lassen Sie sich auch inspirieren. Denken Sie an Künstler, Kunstwerke, sogar Orte, deren Farbpaletten Sie begeistern. Johannes Itten, Picasso, Monet … Erstellen Sie Moodboards, nutzen Sie Pinterest als Inspirationsquelle und sammeln Sie alles, was Sie bezüglich Farben inspiriert.

Analysieren Sie Websites oder Digital Produkte und überlegen Sie sich, welche Farben zum Einsatz kommen, welche Aufgaben diese Farben haben und in welcher Menge diese eingesetzt werden.

Design System 07 color 03
Design System 07 color 04
Design System 07 color 01
Design System 07 color 02
Design System 07 color 05
Design System 07 color 06
Material-Design-Palette

Die Material-Design-Palette beginnt mit den primären 500er-Werten und skaliert von hell bis dunkel und bietet eine Vielzahl von sorgfältig gewählten Abstufungen. Die 500er-Werte sind perfekt für die dominierenden Farben Ihrer Marke und sind ideal für grossflächigen Farbeinsatz im Interface wie Hintergründe und Status Bars. Von diesen Farbwerten aus können Sie ergänzende Farbwerte wählen, die bis zu 700 für Systemleisten skaliert oder bis zu 300 für sekundäre Informationen. Akzentfarben sind heller und gesättigt. Sie aktivieren Benutzerinteraktionen, indem sie auf dem Bildschirm stärker wirken und mit dem Rest der Palette kontrastieren. Sie sind perfekt für Buttons, Schalter und Schiebregler.

Sie können dieses System ganz einfach mit Ihrer eigenen Markenfarbe verwenden und die verschiedenen Elemente der Benutzeroberfläche anpassen, wenn diese dunkler oder leichter wirken sollen, basierend auf derer Bedeutung oder Einsatz.

Design System 07 color 10

Wichtig bei dieser Arbeit ist, dass Sie auch immer das Thema Accessibility im Hinterkopf behalten. Google bietet mit dem Color Tool die Möglichkeit, dies fortlaufend zu testen, den Color Contrast Checker können Sie für die Prüfung Ihrer eigenen Farbkonzepte nutzen.

Design System 07 color 07
Design System 07 color 08

Tools für und Farbpalettengeneratoren

Konzeption

https://color.adobe.com/de/create/color-wheel/

Material Design Farben

Material Palette
https://www.materialpalette.com

Unter www.materialpalette wählt man in einem ersten Schritt die Hauptfarbe, dann die Akzent-Farbe und kann anschliessend in der Vorschau die Wirkung im App-Design beurteilen. Zusätzlich werden die Werte für die Farbabstufungen und Textfarben angezeigt. Die Farbpalette kann man in verschiedenen Formaten (CSS, SVG, PNG,…) runterladen oder die einzelnen Farbwerte in die Zwischenablage kopieren.

 

Usability

Googles Color Tool

https://material.io/color/#!/?view.left=0&view.right=0

http://contrastchecker.com/

 

Verschiedene Farbkataloge in einem Tool

https://www.materialui.co

Dieses Tool bietet neben einer Farbtafel auch einen Paletten Generator. Die Farbwerte lassen sich in die Zwischenablage kopieren.
Die Webseite bietet weitere nützliche Tools wie Material Design Icons, Flat UI Colors und Social Colors.

 

Inspiration für das eigene Farbkonzept

https://color.adobe.com/de/explore/?filter=newest

https://colorfulgradients.tumblr.com/

http://www.vanschneider.com/colors/

 

Schritt 8 – Design-Komponenten

Systeme sind komplex. Sie in Einzelteile zu zerlegen oder aus Einzelteilen ein sinnvolles System zusammenzufügen, kann kompliziert sein.

Georg Wilhelm Exler
Design System 08 components 01

Nun ist es an der Zeit, alle in Schritt 1 bis 8 definierten Bausteine in die benötigten Komponente umzusetzen. Dabei sollten nur die definierten Stile von Punkt 1 bis 8 zum Einsatz kommen – der (visuelle) kreative Prozess ist während der Style-Palette Design Phase passiert und nun abgeschlossen.
Von nun geht es nur noch darum, Farben, Schriftgrössen, Icons, Konturen, Proportionen etc. aus der Stilpalette zu verwenden und neu zu kombinieren.
Abhängig vom System oder Framework, das zum Einsatz kommt oder der Plattform, die bedient werden soll, können Sie sich bei den jeweiligen Anbietern zur Struktur und Benennung der Komponenten informieren.

Beispiele

Google
https://material.io/

Apple
https://developer.apple.com/library/content

Windows
https://developer.microsoft.com/en-us/windows/apps/design

IBM
https://www.ibm.com/design/language/

Schritt 9 – Design-Pattern

An einem kleinen Muster können wir oft das ganze Stück beurteilen.

Miguel de Cervantes-Saavedra
Design System 09 pattern 02
Design System 09 pattern 01

Design Pattern (Entwurfsmuster) sind bewährte Lösungswege für wiederkehrende Designprobleme. Durch den Einsatz von Design Pattern wird ein Entwurf flexibel, wiederverwendbar, erweiterbar, einfacher zu verwenden und änderungsstabil. Bezeichnend für einen Design Pattern ist dessen Ungebundenheit an ein spezielles Framework.

Viele bekannten Entwurfsmuster wurden nicht von einem Tag auf den anderen entwickelt, sondern sind die Ergebnisse langwieriger Findungsprozesse. Wer einen grossen Schatz an gängigen, plattformübergreifenden Design Patterns sein eigen nennt und diese gezielt einsetzen kann, spart viel Zeit bei der Konzeption.

Ein Design-Pattern kann aus verschiedenen Komponenten bestehen und durch weitere Elemente wie Verhaltensmuster, Animation, Platzierung im Raum etc. definiert werden.

Programme wie Sketch erlauben uns Designer, ein Design System nach den in Schritt 1 bis 10 beschriebenen Vorgehensweisen aufzubauen.

Schritt 10 – Screen-Pattern

Form folgt Funktion – das ist oft missverstanden worden. Form und Funktion sollten Eins sein, verbunden in einer spirituellen Einheit.

Frank Lloyd Wright, Architekt
Design System 10 screen-pattern 02
Design System 10 screen-pattern 01

Auf der Basis der in Schritt 1 bis 9 definierten Vorarbeiten können nun die Screen-Typen definiert werden. Auch hier ist es für die spätere Nutzung hilfreich, wenn so wenig Screen-Pattern wie nötig definiert werden. Die wenigen Ausprägungen helfen dem Nutzer, sich rasch in einer Anwendung zurecht zu finden.

Eine bewährte Vorgehensweise ist, den in Punkt 4 definierten Raum als Basis zu nehmen und festzulegen, in welchen Bereichen welche Design-Pattern immer präsent sind und welche abhängig vom Inhalt dazu gewählt werden können. So können beispielsweise bestimmte UI-Regionen immer durch eine Navigation, eine Toolbar oder einer Bottom Bar belegt sein, so dass diese Bereiche für keine anderen Pattern oder Elemente verwendet werden können. Der restliche Raum wird dann – abhängig vom Kontext – mit unterschiedlichen Pattern bespielt.

Wichtig bei dieser Arbeit ist, dass alle Definitionen für alle Endgeräte gleichzeitig festgehalten werden, abhängig vom späteren Einsatzzweck.

Weitere Infos zum Thema Screen-Pattern am Beispiel Material Design

https://material.io/guidelines/layout/structure.html