UI-Prototypen mit JavaScript entwickeln - für Designer

Seminarziel

Nach dem Seminar können Sie UI-Komponenten selbst umsetzen, Interaktionen logisch aufbauen und Designs in funktionierende Prototypen übersetzen. Sie verstehen JavaScript nicht als abstrakte Programmiersprache, sondern als gezielte Verhaltensebene für Benutzeroberflächen. Dadurch können Sie Zustände, Ereignisse und UI-Logik sicherer einordnen und in eigenen Prototypen anwenden. Sie gewinnen mehr Sicherheit beim Arbeiten mit DOM, Events und einfachen Datenstrukturen und sind in der Lage, interaktive Entwürfe nachvollziehbar umzusetzen und Ihre Lösungen fachlich fundiert mit Entwickler:innen zu besprechen.

Inhalt

• Tag 1 und 2: Denken in Interaktion & erste Komponenten
  • Einstieg & Kontext
  • Rolle von JavaScript im UI-Design (Struktur vs. Stil vs. Verhalten)
  • Vom statischen Layout zur interaktiven Komponente
  • Typische UI-Patterns (Toggle, Tabs, Modals, Feedback)
• Setup & Arbeitsweise
  • JavaScript in HTML einbinden
  • Arbeiten mit Browser DevTools
  • Konsole als Design-Werkzeug
• DOM verstehen (Design -> Code)
  • Wie HTML als Struktur im Browser vorliegt
  • Elemente gezielt auswählen und verändern
  • Inhalte dynamisch ändern (Text, Attribute, Klassen)
• Erste UI-Interaktionen
  • Mini-Projekt: Interaktiver Content Block
  • Text ein-/ausblenden
  • „Mehr anzeigen“ / „Weniger anzeigen“
  • Klassen toggeln (z. B. für CSS States)
• JavaScript Basics - nur das, was man wirklich braucht
  • Variablen (für Zustände in UI)
  • Datentypen (Strings, Zahlen, Boolean)
  • Bedingungen (if -> UI reagiert)
  • Fokus: „Was passiert wenn Nutzer X macht?“
• Komponentenlogik & Nutzerinteraktion
  • Events = Herzstück von UI
  • Klick, Hover, Tastatur
  • Event Listener verstehen und einsetzen
  • Unterschied: Zustand vs. Aktion
• Praxisblock: Interaktive Komponenten
  • Projekt: Akkordeon / Tabs
  • mehrere Elemente steuern
  • aktiven Zustand verwalten
  • UX-Logik abbilden
  • Schleifen & Struktur
  • Mehrere Elemente gleichzeitig ansprechen
  • Listen von Elementen bearbeiten
  • Beispiel: Navigation, Cards
  • Funktionen = wiederverwendbare Bausteine
  • Logik kapseln
  • Parameter übergeben (flexible Komponenten)
  • Rückgabewerte nutzen
  • Projekt: wiederverwendbare Toggle-Funktion
  • Objekte im UI-Kontext
  • Zustände speichern (z. B. Formulare, Komponentenstatus)
  • einfache Datenstrukturen für UI nutzen
• Realistische UI-Prototypen & Best Practices
  • Arbeiten mit echten UI-Flows
  • Nutzerinteraktionen kombinieren
  • Zustände über Zeit verändern
• Tag 3: Praxisblock - Komplexere Komponenten
  • Projekt 1: Formular mit Validierung
  • Eingaben prüfen (rudimentär)
  • Fehlermeldungen anzeigen
  • visuelles Feedback geben
  • Projekt 2: Countdown / Timer UI
  • Zeitbasierte Interaktion
  • dynamische Anzeige
  • Projekt 3: Modal / Overlay
  • öffnen / schließen
  • Fokus & UX beachten
• DOM vertiefen (für echte Projekte)
  • Elemente erstellen (dynamische Inhalte)
  • Styles per JS verändern
  • UI dynamisch erweitern
• Debugging & sauberes Arbeiten
  • Fehler verstehen (statt nur beheben)
  • Debugging im Browser
  • typische Fehlerquellen im UI-Code
• Code-Qualität für Designer:innen
  • lesbarer Code
  • einfache Struktur statt „cleverer“ Lösungen
  • kleine, verständliche Funktionen