ATOMIC DESIGN DIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTER PATRICK LOBACHER | +PLUSWERK AG | 30.05.2016 | WEBINALE BERLIN 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 2 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 3 DESIGN IN AGILEN ZEITEN Warum ist heute plötzlich alles anders? 4 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. 5 DIE GUTEN ALTEN ZEITEN… Planung Wireframes Design Entwicklung 1 -24 Monate 6 Content Qualitätssicherung THE GOOD OLD DAYS… 7 8 WHATS WRONG WITH THIS? 9 WHATS WRONG WITH THIS? 10 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://opensignal.com/reports/2015/08/android-fragmentation/ WHATS WRONG WITH THIS? 13 http://atomicdesign.bradfrost.com/chapter-1/ WHATS WRONG WITH THIS? 14 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ RWD Responsive Web Design 15 ÜBERGANGSZEITEN… Logo Logo Planung 16 Wireframes Design Entwicklung Logo Content Qualitätssicherung ÜBERGANGSZEITEN… Logo Logo Planung 17 Wireframes Design Entwicklung Content Qualitätssicherung 18 JETZT: RWD-PROZESS Content Testing StyleTile Atomic Design Prototyping Create Content Content Wireframe RWD Planning / Contract Device Testing Frontend Content Strategy 19 Linear Design ATOMIC DESIGN Warum 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 26 http://patternlab.io/resources.html “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 27 28 http://joshduck.com/periodic-table.html ATOMIC DESIGN 29 http://bradfrost.com/blog/post/atomic-web-design/ ATOME • • • • 30 HTML-Tags Farben Schriften Animationen o.ä. http://bradfrost.com/blog/post/atomic-web-design/ MOLEKÜLE • • • 31 Kombinierte Atome Backbone des Design Systems Zweckmässige Einheiten http://bradfrost.com/blog/post/atomic-web-design/ ORGANISMEN • • 32 Konkretisierung (Interface) Organismen bestehen aus ähnlichen und/oder verschiedenen Molekül-Typen http://bradfrost.com/blog/post/atomic-web-design/ TEMPLATES • • • 33 Weitere Konkretisierung Kontext für Moleküle & Organismen Layout in Action http://bradfrost.com/blog/post/atomic-web-design/ SEITEN • • 34 Spezifische Instanzen der Templates Platzhalter-Content wird iterativ durch richtigen ersetzt http://bradfrost.com/blog/post/atomic-web-design/ TEMPLATES & SEITEN 35 http://atomicdesign.bradfrost.com/chapter-2/ ATOMIC DESIGN 36 http://atomicdesign.bradfrost.com/chapter-2/ PATTERNLAB Let’s get started 37 http://patternlab.io 38 http://patternlab.io 39 http://patternlab.io 40 https://github.com/pattern-lab/patternlab-php 41 https://github.com/pattern-lab/patternlab-php 42 https://github.com/pattern-lab/patternlab-php JSON-Dateien mit Dummy-Daten Patterns (Mustache, JSON) CSS (Plain & SCSS) Schriften Bilder JavaScript 43 http://www.netcraft.com/active-sites/ WATCHER php core/builder.php -wr source/_patterns source/_data 44 http://mustache.github.io/mustache.5.html MUSTACHE 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 46 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> 47 REAL LIFE DEMO Pattern Lab im Einsatz 48 REAL LIFE DEMO http://styleguide.typo3.org/?p=all 49 REAL LIFE DEMO http://styleguide.europeana.eu 50 REAL LIFE DEMO http://patterns.frostfinery.com 51 REAL LIFE DEMO http://patterns.frostfinery.com 52 REAL LIFE DEMO sevenheadsdesign.com/patterns/ 53 REAL LIFE DEMO 54 REAL LIFE DEMO 55 REAL LIFE DEMO 56 QUELLEN Zum Thema Atomic Design 57 REAL LIFE DEMO 58 http://atomicdesign.bradfrost.com QUELLEN http://de.slideshare.net/bradfrostweb/atomic-design 59 http://atomicdesign.bradfrost.com QUELLEN https://vimeo.com/67476280 60 http://atomicdesign.bradfrost.com DAS BESTE ZUM SCHLUSS Die ultimative Top-5 Liste 61 #1 CONTENT FIRST 62 #2 MOBILE SECOND 63 #3 KEINE PSD! 64 #4 KEINE LAYOUTS!! 65 #5 ATOMIC DESIGN 66 VIELEN DANK! www.pluswerk.ag @patricklobacher 67 KONTAKT Patrick Lobacher Vorstandsvorsitzender [email protected] +49 89 130 145 20 www.pluswerk.ag +Pluswerk AG Wilhelm-Hale-Str. 53 80639 München Germany 68 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 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 z.B. SEO / SEM / SMM / Innovation 69 Coaching / Sparing PM / Beratung Digital Agentur CRM / CMS E-Commerce IoT Server Redaktion Content z.B. Continuous Integration
© Copyright 2024 ExpyDoc