Grundlagen der Gestaltung

Gutes Interface-Design ist weniger Talent, als man denkt. Fünf Prinzipien tragen schon sehr weit:

1. Hierarchie: Das Wichtige fällt zuerst auf.
2. Typografie: Text ist gut lesbar.
3. Kontrast: Inhalte sind für alle erkennbar.
4. Weißraum: Abstände gliedern die Seite.
5. Raster: Elemente richten sich aneinander aus.

Alle fünf dienen einem gemeinsamen Ziel, der Nutzerführung: Menschen sollen sich auf einer Seite zurechtfinden. Darum steht sie am Ende dieses Kapitels und nicht als sechster Punkt in der Reihe.

In den nächsten Tagen setzen wir die Prinzipien mit CSS um, hier geht es nur um das Warum.

Was du am Ende kannst

• die fünf Prinzipien benennen und an einer echten Seite erkennen
• Kontrast mit den DevTools prüfen
• begründen, warum eine Oberfläche gut oder schlecht führt, und das auf die Prinzipien zurückführen

Prinzip 1: Hierarchie

Das Wichtige fällt zuerst auf. Das Auge braucht eine Reihenfolge. Größe, Gewicht, Farbe und Abstand zeigen sie an. Beide Fassungen unten enthalten denselben Text:

Gleicher Text, oben ohne, unten mit Hierarchie

Eine Probe: Kneif die Augen zusammen. Was jetzt noch auffällt, ist das, was die Seite für wichtig hält. Ist es auch das, was du für wichtig hältst?

Prinzip 2: Typografie

Text ist gut lesbar. Die meisten Oberflächen bestehen überwiegend aus Text.

• Wenige Schriften: eine reicht, zwei sind die Obergrenze.
• Zeilenlänge: etwa 45 bis 75 Zeichen. Längere Zeilen ermüden, darum begrenzt man die Breite von Textblöcken.
• Zeilenabstand: rund das 1,5-fache der Schriftgröße für Fließtext.
• Wenige Größen: Eine feste Stufung (zum Beispiel 14, 16, 20, 28, 40 Pixel) wirkt ruhiger als viele fast gleiche Größen.

Prinzip 3: Kontrast

Inhalte sind für alle erkennbar. Die Richtlinie WCAG (Web Content Accessibility Guidelines) legt fest, wie stark sich Text von seinem Hintergrund abheben muss. Sie kennt dafür zwei Stufen, die dir auch in den DevTools begegnen:

Stufe	Normaler Text	Großer Text	Bedeutung
AA	4,5:1	3:1	der übliche Maßstab und das Ziel in dieser Schulung
AAA	7:1	4,5:1	die strengste Stufe, für besonders gute Lesbarkeit

Als groß gilt Text ab etwa 24 Pixel, fett ab etwa 19 Pixel. In der öffentlichen Verwaltung ist ausreichender Kontrast nicht nur nett, sondern Pflicht. Mehr dazu steht im Kapitel Barrierefreiheit.

Ergebnis

Du musst nicht rechnen, denn die DevTools zeigen dir den Wert an:

• Schnell per Überfahren (Edge und Chrome): Drücke Strg+Umschalt+C und fahre mit der Maus über einen Text, ohne zu klicken. Das eingeblendete Kästchen nennt in der Zeile Contrast den Wert und zeigt mit einem Symbol, ob er ausreicht.
• Genauer im Farbwähler (auch in Firefox): Rechtsklick auf den Text → Untersuchen. Klicke dann bei der Deklaration color auf das kleine Farbquadrat. Der Farbwähler zeigt das Kontrastverhältnis, und du kannst direkt eine andere Farbe ausprobieren. Die Deklaration kann auch weiter unten bei einem Vorfahren wie body stehen.

Bei Text auf Bildern oder Verläufen kann der Browser oft keinen Wert berechnen. Prüfe dort die Stelle mit dem ungünstigsten Hintergrund selbst.

Eine zweite Regel gehört dazu: Farbe nie als einziges Signal. Ein rot umrandetes Feld sagt einer farbenblinden Person nichts, dazu gehört ein Text wie „Bitte E-Mail eingeben“.

Prinzip 4: Weißraum

Abstände gliedern die Seite. Was zusammengehört, steht nah beieinander. Was nicht zusammengehört, steht weiter auseinander. Man nennt das das Gesetz der Nähe. Oft ersetzt ein passender Abstand eine Trennlinie oder einen Rahmen, und das Ergebnis wirkt ruhiger.

Auch hier hilft eine feste Stufung, etwa 4, 8, 16, 24, 32 und 48 Pixel. Am Tag 2 legen wir solche Werte als CSS-Variablen an.

Prinzip 5: Raster

Elemente richten sich aneinander aus. Elemente mit gemeinsamen Kanten wirken ordentlich, auch wenn niemand das Raster bewusst sieht. Am Tag 3 kommt mit CSS Grid das passende Werkzeug. Bis dahin genügt die Frage: An welcher Kante richtet sich dieses Element aus?

Das Ziel: Nutzerführung

Die fünf Prinzipien sind kein Selbstzweck. Menschen überfliegen Seiten und suchen nach dem nächsten Schritt. Eine gute Oberfläche beantwortet ihnen dabei fünf Fragen, und die Prinzipien liefern dafür die Mittel:

Frage	Antwort der Oberfläche	Vor allem durch
Wo bin ich?	Der aktuelle Menüpunkt ist markiert, die Seite hat eine klare Überschrift	Hierarchie, Kontrast
Was kann ich tun?	Pro Ansicht gibt es eine Hauptaktion, und sie fällt am meisten auf	Hierarchie, Weißraum
Was ist klickbar?	Links sehen aus wie Links, Buttons wie Buttons	Kontrast
Was gehört zusammen?	Gruppen sind auf einen Blick erkennbar	Weißraum, Raster
Was ist passiert?	Jede Aktion bekommt eine sichtbare Rückmeldung	Kontrast, Typografie

Dazu kommt eine Regel, die für alle Fragen gilt: Bekanntes nutzen. Das Logo führt zur Startseite, das Menü steht oben oder links. Hier lohnt sich Originalität nicht.

Übung

Keine Dateien, nur Beobachten und Diskutieren. Nimm eine Webanwendung, die du im Alltag benutzt.

Stufe 1: Die Prinzipien finden

Suche zu jedem der fünf Prinzipien (Hierarchie, Typografie, Kontrast, Weißraum, Raster) ein gutes oder schlechtes Beispiel auf der Seite.

Stufe 2: Messen

Prüfe in den DevTools den Kontrast des Fließtextes und eines grauen Hinweistextes. Erreichen beide 4,5:1?

Stufe 3: Nutzerführung

Gehe die Fragen aus der Tabelle durch: Wo beantwortet die Anwendung sie gut, wo nicht? Welches Prinzip würde helfen?

Für Schnelle

Skizziere auf Papier eine Startseite für den Lauftreff Morgenrunde: Was ist die Hauptaktion? Was steht oben, was weiter unten? Diese Skizze kannst du mit dem vergleichen, was wir am Tag 2 bauen.