Post on 15-Apr-2017
transcript
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
• Schwerpunkt E-Commerce
• Ausbildungsbetrieb Mediengestaltung / Fachinformatik
Wer seid ihr?
Webdesign ist schwer!
Device Fragmentation
User Agent Fragmentation
Responsive DesignLö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 Team und mit dem Kunden
• Wiederverwendbarkeit von Modulen hilft bei Weiterentwicklung des Designs
Designsysteme statt Seitendesigns
Webdesign Designsysteme sind schwer!
Atomic Design
Atomic Design• Hergeleitet von Brad Frost um
2013
• Einteilung von Designs in kleine wiederverwendbare Blöcke:Komponenten
AtomsAtome sind die Grundbausteine von Materie. Im Web
unsere HTML-Tags (label, input, form…)
MoleculesMoleküle sind Gruppierungen von Atomen und die
kleinsten Grundeinheiten von Komponenten.
OrganismsOrganismen sind Gruppen von Molekülen, die eine relativ
komplexe, individuelle Sektion eines Interfaces bilden.
TemplatesTemplates enthalten Gruppen von Organismen, die
zusammen eine Seite ergeben.
PagesSeiten sind spezifische Instanzen von Templates, in denen die
Platzhalter durch repräsentative Inhalte ausgetauscht werden.
Designsysteme Atomic Design ist schwer!
• 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
Static StyleguidesWas bisher geschah
• 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
Living StyleguidesAlso?
• 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
Where Atomic Design lives
Unsere Lösung
• … 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 …
DEMO
• 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
Bonus-Runde!
• Bei SinnerSchrader produktiv im Einsatz
• Aktives Entwicklungsteam
• OpenSource unter MIT-Lizenz
• Öffentlich: http://github.com/sinnerschrader/patternplate
Q&A
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
• Brad Frost: http://bradfrost.com/
• Atomic Design Book: http://atomicdesign.bradfrost.com/