Schulung/Seminar: Design für Developer
In diesem Workshop erfahren Entwickler-Teams, wie sie digitale Layouts gestalten, die nicht nur ästhetisch überzeugen, sondern auch funktional und nutzerfreundlich sind. Angefangen von Grundlagen zu Gestaltgesetzen über Farben und Typografie bis hin zu responsiven Layouts und Design Tokens werden alle Bereiche behandelt, die den Design-Development-Workflow verbessern.
Inhalte
Die folgenden Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig gewünscht. Der Umfang beträgt, abhängig von den Vorkenntnissen und dem Anteil praktischer Übungen, meist zwischen 8h – 24h. Gerne passen wir die Agenda auf Ihre individuellen Anforderungen hin an, bzw. beziehen aktuelle Praxisprojekte mit ein. Wir stimmen uns dazu im Vorfeld der Schulung persönlich mit Ihnen ab.
Workflow & Zusammenarbeit
- Warum Designgrundlagen Dev-Teams helfen
- Zusammenarbeit und Kommunikation verbessern
- Figma und Design-Systematiken
- UX vs. UI vs. Frontend-Design
- Umgang mit Frameworks
UI Design-Grundlagen
- Gestaltgesetze
- Atomic Design & Design Tokens
- Grundlagen der Barrierefreiheit
UX Design Grundlagen
- UX Laws & kognitive Bias
- User Flows
- Prototypen erstellen
- UX Copywriting
Konzepte für Design & Development
- Mobile First
- Content Out
- Progressive Enhancement
- Touch First
- Purpose First
Layout & Responsive Design
- Markolayouts & Mikrolayouts
- Konsistenz und Erwartungskonformität
- Spacing
- Responsive Design
- Intrinsic Design
- Arbeiten mit Grids und gestalterischen Vorgaben
- Layout & Barrierefreiheit
Typografie
- Visuelle Hierarchie
- Relative Schriften & Fluid Type Scales
- Schriftauswahl & Schriftkombinationen
- Typografische Systeme entwickeln
- Typografie & Barrierefreiheit
- Typografie im Design-Tool
Farbe
- Farbwahrnehmung und Psychologie
- Farbschemata entwickeln
- Color Mapping / Light Mode Dark Mode
- Farbräume und Farbmodelle
- Farbnotationen
- Farbe und Barrierefreiheit
- Farbe im Design-Tool
Interaktionen
- States
- Tastatur-Navigation
- Screenreader-Kompatibilität
- Icons
Animationen
- Vorteile von Animationen
- Animationen planen und gestalten
- Mikroanimationen
- Animation & Barrierefreiheit
- Farbe im Design-Tool