Sechs Webdesign-Prinzipien (Hierarchie, Weißraum, Kontrast, Ausrichtung, Nähe, Tap-Ziele), jeweils als Live-Vorher-Nachher-Demo zum Umschalten, mit dem CSS hinter der Lösung.
Gutes Webdesign entsteht vor allem aus sechs Gewohnheiten: Inhalte mit klarer visueller Hierarchie ordnen, genug Weißraum lassen, den Textkontrast bei 4.5:1 oder besser halten, Elemente an gemeinsamen Kanten ausrichten, Zusammengehöriges nah beieinander gruppieren und Tap-Ziele mindestens 24 Pixel im Quadrat groß machen. Schalte jede Demo unten zwischen Vorher und Nachher um, um den Unterschied zu sehen.
Die sechs Prinzipien und das CSS, das sie meist behebt
Artikel über Gestaltungsprinzipien beschreiben sie mit Worten und Stockfotos. Hier ist jedes Prinzip eine kleine Produktkarte oder ein Formular, zweimal gezeichnet, kaputt und repariert, sodass du zwischen beiden umschalten und genau sehen kannst, was sich geändert hat.
Im Alltag am wichtigsten sind Hierarchie, Weißraum, Kontrast, Ausrichtung, Nähe und bequeme Tap-Ziele. Konsistenz verbindet sie: dieselben Abstände, Schriftgrößen und Farben, wiederholt auf jeder Seite.
Visuelle Hierarchie ist die Reihenfolge, in der Menschen Dinge auf einer Seite wahrnehmen. Designer steuern sie über Größe, Schriftstärke, Farbe, Position und Abstand, sodass die Überschrift zuerst gesehen wird, ergänzende Details danach und die Hauptaktion leicht zu finden ist.
WCAG 2.2, Erfolgskriterium 1.4.3, Stufe AA, verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Als groß gilt Text ab 18 Punkt oder ab 14 Punkt fett.
Es beschreibt, wie Menschen textlastige Seiten oft überfliegen: einmal quer über den oberen Bereich, etwas tiefer noch einmal quer, dann an der linken Seite nach unten. Die praktische Lehre: Schlüsselwörter an den Anfang von Überschriften und Zeilen setzen und wichtige Punkte nicht mitten im Absatz verstecken.
WCAG 2.2, Kriterium 2.5.8, Stufe AA, legt für Zeigerziele ein Minimum von 24 mal 24 CSS-Pixeln fest, mit einigen Ausnahmen wie Links innerhalb eines Satzes. Viele Designteams machen primäre Buttons größer, damit sie leicht zu treffen sind.
Drei Schriftstufen ordnen den Inhalt, die Abstände stammen aus einer 8px-Skala, und der gedämpfte Text bleibt dunkel genug, um 4.5:1 auf Weiß zu erreichen.
Titel, Preis und Button haben dieselbe Größe und Schriftstärke, sodass das Auge keinen Ankerpunkt findet.
Größe, Schriftstärke und Farbe ordnen den Inhalt: zuerst der Titel, dann der Preis, dann die Aktion.
Alles ist dicht an dicht gepackt, das wirkt überladen und lässt sich schwer überfliegen.
Großzügiges padding und Abstände trennen Gruppen und geben jedem Element Luft.
Hellgrauer Text auf Weiß liegt deutlich unter dem WCAG-Minimum für normalen Text.
Dunkler Text auf Weiß erreicht 4.5:1, das Minimum nach WCAG 2.2 Stufe AA für Text in normaler Größe.
Gemischt zentrierte und linksbündige Zeilen erzeugen unruhige Kanten, denen das Auge folgen muss.
Eine gemeinsame linke Kante macht aus einzelnen Zeilen einen gut lesbaren Block.
Beschriftungen stehen gleich weit von jedem Feld entfernt, sodass unklar ist, welche Beschriftung wohin gehört.
Jede Beschriftung sitzt direkt an ihrem Feld und die Paare haben Abstand zueinander, so ist die Gruppierung offensichtlich.
Winzige Links drängen sich aneinander und sind mit dem Finger leicht zu verfehlen.
Die Ziele sind mindestens 24 mal 24 CSS-Pixel groß, das Minimum nach WCAG 2.2 Stufe AA, mit Abstand dazwischen.
Prinzip
Version
Vorher
Nachher
Vorher: {text}
Nachher: {text}
Sauerteigbrot
$9, täglich frisch gebacken
Jetzt bestellen
Öffnungszeiten
Mo bis Fr, 7am bis 6pm
Sa, 8am bis 2pm
Wir liefern jeden Morgen vor 9 Uhr im Umkreis von 5 km um den Laden.
Textfarbe {hex} auf Weiß
Catering
Platten für 10 bis 100 Personen.
Bitte zwei Tage im Voraus bestellen.
Name
Telefon
Menü
Öffnungszeiten
Bestellen
Kostenlos starten · Keine Kreditkarte nötig