Where Atomic Design Lives

724 Aufrufe

Veröffentlicht am

Webdesign is damn hard. As web designers we challenge ourselves to create the most efficient, beautiful and maintainable designs everyday. To achieve these goals in the era of responsive design and device fragmentation we adopted Atomic Design with a specialized toolchain called patternplate. We'll show how you can benefit in your work from adopting the Atomic Design methodology and give a brief introduction on our patternplate tool.

Veröffentlicht in: Software
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
724
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
27
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Where Atomic Design Lives

  1. 1. Where Atomic Design lives
  2. 2. Moin! Mario Frontend Developer marionebl @marionebl Daniel Frontend Developer dangoo @daniel_gooss
  3. 3. Über S2 • Digitalagentur mit Hauptsitz in Ottensen • ~500 Mitarbeiter in Hamburg, Frankfurt a.M., München und Prag • Schwerpunkt E-Commerce • Ausbildungsbetrieb Mediengestaltung / Fachinformatik
  4. 4. Wer seid ihr?
  5. 5. Webdesign ist schwer!
  6. 6. Device Fragmentation
  7. 7. User Agent Fragmentation
  8. 8. Responsive Design Lösungsansatz
  9. 9. Responsive Design
  10. 10. 40% Margin Farbe: #fff Text-Farbe: #0091a6 Button
  11. 11. Designsysteme statt Seitendesigns Lösungsansatz
  12. 12. • Problemlösungen auf Komponentenbasis statt im jeweiligen Seitenkontext • Gemeinsame, komponenten-basierte Sprache im Team und mit dem Kunden • Wiederverwendbarkeit von Modulen hilft bei Weiterentwicklung des Designs Designsysteme statt Seitendesigns
  13. 13. Webdesign Designsysteme sind schwer!
  14. 14. Atomic Design
  15. 15. Atomic Design • Hergeleitet von Brad Frost um 2013 • Einteilung von Designs in kleine wiederverwendbare Blöcke:
 Komponenten
  16. 16. Atoms Atome sind die Grundbausteine von Materie. Im Web unsere HTML-Tags (label, input, form…)
  17. 17. Molecules Moleküle sind Gruppierungen von Atomen und die kleinsten Grundeinheiten von Komponenten.
  18. 18. Organisms Organismen sind Gruppen von Molekülen, die eine relativ komplexe, individuelle Sektion eines Interfaces bilden.
  19. 19. Templates Templates enthalten Gruppen von Organismen, die zusammen eine Seite ergeben.
  20. 20. Pages Seiten sind spezifische Instanzen von Templates, in denen die Platzhalter durch repräsentative Inhalte ausgetauscht werden.
  21. 21. Designsysteme Atomic Design ist schwer!
  22. 22. • Dokumentation: Wie werden die Design-Komponenten isoliert dokumentiert? • Implementierung: Wie wird Code Duplication und Bleeding zwischen den Komponenten verhindert? • Integration: Wie wird der erstellte Code im Zielprojekt integriert? Schwierigkeiten im Atomic Design
  23. 23. Static Styleguides Was bisher geschah
  24. 24. • Medienbruch: In Print können im Web nicht umsetzbare Designs erstellt werden • Alternd: Keine dauerhafte Dokumentation für Team und Kunden • Unvollständig: Animation, Interaktion und Motion nicht dokumentierbar • Ineffizient: Regeln für responsive Design können nur mit viel Dopplungen gezeigt werden Static Styleguides
  25. 25. Living Styleguides Also?
  26. 26. • Kein Medienbruch: Design für das Web im Web • Immer aktuell: Der Living Styleguide ist die Quelle für den Produktionscode, kann also nicht veralten • Vollständig: Was im Browser möglich ist, ist auch im Living Styleguide möglich Living Styleguides
  27. 27. Where Atomic Design lives
  28. 28. Unsere Lösung
  29. 29. • … eine Entwicklungsumgebung zur Erstellung von Atomic Designs • … eine Webanwendung zur Präsentation und Dokumentation von Atomic Designs • … ein Build-Tool zur variablen Erzeugung von optimiertem und integrierbarem Frontend-Code patternplate enthält …
  30. 30. DEMO
  31. 31. • Ein Ordner pro Pattern • JavaScript, CSS, Markup und Dokumentation in jedem Pattern • Unterscheidung zwischen Library- und Demo-Code • Dependencies zwischen Patterns sind möglich und transparent patternplate features
  32. 32. Bonus-Runde! • Bei SinnerSchrader produktiv im Einsatz • Aktives Entwicklungsteam • OpenSource unter MIT-Lizenz • Öffentlich: http://github.com/sinnerschrader/patternplate
  33. 33. Q&A
  34. 34. THX • Slides: slideshare.net/marionebl/where-atomic-design-lives • Patternplate: github.com/sinnerschrader/patternplate • Daniel: github.com/dangoo twitter.com/dangoo • Mario: github.com/marionebl twitter.com/marionebl
  35. 35. • Brad Frost: http://bradfrost.com/ • Atomic Design Book: http://atomicdesign.bradfrost.com/

×