Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Working with Atomic Design

4.426 visualizaciones

Publicado el

When code becomes a living style guide. An introduction to the ideas of atomic design, an atomic design workflow, the usage in a real live project and Pattern Lab.

Publicado en: Diseño
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Working with Atomic Design

  1. 1. Berit Hlubek - @berit_jensen Working with Atomic Design When code becomes a living style guide
  2. 2. Photo: Andreas Thomsen, Owner: Lotta Katrina Hinz
  3. 3. http://www.telegraph.co.uk/technology/internet/10663451/The-early-days-of-25-websites.html
  4. 4. http://web.archive.org/web/20010609090954/http://www.apple.com
  5. 5. Static webdesigns Built for specific screen resolutions
  6. 6. Android screen sizes - 2013 http://opensignal.com/reports/fragmentation-2013
  7. 7. We have to re-think our design workflow
  8. 8. „We’re not designing pages, we’re designing systems of components.“ — Stephen Hay, 2012
  9. 9. Atomic design A methodology for crafting design systems Illustrations: http://bradfrostweb.com/blog/post/atomic-web-design
  10. 10. Atoms
  11. 11. Molecules
  12. 12. Organisms
  13. 13. Templates
  14. 14. Page
  15. 15. Giving things a name Atoms, molecules, organisms, templates, pages
  16. 16. In practice ...?
  17. 17. A perfect Atomic Design workflow
  18. 18. Two possible ways Photoshop or Prototyping
  19. 19. Create different components From atoms and molecules to organisms
  20. 20. What‘s next? Depends! Templates & Pages or Development
  21. 21. Keep the atomic design idea Also for the frontend development phase
  22. 22. This one big project And we did the same as always...
  23. 23. Design ➞ Browser Now something had to change
  24. 24. Use atomic design Well at least for the frontend
  25. 25. Living style guide! How to easily achieve that?
  26. 26. Pattern Lab Toolkit to create atomic design systems http://patternlab.io
  27. 27. Static site generator Stitching components together to templates/pages
  28. 28. Component Library Your living style guide
  29. 29. Viewport Resizer
  30. 30. ... and a lot more Have a look at: http://patternlab.io
  31. 31. Short demo http://demo.patternlab.io
  32. 32. Back to the project workflow...
  33. 33. Extract components Define atoms, molecules and organisms
  34. 34. From small to bigger chunks Already had the CMS in mind
  35. 35. Mustache Templates A simple atom with two variables <a href="#" class="link-all {{ more-classes }}"> {{ linktext }} </a>
  36. 36. Mustache Templates A simple atom with two variables <a href="#" class="link-all {{ more-classes }}"> {{ linktext }} </a>
  37. 37. Mustache Templates A molecule with a loop <ul class="teaser-list"> ! {{# teaserlist}} ! ! <li> ! ! ! <a href="#">{{ text }}</a> ! ! </li> ! {{/ teaserlist}} </ul>
  38. 38. Mustache Templates A molecule with a loop <ul class="teaser-list"> ! {{# teaserlist}} ! ! <li> ! ! ! <a href="#">{{ text }}</a> ! ! </li> ! {{/ teaserlist}} </ul>
  39. 39. Mustache Templates An organism with variables and includes <h2>{{ teaserheader }}</h2> {{> molecules-teaser-latest}} {{> molecules-teaser-list}} {{> atoms-link-all(linktext: All News)}}
  40. 40. Mustache Templates An organism with variables and includes <h2>{{ teaserheader }}</h2> {{> molecules-teaser-latest}} {{> molecules-teaser-list}} {{> atoms-link-all(linktext: All News)}}
  41. 41. Yet another demo Kirche Hamburg Pattern Lab System
  42. 42. Drawbacks? Any? Sure, no solution is perfect
  43. 43. Have to get used to it Sometimes hard to define molecules, organisms ...
  44. 44. Hard to start with atoms Start with molecules and organisms instead
  45. 45. Double markup Your HTML lives at multiple places
  46. 46. Discipline Everyone has to follow the rules
  47. 47. Berit Hlubek @berit_jensen networkteam GmbH berit.hlubek@networkteam.com Photo: Daniel Lienert
  48. 48. Thanks! Questions?
  49. 49. Links http://bradfrostweb.com/blog/post/atomic-web-design/ http://www.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/ http://patternlab.io https://github.com/adactio/Pattern-Primer http://livingstyleguide.org/ http://barebones.paulrobertlloyd.com/

×