atomic design - Patrick Lobacher

ATOMIC DESIGN
DIE EINHEIT VON FRONTEND
UND DESIGN IM RWD-ZEITALTER
PATRICK LOBACHER | +PLUSWERK AG | 30.05.2016 | WEBINALE BERLIN
Patrick Lobacher Vorstandvorsitzender +Pluswerk AG Consultant Trainer (Agile) Coach Autor
Fullservice Agentur für digitale Transformation 12
Niederlassungen in DACH, Polen & Kapstadt
130+ Mitarbeiter
999+ Projekte in den letzten 20 Jahren
2
Consulting Strategieberatung Agile Coaching Online Marketing Projektmanagement Innovationsberatung
Kreation Markenentwicklung Konzeption Design / CI UX / Usabilty Text / Redaktion
Technik Websites Portale E-Commerce Systementwicklung Operations
Fullservice Agentur für digitale Transformation
3
DESIGN IN AGILEN
ZEITEN
Warum ist heute plötzlich alles anders?
4
DIE GUTEN ALTEN ZEITEN…
Alle Agenturen welche es in die
Grundauswahl geschaﬀt haben,
werden dann in der nächsten
Phase dazu aufgefordert einen
Designvorschlag zu erstellen.
5
DIE GUTEN ALTEN ZEITEN…
Planung
Wireframes
Design
Entwicklung
1 -24 Monate
6
Content
Qualitätssicherung
THE GOOD OLD DAYS…
7
8
WHATS WRONG WITH THIS?
9
WHATS WRONG WITH THIS?
10
WHATS WRONG WITH THIS?
24.093 Android Geräte (2015) / 18.796 (2014) / 11.868 (2013)
11
http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
12
http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
13
http://atomicdesign.bradfrost.com/chapter-1/
WHATS WRONG WITH THIS?
14
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
RWD
Responsive Web Design
15
ÜBERGANGSZEITEN…
Logo
Logo
Planung
16
Wireframes
Design
Entwicklung
Logo
Content
Qualitätssicherung
ÜBERGANGSZEITEN…
Logo
Logo
Planung
17
Wireframes
Design
Entwicklung
Content
Qualitätssicherung
18
JETZT: RWD-PROZESS
Content Testing
StyleTile Atomic Design
Prototyping
Create Content
Content Wireframe
RWD
Planning / Contract
Device Testing
Frontend
Content Strategy
19
Linear Design
ATOMIC DESIGN
Warum ist heute plötzlich alles anders?
20
“We’re not designing pages,
we’re designing systems of
components.”
Steven Hay
21
22
23
24
FRAMEWORKS?
•
Vorteile liegen auf der Hand
• Rapid Prototyping
• Viele Beispiele / Best Practices
• Hohe Browserkompatibilität
• Stetige Weiterentwicklung durch Vendor
•
Aber
• Festlegung auf Konventionen, Benennung & Struktur
• „one-size-fits-all“ / individuell
• Viel zu viel nicht benötigter Code
• schlecht skalierbar
25
PATTERNS - NICHT NEU
26
http://patternlab.io/resources.html
“One of the biggest advantages atomic
design provides is the ability to traverse
between abstract and concrete. We can
simultaneously see our interfaces broken
down to their atomic elements and also see
how those elements combine together to
form our final experiences.”
Brad Frost
27
28
http://joshduck.com/periodic-table.html
ATOMIC DESIGN
29
http://bradfrost.com/blog/post/atomic-web-design/
ATOME
•
•
•
•
30
HTML-Tags
Farben
Schriften
Animationen o.ä.
http://bradfrost.com/blog/post/atomic-web-design/
MOLEKÜLE
•
•
•
31
Kombinierte Atome
Backbone des
Design Systems
Zweckmässige
Einheiten
http://bradfrost.com/blog/post/atomic-web-design/
ORGANISMEN
•
•
32
Konkretisierung
(Interface)
Organismen
bestehen aus
ähnlichen und/oder
verschiedenen
Molekül-Typen
http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES
•
•
•
33
Weitere
Konkretisierung
Kontext für
Moleküle &
Organismen
Layout in Action
http://bradfrost.com/blog/post/atomic-web-design/
SEITEN
•
•
34
Spezifische
Instanzen der
Templates
Platzhalter-Content
wird iterativ durch
richtigen ersetzt
http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES & SEITEN
35
http://atomicdesign.bradfrost.com/chapter-2/
ATOMIC DESIGN
36
http://atomicdesign.bradfrost.com/chapter-2/
PATTERNLAB
Let’s get started
37
http://patternlab.io
38
http://patternlab.io
39
http://patternlab.io
40
https://github.com/pattern-lab/patternlab-php
41
https://github.com/pattern-lab/patternlab-php
42
https://github.com/pattern-lab/patternlab-php
JSON-Dateien mit Dummy-Daten
Patterns (Mustache, JSON) CSS (Plain & SCSS) Schriften Bilder
JavaScript
43
http://www.netcraft.com/active-sites/
WATCHER
php core/builder.php -wr
source/_patterns source/_data
44
http://mustache.github.io/mustache.5.html
MUSTACHE
45
BEISPIEL
Molekül „Text mit Bild“, welches aus den drei Atomen
„Quadratisches Bild“, „Titel“ und „Absatz“ besteht
mkdir source/_patterns/01-molecules/08-textbild
46
BEISPIEL
cd source/_patterns/01-molecules/08-textbild touch 00-text-mit-bild.mustache
<h1>Text mit Bild</h1>
<div class="block block-thumb">
<a href="{{ url }}" class="b-inner">
<div class="b-thumb">
{{> atoms-square }}
</div>
<div class="b-text">
<h2 class="b-title">{{ title }}</h2>
{{> atoms-paragraph }}
</div>
</a>
</div> 47
REAL LIFE DEMO
Pattern Lab im Einsatz
48
REAL LIFE DEMO
http://styleguide.typo3.org/?p=all
49
REAL LIFE DEMO
http://styleguide.europeana.eu
50
REAL LIFE DEMO
http://patterns.frostfinery.com
51
REAL LIFE DEMO
http://patterns.frostfinery.com
52
REAL LIFE DEMO
sevenheadsdesign.com/patterns/
53
REAL LIFE DEMO
54
REAL LIFE DEMO
55
REAL LIFE DEMO
56
QUELLEN
Zum Thema Atomic Design
57
REAL LIFE DEMO
58
http://atomicdesign.bradfrost.com
QUELLEN
http://de.slideshare.net/bradfrostweb/atomic-design
59
http://atomicdesign.bradfrost.com
QUELLEN
https://vimeo.com/67476280
60
http://atomicdesign.bradfrost.com
DAS BESTE ZUM
SCHLUSS
Die ultimative Top-5 Liste
61
#1
CONTENT FIRST
62
#2
MOBILE
SECOND
63
#3
KEINE
PSD!
64
#4
KEINE
LAYOUTS!!
65
#5
ATOMIC
DESIGN
66
VIELEN DANK!
www.pluswerk.ag @patricklobacher
67
KONTAKT
Patrick Lobacher Vorstandsvorsitzender [email protected]
+49 89 130 145 20 www.pluswerk.ag
+Pluswerk AG Wilhelm-Hale-Str. 53 80639 München Germany
68
http://okr-beratung.de https://www.facebook.com/pluswerk
https://twitter.com/pluswerkag
https://twitter.com/patricklobacher
https://www.linkedin.com/company/-pluswerk-ag
https://plus.google.com/113397823770862988928
PORTFOLIO
Fullservice Agentur für digitale Transformation
Strategy
Consulting
Digital
Technology
Operations
Digitalisierung / Digitale Transformation
New Work / OKR (Digital) Leadership / Management 3.0 Agile / Lean
z.B. SEO / SEM /
SMM / Innovation
69
Coaching / Sparing PM / Beratung
Digital Agentur
CRM / CMS E-Commerce IoT
Server Redaktion Content
z.B. Continuous Integration

Download Report