Kurs · Modul 291
Oberflächen (UIs) mit Webtechnologien entwickeln
Nach diesem Kurs entwickelst du eine Benutzeroberfläche von der ersten Frage an die Nutzenden bis zum geprüften Frontend. Du führst kurze Interviews, formulierst Personas, Job Stories und User Stories mit prüfbaren Akzeptanzkriterien, planst User Flows und vertrittst Gestaltungsentscheide gegenüber Auftraggebenden mit Daten. In Figma baust du Wireframes mit Auto Layout, Komponenten mit Varianten, ein kleines Design System mit Variablen und einen klickbaren Prototyp, den du mit fünf Personen testest, per SUS und Schweregrad auswertest und gezielt verbesserst. Danach setzt du die Komponenten mit semantischem HTML, Tokens und schlankem JavaScript in allen Zuständen um, responsiv, touchtauglich und barrierefrei nach WCAG 2.2 AA, inklusive Tabs und Dialogen mit sauberer Fokusführung und einem Prüfbericht für die Kundschaft. Neun Lektionen, 60 Aufgaben mit 14 Code-Laboren, ein Praxisprojekt in fünf Meilensteinen und eine Prüfungssimulation bereiten dich auf den Kompetenznachweis vor. Figma öffnen, testen und programmieren musst du selbst, aber du weisst jederzeit, was du tust und warum.
Dein nächster Schritt
Vom Menschen zur Anforderung
Du erfasst den Nutzungskontext mit Daten und kurzen Interviews, verdichtest die Erkenntnisse zu Personas und Job Stories und formulierst User Stories mit prüfbaren Akzeptanzkriterien. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · Nutzerbedürfnisse erfassen | 0% | 0% | – |
| B · Prototypen in Figma | – | – | – |
| C · Komponenten im Code | – | – | – |
| D · Responsive und touchtauglich | – | – | – |
| E · Barrierefreiheit | – | – | – |
| F · Usability testen und verbessern | – | – | – |
Abzeichen
Lektionen
- 1Vom Menschen zur AnforderungDu erfasst den Nutzungskontext mit Daten und kurzen Interviews, verdichtest die Erkenntnisse zu Personas und Job Stories und formulierst User Stories mit prüfbaren Akzeptanzkriterien.Gratis40 Min.
- 2User Flow, Informationsarchitektur und AbwägenDu zeichnest User Flows mit Nebenpfaden, ordnest und benennst Inhalte in der Sprache der Nutzenden und wägst widersprüchliche Anforderungen begründet ab.40 Min.
- 3Wireframes und Auto Layout in FigmaDu wählst den passenden Detailgrad, arbeitest mit Frames und Raster und baust mit Auto Layout Entwürfe, die sich wie Flexbox verhalten.40 Min.
- 4Komponenten, Design System und klickbarer PrototypDu baust Komponenten mit Varianten und Eigenschaften, legst Variablen mit Modi als kleines Design System an und verbindest die Screens zu einem klickbaren Prototyp.45 Min.
- 5Usability-Tests planen, durchführen und auswertenDu testest einen Prototyp mit fünf Personen und Thinking Aloud, berechnest den SUS-Score, ordnest Befunde nach Schweregrad und belegst die Wirkung von Änderungen in einer zweiten Runde.45 Min.
- 6Komponenten im Code mit allen ZuständenDu setzt Figma-Komponenten mit semantischem HTML, BEM, Tokens und Komponenten-Variablen um, gestaltest alle Zustände über die passenden Attribute und steuerst sie mit schlankem JavaScript.45 Min.
- 7Responsive und touchtauglichDu setzt Layouts mobile first um, bemisst Touch-Ziele nach WCAG 2.2 und Plattform-Empfehlungen, berücksichtigst Eingabemodi und Gesten und baust Komponenten mit Container Queries.45 Min.
- 8Barrierefreiheit nach WCAG 2.2 AADu kennst Aufbau und Neuerungen der WCAG 2.2, setzt Semantik vor ARIA, prüfst Namen, Alternativtexte, Kontraste, Tastatur und Fokus und dokumentierst Befunde mit Kriterium und Stufe.45 Min.
- 9Tabs, Dialog und FokusführungDu planst komplexe Komponenten als Zustandsmaschinen, setzt Tabs, Raster und modale Dialoge mit Roving Tabindex und Fokusführung um und schreibst einen Prüfbericht für Auftraggebende.45 Min.