Webdesign wird häufig als Geschmacksfrage behandelt und ist zum größten Teil keine. Ob Text lesbar ist, ob ein Nutzer erkennt, was er anklicken kann, ob die Reihenfolge der Informationen zum Anliegen passt: All das lässt sich prüfen. Genau darum geht es in diesem Bereich.
Der subjektive Rest, die eigentliche Ästhetik, kommt zum Schluss und ist der kleinere Teil der Wirkung. Eine handwerklich saubere, gestalterisch unspektakuläre Seite funktioniert besser als eine ambitionierte, in der Text nicht lesbar und Navigation nicht auffindbar ist.
Die fünf Bausteine
Layout und Raster ordnen den Raum. Ein durchgehendes Raster mit gleichen Abständen erzeugt Ruhe, ohne dass es dem Betrachter auffällt. Uneinheitliche Abstände fallen auf, auch wenn niemand benennen kann, woran es liegt. Siehe Layout und Raster.
Typografie trägt den Inhalt. Schriftgröße, Zeilenlänge, Zeilenabstand und Kontrast entscheiden, ob Text gelesen oder überflogen wird. Für Fließtext auf dem Bildschirm sind 16 bis 18 Pixel, 60 bis 80 Zeichen pro Zeile und ein Zeilenabstand um das 1,6-fache der Schriftgröße ein belastbarer Ausgangspunkt. Siehe Typografie.
Farbe ordnet und betont. Sinnvoll sind wenige Farben mit klaren Rollen: eine Hauptfarbe für Marke und Handlungselemente, eine Akzentfarbe für Hervorhebungen, ein Set neutraler Töne für Flächen und Text. Farbe darf nie die einzige Information sein. Siehe Farben im Webdesign.
Visuelle Hierarchie lenkt den Blick. Auf jeder Seite muss klar sein, was das Wichtigste ist, was das Zweitwichtigste und was Beiwerk. Größe, Gewicht, Kontrast und Umgebungsraum sind die Werkzeuge. Wenn alles wichtig aussieht, ist nichts wichtig. Siehe Visuelle Hierarchie.
Responsives Verhalten ist keine Zutat, sondern die Grundbedingung. Entworfen wird sinnvollerweise von der kleinen Breite aufwärts, weil dort die Entscheidung fällt, was wirklich gebraucht wird. Siehe Responsive Design.
Dazu kommen die beiden Bauteile, die auf jeder einzelnen Seite stehen und deshalb überproportional wirken: die Website-Navigation als Bedienoberfläche der Seite und der Website-Footer als Träger der Pflichtlinks und letzte Anlaufstelle für Suchende.
Der Prüfkatalog, der die meisten Fehler findet
Diese Punkte deckt man in zwanzig Minuten ab und findet damit den größten Teil der handwerklichen Probleme:
- Fließtext bei 100 Prozent Zoom auf dem Telefon lesbar, ohne zu zoomen?
- Zeilen im Fließtext länger als etwa 90 Zeichen? Dann zu breit.
- Kontrast von Text zu Hintergrund mindestens 4,5 zu 1?
- Ist auf jeder Seite in einem Blick erkennbar, was die Seite anbietet?
- Sind anklickbare Elemente als anklickbar erkennbar, auch ohne Mauszeiger?
- Sind Schaltflächen auf dem Touchscreen mindestens etwa 44 Pixel hoch?
- Sieht man ohne Scrollen, worum es geht, oder erst nach einem Bildschirm Dekoration?
- Funktioniert die Navigation mit der Tastatur, und ist der Fokus sichtbar?
- Steht der Kontaktweg auf jeder Seite, nicht nur auf der Kontaktseite?
- Sind Abstände zwischen gleichartigen Elementen wirklich gleich?
Punkt 8 gehört seit dem Barrierefreiheitsstärkungsgesetz für viele Anbieter nicht mehr in die Kategorie gute Praxis, sondern in die Kategorie Pflicht. Siehe Barrierefreiheit.
Was gute Gestaltung von dekorativer unterscheidet
Gute Gestaltung reduziert Entscheidungen. Sie sagt dem Besucher, wo er ist, was es hier gibt und was der nächste Schritt ist. Dekorative Gestaltung fügt hinzu: einen Effekt, ein Hintergrundvideo, eine zweite Bildergalerie.
Ein einfacher Test: Was passiert, wenn ein Element entfernt wird? Wird die Seite unklarer, war das Element funktional. Bleibt sie gleich verständlich und wirkt ruhiger, war es Dekoration.
Das gilt besonders für die Startseite. Sie ist keine Bühne, sondern eine Weiche. Ihre Aufgabe ist, den Besucher in maximal zwei Schritten dorthin zu bringen, wo seine Frage beantwortet wird.
Typische Muster, die zuverlässig funktionieren
Der klare Einstieg oben. Eine Überschrift, die sagt, was angeboten wird und für wen, ein erklärender Satz, eine Hauptaktion. Kein Willkommensgruß.
Drei bis sechs Blöcke darunter. Leistungen, Beweise, Ablauf, Preise, Antworten auf häufige Fragen, Kontakt. In dieser Reihenfolge, weil sie der Reihenfolge der Fragen entspricht.
Wiederkehrende Karten für Gleichartiges. Ein Kartenmuster für Leistungen, ein anderes für Beiträge. Zwei Muster genügen fast immer.
Belege statt Behauptungen. Fotos der eigenen Arbeit statt gekaufter Stockbilder, echte Bewertungen statt Sternchen ohne Quelle, konkrete Zahlen statt Superlative.
Ein Abschluss, der etwas anbietet. Am Ende jeder Seite ein nächster Schritt: anrufen, anfragen, weiterlesen. Eine Seite, die einfach aufhört, verliert den Besucher.
Trends mit Vorsicht
Gestaltungstrends haben eine Halbwertszeit von etwa zwei Jahren, eine Website eine Lebensdauer von fünf bis zehn. Wer Trends nachbaut, baut eine Seite, die 2029 datierbar ist. Was dauerhaft trägt, sind Lesbarkeit, klare Hierarchie, Geschwindigkeit und Barrierefreiheit.
Trends, die sich als sinnvoll erwiesen haben, hatten in der Regel einen funktionalen Kern: Dunkelmodus reduziert Blendung, größere Schriftgrößen verbessern Lesbarkeit, reduzierte Layouts verbessern Ladezeit. Trends ohne funktionalen Kern verschwinden. Eine Einordnung steht in Webdesign-Trends.