Embed Size (px)
Citation preview
ATOMIC DESIGNDIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTERPATRICK LOBACHER | +PLUSWERK AG | 30.05.2016 | WEBINALE BERLIN
2
Patrick Lobacher Vorstandvorsitzender+Pluswerk AG ConsultantTrainer(Agile) CoachAutor
Fullservice Agentur für digitale Transformation 12 Niederlassungen in DACH, Polen & Kapstadt 130+ Mitarbeiter 999+ Projekte in den letzten 20 Jahren
3
Consulting
StrategieberatungAgile Coaching
Online MarketingProjektmanagementInnovationsberatung
Kreation
MarkenentwicklungKonzeption Design / CI
UX / Usabilty Text / Redaktion
Technik
Websites Portale
E-CommerceSystementwicklung
Operations
Fullservice Agentur für digitale Transformation
4
DESIGN IN AGILEN ZEITEN
Warum ist heute plötzlich alles anders?
5
DIE GUTEN ALTEN ZEITEN…
Alle Agenturen welche es in die Grundauswahl geschafft haben,
werden dann in der nächsten Phase dazu aufgefordert einen Designvorschlag zu erstellen.
6
DIE GUTEN ALTEN ZEITEN…
Planung Wireframes Design Entwicklung Content Qualitäts-sicherung
1 -24 Monate
7
THE GOOD OLD DAYS…
8
9
WHATS WRONG WITH THIS?
10
WHATS WRONG WITH THIS?
11 http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?
24.093 Android Geräte (2015) / 18.796 (2014) / 11.868 (2013)
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/
WHATS WRONG WITH THIS?
15
RWDResponsive Web Design
16
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content Qualitäts-sicherung
Logo Logo Logo
17
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content Qualitäts-sicherung
Logo
Logo
18
19
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
JETZT: RWD-PROZESS
20
ATOMIC DESIGNWarum ist heute plötzlich alles anders?
21
“We’re not designing pages, we’re designing systems of
components.” Steven Hay
22
23
24
25
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
26
PATTERNS - NICHT NEU
http://patternlab.io/resources.html
27
“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
28 http://joshduck.com/periodic-table.html
29 http://bradfrost.com/blog/post/atomic-web-design/
ATOMIC DESIGN
30 http://bradfrost.com/blog/post/atomic-web-design/
ATOME• HTML-Tags • Farben • Schriften • Animationen o.ä.
31 http://bradfrost.com/blog/post/atomic-web-design/
MOLEKÜLE• Kombinierte Atome • Backbone des
Design Systems • Zweckmässige
Einheiten
32 http://bradfrost.com/blog/post/atomic-web-design/
ORGANISMEN• Konkretisierung
(Interface) • Organismen
bestehen aus ähnlichen und/oder verschiedenen Molekül-Typen
33 http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES• Weitere
Konkretisierung • Kontext für
Moleküle & Organismen
• Layout in Action
34 http://bradfrost.com/blog/post/atomic-web-design/
SEITEN• Spezifische
Instanzen der Templates
• Platzhalter-Content wird iterativ durch richtigen ersetzt
35 http://atomicdesign.bradfrost.com/chapter-2/
TEMPLATES & SEITEN
36 http://atomicdesign.bradfrost.com/chapter-2/
ATOMIC DESIGN
37
PATTERNLABLet’s get started
38
http://patternlab.io
39 http://patternlab.io
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
43 http://www.netcraft.com/active-sites/
JSON-Dateien mit Dummy-Daten
Patterns (Mustache, JSON)
CSS (Plain & SCSS)
Schriften
Bilder
JavaScript
44
php core/builder.php -wr
WATCHER
source/_patterns source/_data
45
MUSTACHE
http
://m
usta
che.g
ithub
.io/m
usta
che.5
.htm
l
46
BEISPIEL
mkdir source/_patterns/01-molecules/08-textbild
Molekül „Text mit Bild“, welches aus den drei Atomen „Quadratisches Bild“, „Titel“ und „Absatz“ besteht
47
BEISPIELcd source/_patterns/01-molecules/08-textbildtouch 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>
48
REAL LIFE DEMOPattern Lab im Einsatz
54
REAL LIFE DEMO
55
REAL LIFE DEMO
56
REAL LIFE DEMO
57
QUELLENZum Thema Atomic Design
58
REAL LIFE DEMO
http://atomicdesign.bradfrost.com
59
QUELLEN
http://atomicdesign.bradfrost.com
http://de.slideshare.net/bradfrostweb/atomic-design
60
QUELLEN
http://atomicdesign.bradfrost.com
https://vimeo.com/67476280
61
DAS BESTE ZUM SCHLUSS
Die ultimative Top-5 Liste
62
#1CONTENT FIRST
63
#2MOBILE SECOND
64
#3KEINE PSD!
65
#4KEINE
LAYOUTS!!
66
#5ATOMIC DESIGN
67
VIELEN DANK!www.pluswerk.ag@patricklobacher
68
KONTAKT
Patrick [email protected]
+49 89 130 145 20
www.pluswerk.ag
+Pluswerk AGWilhelm-Hale-Str. 5380639 MünchenGermany
http://okr-beratung.dehttps://www.facebook.com/pluswerk
https://twitter.com/pluswerkag
https://twitter.com/patricklobacher
https://www.linkedin.com/company/-pluswerk-ag
https://plus.google.com/113397823770862988928
69
PORTFOLIOFullservice Agentur für digitale Transformation
Strategy Consulting Digital Technology Operations
Digitalisierung / Digitale Transformation
New Work / OKR (Digital) Leadership / Management 3.0
Agile / Lean
CRM / CMSE-Commerce
IoT
z.B. SEO / SEM / SMM / Innovation
Coaching / SparingPM / Beratung Digital Agentur z.B. Continuous Integration
ServerRedaktion
Content
