ATOMIC DESIGN DIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTER PATRICK LOBACHER +PLUSWERK AG WEBTECH CONFERENCE MÜNCHEN

Transkript

1 ATOMIC DESIGN DIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTER PATRICK LOBACHER +PLUSWERK AG WEBTECH CONFERENCE MÜNCHEN

2 Patrick Lobacher Vorstandvorsitzender +Pluswerk AG Consultant Trainer (Agile) Coach Autor Fullservice Agentur für digitale Kommunikation 12 Niederlassungen in DACH, Polen & Kapstadt 130+ Mitarbeiter 999+ Projekte in den letzten 20 Jahren 2

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

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

5 DIE GUTEN ALTEN ZEITEN Planung Wireframes Design Entwicklung Content Qualitätssicherung 1-24 Monate 5

6 6 THE GOOD OLD DAYS

7 7

8 8 WHATS WRONG WITH THIS?

9 9 WHATS WRONG WITH THIS?

10 WHATS WRONG WITH THIS? Android Geräte (2015) / (2014) / (2013) 10

11 WHATS WRONG WITH THIS? 11

12 WHATS WRONG WITH THIS? 12

13 WHATS WRONG WITH THIS? 13

14 RWD Responsive Web Design 14

15 ÜBERGANGSZEITEN Logo Logo Logo Planung Wireframes Design Entwicklung Content Qualitätssicherung 15

16 ÜBERGANGSZEITEN Logo Logo Planung Wireframes Design Entwicklung Content Qualitätssicherung 16

17 17

18 JETZT: RWD-PROZESS Content Testing StyleTile Atomic Design Linear Design Create Content Content Wireframe RWD Prototyping Device Testing Planning / Contract Frontend Content Strategy 18

19 ATOMIC DESIGN Warum ist heute plötzlich alles anders? 19

20 We re not designing pages, we re designing systems of components. Steven Hay 20

21 21

22 22

23 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 24

25 PATTERNS - NICHT NEU 25

26 We re not designing pages, we re designing systems of components. Steven Hay 26

27 27

28 ATOMIC DESIGN 28

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

30 MOLEKÜLE Kombinierte Atome Backbone des Design Systems Zweckmässige Einheiten 30

31 ORGANISMEN Konkretisierung (Interface) Organismen bestehen aus ähnlichen und/oder verschiedenen Molekül-Typen 31

32 TEMPLATES Weitere Konkretisierung Kontext für Moleküle & Organismen Layout in Action 32

33 SEITEN Spezifische Instanzen der Templates Platzhalter-Content wird iterativ durch richtigen ersetzt 33

34 TEMPLATES & SEITEN 34

35 ATOMIC DESIGN 35

36 PATTERNLAB Let s get started 36

37 37

38 38

39 39

40 40

41 41

42 JSON-Dateien mit Dummy-Daten Patterns (Mustache, JSON) CSS (Plain & SCSS) Schriften Bilder JavaScript 42

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

44 MUSTACHE 44

45 BEISPIEL Molekül Text mit Bild, welches aus den drei Atomen Quadratisches Bild, Titel und Absatz besteht mkdir source/_patterns/01-molecules/08-textbild 45

46 BEISPIEL cd source/_patterns/01-molecules/08-textbild touch 00-text-mit-bild.mustache 46 <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 DEMO Pattern Lab im Einsatz 47

48 REAL LIFE DEMO

49 QUELLEN Zum Thema Atomic Design 49

50 REAL LIFE DEMO 50

51 QUELLEN

52 QUELLEN

53 DAS BESTE ZUM SCHLUSS Die ultimative Top-5 Liste 53

54 #1 CONTENT FIRST 54

55 #2 MOBILE SECOND 55

56 #3 KEINE PSD! 56

57 #4 KEINE LAYOUTS!! 57

58 #5 ATOMIC DESIGN 58

59 VIELEN DANK! 59

60 KONTAKT Patrick Lobacher Vorstandsvorsitzender Pluswerk AG Wilhelm-Hale-Str München Germany