Working with Atomic Design

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.

Transcript

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