Kurs für UI/UX-Design

Lektion 1 • Grundlegende Designprinzipien

Führt Gestaltgesetze, Hierarchie, Kontrast und Ausrichtung als grundlegende visuelle Regeln ein. Wendet diese Prinzipien auf Übungen zur Kritik von Benutzeroberflächen an.

Lektion 2 • Der Design-Thinking-Prozess

Stellt das fünfstufige Design-Thinking-Modell als Rahmenwerk zur Problemlösung vor. Verbindet jede Stufe mit praktischen UI/UX-Ergebnissen.

Lektion 3 • Geschichte und Entwicklung des Designs

Verfolgt die Entwicklung des Designs von den Wurzeln im Druck- und Industriedesign bis hin zu digitalen Benutzeroberflächen. Verortet moderne Praktiken im Kontext historischer Veränderungen.

Lektion 4 • UI vs. UX verstehen

Definiert UI als visuelle Oberflächenschicht und UX als ganzheitliche Nutzerreise. Legt das im gesamten Kurs verwendete Vokabular fest.

Lektion 1 • Umfragen und quantitative Forschung

Führt in Fragebogendesign, Stichprobenverfahren und grundlegende statistische Interpretation ein. Ergänzt qualitative Erkenntnisse durch messbare Nutzerdaten.

Lektion 2 • Synthese von Forschungserkenntnissen

Behandelt Affinitätsdiagramme, thematische Analyse und Priorisierung von Erkenntnissen. Wandelt Rohdaten in eine umsetzbare Designrichtung um.

Lektion 3 • Durchführung von Nutzerinterviews

Lehrt strukturierte und halbstrukturierte Interviewtechniken zur Ergründung von Nutzermotivationen. Baut Fähigkeiten in aktivem Zuhören und neutraler Fragestellung auf.

Lektion 4 • Erstellung von Nutzer-Personas und Journey Maps

Begleitet Studierende bei der Erstellung evidenzbasierter Personas und der Abbildung durchgängiger Nutzerreisen. Diese Artefakte kommunizieren den Nutzerkontext gegenüber Stakeholdern.

Lektion 1 • Such- und Wegfindungssysteme

Behandelt die Such-UX, Filter, Breadcrumb-Navigation und Fortschrittsanzeigen. Stellt sicher, dass Benutzer immer wissen, wo sie sich befinden und wie sie fortfahren können.

Lektion 2 • Gestaltung von Sitemaps und Taxonomien

Behandelt hierarchische, flache und Naben-Speichen-Site-Strukturen. Studierende erstellen Sitemaps, die die mentalen Modelle der Nutzer widerspiegeln.

Lektion 3 • Card Sorting und Tree Testing

Lehrt partizipative Methoden zur Validierung von Inhaltsgruppierungen und Navigationsbezeichnungen. Führt zu datengestützten Entscheidungen in der Informationsarchitektur.

Lektion 4 • Navigationsmuster und Menüs

Bietet einen Überblick über gängige Navigationsmuster, einschließlich Top-Navigation, Side-Navigation, Tabs und Hamburger-Menüs. Passt Muster an Gerät und Kontext an.

Lektion 1 • Digitale Wireframing-Techniken

Behandelt die Erstellung von Mid-Fidelity-Wireframes mit branchenüblichen Werkzeugen. Konzentriert sich auf Layout-Raster, Abstände und die Platzierung von Komponenten.

Lektion 2 • Grundlagen des Interaktionsdesigns

Definiert Ziele des Interaktionsdesigns, einschließlich Rückmeldung, Angebotscharakter und Zustandsänderungen. Schlägt eine Brücke zwischen statischen Wireframes und dynamischen Prototypen.

Lektion 3 • Skizzieren und Low-Fidelity-Wireframes

Führt schnelles Skizzieren und Papier-Wireframing als Werkzeuge für die schnelle Ideenfindung ein. Ermutigt zu divergentem Denken, bevor digitale Werkzeuge eingesetzt werden.

Lektion 4 • Erstellung klickbarer Prototypen

Lehrt das Verknüpfen von Bildschirmen und das Hinzufügen von Übergängen, um echtes Produktverhalten zu simulieren. Erstellt testbare Prototypen für Nutzerforschungssitzungen.

Lektion 1 • Visuelle Konsistenz und Styleguides

Begleitet Studierende bei der Dokumentation visueller Entscheidungen in einem wiederverwendbaren Styleguide. Sorgt für Designkonsistenz über die Bildschirme eines Produkts hinweg.

Lektion 2 • Layout, Raster und Abstände

Führt Spaltenraster, Grundlinienraster und Abstandssysteme für konsistente Layouts ein. Wendet Layoutregeln auf bildschirmübergreifende Designsysteme an.

Lektion 3 • Farbtheorie und UI-Anwendung

Behandelt Farbmodelle, Paletten, Kontrastverhältnisse und emotionale Assoziationen. Wendet Farbentscheidungen systematisch auf Oberflächenkomponenten an.

Lektion 4 • Icon-Design und Bildsprache

Lehrt Prinzipien des Icon-Designs, Stilkonsistenz und den Einsatz von Bildern in Benutzeroberflächen. Stellt sicher, dass visuelle Elemente den Inhalt unterstützen und nicht von ihm ablenken.

Lektion 1 • Planung einer Usability-Studie

Behandelt das Schreiben von Testplänen, die Definition von Aufgaben und die Rekrutierung repräsentativer Teilnehmer. Stellt sicher, dass Tests valide und zuverlässige Erkenntnisse liefern.

Lektion 2 • Analyse von Usability-Daten

Behandelt Aufgabenerfolgsraten, Fehleranalyse, Aufgabenbearbeitungszeit und qualitative Kodierung. Wandelt Beobachtungen aus Sitzungen in priorisierte Designprobleme um.

Lektion 3 • Berichterstattung und Umsetzung von Erkenntnissen

Begleitet Studierende beim Verfassen von Ergebnisberichten und der Präsentation von Empfehlungen vor Stakeholdern. Schließt den Kreislauf zwischen Testen und Designiteration.

Lektion 4 • Grundlagen der Usability-Tests

Definiert Usability-Dimensionen, einschließlich Effektivität, Effizienz und Zufriedenheit. Positioniert Testen als eine Kernaktivität des Designs, nicht als letzten Schritt.

Lektion 1 • Web Content Accessibility Guidelines

Behandelt die vier WCAG-Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Ordnet die Richtlinien spezifischen UI-Designentscheidungen zu.

Lektion 2 • Barrierefreie Farbe und Typografie

Wendet Anforderungen an Kontrastverhältnisse und Mindestschriftgrößen auf das visuelle Design an. Stellt die Lesbarkeit von Inhalten für unterschiedliche Sehfähigkeiten sicher.

Lektion 3 • Barrierefreiheitsauditierung und -korrektur

Lehrt automatisierte und manuelle Auditmethoden, um Mängel in der Barrierefreiheit zu identifizieren. Studierende erstellen priorisierte Korrekturpläne für reale Benutzeroberflächen.

Lektion 4 • Prinzipien des Inklusiven Designs

Stellt das Spektrum menschlicher Fähigkeiten und das soziale Modell von Behinderung vor. Definiert Barrierefreiheit als Designqualität neu, nicht als Checkbox für die Compliance.

Lektion 1 • Dokumentation und Governance eines Designsystems

Lehrt das Verfassen von Nutzungsrichtlinien, Beitragsprozessen und Versionierungsstrategien. Stellt sicher, dass das System korrekt bleibt und von Teams angenommen wird.

Lektion 2 • Atomic-Design-Methodik

Wendet Brad Frosts Atomic-Design-Modell an, um UI in Atome, Moleküle, Organismen und Vorlagen zu zerlegen. Strukturiert die Komponentenhierarchie logisch.

Lektion 3 • Einführung in Designsysteme

Definiert Designsysteme als Single Source of Truth, die Komponenten, Muster und Richtlinien kombiniert. Erläutert den geschäftlichen Nutzen und die Effizienzgewinne für Teams.

Lektion 4 • Design Tokens und Theming

Führt Design Tokens als benannte Variablen für Farbe, Abstände und Typografie ein. Ermöglicht konsistentes Theming und Unterstützung für den dunklen Modus.