DESIGN & UX · ZUM SELBERMACHEN
DEIN TÄGLICHESUI/UX-COACHING
Gutes Design lässt sich trainieren.
Entwickle deinen Blick für Gestaltung und Nutzererfahrung. Eine kleine Lektion, ein konkretes Beispiel, eine eigene Entscheidung – Tag für Tag.
Ohne Anmeldung. Lerne in deinem Tempo.
- Für deinen Alltag
- Ca. 15 Min. pro Lektion
- Direkt loslegen
- 18 Lektionen verfügbar
- Dein Werkzeug
- Papier, Figma oder Code
- Kurs im Aufbau
- Weitere Lektionen folgen
DEINE LEKTIONEN
Hier fängst du an.
- LEKTION 01 · DESIGN VERSTEHENLektion öffnen
Warum wirkt ein UI hochwertig?
Trainiere deinen Blick für Gruppierung, Hierarchie und bewusst eingesetzte Abstände.
ca. 12–15 Minuten inklusive Übung - LEKTION 02 · UX HINTERFRAGENLektion öffnen
Löse nicht das falsche UX-Problem
Trenne Symptom, Problemhypothese und Lösung – und plane, wie du deinen Entwurf überprüfst.
ca. 15 Minuten inklusive Übung - LEKTION 03 · FORMULARE GESTALTENLektion öffnen
Formulare: Der Unterschied liegt in den Zuständen
Gestalte Normalzustand, Fokus, Fehler und Disabled – mit einer bedienbaren Musterlösung.
ca. 15 Minuten inklusive Übung - LEKTION 04 · INFORMATIONEN PRIORISIERENLektion öffnen
Weniger anzeigen ≠ bessere UX
Vergleiche vollständige und progressive Ansichten – und wähle anhand der Nutzeraufgabe.
ca. 15 Minuten inklusive Übung - LEKTION 05 · DATEN VERGLEICHENLektion öffnen
Datentabellen auf Mobile: Übersicht oder Vergleichbarkeit?
Vergleiche Cards, Scroll-Tabelle und kompakte Liste – einschließlich Status und fehlender Werte.
ca. 15 Minuten inklusive Übung - LEKTION 06 · VISUELLEN FEINSCHLIFF TRAINIERENLektion öffnen
Warum 4 Pixel einen Unterschied machen können
Verfeinere eine KPI-Karte: Hierarchie, optische Ausrichtung, Zahlen und verständliche Statusangaben.
ca. 12–15 Minuten inklusive Übung - LEKTION 07 · SUCHEN UND FILTERNLektion öffnen
Suche und Filter: Zwischen Kontrolle und Komplexität
Gestalte eine mobile Buchsuche mit Quick-Filtern, klarer Auswahl und einem hilfreichen Zustand ohne Treffer.
ca. 15 Minuten inklusive Übung - LEKTION 08 · ZUSTANDSWECHSEL GESTALTENLektion öffnen
Microinteractions: Wenn das Schließen wichtiger ist als das Öffnen
Gestalte Enter und Exit für einen React-Dialog – mit Motion-Labor, Fokusführung und reduzierter Bewegung.
ca. 15 Minuten inklusive Übung - LEKTION 09 · FEHLER KORRIGIERBAR MACHENLektion öffnen
Undo statt „Bist du sicher?“
Wäge Undo und Bestätigung ab – mit Archiv, Wiederherstellung und verständlicher Fehlerbehandlung.
ca. 15 Minuten inklusive Übung - LEKTION 10 · RHYTHMUS UND DICHTE GESTALTENLektion öffnen
Warum ein 8-Pixel-Spacing-System noch kein gutes Layout macht
Verbinde Spacing, Dichte und responsive Typografie – mit Dichte-Labor und belastbarer KPI-Musterlösung.
ca. 12–15 Minuten inklusive Übung - LEKTION 11 · KI-VORSCHLÄGE PRÜFENLektion öffnen
KI-Agenten gestalten: Wie viel Kontrolle braucht der Nutzer?
Prüfe KI-Vorschläge, kläre Unsicherheit und gib konkrete Änderungen frei – mit interaktiver Review-Simulation.
ca. 15 Minuten inklusive Übung - LEKTION 12 · DESIGNKRITIK PRIORISIERENLektion öffnen
Design Critique: Erkennst du die wichtigsten UI-Probleme?
Priorisiere Dashboard-Probleme nach Nutzerwirkung – mit Top-3-Vergleich und kommentierter KPI-Musterlösung.
ca. 15 Minuten inklusive Übung - LEKTION 13 · DESIGNENTSCHEIDUNGEN ÜBERPRÜFENLektion öffnen
UX-Research: Wie beweist du, dass Design B besser ist?
Plane einen fairen Usability-Vergleich – mit neutralen Aufgaben, Testreihenfolge und kommentiertem Research-Plan.
ca. 15 Minuten inklusive Übung - LEKTION 14 · ASYNCHRONE ZUSTÄNDE GESTALTENLektion öffnen
Loading States: Wenn die Daten fehlen, aber die UX funktionieren muss
Gestalte Erstladen, Refresh und Fehler – mit State-Labor, Filterzuordnung und robuster React-Musterlösung.
ca. 15 Minuten inklusive Übung - LEKTION 15 · DARK MODE GESTALTENLektion öffnen
Dark Mode: Oberflächenhierarchie, semantische Farben und Accessibility
Entwickle ein stimmiges Dark-Mode-System – mit Theme-Labor, sechs Diagrammreihen und berechneten Kontrasten.
ca. 15–17 Minuten inklusive Übung - LEKTION 16 · FEEDBACK RICHTIG TIMENLektion öffnen
Formularvalidierung: Fehler verhindern, ohne Nutzer zu nerven
Gestalte hilfreiche Validierung – mit bedienbarem Projektformular, Fehlerübersicht und direkter Korrektur.
ca. 15–16 Minuten inklusive Übung - LEKTION 17 · NAVIGATION PRIORISIERENLektion öffnen
Navigation unter Platzmangel: Was muss wirklich sichtbar sein?
Priorisiere mobile Ziele und Desktop-Bereiche – mit responsiver Navigation, echten Demo-Links und Belastungstest.
ca. 15–16 Minuten inklusive Übung - LEKTION 18 · SCHNELLZUGRIFF GESTALTENLektion öffnen
Command Palettes: Effiziente Interfaces für Power User gestalten
Gestalte auffindbaren Schnellzugriff – mit Synonym-Suche, Tastatursteuerung und sicheren Aktionsschritten.
ca. 15–16 Minuten inklusive Übung
Weitere Lektionen sind in Vorbereitung.
DAS NIMMST DU MIT
Mehr als ein gutes Bauchgefühl.
Deinen Blick schärfen
Erkennen, warum ein Interface durchdacht wirkt und ein anderes unruhig.
UX-Probleme verstehen
Nutzerziele hinterfragen und Ursachen von vorschnellen Lösungen unterscheiden.
Ins Gestalten kommen
Eigene Varianten entwickeln, ausprobieren und Entscheidungen begründen.
DEIN NÄCHSTER SCHRITT
Nimm dir eine Viertelstunde.
Öffne die erste Lektion und schau genauer hin.