Coding Design Systems

Warum und wie wir DSK bei Atelier Disko entwickelt haben. DSK ist ein Open Source Tool, um Design Systeme zu erstellen.

Transcript

1. Coding Design Systems Building Software for Designers
2. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Hallo, ich bin Marius Wilms Tech lead, Software creator und Künstler. CTO bei Atelier Disko.
3. Mein Vortrag: Warum und wie wir DSK entwickelt haben. DSK ist ein Open Source Tool, um Design Systeme zu erstellen.
4. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Design Systems?
5. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Design Systems? Viele Unternehmen nutzen bereits Design Systeme.
6. IBM ibm.com/design
7. Google google.design
8. Airbnb airbnb.design
9. Audi audi.com/ci
10. Audi audi.com/ci
11. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Design Systems? Was sind die Vorteile?
12. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Design Systems? Was für Inhalte finden sich?
13. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one!
14. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Zielgruppen: Designer & Frontend Entwickler
15. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Anforderungen:
16. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Anforderungen: skizzieren, sammeln, organisieren
17. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Anforderungen: Artikel zur Design Kultur, Guides zur Verwendung, Komponenten, Sketch files (Design Kits)
18. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Anforderungen: Enable process quickly
19. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Wunsch: Reusable, Ready to invest, Longterm tool
20. Blank-Canvas Tool Janvdee, CC BY-SA 3.0
21. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Annahme: „Keine Struktur bedeutet Freiheit und führt deswegen zu kreativen Ergebnissen.“
22. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Annahme: „Ähnliche Dinge finden automatisch zueinander.“
23. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Aber: das hat so nicht gepasst.
24. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Nächster Versuch + Learnings
25. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Gesucht wurde jetzt: - einordnende Struktur - Ähnliches zusammenfassen - etwas Unmittelbares
26. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Unsere Antworten:
27. Bäume als primäre Struktur
28. Tags
29. Markdown
30. Dateisystem als Interface
31. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Unsere Antworten: - Lokal ausgeführte Web App - JavaScript Frontend - Go Backend - 1 static binary - Deployed to Dropbox
32. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Design System Kit (DSK)
33. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Warum Trees?
34. The Japanese Tree Outliner App
35. DOM
36. Frontend Tree Navigation
37. Design System als Tree definieren
38. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! DSK 1.0: - Hosted Version - Bring your own Frontend - API v1 Freeze - „Live“ Updates
39. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Demo time!
40. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Let’s build one! Was wirklich gut geklappt hat: - Trees, Trees, Trees - Minimalismus - Dropbox deployments - Filesystem als Interface - Coding mit Designern
41. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Merci.
42. (4) Prioritize Ziel: innerhalb der Gruppe Konsens über gemeinsame Themen und Elemente definieren, die für die Ziele des Designprojekts am wertvollsten sind. Merci. github.com/atelierdisko/dsk @nperson atelierdisko.de