ATOMIC DESIGN - Lobacher · 2015-10-27 · atomic design die einheit von frontend und design im...

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 LobacherVorstandsvorsitzenderpatrick.lobacher@pluswerk.ag

+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