UI/UX-Design

UI/UX-Design

Allgemeine Einführung (ca. 1 Tag)
UX, Usability, UI, Mental Model Guidline, Human factors Guideline 
Prinzipien der nutzerzentrierten Gestaltung
ISO 9241-210/HCD
Barrierefreiheit (Accessibility): Grundbegriffe, rechtliche Vorgaben (BITV, EU-Richtlinien), Bedeutung für UX-Design
Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme
Arten von KI-Tools im UI-/UX-Kontext (Text, Bild, Analyse)

HCD: Analyse – Nutzungskontext (ca. 2 Tage)
Personae und Empathy Map
Customer Journey
Überblick zu Web Analytics/Fragebogen

HCD: Spezifizieren der Nutzungsanforderung (ca. 1 Tag)
Szenarien, User Stories
Aufgabenmodell, Task Flows
Kontextinterviews und Beobachtung
Tagebuchstudien

HCD: Erzeugen von Gestaltungslösungen, um Nutzungsanforderung zu erfüllen (ca. 1 Tag)
Richtlinien und Normen: 7 Dialogprinzipien der ISO 9241-110
10 Prinzipien des User Interface Designs nach Jakob Nielsen
Visuelle Wahrnehmung, Gesetzmäßigkeiten

HCD-Gestaltungslösungen: Taxonomie, Informationsarchitektur und Navigationskonzepte (ca. 3 Tage)
Flow Chart
User Flow
Informationsarchitektur
Micro Informationsarchitektur
Conversion-Strategie
Navigationskonzepte und Sitemap
Card Sorting: Planung, Vorbereitung, Durchführung und Auswertung
Mobile Navigation Patterns (Bootom Navigation, Hamburger Menus, Tabs)

Überblick agiles Projektmanagement (ca. 1 Tag)
Wasserfall-Modell vs. agile Methoden
Einblick in agiles Management nach der Scrum-Methode
Epic, User Story und Task
Design Sprint Methode

HCD-Gestaltungslösungen: User Interface Design (ca. 2 Tage)
Styleguide, UI KITs, Pattern Library und Design System
UI Komponenten/Elemente und Formulare
Farben, Schrift und Typografie im UI, Icons
Barrierfreiheit: Farbkontraste und gut lesbare Schrift, Bedienelemente (Größe, Abstände, Fokus)
Automatisierte Prüfung von Kontrasten, Lesbarkeit und Alternativtexten
Kurzer Überblick über die semantische Struktur (HTML/ARIA)
Atomic Design
Mobile First Design

HCD-Gestaltungslösungen: Entwurfstechniken mit Figma (ca. 3 Tage)
Struktur und Grundlagen: Pages und Frames, Layout Grids, Constraints
Komponenten und Varianten (Buttons, Bibliotheken, Design-Systeme)
Responsives Design (Frames, Auto Layout)
Scribbles, Wireframes, Mockups
Prototyping: Interaktionen, Transitions, Overlays, Prototyp-Sharing
Nutzung von KI-Funktionen in Figma und ergänzenden Tools zur schnellen Erstellung und Variation von Entwürfen

Usability Testing und Evaluation (ca. 2 Tage)
Überblick über Usability-Testmethoden
Thinking Aloud: Planung, Vorbereitung, Durchführung und Auswertung
Fragebögen  (UEQ, AttrakDiff, VisAWI)
A/B-Testing
Barrierefreiheit: Tests mit Tastatur und Screenreader
Einsatz von Hilfsmitteln und Tools

Projektarbeit (ca. 4 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



Änderungen möglich, die Lehrgangsinhalte werden regelmäßig aktualisiert.