Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15

4.351 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
  • Visit Here to Download This eBook === http://freedaduada.qpoe.com/3954130130-mindmemo-lernposter-les-temps-die-franzosischen-zeiten-franzosische-grammatik-lernen-fur-kinder-erwachsene-lernhilfe-zusammenfassung-poster-din-a2-42x59-cm-premiumedition-in-transportrolle.html
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Copas Url to Read PDF eBook === http://capitolcurrents.com/b01aljyktg-die-geburt-des-monotheismus-im-alten-iran-ahura-mazda-und-sein-prophet-zarathushtra-german-edition.html
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15

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

×