Bild: Mit KI generiert

Webdesign Fundamentals ist kein Kurs für eine bestimmte Berufsgruppe. Er richtet sich an Grafikdesigner:innen, UX/UI-Designer:innen, Frontend Developer und Product Owner — also an Menschen mit sehr unterschiedlichen Ausgangspunkten. Was sie verbindet: Webdesign ist für alle ein eigenes Handwerk, das eigene Grundlagen hat.

Der Großteil der Nutzer:innen kehrt nach einer schlechten Website-Erfahrung nicht zurück. Das liegt selten an mangelndem Geschmack oder fehlendem Aufwand — es liegt an Grundlagen, die nicht verstanden oder nicht angewendet wurden.

In diesem Artikel erfährst du, was professionelles Webdesign von anderen Disziplinen unterscheidet, warum Grid-Systeme und visuelle Hierarchie im Web eigenen Regeln folgen und wo die häufigsten Fehler entstehen — unabhängig vom Hintergrund.

 

Webdesign Fundamentals: Das Medium denken, nicht nur gestalten

Webdesign hat eine Eigenschaft, die Print, Illustration und klassisches UI-Design nicht haben: Designer:innen wissen nicht, auf welchem Gerät, in welchem Browser und unter welchen Bedingungen ihre Arbeit betrachtet wird.

Das ist keine technische Randbemerkung. Es ist die Grundbedingung des Mediums.

Ein Layout muss auf 375px Smartphone-Breite genauso funktionieren wie auf 1440px Desktop-Breite. Eine Schriftgröße, die auf einem Retina-Display elegant wirkt, kann auf einem älteren Bildschirm kaum lesbar sein. Eine Navigation, die am Desktop selbsterklärend ist, kollabiert auf Mobile zu einem unlesbaren Menü — wenn sie nicht von Anfang an mit dieser Situation geplant wurde.

Drei Grundprinzipien, die für alle relevant sind — unabhängig vom Hintergrund:

• Viewport statt Format: Im Print definieren Designer:innen das Format selbst. Im Web ist der Viewport durch das Endgerät bestimmt. Professionelles Webdesign plant für diesen Kontrollverlust, nicht gegen ihn
• Scroll statt Seite: Websites werden gescrollt. Visuelle Hierarchie entsteht nicht nur durch Größe und Kontrast, sondern durch die Reihenfolge, in der Inhalte beim Scrollen erscheinen. Above the Fold ist die wichtigste Bühne — aber nicht die einzige
• Interaktion statt Betrachtung: Buttons, Formulare und Navigation sind keine Gestaltungselemente. Sie sind Handlungsangebote. Wer das verwechselt, gestaltet Interfaces, die gut aussehen und schlecht funktionieren

 

Grid-Systeme: Das unsichtbare Fundament jeder Website

Das 12-Column-Grid ist der Standard im professionellen Webdesign. Es sorgt für Konsistenz über verschiedene Breakpoints hinweg und macht Designs für die Umsetzung in gängigen CSS-Frameworks nachvollziehbar und reproduzierbar.

Wer ohne Grid-System arbeitet, baut Layouts, die in der Übergabe an die Entwicklung aufwändig zu rekonstruieren sind — oder sich im Browser verändern, weil das Figma-Design keine Entsprechung in der Umsetzungslogik hat.

Drei Grundregeln für professionelle Web-Grids:

• Spacing-Systeme statt freier Abstände: Konsistentes Spacing entsteht nicht durch Augenmaß, sondern durch ein definiertes System — typisch in 4px- oder 8px-Schritten. Das macht Layouts skalierbar und für alle Beteiligten handhabbar
• Visuelle Hierarchie als Orientierungssystem: Klare Unterschiede zwischen Primär- und Sekundärinhalten, bewusst eingesetzter Whitespace und konsequente H1-H6-Strukturen sind keine stilistischen Entscheidungen — sie sind Orientierungshilfen, die Nutzer:innen durch eine Seite führen
• Gestaltgesetze im Scroll-Kontext: Nähe und Ähnlichkeit wirken auch vertikal. Zusammengehörige Inhalte, die durch zu viel Whitespace getrennt werden, wirken wie separate Abschnitte. Das Verhältnis von Innen- zu Außenabstand ist im Web eine der am häufigsten unterschätzten Gestaltungsebenen

 

Typografie fürs Web: Warum Schrift im Browser anders funktioniert

Typografie ist der Bereich, in dem webspezifische Grundlagen am deutlichsten werden — und am häufigsten unterschätzt werden.

Im Print werden Schriften für definierte Ausgabegrößen gesetzt. Im Web liest eine Person dieselbe Website auf einem 13"-Laptop, eine andere auf einem 27"-Monitor, eine dritte auf einem Smartphone. Dieselbe Schriftgröße wirkt in diesen Kontexten fundamental anders.

Was professionelle Web-Typografie ausmacht:

• Schriftpaare für Screens: Nicht jede Schrift ist für Bildschirme geeignet. Schriften mit hohem x-Höhe-Verhältnis sind bei kleinen Bildschirmgrößen besser lesbar als solche mit niedrigem. Google Fonts bietet eine umfangreiche Bibliothek web-optimierter Schriften; Fontpair kuratiert daraus geprüfte Kombinationen
• Typografische Hierarchie als Struktur: H1 bis H6 sind im Web keine Stilentscheidung, sondern semantische Struktur. Eine falsch gesetzte Hierarchie beeinträchtigt nicht nur die Lesbarkeit — sie schadet der Auffindbarkeit in Suchmaschinen und der Zugänglichkeit für Screenreader-Nutzer:innen
• Kontrastverhältnisse als Qualitätskriterium: Die WCAG-Richtlinien definieren Mindestkontrastverhältnisse zwischen Text und Hintergrund. Stufe AA verlangt 4,5:1 für Fließtext. Viele intuitiv gewählte Farbkombinationen bestehen diesen Test nicht. Wer das von Anfang an mitdenkt, spart Korrekturrunden am Ende

Diese Anforderungen sind keine Einschränkungen — sie sind Qualitätskriterien, die professionelles Webdesign von gut aussehenden Mockups unterscheiden. Wer sie verinnerlicht, liefert Designs, die auch in der Umsetzung halten, was sie versprechen. Für alle, die tiefer in Web- und App-Gestaltung einsteigen wollen, bauen sowohl der Browser App Design Kurs als auch der Mobile App Design Kurs direkt auf diesen Grundlagen auf.

 

Take Away Message

Professionelles Webdesign scheitert selten am Geschmack — es scheitert an Grundlagen. Viewport-Logik, Grid-Systeme und webspezifische Typografie folgen eigenen Regeln, die aus dem Medium selbst entstehen. Wer diese Grundlagen versteht, arbeitet effizienter, kommuniziert klarer mit Entwickler:innen und liefert Ergebnisse, die im Browser genauso funktionieren wie im Designtool. Das gilt für Grafikdesigner:innen genauso wie für Entwickler:innen, Product Owner und alle, die ernsthaft mit Webdesign anfangen wollen.