Der klassische Designprozess kommt im RWD-Zeitalter an die Grenzen. Der RWD-Workflow fordert eine iterative und inkrementelle Herangehensweise an Design und das daraus entstehende Frontend, welches als Prototyp früh zu Verfügung stehen soll. Atomic Design ist ein sinnvoller und erprobter Ansatz, um dies zu realisieren. Der Vortrag geht dazu auf alle Aspekte von Atomic Design ausführlich ein und zeigt anhand eines Praxisbeispiels die konkrete Umsetzung.

1. ATOMIC DESIGN
DIE EINHEIT VON FRONTEND
UND DESIGN IM RWD-ZEITALTER
PATRICK LOBACHER | +PLUSWERK AG | 22.06.2016 | DEVELOPER WEEK

2. 2
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

3. 3
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

4. 4
DESIGN IN AGILEN
ZEITEN
Warum ist heute plötzlich alles anders?

5. 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. 6
DIE GUTEN ALTEN ZEITEN…
Planung Wireframes Design Entwicklung Content
Qualitäts-
sicherung
1 -24 Monate

7. 7
THE GOOD OLD DAYS…

8. 8

9. 9
WHATS WRONG WITH THIS?

10. 10
WHATS WRONG WITH THIS?

11. 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. 12 http://opensignal.com/reports/2015/08/android-fragmentation/
WHATS WRONG WITH THIS?

13. 13 http://atomicdesign.bradfrost.com/chapter-1/
WHATS WRONG WITH THIS?

14. 14 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
WHATS WRONG WITH THIS?

15. 15
RWDResponsive Web Design

16. 16
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content
Qualitäts-
sicherung
Logo Logo Logo

17. 17
ÜBERGANGSZEITEN…
Planung Wireframes Design Entwicklung Content
Qualitäts-
sicherung
Logo
Logo

18. 18

19. 19
FrontendPlanning / Contract
RWD
Proto-
typing
Content
Strategy
Device
Testing
StyleTile
Atomic DesignContent
Testing
Create
Content
Content
Wireframe
Linear
Design
JETZT: RWD-PROZESS

20. 20
ATOMIC DESIGN
Warum ist heute plötzlich alles anders?

21. 21
“We’re not designing pages,
we’re designing systems of
components.”
Steven Hay

22. 22

23. 23

24. 24

25. 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. 26
PATTERNS - NICHT NEU
http://patternlab.io/resources.html

27. 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. 28 http://joshduck.com/periodic-table.html

29. 29 http://bradfrost.com/blog/post/atomic-web-design/
ATOMIC DESIGN

30. 30 http://bradfrost.com/blog/post/atomic-web-design/
ATOME
• HTML-Tags
• Farben
• Schriften
• Animationen o.ä.

31. 31 http://bradfrost.com/blog/post/atomic-web-design/
MOLEKÜLE
• Kombinierte Atome
• Backbone des
Design Systems
• Zweckmässige
Einheiten

32. 32 http://bradfrost.com/blog/post/atomic-web-design/
ORGANISMEN
• Konkretisierung
(Interface)
• Organismen
bestehen aus
ähnlichen und/oder
verschiedenen
Molekül-Typen

33. 33 http://bradfrost.com/blog/post/atomic-web-design/
TEMPLATES
• Weitere
Konkretisierung
• Kontext für
Moleküle &
Organismen
• Layout in Action

34. 34 http://bradfrost.com/blog/post/atomic-web-design/
SEITEN
• Spezifische
Instanzen der
Templates
• Platzhalter-Content
wird iterativ durch
richtigen ersetzt

35. 35 http://atomicdesign.bradfrost.com/chapter-2/
TEMPLATES & SEITEN

36. 36 http://atomicdesign.bradfrost.com/chapter-2/
ATOMIC DESIGN

37. 37
PATTERNLAB
Let’s get started

38. 38
http://patternlab.io

39. 39 http://patternlab.io
http://patternlab.io

40. 40 https://github.com/pattern-lab/patternlab-php

41. 41 https://github.com/pattern-lab/patternlab-php

42. 42 https://github.com/pattern-lab/patternlab-php

43. 43 http://www.netcraft.com/active-sites/
JSON-Dateien mit Dummy-Daten
Patterns (Mustache, JSON)
CSS (Plain & SCSS)
Schriften
Bilder
JavaScript

44. 44
php core/builder.php -wr
WATCHER
source/_patterns
source/_data

45. 45
MUSTACHE
http://mustache.github.io/mustache.5.html

46. 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. 47
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>

48. 48
REAL LIFE DEMO
Pattern Lab im Einsatz

49. 49
REAL LIFE DEMO
http://styleguide.typo3.org/?p=all

50. 50
REAL LIFE DEMO
http://styleguide.europeana.eu

51. 51
REAL LIFE DEMO
http://patterns.frostfinery.com

52. 52
REAL LIFE DEMO
http://patterns.frostfinery.com

53. 53
REAL LIFE DEMO
sevenheadsdesign.com/patterns/

54. 54
REAL LIFE DEMO

55. 55
REAL LIFE DEMO

56. 56
REAL LIFE DEMO

57. 57
QUELLEN
Zum Thema Atomic Design

58. 58
REAL LIFE DEMO
http://atomicdesign.bradfrost.com

59. 59
QUELLEN
http://atomicdesign.bradfrost.com
http://de.slideshare.net/bradfrostweb/atomic-design

60. 60
QUELLEN
http://atomicdesign.bradfrost.com
https://vimeo.com/67476280

61. 61
DAS BESTE ZUM
SCHLUSS
Die ultimative Top-5 Liste

62. 62
#1
CONTENT FIRST

63. 63
#2
MOBILE
SECOND

64. 64
#3
KEINE
PSD!

65. 65
#4
KEINE
LAYOUTS!!

66. 66
#5
ATOMIC
DESIGN

67. 67
VIELEN DANK!
www.pluswerk.ag
@patricklobacher

68. 68
KONTAKT
Patrick Lobacher
Vorstandsvorsitzender
patrick.lobacher@pluswerk.ag
+49 89 130 145 20
www.pluswerk.ag
+Pluswerk AG
Wilhelm-Hale-Str. 53
80639 München
Germany
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

69. 69
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
CRM / CMS
E-Commerce
IoT
z.B. SEO / SEM /
SMM / Innovation
Coaching / Sparing
PM / Beratung
Digital Agentur z.B. Continuous Integration
Server
Redaktion
Content