UX & UI Design für Entwickler
Lerne, wie gutes UX/UI-Design funktioniert — von visueller Hierarchie über Typografie und Farbsysteme bis hin zu Spacing und Nutzerführung. Praxisnah erklärt, direkt im Code anwendbar.
Gutes Design ist kein Zufall — es ist eine Entscheidung
Welche Farbe bekommt ein deaktivierter Button? Wie viel Abstand braucht eine Fehlermeldung? Wie führst du den Nutzer durch ein komplexes Formular? All das sind Designentscheidungen, die Entwickler jeden Tag treffen — oft ohne es zu merken. Ohne klare Grundlagen entstehen Oberflächen, die zwar funktionieren, aber unübersichtlich, inkonsistent und schwer wartbar sind.
Weniger Support
Klare Oberflächen erzeugen weniger Support-Anfragen
Mehr Konversion
20–40 % Verbesserung durch bessere Layouts und Texte
Weniger Abwanderung
Nutzer, die sich kompetent fühlen, bleiben länger
Schnelleres Onboarding
Neue Nutzer verstehen das Interface ohne Training
Kosten eines UX-Fehlers: Je später, desto teurer
Fehler sofort sichtbar, schnell korrigiert
Refactoring nötig, bereits gebaut
Nutzer betroffen, Support, Reputationsschaden
Was wir abdecken
- ✓Visuelle Hierarchie
- ✓Typografie-Systeme
- ✓Farbe & Kontrast
- ✓Abstände & Layout
- ✓UI-Komponenten
- ✓Responsive Design
- ✓Design-Systeme & Tokens
- ✓Gestalt-Prinzipien
Was wir nicht abdecken
- —Markenidentität & Logo-Design
- —Figma-Workflows
- —Vertiefende UX-Research-Methoden
- —Animationen & Motion Design
Alle Module
What is UX? What is UI?
Die Grundlagen: UX und UI definieren, unterscheiden und verstehen, warum beides zählt
Usability & User-Centered Design
Was Usability bedeutet, wie der UCD-Prozess funktioniert und warum Kontext entscheidend ist
User Needs, Requirements & User Stories
Nutzerbedürfnisse identifizieren, in Anforderungen übersetzen und als User Stories formulieren
User Research Methods
Die wichtigsten Forschungsmethoden kennen und die richtige Methode für die richtige Frage wählen
Creating User Personas
Evidenzbasierte Personas erstellen, die Teams helfen, nutzerfokussierte Entscheidungen zu treffen
Information Architecture
Inhalte strukturieren, Sitemaps erstellen und Navigationsstrukturen bewerten
Sketching & Interactive Prototypes
Früh skizzieren, Lo-Fi bis Hi-Fi verstehen und interaktive Prototypen erstellen
Wireframing: Lo-Fi to Mockup
Effektive Wireframes erstellen und wissen, wann der Übergang zum Hi-Fi-Mockup sinnvoll ist
Gestalt Principles
Sechs psychologische Grundprinzipien gezielt einsetzen, um Interfaces intuitiver und verständlicher zu gestalten
Visual Hierarchy
How to guide users through visual priority and structure
Typography & Font Selection
Choosing the right typefaces for your interfaces
Typography Systems
Building a consistent and scalable type scale
Color Systems
Warum fünf Farben nicht reichen — HSL-basierte Farbsysteme mit Abstufungen erstellen
Color Contrast & Accessibility
Contrast Ratios verstehen und Farben zugänglich einsetzen
Color Hierarchy & Attention
Mit Farbe gezielt den Blick lenken — Primary, Secondary, Tertiary
Spacing & Layout
Spacing systems, grids, and layout principles
Shadows & Elevation
Schatten als Kommunikationswerkzeug — Elevation-Systeme, Zwei-Schatten-Technik und Depth ohne Schatten
Images & Icons
Icons und Bilder als Kommunikationswerkzeuge — Vektor vs. Raster, Stroke vs. Fill, Text-Overlays
Responsive Design
Responsive Design als Denkweise — Mobile-First, Breakpoints, Fluid vs. Fixed Layouts, Content-Priorisierung
Design Systems & Tokens
Design Tokens als Vokabeln einer gemeinsamen Sprache — Global, Alias und Component Tokens für konsistente Systeme
Praxis Project: Dashboard
Ein flaches Dashboard von Grund auf gestalten — eigenes Design-System bauen und per Inspector auf Elemente anwenden