Embed Size (px)
Citation preview
ATOMIC DESIGNDIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTERPATRICK LOBACHER | +PLUSWERK AG | 27.10.2015 | WEBTECH CONFERENCE MÜNCHEN
2
Patrick LobacherVorstandvorsitzender+Pluswerk AG ConsultantTrainer(Agile) CoachAutor
Fullservice Agentur für digitale Kommunikation 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 Kommunikation
4
DESIGN IN AGILEN ZEITEN
Warum ist heute plötzlich alles anders?
5
DIE GUTEN ALTEN ZEITEN…
Planung Wireframes Design Entwicklung Content Qualitäts-sicherung
1 -24 Monate
6
THE GOOD OLD DAYS…
7
8
WHATS WRONG WITH THIS?
9
WHATS WRONG WITH THIS?
10 http://opensignal.com/reports/2015/08/android-fragmentation/
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://atomicdesign.bradfrost.com/chapter-1/
WHATS WRONG WITH THIS?
13 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
WHATS WRONG WITH THIS?
14
RWDResponsive Web Design
15 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content Qualitäts-sicherung
Logo Logo Logo
16 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content Qualitäts-sicherung
Logo
Logo
17
18
Frontend Planning / Contract
RWD
Proto- typing
Content Strategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
JETZT: RWD-PROZESS
19
ATOMIC DESIGNWarum 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
http://patternlab.io/resources.html
26
“We’re not designing pages, we’re designing systems of
components.” Steven Hay
27 http://joshduck.com/periodic-table.html
28 http://bradfrost.com/blog/post/atomic-web-design/
ATOMIC DESIGN
29 http://bradfrost.com/blog/post/atomic-web-design/
ATOME• HTML-Tags • Farben • Schriften • Animationen o.ä.
30 http://bradfrost.com/blog/post/atomic-web-design/
MOLEKÜLE• Kombinierte Atome • Backbone des
Design Systems • Zweckmässige
Einheiten
31 http://bradfrost.com/blog/post/atomic-web-design/
ORGANISMEN• Konkretisierung
(Interface) • Organismen
bestehen aus ähnlichen und/oder verschiedenen Molekül-Typen
32 http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES• Weitere
Konkretisierung • Kontext für
Moleküle & Organismen
• Layout in Action
33 http://bradfrost.com/blog/post/atomic-web-design/
SEITEN• Spezifische
Instanzen der Templates
• Platzhalter-Content wird iterativ durch richtigen ersetzt
34 http://atomicdesign.bradfrost.com/chapter-2/
TEMPLATES & SEITEN
35 http://atomicdesign.bradfrost.com/chapter-2/
ATOMIC DESIGN
36
PATTERNLABLet’s get started
37
http://patternlab.io
38 http://patternlab.io
http://patternlab.io
39 https://github.com/pattern-lab/patternlab-php
40 https://github.com/pattern-lab/patternlab-php
41 https://github.com/pattern-lab/patternlab-php
42 http://www.netcraft.com/active-sites/
JSON-Dateien mit Dummy-Daten
Patterns (Mustache, JSON)
CSS (Plain & SCSS)
Schriften
Bilder
JavaScript
43
php core/builder.php -wr
WATCHER
source/_patterns source/_data
44
MUSTACHE
http
://m
usta
che.g
ithub
.io/m
usta
che.5
.htm
l
45
BEISPIEL
mkdir source/_patterns/01-molecules/08-textbild
Molekül „Text mit Bild“, welches aus den drei Atomen „Quadratisches Bild“, „Titel“ und „Absatz“ besteht
46
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>
47
REAL LIFE DEMOPattern Lab im Einsatz
48
REAL LIFE DEMO
http://styleguide.typo3.org/?p=all
http://styleguide.europeana.eu
http://demo.patternlab.io/?p=all
49
QUELLENZum Thema Atomic Design
50
REAL LIFE DEMO
http://atomicdesign.bradfrost.com
51
QUELLEN
http://atomicdesign.bradfrost.com
http://de.slideshare.net/bradfrostweb/atomic-design
52
QUELLEN
http://atomicdesign.bradfrost.com
https://vimeo.com/67476280
53
DAS BESTE ZUM SCHLUSS
Die ultimative Top-5 Liste
54
#1CONTENT FIRST
55
#2MOBILE SECOND
56
#3KEINE PSD!
57
#4KEINE
LAYOUTS!!
58
#5ATOMIC DESIGN
59
VIELEN DANK!www.pluswerk.ag@patricklobacher
60
KONTAKT
Patrick [email protected]
+49 89 130 145 20
www.pluswerk.ag
+Pluswerk AGWilhelm-Hale-Str. 5380639 MünchenGermany
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
