LU01a - UI-Designs lesen und interpretieren (Figma → HTML)
Ziel: Sie können ein UI (z.B. Figma Design) in Bausteine zerlegen, diese gruppieren und daraus eine saubere HTML-Struktur ableiten.
Figma Software hier downloaden: Figma Download
Lernziele
- 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).
Vorgehen: In 6 Schritten “UI lesen”
- Grobscan: Was sind die Hauptbereiche? (Header / Main / Footer)
- Navigation finden: Logo, Menu-Items, evtl. Switch/Buttons.
- Sections finden: “Hero”, “Cards”, “FAQ”, “Player” usw.
- Gruppieren: Was gehört zusammen? (Buttons als Gruppe, Menu-Links als Liste, Features als Gruppe)
- Layout überlegen: 2-Spalten? Zentriert? Wrap auf Mobile? (meist Flexbox/Responsive)
- Wiederholungen erkennen: Komponenten (Button-Stile, Text-Stile, Spacing-Regeln, Farben)
Animation: Schrittweise das UI-Design unterteilen in Header/Main, Section, Gruppen.
Merksatz: Erst Struktur, dann Aussehen, dann Interaktivität.
UI → HTML Mapping
| UI-Teil | Typ | Sinnvolles HTML | Layout-Idee |
|---|---|---|---|
| Logo | Anzeige & Navigation | 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 | SVG-Icons werden über checkbox gelegt. |
| Hero-Bild | Anzeige | img (evtl. srcset) | Spalte rechts |