Where Atomic Design lives
Moin!
Mario
Frontend Developer
marionebl
@marionebl
Daniel
Frontend Developer
dangoo
@daniel_gooss
Über S2
• Digitalagentur mit Hauptsitz in Ottensen
• ~500 Mitarbeiter in Hamburg, Frankfurt a.M., München und Prag
• Schwe...
Wer seid ihr?
Webdesign ist schwer!
Device Fragmentation
User Agent Fragmentation
Responsive Design
Lösungsansatz
Responsive Design
40% Margin
Farbe: #fff
Text-Farbe: #0091a6
Button
Designsysteme statt
Seitendesigns
Lösungsansatz
• Problemlösungen auf Komponentenbasis statt im jeweiligen
Seitenkontext
• Gemeinsame, komponenten-basierte Sprache im Tea...
Webdesign Designsysteme
sind schwer!
Atomic Design
Atomic Design
• Hergeleitet von Brad Frost um
2013
• Einteilung von Designs in
kleine wiederverwendbare
Blöcke:

Komponent...
Atoms
Atome sind die Grundbausteine von Materie. Im Web
unsere HTML-Tags (label, input, form…)
Molecules
Moleküle sind Gruppierungen von Atomen und die
kleinsten Grundeinheiten von Komponenten.
Organisms
Organismen sind Gruppen von Molekülen, die eine relativ
komplexe, individuelle Sektion eines Interfaces bilden.
Templates
Templates enthalten Gruppen von Organismen, die
zusammen eine Seite ergeben.
Pages
Seiten sind spezifische Instanzen von Templates, in denen die
Platzhalter durch repräsentative Inhalte ausgetauscht w...
Designsysteme Atomic Design ist
schwer!
• Dokumentation: Wie werden die Design-Komponenten isoliert
dokumentiert?
• Implementierung: Wie wird Code Duplication und...
Static Styleguides
Was bisher geschah
• Medienbruch: In Print können im Web nicht umsetzbare Designs
erstellt werden
• Alternd: Keine dauerhafte Dokumentation f...
Living Styleguides
Also?
• Kein Medienbruch: Design für das Web im Web
• Immer aktuell: Der Living Styleguide ist die Quelle für den
Produktionscod...
Where Atomic Design lives
Unsere Lösung
• … eine Entwicklungsumgebung zur Erstellung von Atomic Designs
• … eine Webanwendung zur Präsentation und Dokumentation v...
DEMO
• Ein Ordner pro Pattern
• JavaScript, CSS, Markup und Dokumentation in jedem Pattern
• Unterscheidung zwischen Library- u...
Bonus-Runde!
• Bei SinnerSchrader produktiv im Einsatz
• Aktives Entwicklungsteam
• OpenSource unter MIT-Lizenz
• Öffentlic...
Q&A
THX
• Slides: slideshare.net/marionebl/where-atomic-design-lives
• Patternplate: github.com/sinnerschrader/patternplate
• ...
• Brad Frost: http://bradfrost.com/
• Atomic Design Book: http://atomicdesign.bradfrost.com/
Where Atomic Design Lives
Where Atomic Design Lives
Nächste SlideShare
Wird geladen in …5
×

Where Atomic Design Lives

629 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
629
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
10
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/

×