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.
Schritt 6 – Schwarz und Weiss
Was man schwarz auf weiss besitzt, kann man getrost nach Hause tragen.
Faust 1, Studierzimmer. (Schüler)
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.
Material-Design-Palette oder OpeColor 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.
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.
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
Verschiedene Farbkataloge in einem Tool
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
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
Schritt 9 – Design-Pattern
An einem kleinen Muster können wir oft das ganze Stück beurteilen.
Miguel de Cervantes-Saavedra
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
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.