Design für Entwickler

Das lernst du

• Inhalte nach Nutzerziel ordnen und visuelle Hierarchien aufbauen.
• Mit Schrift führen, Lesbarkeit sichern und Skalen aufbauen.
• Farben sinnvoll einsetzen, Kontraste prüfen und Barrierefreiheit wahren.
• Konsistente Abstandssysteme, Raster und responsive Hierarchien anwenden.
• Oberflächen verständlich bedienbar machen durch Zustände, Formulare und Motion.
• Ein vollständiges Projekt von der Konzeption über die Fehlerbehebung bis zum finalen Design-Review zusammenführen.

Kursinhalt

1. Kapitel 1 Zweck und Hierarchie

   Inhalte nach Nutzerziel ordnen und visuelle Hierarchien aufbauen.

   1. Nutzerziel und Primäraktion
   2. Visuelle Gewichte ausbalancieren
   3. Hierarchie-Fehler beheben
   4. Scannbarkeit und Struktur
   5. Hierarchie-Herausforderung
   6. Mini-Projekt: Dashboard-Einstieg

2. Kapitel 2 Typografie

   Mit Schrift führen, Lesbarkeit sichern und Skalen aufbauen.

   1. Schriftfamilien und Paare
   2. Typografische Skala anwenden
   3. Zeilenlänge und Zeilenhöhe korrigieren
   4. Schriftgewichte und Auszeichnungen
   5. Typografie-Herausforderung
   6. Mini-Projekt: Artikelansicht

3. Kapitel 3 Farbe und Kontrast

   Farben sinnvoll einsetzen, Kontraste prüfen und Barrierefreiheit wahren.

   1. Farbrollen und Semantik
   2. Kontrastverhältnisse berechnen
   3. Barrierefreie Farbfehler beheben
   4. Dunkelmodus und Farbpaletten
   5. Farb- und Kontrast-Herausforderung
   6. Mini-Projekt: Status-Dashboard

4. Kapitel 4 Layout und Abstände

   Konsistente Abstandssysteme, Raster und responsive Hierarchien anwenden.

   1. Abstandssysteme und Skalen
   2. Nähe-Gesetz im Layout anwenden
   3. Layout-Chaos und Abstandsfehler beheben
   4. Responsive Spalten und Flexbox-Räume
   5. Layout- und Abstands-Herausforderung
   6. Mini-Projekt: Produkt-Katalog-Layout

5. Kapitel 5 Interaktion und Feedback

   Oberflächen verständlich bedienbar machen durch Zustände, Formulare und Motion.

   1. Interaktive Zustände und Affordance
   2. Formulare und Inline-Validierung
   3. Unklare Interaktionsfehler beheben
   4. Mikro-Animationen und sinnvolles Motion Design
   5. Interaktions- und Feedback-Herausforderung
   6. Mini-Projekt: Interaktives Einstellungs-Formular

6. Kapitel 6 Design-Synthese und Review

   Ein vollständiges Projekt von der Konzeption über die Fehlerbehebung bis zum finalen Design-Review zusammenführen.

   1. Design-Audit und Checkliste
   2. Kumulative Design-Korrekturen
   3. Code-Refactoring für UI-Systeme
   4. Design-Entscheidungen dokumentieren
   5. Abschluss-Design-Herausforderung
   6. Abschluss-Projekt: Vollständige Anwendung

So funktioniert jede Lektion

Keine stundenlangen Videos. Jede Lektion ist eine kurze Runde, die du selbst machst, bis die Idee sitzt.

1. Lesen

   Eine kurze Erklärung und eine klare Aufgabe. Gerade genug, um loszulegen.

2. Schreiben

   Du tippst den Code selbst, in einem echten Editor direkt im Browser.

3. Ausführen

   Führ ihn aus und sieh sofort, was dein Programm wirklich tut.

4. Prüfen

   Prüfen sagt dir, ob die Aufgabe gelöst ist, und was noch fehlt, falls nicht.

Gut zu wissen

• Keine Installation: Editor, Ausgabe und Prüfung laufen in deinem Browser-Tab.
• Ohne Konto als Gast starten; dein Fortschritt bleibt auf diesem Gerät.
• Ein kostenloses Ostrae-Konto synchronisiert Fortschritt und Einstellungen und schaltet den Coach MICA frei.

Weitere Kurse

• C# Grundlagen
• HTML: Websites strukturieren
• CSS: Websites gestalten
• JavaScript
• Python Grundlagen und Automatisierung
• Git, GitHub und Hosting
• GSAP Animationen