dwx 2016 - atomic design – frontend und design im rwd-zeitalter - pluswerk

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

Upload: pluswerk-ag

Post on 14-Apr-2017

2.479 views

Category:

Design


2 download

TRANSCRIPT

Page 1: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

ATOMIC DESIGNDIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTERPATRICK LOBACHER | +PLUSWERK AG | 22.06.2016 | DEVELOPER WEEK

Page 2: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 3: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 4: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

4

DESIGN IN AGILEN ZEITEN

Warum ist heute plötzlich alles anders?

Page 5: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 6: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

6

DIE GUTEN ALTEN ZEITEN…

Planung Wireframes Design Entwicklung Content Qualitäts-sicherung

1 -24 Monate

Page 7: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

7

THE GOOD OLD DAYS…

Page 8: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

8

Page 9: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

9

WHATS WRONG WITH THIS?

Page 10: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

10

WHATS WRONG WITH THIS?

Page 11: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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)

Page 12: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

12 http://opensignal.com/reports/2015/08/android-fragmentation/

WHATS WRONG WITH THIS?

Page 13: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

13 http://atomicdesign.bradfrost.com/chapter-1/

WHATS WRONG WITH THIS?

Page 14: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

14 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

WHATS WRONG WITH THIS?

Page 15: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

15

RWDResponsive Web Design

Page 16: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

16

ÜBERGANGSZEITEN…

Planung Wireframes Design Entwicklung Content Qualitäts-sicherung

Logo Logo Logo

Page 17: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

17

ÜBERGANGSZEITEN…

Planung Wireframes Design Entwicklung Content Qualitäts-sicherung

Logo

Logo

Page 18: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

18

Page 19: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

19

Frontend Planning / Contract

RWD

Proto- typing

ContentStrategy

DeviceTesting

StyleTileAtomic DesignContent

Testing

CreateContent

ContentWireframe

LinearDesign

JETZT: RWD-PROZESS

Page 20: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

20

ATOMIC DESIGNWarum ist heute plötzlich alles anders?

Page 21: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

21

“We’re not designing pages, we’re designing systems of

components.” Steven Hay

Page 22: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

22

Page 23: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

23

Page 24: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

24

Page 25: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 26: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

26

PATTERNS - NICHT NEU

http://patternlab.io/resources.html

Page 27: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 28: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

28 http://joshduck.com/periodic-table.html

Page 29: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

ATOMIC DESIGN

Page 30: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

30 http://bradfrost.com/blog/post/atomic-web-design/

ATOME• HTML-Tags • Farben • Schriften • Animationen o.ä.

Page 31: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

31 http://bradfrost.com/blog/post/atomic-web-design/

MOLEKÜLE• Kombinierte Atome • Backbone des

Design Systems • Zweckmässige

Einheiten

Page 32: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

32 http://bradfrost.com/blog/post/atomic-web-design/

ORGANISMEN• Konkretisierung

(Interface) • Organismen

bestehen aus ähnlichen und/oder verschiedenen Molekül-Typen

Page 33: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

33 http://bradfrost.com/blog/post/atomic-web-design/

TEMPLATES• Weitere

Konkretisierung • Kontext für

Moleküle & Organismen

• Layout in Action

Page 34: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

34 http://bradfrost.com/blog/post/atomic-web-design/

SEITEN• Spezifische

Instanzen der Templates

• Platzhalter-Content wird iterativ durch richtigen ersetzt

Page 35: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

35 http://atomicdesign.bradfrost.com/chapter-2/

TEMPLATES & SEITEN

Page 36: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

ATOMIC DESIGN

Page 37: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

37

PATTERNLABLet’s get started

Page 38: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

38

http://patternlab.io

Page 39: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

39 http://patternlab.io

http://patternlab.io

Page 40: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 41: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 42: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 43: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

43 http://www.netcraft.com/active-sites/

JSON-Dateien mit Dummy-Daten

Patterns (Mustache, JSON)

CSS (Plain & SCSS)

Schriften

Bilder

JavaScript

Page 44: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

44

php core/builder.php -wr

WATCHER

source/_patterns source/_data

Page 45: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

45

MUSTACHE

http

://m

usta

che.g

ithub

.io/m

usta

che.5

.htm

l

Page 46: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 47: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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>

Page 48: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

48

REAL LIFE DEMOPattern Lab im Einsatz

Page 49: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

49

REAL LIFE DEMOhttp://styleguide.typo3.org/?p=all

Page 50: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

50

REAL LIFE DEMOhttp://styleguide.europeana.eu

Page 51: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

51

REAL LIFE DEMOhttp://patterns.frostfinery.com

Page 52: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

52

REAL LIFE DEMOhttp://patterns.frostfinery.com

Page 53: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

53

REAL LIFE DEMOsevenheadsdesign.com/patterns/

Page 54: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

54

REAL LIFE DEMO

Page 55: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

55

REAL LIFE DEMO

Page 56: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

56

REAL LIFE DEMO

Page 57: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

57

QUELLENZum Thema Atomic Design

Page 58: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

58

REAL LIFE DEMO

http://atomicdesign.bradfrost.com

Page 59: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

59

QUELLEN

http://atomicdesign.bradfrost.com

http://de.slideshare.net/bradfrostweb/atomic-design

Page 60: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

60

QUELLEN

http://atomicdesign.bradfrost.com

https://vimeo.com/67476280

Page 61: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

61

DAS BESTE ZUM SCHLUSS

Die ultimative Top-5 Liste

Page 62: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

62

#1CONTENT FIRST

Page 63: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

63

#2MOBILE SECOND

Page 64: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

64

#3KEINE PSD!

Page 65: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

65

#4KEINE

LAYOUTS!!

Page 66: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

66

#5ATOMIC DESIGN

Page 67: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

67

VIELEN DANK!www.pluswerk.ag@patricklobacher

Page 68: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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

Page 69: DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk

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