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/