Kursbeschreibung

Der Kurs führt in die Konzeption und Umsetzung von User Interfaces ein und erläutert die Bedeutung der User Experience in der Entwicklung von erfolgreichen Webseiten oder Apps. Mit Figma werden Prototyping-Beispiele umgesetzt. Zudem erhältst du Kenntnisse in der Umsetzung der Barrierefreiheit und der Nutzung Künstlicher Intelligenz im Beruf.

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: Interaktionenm, 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.