- Man muss sie nicht zwingend befolgen, aber diese Regeln lassen sich jederzeit bedenkenlos so anwenden
Statt reinem Schwarz/Weiß Farben verwenden, die nahe an Schwarz und Weiß liegen
- Reines Schwarz wirkt auf Bildschirmen unnatürlich, reines Weiß ist zu hell
- Statt #000000 und #FFFFFF lieber #222222 und #F2F2F2 verwenden
- Wenn im Folgenden von Schwarz/Weiß die Rede ist, sind diese Farben gemeint
Neutrale Farben einfärben
- Neutrale Farben sind normalerweise Schwarz/Weiß/Grau
- Wenn man Farbe verwendet, den neutralen Farben nur leicht Farbe hinzufügen (
light red statt grey, dark blue statt black)
- Dadurch wirkt die Farbpalette konsistenter
- Bei Verwendung von HSB reicht es, eine Sättigung von etwa 5 % oder weniger hinzuzufügen
Für wichtige Elemente hohen Kontrast verwenden
- Für alle Elemente, auf die Nutzer achten sollen: Buttons, Inhalte usw.
- Trennlinien, Drop Shadows usw. sollten möglichst wenig Kontrast verwenden
Jedes Element im Design sollte bewusst gewählt sein
- Einschließlich Leerraum, Ausrichtung, Größe, Abstand, Farbe und Schatten
- Wenn jemand nach einem bestimmten Teil des Designs fragt, sollte man erklären können, warum er so gestaltet wurde
Oft ist optische Ausrichtung besser als mathematische Ausrichtung
- Manche Formen wirken besser, wenn sie für das Auge ausgerichtet sind
- Für optische Ausrichtung braucht man Übung, aber wenn man es regelmäßig macht, entwickelt man schnell ein Gefühl dafür
Bei großen Schriften Buchstabenabstand und Zeilenhöhe reduzieren, bei kleinen erhöhen
- Gilt für jeden Text
- Je größer der Text, desto weniger zusätzlicher Raum zwischen Buchstaben und Zeilen ist nötig. Umgekehrt genauso
Der Rand eines Containers sollte sich sowohl vom Container als auch vom Hintergrund abheben
- Der Rand sollte nicht zwischen dem Inneren des Containers und der Hintergrundfarbe liegen, sondern dunkler als der Hintergrund sein
Alles sollte an etwas anderem ausgerichtet sein
- Ausrichtung signalisiert, dass Dinge zueinander gehören
- Wenn etwas nicht an etwas anderem ausgerichtet ist, wirkt es so, als gehöre es nicht zum Design
- Idealerweise sollte jedes Element nach einer Art Logik an anderen Elementen ausgerichtet sein
Farben in der Palette sollten jeweils einen eigenen Helligkeitswert haben
- Wenn Farben unterschiedliche Helligkeitswerte haben, bekommen sie nicht nur über den Farbton, sondern auch über die Helligkeit einen eigenen Look-and-Feel
- Dadurch wird die Farbpalette besser, weil die einzelnen Farben weniger stark miteinander konkurrieren
Wenn man neutrale Farben einfärbt, nur Warm oder Cool verwenden, nicht beides
- Wenn warme und kühle Töne zusammen für neutrale Farben genutzt werden, wirkt die Farbpalette nicht konsistent
Größen sollten mathematisch miteinander zusammenhängen
- Abstände oder Größen von Elementen sollten durch eine Art Skalierung bestimmt werden. Das hilft, das Design konsistent wirken zu lassen
- Im Beispiel werden alle Elemente als Vielfache von 8 verwendet. Abstände sind 8/16/24/32, Zeilenhöhen 48/40/24, Textgrößen 40/32/16
Elemente sollten in der Reihenfolge ihres visuellen Gewichts angeordnet werden
- Wenn in einer Zeile oder Spalte mehrere Elemente stehen und einige visuell schwerer sind als andere (z. B. 2 Buttons und 3 Links),
sollte das visuell schwerste Element zuerst kommen und die leichteren der Reihenfolge nach zuletzt
- Wichtig ist, dass das visuell schwerste Element außen stehen sollte
Bei Verwendung eines horizontalen Grids 12 Spalten nutzen
- Wenn man in Spalten unterteilt, bieten 12 Spalten viel Flexibilität, weil sich 1, 2, 3 und 4 Spalten gut verwenden lassen
Zwischen Punkten mit hohem Kontrast Abstand lassen
- Unsere Augen finden die Kanten von Elementen anhand von Kontrast, daher erwarten wir zwischen kontrastreichen Punkten Abstand
Näher liegende Elemente sollten heller sein
- Je näher Elemente auf dem Bildschirm dem Nutzer erscheinen (je weiter vorne sie sind), desto heller sollten sie sein
- Das gilt auch für Light/Dark Mode, weil die reale Welt so funktioniert
Den Blur-Wert von Drop Shadows auf das Doppelte des Abstands setzen
- Wenn ein Schatten auf der Y-Achse 4 Pixel nach unten versetzt ist, sollte der Blur-Wert 8 Pixel betragen
- Wenn ein Element dem Betrachter „näher kommt“, ist es auch gut, die Opazität des Schattens zu verringern
Etwas Einfaches auf etwas Komplexes setzen oder etwas Komplexes auf etwas Einfaches
- Ein komplexer Hintergrund (ein auffälliger Verlauf) funktioniert am besten, wenn der Vordergrund (Text) einfach ist
- Wenn der Vordergrund komplex ist, passt ein einfacher Hintergrund am besten
- Einfach auf einfach ist zwar möglich, wirkt aber schnell langweilig
- Komplex auf komplex sollte vermieden werden, weil es visuelle Unruhe erzeugt
Container-Farben innerhalb von Helligkeitsgrenzen halten
- Der Helligkeitsunterschied zwischen Hintergrund und Container sollte in dunklen Interfaces höchstens 12 % und in hellen Interfaces höchstens 7 % betragen (gemessen als Helligkeitswert im HSB-Farbsystem)
- Das stammt aus einer Untersuchung von rund 100 gut gestalteten Websites, bei der die Helligkeit von Containern mit ihrem Hintergrund verglichen wurde
Außenabstand gleich groß oder größer als Innenabstand machen
- Der Innenabstand eines Containers ist der Raum zwischen Elementen im Container. Der Außenabstand ist der Raum zwischen Elementen und dem Rand des Containers
- Der Außenabstand sollte gleich groß oder größer als der Innenabstand sein
Fließtext bei mindestens 16px halten
- 16px ist in den meisten Browsern die Standard-Textgröße
- Text unterhalb dieser Größe ist schwer zu lesen, daher ist es sicherer, ihn nicht für Fließtext zu verwenden
Eine Zeilenlänge von etwa 70 Zeichen verwenden
- Ob die Zeilenlänge 60 oder 80 beträgt, ist nicht so wichtig, aber wenn man zu weit in eine Richtung geht, kann die Lesbarkeit leiden
Den horizontalen Innenabstand von Buttons doppelt so groß wie den vertikalen setzen
- Das Standardmuster für Buttons ist breiter als hoch
- Damit Menschen etwas als Button erkennen, ist es gut, diesem Muster zu folgen
Maximal 2 Schriftarten verwenden
- Die zweite Schriftart ist eine Chance, das Konzept hinter dem Design zu verstärken
- Sie hilft außerdem, dem Design mehr Vielfalt zu geben
- Mehr als zwei sind fast nie nötig und können das Design visuell unruhig wirken lassen
Verschachtelte Ecken korrekt behandeln
- Manchmal überlagern sich zwei oder mehr abgerundete Ecken
- Damit es richtig aussieht, sollte der innere Eckradius auf den äußeren Eckradius minus den Abstand zwischen beiden gesetzt werden
- Beispiel: Wenn der äußere Eckradius 30px beträgt und die innere Ecke 20px davon entfernt ist, sollte der innere Eckradius 10px sein
Nie zwei Trennlinien direkt zusammen platzieren
- Hintergrundübergänge, Containerkanten und Separatoren lassen sich visuell schwer voneinander unterscheiden
- Deshalb sollten nicht zwei oder mehr Trennlinien direkt aneinander liegen
6 Kommentare
@xguru
Ich nutze für eine bessere Lesbarkeit von GeekNews das folgende Styling. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper
Vielen Dank.
Das ist wirklich gut … Design war für mich immer ein Thema, aber mit solchen Leitfäden ließe sich die Produktivität deutlich steigern.
Danke für die Übersetzung! Das hat mir sehr geholfen.
Wirklich großartig!
@xguru
Ich möchte auf eine Fehlübersetzung hinweisen.
"Näheres liegende Elemente sollten leichter sein" -> "Näher liegende Elemente sollten heller sein"
Ah, genau. Danke~!