Seminare
Seminare
  • Seminare
  • Anbieter
  • 5 km
  • 10 km
  • 25 km
  • 50 km
  • 100 km
  • 150 km
  • 200 km
  • 300 km

UI-Prototypen mit JavaScript entwickeln - für Designer

Seminar - 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.
Termin Ort Preis*
firmenintern auf Anfrage auf Anfrage
*Alle Preise verstehen sich inkl. MwSt.

Detaillierte Informationen zum Seminar

Inhalte:
  • 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

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.
Seminarkennung:
S6831
Nach unten
Nach oben
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.
Akzeptieren Nicht akzeptieren









Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha



Bei der Verarbeitung Ihrer personenbezogenen Daten im Zusammenhang mit der Kontaktfunktion beachten wir die gesetzlichen Bestimmungen. Unsere ausführlichen Datenschutzinformationen finden Sie hier. Bei der Kontakt-Funktion erhobene Daten werden nur an den jeweiligen Anbieter weitergeleitet und sind nötig, damit der Anbieter auf Ihr Anliegen reagieren kann.







Um Spam abzuwehren, geben Sie bitte die Buchstaben auf dem Bild in das Textfeld ein:

captcha