DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
•
2 gefällt mir•3,016 views
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.
Melden
Teilen
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
- 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)
- 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?
- 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
- 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
- 43. 43 http://www.netcraft.com/active-sites/ JSON-Dateien mit Dummy-Daten Patterns (Mustache, JSON) CSS (Plain & SCSS) Schriften Bilder JavaScript
- 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
- 57. 57 QUELLEN Zum Thema Atomic Design
- 59. 59 QUELLEN http://atomicdesign.bradfrost.com http://de.slideshare.net/bradfrostweb/atomic-design
- 61. 61 DAS BESTE ZUM SCHLUSS Die ultimative Top-5 Liste
- 64. 64 #3 KEINE PSD!
- 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