Layout

Konsistente Layouts schaffen Ordnung und professionelle Erscheinung.

Das 12-Spalten-Grid

Warum 12 Spalten?

• Teiler: 2, 3, 4, 6 → flexible Layouts
• Gängiger Standard
• Einfache Berechnung

In Figma:

• Grid-Template: 12 Spalten
• Gutter: 24px (Desktop), 16px (Mobile)
• Margin: Abhängig von Breakpoint

Breakpoints

Name	Breite	Verwendung
Mobile	< 640px	Smartphones
Tablet	640-1024px	Tablets, kleine Laptops
Desktop	> 1024px	Standard
Large	> 1440px	Große Monitore

In Figma:

• Frame-Breiten als Variablen speichern
• Responsive-Frames für jede Grösse anlegen

Spacing-Scale

Basierend auf 4px:

Token	Wert	Verwendung
spacing-1	4px	Micro-Abstände
spacing-2	8px	Klein
spacing-3	12px	Klein-Mittel
spacing-4	16px	Standard
spacing-5	24px	Mittel
spacing-6	32px	Gross
spacing-7	48px	Sehr gross
spacing-8	64px	Section

Regel: Immer diese Werte nutzen, nie „irgendwas dazwischen”.

Responsive Patterns

Stacking

Mobile: Vertikal → Desktop: Horizontal

Sidebar

• Mobile: Ausgeblendet oder unter Content
• Desktop: Links oder rechts neben Content

Card Grid

Mobile:  1 Spalte
Tablet:  2 Spalten
Desktop: 3-4 Spalten

Praktische Tipps

1. Mobile-First designen

   • Startet mit Mobile-Layout
   • Erweitert für grössere Screens
   • Einfacher als Desktop → Mobile reduzieren

2. Grids als Styles speichern

   • Wiederverwendbar
   • Konsistent über alle Screens

3. Abstände systematisch

   • Innerhalb von Komponenten: spacing-2 bis spacing-4
   • Zwischen Komponenten: spacing-4 bis spacing-6
   • Zwischen Sections: spacing-7 bis spacing-8

4. Testen

   • Alle Breakpoints designen
   • Zwischengrössen prüfen
   • Realistischen Content verwenden

Checkliste

• 12-Spalten-Grid verwendet
• Alle Breakpoints designed
• Spacing-Scale eingehalten
• Mobile-First Ansatz
• Whitespace ausreichend (nicht zu eng)

---

Gutes Layout ist unsichtbar – es führt den Blick, ohne abzulenken.