Digital
Product
Design.

Icon Digital Product Design white Designsensor AG

Design System

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

Ein skalierbares Design System ermöglicht eine ausgezeichnete User Experience auf allen Geräte-Plattformen und Geräte-Typen, ist einfach und schnell erweiterbar und ist trotz all diesen Anforderungen eigenständig.

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

Teilen macht Freude

Schritt 1 – Typografie

Typografie zieht Texte an – passend zu Aussage und Anlass, mal Jeans, mal das kleine Schwarze.

John D. Berry

Design System 01 typographic scale

Die typografische Tonleiter

Um auf jedem Device resp. Bildschirmgrösse eine entsprechende visuelle Hierarchie zu erhalten, müssen wir eine Anzahl unterschiedlicher Schriftgrössen definieren. Genau wie Noten in einem Musikstück sollten die Schriftgrössen sich an bestimmte Harmonien resp. Proportionen halten. Dies hilft beim Gestalten mit Schrift einen vertikalen Rhythmus zu erhalten. Wenn Anpassungen der Schriftgrösse für unterschiedliche Darstellungen nötig sind, ist zu beachten, dass dies nicht willkürlich geschieht. Vielmehr sollten Sie darauf achten, dass das Verhältnis der Schriftgrade zueinander harmonisch bleibt. Dabei hilft es, sich an einer modularen Skala, einer Art Tonleiter, zu orientieren. Eine solche erprobte typografische Reihe ist auf der Abbildung oben zu sehen (Quelle: material.io).

Diese Grössen und Stile wurden entwickelt, um die Inhaltsdichte und den Lesekomfort unter typischen Nutzungsbedingungen auszugleichen. Schriftgrössen werden in sp (skalierbare Pixel) angegeben, um die Skalierbarkeit für eine optimale Accessibility zu unterstützen.

In einem nächste Schritt sollten Sie sich überlegen, welche Schriftgrössen Sie für die Gestaltung Ihres Produktes benötigen.

  • Default für Standardtext, der an vielen Orten im User Interface erscheinen wird.
  • Eine etwas grössere Variante für Titel und Untertitel.
  • Ein paar grössere Varianten für Überschriften.
  • Auch kleinere Varianten für Eingabehinweise, Bildlegenden, Buttons.

Auf dieser Basis lässt sich auf Basis der Skala eine Bandbreite von Schriftgraden festlegen, die je nach Bildschirmgrösse für die Überschriften genutzt werden kann. Dadurch erhält der Nutzer auf kleineren Bildschirmgrössen auch kleinere Überschriften, deren Schriftgrad nicht zu stark ansteigt und somit den Platz besser ausnutzt. Auf grösseren Bildschirmen steigen die Schriftgrade stärker an, erzeugen mehr Kontrast und nutzen so auch den grösseren Weissraum besser aus.

Was ist gute Typografie?

Gut ist immer subjektiv. Für Designer und Entwickler ist es von Vorteil, gemeinsame Nenner zu definieren, die beide Seiten verstehen können. Dieser eine gemeinsame Nenner ist der Zweck der Typografie.

Typografie ist das Aussehen des Textes. Der Zweck dieses Kleides ist es, den Träger ansprechend genug zu machen, um in ein Gespräch zu kommen mit dem Leser, aber nicht so viel Aufmerksamkeit zu bekommen, dass die andere Partei vom Gespräch abgelenkt wird. Ebenso ist der Zweck der Typografie, den Lesern die Möglichkeit zu geben, sich auf den Inhalt des Textes zu konzentrieren und bestenfalls in diesen einzutauchen. Gute Typografie, per Definition, ist Typografie, die dem Text hilft, seinen Zweck der Kommunikation zu erfüllen.

Zwei Dinge müssen passieren, damit die Leser sich konzentrieren und in den Text eintauchen können. Zuerst muss die Typografie geeignete Emotionen transportieren. Zweitens muss der Text leicht zu lesen sein. Das bringt uns zu vier wesentliche Eigenschaften, die man richtig wählen muss:

  • Schriftfamilie
  • Schriftgrösse
  • Zeilenhöhe
  • Textbreite

Die richtige Schriftfamilie hilft, die gewünschten Emotionen des Textes durchzusetzen. Die anderen drei Eigenschaften stellen sicher, dass Ihr Text einfach zu lesen ist.

Die Kunst des lesbaren Textes

Der erste Schritt in jedem Projekt ist es, die Schriftgrössen, Zeilenhöhen und Textbreiten zu definieren. Dabei sollten Sie immer mit richtigem Inhalt schaffen und nicht Lorem Ipsum Text verwenden.
Versetzen Sie sich dabei auch immer in den Nutzer und beurteilen Sie den Text auf den verschiedenen Endgeräten. Wenn Sie für ein mobiles Gerät gestalten, so beurteilen Sie die Ausgabe auf dem Telefon. Wenn Sie für einen Nutzer am Laptop gestalten, so testen Sie das Resultat an Ihrem Schreibtisch mit Ihrem Laptop.
Sobald Sie sich in der richtigen Umgebung arbeiten, starten Sie Ihre Gestaltungsarbeit, indem Sie zuerst die Schrift und die Schriftgrössen auswählen, dann die Spaltenbreite und schliesslich die Zeilenhöhe. Denken Sie daran, dass es keine perfekte Kombination gibt – schauen Sie sich auch anderen Seiten an, die Sie aufgrund guter Typografie schätzen und Sie werden sehen, dass keiner von ihnen die gleichen Schriften, Grössen, Zeilenhöhe und Spaltenbreiten nutzt.

Hier sind einige einfache Richtlinien, die Ihnen bei dieser Arbeit helfen können:

Die Schrift ist zu klein, wenn

  • Sie resp. die Nutzer sich konzentrieren müssen, um den Text lesen zu können
  • Sie das Bedürfnis haben, den Text zu vergrössern

Die Schrift ist zu gross, wenn

  • Sie anfangen, Buchstabenform zu lesen, anstatt den Inhalt
  • Sie nur ein bis drei Worte in einem Schritt lesen können
  • Sie das Bedürfnis haben, den Text zu verkleinern

Die Spaltenbreiten sind zu gross, wenn

  • Sie den Kopf drehen müssen, um den Text zu lesen
  • Sie die Konzentration auf halbem Weg zum Spaltenende verlieren

Die Spaltenbreite ist zu kurz, wenn

  • Sie sich irritiert fühlen, wenn der Text schon wieder in die nächste Zeile umbricht
  • Ihre Augen müde werden vom schnellen links und rechts bewegen beim Lesen

Die Zeilenhöhe ist zu eng, wenn

  • Der Text sich dicht und kompakt anfühlt resp. wirkt
  • Sie immer mal wieder die falsche Zeile des Textes lesen

Die Zeilenhöhe ist zu gross, wenn

  • Sie werden durch den Weissraum zwischen den Zeilen der Wörter abgelenkt werden
Aktuelle Trends

In diversen Studien werden regelmässig Newsportale, Magazine und Blogs analysiert und unter anderem folgenden Fragen Beachtung geschenkt:
Wie gross sind die Schriften im Fliesstext? Wie gross sind die Fonts auf den mobilen Geräten? Wie wird „font-weight“ oder „spacing“ verwendet? Google bietet unter fonts.google.com ebenfalls Informationen zur Nutzung ihrer Schriften.

Aktuell können folgende Trends festgestellt werden:

  • Die häufigste Schriftgrösse für Überschriften beträgt zwischen 29 und 32 Pixel
  • Die häufigste Schriftgrösse für Fliesstext beträgt zwischen 14 und 16 Pixel.
Einfache Werkzeuge für erste Typotest im Browser
Beachten Sie bei dieser Arbeit die Besonderheit bei mobilen Geräten. Aufgrund der meist noch höheren Auflösung im Vergleich zu Desktop-Bildschirmen kann die physische Schriftgrösse entsprechend abweichen. Es is ratsam, die Typokonzepte auf den Geräten zu testen.

Schritt 2 – Rastersystem

Rastersysteme sind unsichtbare Helfer, die das Fundament für das Screen-Layout bilden.

Design System 02 gridsystem 01
Design System 02 gridsystem cash 00

Die Vorgehensweise, zu gestaltende Elemente in einem Raster zu unterteilen, ist nicht neu. Besonders in der Kunst und Architektur wird diese Technik seit langer Zeit genutzt. Moderne Rastersysteme wurden in den 1950er Jahren von den Grafikdesignern und Typografen der Schweizer Typografie entwickelt. Im Grafikdesign sind Bücher von Josef Müller-Brockmann oder Karl Gerstner längst zu Klassikern geworden.

Die Ausgangsbasis für ein Raster ist ein leerer Gestaltungsbereich – egal ob dies ein Blatt oder ein Browser-Fenster ist. Um diesen Bereich wird im ersten Schritt ein Rahmen mit einer gewissen Breite definiert. Im nächsten Schritt unterteilt man die Fläche in vertikale Spalten. Zwischen den einzelnen Spalten bestimmt man einen immer gleichgrossen Freiraum (Steg). Die Spalten des Rasters sind hier hellrot markiert, die Stege bleiben weiss.

Für diese Spalten verwendet man im Design die englische Bezeichnung columns. Der Bereich zwischen den einzelnen Spalten nennt sich gutter.
Je mehr Spalten das Raster aufweist, desto flexibler wird das Raster. Die Inhalte des Interfaces werden später innerhalb des Rasters verteilt. Ein Bild auf der Webseite kann so zum Beispiel über die Breite von 9 Spalten zu liegen kommen.

Das Baseline Grid

In weiteren Schritt kann man noch die horizontalen Unterteilungen zum Spaltenraster hinzufügen. Die Grundlage für die horizontale Unterteilung bildet das Baseline Grid. Diese horizontalen Basislinien setzten sich traditionell aus der Schriftgrösse (font-size) und dem Zeilenabstand (line-height) des Standard-Fliesstextes zusammen.

Design System 02 gridsystem 03

Von dem Baseline Grid ausgehend kann man nun noch weitere horizontale Unterteilungen schaffen. So können zum Beispiel mehrere Zeilen des Baseline Grids zusammengefasst werden, diese können dann einen einfachen Zwischenraum bilden. Auf diese Weise ensteht ein Modulsystem, das auch als Modulares Rastersystem (Modular Grid System) bezeichnet wird. Wie Sie sicher schon bemerkt haben, kann ein Rastersystem sehr einfach oder auch sehr komplex sein. Welcher Ansatz gewählt wird kommt immer auf die späteren Inhalte an. Daher sollten Sie sich vor Projektbeginn eine genaue Übersicht über die benötigten Inhalte wie Texte, Bilder, Icons, Navigationselemente, Buttons, Tabellen etc. machen. In den meisten Fällen ist es erfahrungsgemäss sinnvoll, ein Raster als Grundlage zu definieren und dieses je nach Umfang der Webseite grober oder feiner festzulegen.

Empfehlungen zum Umgang mit Spalten im Verhältnis zur Bildschirmbreite

https://material.io/guidelines/layout/responsive-ui.html#

Resizer – zum Testen der Breakpoints auf Desktop, Tablet und Mobile Devices

https://material.io/resizer/

Schritt 3 – Proportionen

Eleganz ist das Gleichgewicht von Proportion, Emotion und Überraschung.

Valentino
Design System 03 Proportionen apple 01

Unter Proportionen versteht man das Verhältnis eines Teilelements zum Ganzen, etwa das Verhältnis von einem Textblock zur gesamten Bildschirmseite. Proportionen sind nützlich zur Gestaltung eines ausgewogenen Layouts, da sie die Grössenverhältnisse der verschiedenen Designelemente definieren, etwa ihre relative Grösse und die Abstände.

Proportionen spielen auch im Interface Design eine zentrale Rolle. Sie geben Antworten auf folgende Fragen:

  • In welchem Verhältnis stehen grosse zu kleinen Interaktions-Elementen?
  • In welcher Proportion sollten zwei aufeinandertreffende Elemente stehen?
  • Welche Linienführung hält das Auge für ästhetisch?

Es gibt unzählige Arten von Proportionen. Grundsätzlich lässt sich sagen, dass zwischen zwei veränderlichen Grössen Proportionalität besteht, wenn sie immer in demselben Verhältnis zueinander stehen.

Die Fibonacci-Folge beispielsweise ist die unendliche Folge von natürlichen Zahlen, die zweimal mit der Zahl 1 beginnt. Von der zweiten Stelle an ist jedes Glied der Folge gleich der Summe der beiden vorhergehenden. Die darin enthaltenen Zahlen werden als Fibonacci-Zahlen bezeichnet, benannt nach dem italienischen Mathematiker Leonardo Fibonacci (um 1170–1240), der damit im Jahr 1202 das Wachstum einer Kaninchenpopulation beschrieb.

0,1,1,2,3,5,8,13,21,34,55,89 …

Je weiter man der Fibonacci-Folge folgt, desto mehr nähert sich der Quotient aufeinanderfolgender Zahlen dem Goldenen Schnitt (1,6180339887) an.

Die Norm für ästhetische Linienführung und Proportionen ist der sogenannte „goldene Schnitt“.

Der goldene Schnitt
  • Ist ein als harmonisch empfundenes Proportionsmass
  • Ist mathematisch berechenbar
  • Kommt sehr oft in der Natur vor und wird auch als „göttliche Teilung“ bezeichnet

Der goldene Schnitt ist der Punkt, an dem das Verhältnis der gesamten Strecke zum grösseren Abschnitt gleich dem Verhältnis des grösseren zum kleineren Abschnitt ist.

Ein Beispiel für den goldenen Schnitt ist die Lamésche Zahlenreihe. Hierbei entsprechen die beiden vorangegangen Zahlen immer der nachgehenden Zahl:
1,2,3,5,8,13,21,34,55,89 …

Üblich ist auch die Angabe des goldenes Schnittes im Zahlenverhältnis: 1 : 1,618

Das Sonderbare am goldenen Schnitt ist, dass auch er in der Natur übermässig oft vorkommt. Im menschlichen Körper, in den unterschiedlichsten Pflanzenarten, bei verschiedensten Tieren, bei Schneckenhäusern, in der Architektur und sogar bei schwarzen Löchern, finden sich die Verhältnisse gemäss dem goldenen Schnitt wieder.

Definieren Sie die passenden Proportionen frühzeitig und setzen Sie diese ein, um z.B. den Mengenanteil von Farben im Design, die Abstufungen der Schriftgrössen, die Grössenverhältnisse von Icon-Bestandteilen oder auch die Screen-Komposition zu definieren.

Der goldene Schnitt in der praktischen Anwendung

Der Goldene Schnitt am Apple-Logo

Design System 03 Proportionen apple 06 Design System 03 Proportionen apple 08
Design System 03 Proportionen apple 07 Design System 03 Proportionen apple 09
Der goldene Schnitt in der praktischen Anwendung

Der Goldene Schnitt in der Apple-Website

Design System 03 Proportionen apple 02
Der goldene Schnitt in der praktischen Anwendung

Der Goldene Schnitt in Apple-Icons

Design System 03 Proportionen apple 04
Der goldene Schnitt in der praktischen Anwendung

Der Goldene Schnitt in Apple-Icons

Schritt 4 – Der Raum und die Zeit

Die Zeit ist Bewegung im Raum.

Joseph Joubert
Design System 04 x-, y-, z-Achse
Der Raum

Viele Design Systeme simulieren einen dreidimensionalen Raum, in welchem alle Objekte eine x, y und z-Dimension haben und sich auf der x-Achse, y-Achse und z-Achse des Raumes befinden. Die z-Achse ist senkrecht zur Ebene des Displays ausgerichtet, wobei sich die positive z-Achse zum Betrachter hin erstreckt. Bei Googles Material Design nimmt jede Materialbahn eine einzelne Position entlang der z-Achse ein und hat eine Standarddicke von 1dp, was einem Pixel des Bildschirms mit einer Pixeldichte von 160 entspricht .
Die z-Achse wird dabei für die Schichtung und nicht für die Perspektive verwendet. Die «3D-Welt» wird durch die Manipulation der y-Achse emuliert.

Das Licht kommt vom Himmel – fast immer

Wenn Licht vom Himmel kommt, dann beleuchtet es die Oberseite der Dinge und wirft Schatten darunter.

Das gleiche gilt für ein User Interface. Genauso wie es Schatten auf allen Unterseiten unserer Gesichtszüge gibt, so findet man diese auch auf Unterseiten aller User Interface-Elemente. Bildschirme sind flach, aber die Designer haben viel Arbeit darauf verwendet, alles darauf dreidimensional wirken zu lassen.

Innerhalb der dieser Umgebung beleuchten virtuelle Lichter die Szenen. Hauptlichter schaffen Richtungsschatten, während das Umgebungslicht weiche Schatten aus allen Winkeln erzeugt. Alle Schatten werden von diesen beiden Lichtquellen definiert. In der Welt des Material Designs treten Schatten auf, wenn Lichtquellen durch Blätter an verschiedenen Positionen entlang der z-Achse blockiert werden. In Web-Anwendungen werden Schatten durch die Manipulation der y-Achse dargestellt.
Das folgende Beispiel zeigt die Karte mit einer Höhe von 6dp in unterschiedlichen Lichtsituationen.

Design System 04 Umgebungslicht 02

Umgebungslicht

Design System 04 Hauptlicht 01

Hauptlicht

Design System 04 Hauptlicht Umgebungslicht 03

Hauptlicht und Umgebungslicht

In den Apple iOS Human Interface Guidelines wird der Umgang mit Raum als eines der primären Unterscheidungsmerkmale zu anderen Plattformen erwähnt. Ausgeprägte visuelle Schichten und realistische Bewegung vermitteln Hierarchie, vermitteln Vitalität und erleichtern das Verständnis. Berührung und Erkennbarkeit erhöhen die Freude und ermöglichen den Zugriff auf Funktionalität und zusätzlichen Inhalt, ohne den Kontext zu verlieren. Übergänge bieten ein Gefühl der Tiefe, wie der Nutzer durch den Inhalt navigiert.

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

Zum Beispiel bezogen auf Schaltflächen findet man eine Menge lichtbezogene Details:

  1. Die nicht gedrückte Schaltfäche hat eine dunkle untere Ecke. Die Sonne scheint hier nicht hin.
  2. Die nicht gedrückte Schaltfläche ist oben ein wenig heller als unten. Das kommt daher, dass hier eine leicht gewölbte Oberfläche imitiert wird.
  3. Die nicht gedrückte Schaltfläche wirft einen leichten Schatten
  4. Die gedrückte Schaltfläche, die immer noch unten dunkler als oben ist, ist insgesamt dunkler – das kommt daher, dass sie sich auf einer Ebene mit dem Bildschirm befindet und die Sonne sie nicht so leicht treffen kann.

Google hat dies im Material Design auf eine eigene Weise umgesetzt …

Design System 04 components buttons main 15
Die Zeit ist die Bewegung im Raum

Auch das Verhalten der User Interface Elemente in Bezug auf Bewegung und Reaktionsfähigkeit wird in diesem Schritt definiert.
Google gibt im Material Design System vor, dass sich alle Elemente und Komponente reaktionsfähig und natürlich verhalten sollen.
Zudem sollen Animationen schnell sein, so dass der Nutzer nicht darauf warten muss.

Alle Vorgaben zum Thema Zeit und Bewegung im Raum finden Sie hier:
https://material.io/guidelines/motion/duration-easing.html#duration-easing-speed

Schritt 5 – Abstände

Ziel der Wissenschaft ist es immer gewesen, die Komplexität der Welt auf simple Regeln zu reduzieren.

Benoît Mandelbrot
Design System 05 Abstände 01

In diesem fünften Schritt müssen alle Abstände im Raum so definiert werden, dass sich diese natürlich anfühlen und der Bezug der Objekte untereinander und in Bezug auf den Raum stimmen. Hier spielen die Gestaltgesetze eine zentrale Rolle. Ohne Beachtung dieser Regeln kann es leicht passieren, dass zusammengehöriger Inhalt nicht als solcher erkannt wird und sich die Benutzer nicht orientieren können.
Stellen Sie einfache Regeln auf, die einfach adaptiert werden können. Definieren Sie die «Materialeigenschaften» der Interface Elemente und deren Position auf der z-Achse – diese Definition hilft Ihnen anschliessend, den Farbeinsatz, die Lichtführung und die Schattenwürfe einfach zu planen.
Nutzen Sie dazu auch wieder die Proportionen, die Sie in Punkt 4 festgelegt haben.

Design System 05 Abstände 02

Besonders im Flat Design, bei welchem auf eine realistische Darstellung von Texturen, Verzierungen, Schlagschatten und dreidimensionalen Elementen gänzlich verzichtet wird, sind klare Regeln unabdingbar. Die Reduktion der Gestaltung auf das Wesentliche wird dann oft mittels Einsatz von intensiven und weniger intensiven Farben wettgemacht.

Weitere Infos zum Thema Abstände im Raum am Beispiel Material Design

https://material.io/guidelines/material-design/material-properties.html

Schritt 6 bis 10

In den nächsten fünf Schritten erläutern wir, wie der Umgang mit Farbe, die Umsetzung einer Komponentenbibliothek und Design-Pattern helfen können, strukturiert und gut organisiert das finale Design in Angriff nehmen zu können.

Design System 2

Design System 2
Nächster Beitrag