Design Fundamentals for Developers
A hands-on workshop covering visual hierarchy, typography, color systems, spacing, and everything in between — taught from a developer's perspective.
Entwickler treffen täglich Dutzende Designentscheidungen
Welche Textfarbe für ein deaktiviertes Eingabefeld? Wie zeigst du einen Fehlerzustand an? Wie groß ist die Überschrift für ein Dialog-Fenster? Ohne ein Design-Framework fallen diese Entscheidungen auf das zurück, was am schnellsten fertig ist — das Ergebnis sind Oberflächen, die technisch funktional, aber visuell inkonsistent und schwer zu warten 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
All Modules
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
UI Components
Anatomie, Hierarchie und States von UI-Komponenten — Buttons, Cards und Forms als konsistentes System
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