LU01a - UI-Designs lesen und interpretieren (Figma → HTML) [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== LU01a - UI-Designs lesen und interpretieren (Figma → HTML) ======

<WRAP center round box 80%>
**Ziel:** Sie können ein UI (z.B. Figma Design) in **Bausteine** zerlegen, diese **gruppieren** und daraus eine saubere HTML-Struktur ableiten.
</WRAP>
<WRAP center round download 60%>
Figma Software hier downloaden: [[https://www.figma.com/downloads/|Figma Download]] \\
</WRAP>


==== 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)

<WRAP center round box 80%>
{{ :de:modul:m291:learningunits:lu01:theorie:m291_lu01_intro_large.gif?nolink |}}
//Animation: Schrittweise das UI-Design unterteilen in Header/Main, Section, Gruppen.//
</WRAP>

<WRAP center round box 80%>
**Merksatz:** Erst **Struktur**, dann **Aussehen**, dann **Interaktivität**.
</WRAP>

==== UI → HTML Mapping ====

<WRAP center round box 80%>
^ 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 |
</WRAP>