Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
•
3 likes•5,027 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.
Recommended
Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Viewers also liked (20)
Similar to Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Similar to Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15 (20)
More from die.agilen GmbH
More from die.agilen GmbH (20)
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
- 1. ATOMIC DESIGN DIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTER PATRICK LOBACHER | +PLUSWERK AG | 27.10.2015 | WEBTECH CONFERENCE MÜNCHEN
- 2. 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
- 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 Kommunikation
- 4. 4 DESIGN IN AGILEN ZEITEN Warum ist heute plötzlich alles anders?
- 5. 5 DIE GUTEN ALTEN ZEITEN… Planung Wireframes Design Entwicklung Content Qualitäts- sicherung 1 -24 Monate
- 6. 6 THE GOOD OLD DAYS…
- 7. 7
- 8. 8 WHATS WRONG WITH THIS?
- 9. 9 WHATS WRONG WITH THIS?
- 10. 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)
- 12. 12 http://atomicdesign.bradfrost.com/chapter-1/ WHATS WRONG WITH THIS?
- 13. 13 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ WHATS WRONG WITH THIS?
- 15. 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. 16 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ ÜBERGANGSZEITEN… Planung Wireframes Design Entwicklung Content Qualitäts- sicherung Logo Logo
- 17. 17
- 18. 18 FrontendPlanning / Contract RWD Proto- typing Content Strategy Device Testing StyleTile Atomic DesignContent Testing Create Content Content Wireframe Linear Design JETZT: RWD-PROZESS
- 19. 19 ATOMIC DESIGN Warum ist heute plötzlich alles anders?
- 20. 20 “We’re not designing pages, we’re designing systems of components.” Steven Hay
- 21. 21
- 22. 22
- 23. 23
- 24. 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. 25 PATTERNS - NICHT NEU http://patternlab.io/resources.html
- 26. 26 “We’re not designing pages, we’re designing systems of components.” Steven Hay
- 29. 29 http://bradfrost.com/blog/post/atomic-web-design/ ATOME • HTML-Tags • Farben • Schriften • Animationen o.ä.
- 30. 30 http://bradfrost.com/blog/post/atomic-web-design/ MOLEKÜLE • Kombinierte Atome • Backbone des Design Systems • Zweckmässige Einheiten
- 31. 31 http://bradfrost.com/blog/post/atomic-web-design/ ORGANISMEN • Konkretisierung (Interface) • Organismen bestehen aus ähnlichen und/oder verschiedenen Molekül-Typen
- 32. 32 http://bradfrost.com/blog/post/atomic-web-design/ TEMPLATES • Weitere Konkretisierung • Kontext für Moleküle & Organismen • Layout in Action
- 33. 33 http://bradfrost.com/blog/post/atomic-web-design/ SEITEN • Spezifische Instanzen der Templates • Platzhalter-Content wird iterativ durch richtigen ersetzt
- 42. 42 http://www.netcraft.com/active-sites/ JSON-Dateien mit Dummy-Daten Patterns (Mustache, JSON) CSS (Plain & SCSS) Schriften Bilder JavaScript
- 45. 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. 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. 47 REAL LIFE DEMO Pattern Lab im Einsatz
- 49. 49 QUELLEN Zum Thema Atomic Design
- 51. 51 QUELLEN http://atomicdesign.bradfrost.com http://de.slideshare.net/bradfrostweb/atomic-design
- 53. 53 DAS BESTE ZUM SCHLUSS Die ultimative Top-5 Liste
- 56. 56 #3 KEINE PSD!
- 60. 60 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 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