Design-Grundlagen: Layout, Farbe & Typografie meistern

Alles im Webdesign lässt sich auf drei Grundpfeiler reduzieren: Layout, Farbe und Typografie. Wer diese drei beherrscht, ist zu 80 % am Ziel. In diesem Kapitel lernst du die wichtigsten Prinzipien, die professionelle Websites von Amateur-Designs unterscheiden.

Layout & Visuelle Hierarchie

Die visuelle Hierarchie ist das mächtigste Werkzeug, das dir als Webdesigner zur Verfügung steht. Sie bestimmt, in welcher Reihenfolge Besucher die Inhalte wahrnehmen.

• Visuelle Hierarchie statt F-Pattern: Das F-Pattern ist veraltet. Wichtigste Elemente am größten und auffälligsten gestalten.
• 12-8-4-Spalten-System: Desktop = 12 Spalten, Tablet = 8, Mobil = 4. Nicht alle 12 nutzen -- reale Layouts landen bei 1--5 Spalten.
• Spalten als Richtlinie, nicht als Regel: Grids helfen bei der Struktur, dürfen aber kreativ gebrochen werden.
• Layouts variieren: Wenn jede Section gleich aussieht, schaltet das Gehirn ab.
• Pre-attentive Processing: Das Gehirn entscheidet in Millisekunden, ob ein Layout verständlich ist.
• Squint-Test: Augen zusammenkneifen und das Design unscharf betrachten -- Headlines und CTAs müssen herausstechen.

Das 12-8-4-Spalten-System in der Praxis

• Desktop (12 Spalten): Nutze 2--5 Spalten für Content-Bereiche. Die übrigen Spalten dienen als Margins und Gutters.
• Tablet (8 Spalten): Reduziere auf 1--3 Content-Spalten. Navigation kann in ein Hamburger-Menü wechseln.
• Mobil (4 Spalten): In der Regel 1 Spalte für Content. Fokus auf vertikales Scrollen und Touch-Targets (min. 44x44 px).

Farbe

Farbe beeinflusst die Wahrnehmung deiner Website mehr als jedes andere Designelement.

• 60-30-10-Regel: 60 % neutrale Farben, 30 % Markenfarbe, 10 % Akzentfarbe für CTAs.
• Kontrast prüfen: Coolers.co nutzen für den Color Contrast Checker. Min. 4,5:1 für kleinen Text, 3:1 für großen.
• CSS Overview in DevTools: In Chrome DevTools über "More Tools → CSS Overview" alle Farben einer Website extrahieren.
• Farbpaletten harmonisieren: Analog oder komplementär. Keine zufälligen Farben.

Die 60-30-10-Regel im Detail

• 60 % -- Dominante Farbe: Meist neutrale Töne (Weiß, Off-White, helles Grau). Bildet den Hintergrund.
• 30 % -- Sekundärfarbe: Deine Markenfarbe. Erscheint in Headern, Sidebars, Karten-Hintergründen.
• 10 % -- Akzentfarbe: Reserviert für CTAs, Links, Highlights. Diese Farbe muss ins Auge springen.

Typografie

Bis zu 80 % einer Webseite ist Text. Die Schriftwahl gehört damit zu den wichtigsten Designentscheidungen.

• Heading-Hierarchie: H1 = größter, wichtigster Text. H2 = Sektionsüberschriften. P-Text = Fließtext.
• Line-Height-Ratios: Headlines: 1:1. Paragraphs: 1:1,5.
• Letter-Spacing: Display-Fonts: leicht negativ (-1 bis -3px). Body: 0px. CTAs: leicht positiv (+1 bis +3px).
• Font-Superfamilies: Schriften, die zusammen designed wurden (z. B. DM Sans + DM Serif).
• Max. 2 Font-Familien: 3 ist das absolute Maximum.

Typografische Feinabstimmung

Element	Schriftgröße	Line-Height	Letter-Spacing
H1 (Display)	48--72 px	1:1	-1 bis -3 px
H2 (Section)	32--48 px	1:1,1	-0,5 bis -1 px
H3 (Subsection)	24--32 px	1:1,2	0 px
Body (Paragraph)	16--18 px	1:1,5	0 px
CTA (Button)	14--16 px	1:1	+1 bis +3 px

Fazit

Layout, Farbe und Typografie sind die drei Säulen, auf denen jedes gute Webdesign steht. Beherrsche das 12-8-4-Spalten-System für responsive Layouts, nutze die 60-30-10-Farbregel für harmonische Farbpaletten und wähle maximal zwei gut aufeinander abgestimmte Schriftfamilien.