Figma
Alle Design-Arbeiten finden in Figma statt. Wir pflegen eine einzige Quelle der Wahrheit mit organisierten Seiten: Komponenten, Muster, Flows und Archiv. Entwickler haben Lesezugriff auf alle Dateien.
Unsere Figma-Bibliothek enthält alle Produktionskomponenten mit Varianten, Auto-Layout und responsiven Einschränkungen. Komponenten entsprechen 1:1 unserer React-Komponentenbibliothek.
Design-Prozess
Wie wir ein neues Feature oder eine neue Seite angehen:
- Verstehen: Welches Problem lösen wir? Für wen? Wie sieht Erfolg aus?
- Erkunden: Mehrere Ansätze skizzieren. Sich nicht an die erste Idee binden. Optionen zeigen.
- Verfeinern: Eine Richtung wählen und polieren. Alle Zustände und Randfälle berücksichtigen.
- Überprüfen: Feedback von Design und Engineering einholen. Basierend auf Input iterieren.
- Veröffentlichen: Mit Engineering an der Implementierung arbeiten. Das Endergebnis QA-testen.
Design-Review
Wesentliche Design-Änderungen werden vor der Implementierung überprüft:
- Das Problem, das gelöst wird, teilen – nicht nur die Lösung
- Kontext zeigen – wie passt dies zur größeren Erfahrung?
- Randfälle einbeziehen: Lade-, Leer-, Fehlerzustände
- Früh Feedback einholen, wenn Änderungen noch günstig sind
Design-Dev-Übergabe
Wir werfen Designs nicht einfach über die Mauer. Designer und Entwickler arbeiten von Anfang an zusammen. Die Übergabe umfasst:
- Figma-Link mit aktiviertem Inspect-Modus
- Interaktionsspezifikationen für Animationen
- Hinweise zum responsiven Verhalten
- Barrierefreiheitsanforderungen
- Texte und Mikrotexte finalisiert
- Asset-Exporte falls nötig
Qualitätssicherung
Design-QA findet vor und nach dem Launch statt:
- Implementierte Features gegen Designs überprüfen
- Responsives Verhalten auf echten Geräten testen
- Animationen und Übergänge auf richtiges Gefühl prüfen
- Barrierefreiheit mit Screenreadern prüfen
- Intentionale Abweichungen dokumentieren