Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webinale 2016 - pluswerk

1,931 views

Published on

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, das 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.

Published in: Internet
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webinale 2016 - pluswerk

  1. 1. ATOMIC DESIGN DIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTER PATRICK LOBACHER | +PLUSWERK AG | 30.05.2016 | WEBINALE BERLIN
  2. 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. 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. 4 DESIGN IN AGILEN ZEITEN Warum ist heute plötzlich alles anders?
  5. 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. 6 DIE GUTEN ALTEN ZEITEN… Planung Wireframes Design Entwicklung Content Qualitäts- sicherung 1 -24 Monate
  7. 7. 7 THE GOOD OLD DAYS…
  8. 8. 8
  9. 9. 9 WHATS WRONG WITH THIS?
  10. 10. 10 WHATS WRONG WITH THIS?
  11. 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)
  12. 12. 12 http://opensignal.com/reports/2015/08/android-fragmentation/ WHATS WRONG WITH THIS?
  13. 13. 13 http://atomicdesign.bradfrost.com/chapter-1/ WHATS WRONG WITH THIS?
  14. 14. 14 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ WHATS WRONG WITH THIS?
  15. 15. 15 RWDResponsive Web Design
  16. 16. 16 ÜBERGANGSZEITEN… Planung Wireframes Design Entwicklung Content Qualitäts- sicherung Logo Logo Logo
  17. 17. 17 ÜBERGANGSZEITEN… Planung Wireframes Design Entwicklung Content Qualitäts- sicherung Logo Logo
  18. 18. 18
  19. 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. 20 ATOMIC DESIGN Warum ist heute plötzlich alles anders?
  21. 21. 21 “We’re not designing pages, we’re designing systems of components.” Steven Hay
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 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. 26 PATTERNS - NICHT NEU http://patternlab.io/resources.html
  27. 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
  28. 28. 28 http://joshduck.com/periodic-table.html
  29. 29. 29 http://bradfrost.com/blog/post/atomic-web-design/ ATOMIC DESIGN
  30. 30. 30 http://bradfrost.com/blog/post/atomic-web-design/ ATOME • HTML-Tags • Farben • Schriften • Animationen o.ä.
  31. 31. 31 http://bradfrost.com/blog/post/atomic-web-design/ MOLEKÜLE • Kombinierte Atome • Backbone des Design Systems • Zweckmässige Einheiten
  32. 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. 33 http://bradfrost.com/blog/post/atomic-web-design/ TEMPLATES • Weitere Konkretisierung • Kontext für Moleküle & Organismen • Layout in Action
  34. 34. 34 http://bradfrost.com/blog/post/atomic-web-design/ SEITEN • Spezifische Instanzen der Templates • Platzhalter-Content wird iterativ durch richtigen ersetzt
  35. 35. 35 http://atomicdesign.bradfrost.com/chapter-2/ TEMPLATES & SEITEN
  36. 36. 36 http://atomicdesign.bradfrost.com/chapter-2/ ATOMIC DESIGN
  37. 37. 37 PATTERNLAB Let’s get started
  38. 38. 38 http://patternlab.io
  39. 39. 39 http://patternlab.io http://patternlab.io
  40. 40. 40 https://github.com/pattern-lab/patternlab-php
  41. 41. 41 https://github.com/pattern-lab/patternlab-php
  42. 42. 42 https://github.com/pattern-lab/patternlab-php
  43. 43. 43 http://www.netcraft.com/active-sites/ JSON-Dateien mit Dummy-Daten Patterns (Mustache, JSON)
 CSS (Plain & SCSS)
 Schriften
 Bilder JavaScript
  44. 44. 44 php core/builder.php -wr WATCHER source/_patterns
 source/_data
  45. 45. 45 MUSTACHE http://mustache.github.io/mustache.5.html
  46. 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. 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. 48 REAL LIFE DEMO Pattern Lab im Einsatz
  49. 49. 49 REAL LIFE DEMO http://styleguide.typo3.org/?p=all
  50. 50. 50 REAL LIFE DEMO http://styleguide.europeana.eu
  51. 51. 51 REAL LIFE DEMO http://patterns.frostfinery.com
  52. 52. 52 REAL LIFE DEMO http://patterns.frostfinery.com
  53. 53. 53 REAL LIFE DEMO sevenheadsdesign.com/patterns/
  54. 54. 54 REAL LIFE DEMO
  55. 55. 55 REAL LIFE DEMO
  56. 56. 56 REAL LIFE DEMO
  57. 57. 57 QUELLEN Zum Thema Atomic Design
  58. 58. 58 REAL LIFE DEMO http://atomicdesign.bradfrost.com
  59. 59. 59 QUELLEN http://atomicdesign.bradfrost.com http://de.slideshare.net/bradfrostweb/atomic-design
  60. 60. 60 QUELLEN http://atomicdesign.bradfrost.com https://vimeo.com/67476280
  61. 61. 61 DAS BESTE ZUM SCHLUSS Die ultimative Top-5 Liste
  62. 62. 62 #1 CONTENT FIRST
  63. 63. 63 #2 MOBILE SECOND
  64. 64. 64 #3 KEINE PSD!
  65. 65. 65 #4 KEINE LAYOUTS!!
  66. 66. 66 #5 ATOMIC DESIGN
  67. 67. 67 VIELEN DANK! www.pluswerk.ag
 @patricklobacher
  68. 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. 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

×