UI-Elemente lesen (Figma → HTML)

Dies ist eine alte Version des Dokuments!

Ziel: Sie können ein UI (z.B. Figma Design) in Bausteine zerlegen, diese gruppieren und daraus eine saubere HTML-Struktur ableiten.

Sie erkennen typische UI-Elementklassen: Layout, Formular, Navigation, Anzeige.
Sie können UI-Teile sinnvoll gruppieren und sprechende Namen vergeben.
Sie entscheiden, welche HTML-Elemente semantisch passen (z.B. header, nav, main, section).

1. Grobscan: Was sind die Hauptbereiche? (Header / Main / Footer)
2. Navigation finden: Logo, Menu-Items, evtl. Switch/Buttons.
3. Sections finden: “Hero”, “Cards”, “FAQ”, “Player” usw.
4. Gruppieren: Was gehört zusammen? (Buttons als Gruppe, Menu-Links als Liste, Features als Gruppe)
5. Layout überlegen: 2-Spalten? Zentriert? Wrap auf Mobile? (meist Flexbox/Responsive)
6. Wiederholungen erkennen: Komponenten (Button-Stile, Text-Stile, Spacing-Regeln, Farben)

Merksatz: Erst Struktur, dann Aussehen, dann Interaktivität.

UI-Teil	Typ	Sinnvolles HTML	Layout-Idee
Logo	Anzeige	`a` + `img`	in Flexbox-Reihe im Header
Menu-Items	Navigation	`nav` + `ul/li/a`	`display:flex` + `gap`
Hero-Textblock	Anzeige	`h1/h3/p` in Container	Spalte links
Buttons (2 Stück)	Formular/Interaktion	`button` in Wrapper	Wrapper: `display:flex`
“Features” (2 Bulletpoints)	Anzeige	`ul/li` (oder `div/span`)	Icons via `::before`
Dark/Light Switch	Formular/Interaktion	`input type=checkbox` (role=switch)	CSS-Switch Pattern
Hero-Bild	Anzeige	`img` (evtl. `srcset`)	Spalte rechts

Markieren Sie im Design (Screenshot) mit Stift:
1. Header
2. Navigation
3. Hero Section
4. Button-Gruppe
5. Feature-Gruppe
Schreiben Sie daneben je 1 Container-Name (z.B. herocontent, heroactions, site-nav).