UI-Prototypen mit JavaScript entwickeln - für Designer
Webinar - GFU Cyrus AG
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.
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
Dauer/zeitlicher Ablauf:
3 Tage
Zielgruppe:
Das Seminar richtet sich an Designer:innen mit HTML/CSS-Kenntnissen, die interaktive Komponenten selbst umsetzen wollen. Besonders geeignet ist es für UI-, UX- und Web-Designer:innen, die Prototypen eigenständig entwickeln, Interaktionen besser verstehen und enger mit der Entwicklung zusammenarbeiten möchten. Sie sollten Grundkenntnisse in HTML und CSS mitbringen und mit dem Aufbau statischer Layouts vertraut sein. Programmiererfahrung ist nicht erforderlich. Sie profitieren besonders, wenn Sie Gestaltung nicht nur visuell denken, sondern Verhalten, Zustände und Nutzerinteraktionen praktisch umsetzen möchten.
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern.
Diese Cookies werden nicht automatisiert gesetzt.
Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren.
Weitere Informationen finden Sie hier.
