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