Webdesign-Prinzipien, die das Ergebnis wirklich verändern
Viele Webdesign-Ratschläge sind Vorliebe im Gewand eines Prinzips. Eine kleinere Zahl von Entscheidungen verändert zuverlässig, was Besucher tun, und die meisten davon sind unglamourös: was zuerst sichtbar ist, ob Text lesbar ist, und wie viele Schritte zwischen jemandem und dem stehen, weswegen er gekommen ist.
Dieser Leitfaden behandelt die mit Belegen und benennt die, die wirklich Geschmackssache sind.
Eine klare Hierarchie pro Bildschirm#
Jeder Bildschirm sollte eine Sache offensichtlich am wichtigsten machen. Wenn drei Elemente mit gleichem Gewicht um Aufmerksamkeit konkurrieren, lösen Besucher die Mehrdeutigkeit auf, indem sie gehen.
Hierarchie entsteht aus Größe, Gewicht, Farbe, Abstand und Position — grob in dieser Reihenfolge der Stärke. Am wenigsten genutzt wird der Raum: Ein Element mit Platz drumherum liest sich als wichtig, ohne laut zu sein.
- Eine primäre Aktion pro Bildschirm, anders gestaltet als alles andere.
- Sekundäre Aktionen vorhanden, aber visuell leiser — Umriss statt Fläche.
- Überschriften, die den Inhalt beschreiben, keine cleveren, die nichts beschreiben.
- Raum bewusst eingesetzt: Eine überfüllte Seite hat keine Hierarchie, nur Dichte.
Lesbarkeit vor Dekoration#
Schwer lesbarer Text kostet Sie Leser, egal wie gut geschrieben er ist. Das sind messbare Schwellen, keine Meinungen.
| Eigenschaft | Praktisches Ziel | Warum |
|---|---|---|
| Fließtextgröße | 16–18 px auf dem Handy | Unter 16 px zoomt iOS beim Formularfokus, und kleiner Text verliert Leser |
| Zeilenlänge | 55–75 Zeichen | Längere Zeilen lassen das Auge beim Rücksprung die Stelle verlieren |
| Zeilenhöhe | 1,5–1,7 im Fließtext | Enger Durchschuss senkt die Lesegeschwindigkeit messbar |
| Textkontrast | Mindestens 4,5:1, besser 7:1 | WCAG AA; Grau auf Grau versagt draußen am Handy |
| Kontrast von Bedienelementen | 3:1 gegen den Hintergrund | Nutzer müssen sehen, wo ein Eingabefeld endet |
| Absatzlänge | Drei bis vier Zeilen | Lange Blöcke werden auf dem Handy übersprungen |
Prüfen Sie den Kontrast gegen den tatsächlichen Hintergrund, einschließlich Verläufen und Bildern. Ein Wert, der auf Weiß besteht, kann auf dem Hero-Bild scheitern, über dem er tatsächlich liegt.
Formulare für den Abschluss gestalten, nicht für Symmetrie#
In Formularen werden die meisten Website-Ziele tatsächlich erreicht, und dort landet die wenigste Designaufmerksamkeit. Jedes Feld, das Sie hinzufügen, kostet Abschlüsse; jedes Feld, das Sie entfernen, ist geschenktes Geld, wenn Sie die Daten nicht brauchten.
- Fragen Sie das Minimum ab, das Sie zum Antworten brauchen. Den Rest fragen Sie in der Antwort.
- Eine Spalte. Zweispaltige Formulare führen zu übersprungenen Feldern und sind mobil schlechter.
- Beschriftungen über den Feldern, immer sichtbar — reine Platzhalter-Labels verschwinden beim Tippen.
- Richtige Eingabetypen und Autocomplete-Attribute, damit Handys die passende Tastatur zeigen und ausfüllen anbieten.
- Validieren Sie beim Verlassen des Feldes, nicht bei jedem Tastendruck, und setzen Sie den Fehler neben das Feld.
- Leeren Sie das Formular bei einem Fehler nie. Verlorene Eingaben sind der häufigste Abbruchgrund.
- Sagen Sie nach dem Absenden, was als Nächstes passiert und wie lange es dauert.
Was Geschmack ist und was nicht#
Klarheit über diesen Unterschied spart viel Zeit in Abnahmemeetings. Die linke Spalte ist diskutierbar; die rechte nicht.
| Geschmack | Kein Geschmack |
|---|---|
| Farbpalette | Kontrastwerte gegen den echten Hintergrund |
| Schriftwahl | Fließtextgröße und Zeilenlänge |
| Illustrationsstil | Ob Bilder sinnvollen Alt-Text haben |
| Hero-Bild oder keines | Ob die primäre Aktion ohne Scrollen sichtbar ist |
| Runde oder eckige Ecken | Ob Fokuszustände für Tastaturnutzer sichtbar sind |
| Animationsstil | Ob Animation prefers-reduced-motion beachtet |
| Layoutdichte | Ob Touch-Ziele mindestens 44 px groß sind |
Häufige Fragen
Zählt „above the fold“ noch?
Nicht als Regel, dass alles Wichtige dorthin passen muss — Menschen scrollen, und das seit zwanzig Jahren. Wichtig ist, dass der obere Seitenbereich innerhalb weniger Sekunden beantwortet: „Was ist das und ist es für mich?“ Tut er das, scrollen Besucher für das Detail. Tut er es nicht, wird weiter unten nichts gelesen.
Wie viele Schriften sollte eine Website verwenden?
Meist eine oder zwei Familien, wobei Schnitte die Arbeit übernehmen, die zusätzliche Familien machen würden. Der praktische Grund ist Performance, nicht Geschmack: Jede weitere Familie und jeder weitere Schnitt ist eine zusätzliche Datei, die geladen werden muss, bevor Text korrekt erscheint. Eine gut gewählte Familie mit drei Schnitten deckt fast jede Website ab.
Lohnt sich ein Dark Mode?
Er lohnt sich, wenn Sie ihn von Anfang an mit Design-Tokens umsetzen können, wo er sehr wenig kostet. Ihn auf eine fertige Website nachzurüsten bedeutet, jede Farbe, jedes Bild und jeden Schatten zu prüfen, und das ist ein echtes Projekt. Wenn Sie ihn unterstützen, respektieren Sie standardmäßig die Systemeinstellung und lassen Sie den Nutzer sie überschreiben.
Sollte das Design dem der Wettbewerber gleichen?
Konventionen sollten übereinstimmen — Navigation oben, Warenkorb oben rechts, Logo verlinkt zur Startseite —, weil deren Bruch Verständnis kostet, ohne etwas zu bringen. Alles oberhalb der Konventionen ist Ihr Unterscheidungsraum. Der Fehler ist, das Layout eines Wettbewerbers komplett zu kopieren, denn damit importiert man Entscheidungen, die zu dessen Inhalten passten und nicht zu Ihren.
webdesign prinzipienwebdesign best practicesux prinzipienformulargestaltungwebsite lesbarkeitvisuelle hierarchie
