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.
ABOUT ME Web developer since 1997 Senior frontend developer at MoZeus Illustrator, cartoonist, writer, daddy 2 I’m Atlanta...
“WEBSITES” 3
“WEBSITES” 4
WHAT ARE PAGES EVEN? 5 photo: Jeremy Keith (bit.ly/adtalk-devices)
WHAT ARE PAGES EVEN? 6 != “Pages”
WHAT ARE PAGES EVEN? “We’re a startup looking to launch a 
 5-page website this October…” “How long will it take just to b...
–Stephen Hay “WE’RE NOT DESIGNING PAGES. WE’RE DESIGNING SYSTEMS OF COMPONENTS.” 8
GOING MODULAR 9
GOING MODULAR Backends don’t always generate fully-baked “pages” Their API’s are consumed by components on multiple platfo...
EARLY ISSUES Organization like SMACSS only got us so far Not accessible for designers No references for existing component...
EARLY ISSUES Inconsistent designs Leads to many minor variations Lots of CSS specificity 12
EARLY ISSUES Modules not truly modular Break when moved around Class names lose meaning 13
EARLY ISSUES “Living” style guides? Not very flexible Provides no context Easily outdated or abandoned 14
WHAT IS ATOMIC DESIGN? Dreamed up by Brad Frost in 2013 Based on a chemistry-inspired metaphor Five phases: 16
ATOMS The basic building block of all matter Can’t be broken down further without losing function or meaning Mostly limite...
ATOMS: EXAMPLE 18 SEARCH THE SITE SEARCH LABEL INPUTENTER KEYWORD BUTTON
MOLECULES Groups of two or more atoms Form simple, functional components Groups of UI elements functioning together as a u...
MOLECULES: EXAMPLE 20 SEARCH THE SITE SEARCHENTER KEYWORD
ORGANISMS Groups of molecules and atoms Can also contain smaller organisms Form distinct sections of an interface 21
ORGANISMS: EXAMPLE 22 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
ORGANISMS: EXAMPLE 23 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT Atom: logo Molecule: Nav Molecule: Search...
TEMPLATES Like low-fidelity wireframes Provide context for molecules and organisms Contain only placeholder text and images...
TEMPLATES: EXAMPLE 25 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
PAGES Most concrete stage in Atomic Design Specific “instances” of templates Real representative content Multiple pages fro...
TEMPLATES: EXAMPLE 27 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
PAGES: EXAMPLE 28
PATTERN LIBRARIES Promote consistency Allow faster, more collaborative workflow Establish a shared vocabulary Make testing ...
Style Tiles Element Collages PATTERN LIBRARIES 31
Mail chimp Big Nerd Ranch PATTERN LIBRARIES 32
PATTERN LAB Web app that compiles code patterns into a functional front-end UI Allows for separation between structure and...
PATTERN LAB Both PHP and Node-based versions Static site generator Multiple “editions” support both Mustache and Twig temp...
37 http://demo.patternlab.io/
38 http://demo.patternlab.io/ atomic design phases
39 pixel sizing breakpoint sizing surprise me code, search, etc
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
UNDER THE HOOD 65 misc config files Pattern Lab “engine” static file output working files & templates php Composer dependencies
UNDER THE HOOD 66 annotation data global data global template includes five phases of Atomic Design
UNDER THE HOOD 67
UNDER THE HOOD 68
MUSTACHE VS. TWIG? Both very capable choices Mustache: “logic-less” No “ifs”, “elses” or “for loops” Twig: Offers more fea...
MUSTACHE VS. TWIG? 70 mustache twig
MUSTACHE VS. TWIG? 71
THE PROBLEM Patterns need to be consumed by backend Crap. Patterns should serve as the blueprint Patterns easily detached ...
THE HOLY GRAIL Two-way synchronization between the library and backend Gem libraries? Composer packages?? Node modules??? ...
THE HOLY GRAIL 75
CAUTIONS & CAVEATS Everyone has to be on board Make/test components within library first Roll in “hot fix” changes ASAP Avoi...
NOTES ON ATOMIC DESIGN It’s not restricted to any certain technology Can be applied to all UI, not just web Helps when des...
“AFTER WE DELIVER THIS SITE, WE WON’T BE INVOLVED ANYMORE. 
 
 IS IT STILL WORTH BUILDING A WHOLE PATTERN LIBRARY?” 79
“DON’T FORGET, ONE OF THE DELIVERABLES IS A STYLE GUIDE.” 80 the client: “THIS IS IT. YOU’VE BEEN LOOKING AT IT THIS WHOLE...
81
GO FORTH “Pages” giving way to modular systems Teams need something more Atomic Designs == better communication Better, mo...
RESOURCES http://bradfrost.com/blog/post/atomic-web-design http://atomicdesign.bradfrost.com http://patternlab.io http://m...
I’m AtlantaJones everywhere: andrew@atlantajones.com Awesome! Go be
Adventures in Atomic Design
Adventures in Atomic Design
Adventures in Atomic Design
Adventures in Atomic Design
Adventures in Atomic Design
Adventures in Atomic Design
Adventures in Atomic Design
Adventures in Atomic Design
Upcoming SlideShare
Loading in …5
×

Adventures in Atomic Design

991 views

Published on

Slides for my talk at CSS Summit 2016 about the approach of atomic design in creating componentized, reusable design systems for sites and apps.

Published in: Design
no profile picture user

  • Login to see the comments

Adventures in Atomic Design

  1. 1. ABOUT ME Web developer since 1997 Senior frontend developer at MoZeus Illustrator, cartoonist, writer, daddy 2 I’m AtlantaJones everywhere: andrew@atlantajones.com
  2. 2. “WEBSITES” 3
  3. 3. “WEBSITES” 4
  4. 4. WHAT ARE PAGES EVEN? 5 photo: Jeremy Keith (bit.ly/adtalk-devices)
  5. 5. WHAT ARE PAGES EVEN? 6 != “Pages”
  6. 6. WHAT ARE PAGES EVEN? “We’re a startup looking to launch a 
 5-page website this October…” “How long will it take just to build 
 the home page?” “How are we ever going to redesign this university website that contains over 
 30,000 pages?!” 7
  7. 7. –Stephen Hay “WE’RE NOT DESIGNING PAGES. WE’RE DESIGNING SYSTEMS OF COMPONENTS.” 8
  8. 8. GOING MODULAR 9
  9. 9. GOING MODULAR Backends don’t always generate fully-baked “pages” Their API’s are consumed by components on multiple platforms Web apps are already using modular components for architecture Why not our designs and UI? 10
  10. 10. EARLY ISSUES Organization like SMACSS only got us so far Not accessible for designers No references for existing components Too easy to reinvent wheels Style bloat ensues 11 smacss.com
  11. 11. EARLY ISSUES Inconsistent designs Leads to many minor variations Lots of CSS specificity 12
  12. 12. EARLY ISSUES Modules not truly modular Break when moved around Class names lose meaning 13
  13. 13. EARLY ISSUES “Living” style guides? Not very flexible Provides no context Easily outdated or abandoned 14
  14. 14. WHAT IS ATOMIC DESIGN? Dreamed up by Brad Frost in 2013 Based on a chemistry-inspired metaphor Five phases: 16
  15. 15. ATOMS The basic building block of all matter Can’t be broken down further without losing function or meaning Mostly limited to HTML tags Also more abstract elements like color palettes, font stacks or animations17
  16. 16. ATOMS: EXAMPLE 18 SEARCH THE SITE SEARCH LABEL INPUTENTER KEYWORD BUTTON
  17. 17. MOLECULES Groups of two or more atoms Form simple, functional components Groups of UI elements functioning together as a unit 19
  18. 18. MOLECULES: EXAMPLE 20 SEARCH THE SITE SEARCHENTER KEYWORD
  19. 19. ORGANISMS Groups of molecules and atoms Can also contain smaller organisms Form distinct sections of an interface 21
  20. 20. ORGANISMS: EXAMPLE 22 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
  21. 21. ORGANISMS: EXAMPLE 23 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT Atom: logo Molecule: Nav Molecule: Search Organism: Global Header
  22. 22. TEMPLATES Like low-fidelity wireframes Provide context for molecules and organisms Contain only placeholder text and images 24
  23. 23. TEMPLATES: EXAMPLE 25 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
  24. 24. PAGES Most concrete stage in Atomic Design Specific “instances” of templates Real representative content Multiple pages from single templates 26
  25. 25. TEMPLATES: EXAMPLE 27 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
  26. 26. PAGES: EXAMPLE 28
  27. 27. PATTERN LIBRARIES Promote consistency Allow faster, more collaborative workflow Establish a shared vocabulary Make testing easier Make estimating easier Serve as documentation 30
  28. 28. Style Tiles Element Collages PATTERN LIBRARIES 31
  29. 29. Mail chimp Big Nerd Ranch PATTERN LIBRARIES 32
  30. 30. PATTERN LAB Web app that compiles code patterns into a functional front-end UI Allows for separation between structure and content Serves as a blueprint for backend developers Allows non-developers to contribute to the living, breathing design system 34
  31. 31. PATTERN LAB Both PHP and Node-based versions Static site generator Multiple “editions” support both Mustache and Twig templates Also a Drupal-friendly version 35
  32. 32. 37 http://demo.patternlab.io/
  33. 33. 38 http://demo.patternlab.io/ atomic design phases
  34. 34. 39 pixel sizing breakpoint sizing surprise me code, search, etc
  35. 35. 40
  36. 36. 41
  37. 37. 42
  38. 38. 43
  39. 39. 44
  40. 40. 45
  41. 41. 46
  42. 42. 47
  43. 43. 48
  44. 44. 49
  45. 45. 50
  46. 46. 51
  47. 47. 52
  48. 48. 53
  49. 49. 54
  50. 50. 55
  51. 51. 56
  52. 52. 57
  53. 53. 58
  54. 54. 59
  55. 55. 60
  56. 56. 61
  57. 57. 62
  58. 58. 63
  59. 59. UNDER THE HOOD 65 misc config files Pattern Lab “engine” static file output working files & templates php Composer dependencies
  60. 60. UNDER THE HOOD 66 annotation data global data global template includes five phases of Atomic Design
  61. 61. UNDER THE HOOD 67
  62. 62. UNDER THE HOOD 68
  63. 63. MUSTACHE VS. TWIG? Both very capable choices Mustache: “logic-less” No “ifs”, “elses” or “for loops” Twig: Offers more features and flexibility More PHP project friendly 69
  64. 64. MUSTACHE VS. TWIG? 70 mustache twig
  65. 65. MUSTACHE VS. TWIG? 71
  66. 66. THE PROBLEM Patterns need to be consumed by backend Crap. Patterns should serve as the blueprint Patterns easily detached from the library PHP-based projects may have an easier transition 73
  67. 67. THE HOLY GRAIL Two-way synchronization between the library and backend Gem libraries? Composer packages?? Node modules??? 74
  68. 68. THE HOLY GRAIL 75
  69. 69. CAUTIONS & CAVEATS Everyone has to be on board Make/test components within library first Roll in “hot fix” changes ASAP Avoid “Bootstrap-itis” Naming things is super hard Avoid names based on appearance or location 77
  70. 70. NOTES ON ATOMIC DESIGN It’s not restricted to any certain technology Can be applied to all UI, not just web Helps when designing web and mobile
 UI’s simultaneously 78
  71. 71. “AFTER WE DELIVER THIS SITE, WE WON’T BE INVOLVED ANYMORE. 
 
 IS IT STILL WORTH BUILDING A WHOLE PATTERN LIBRARY?” 79
  72. 72. “DON’T FORGET, ONE OF THE DELIVERABLES IS A STYLE GUIDE.” 80 the client: “THIS IS IT. YOU’VE BEEN LOOKING AT IT THIS WHOLE TIME.” me:
  73. 73. 81
  74. 74. GO FORTH “Pages” giving way to modular systems Teams need something more Atomic Designs == better communication Better, more consistent, reusable components Better, faster response from clients A ready-made instruction manual 82
  75. 75. RESOURCES http://bradfrost.com/blog/post/atomic-web-design http://atomicdesign.bradfrost.com http://patternlab.io http://mustache.github.io http://twig.sensiolabs.org Smashing Magazine Pattern Lab 2 Article 83
  76. 76. I’m AtlantaJones everywhere: andrew@atlantajones.com Awesome! Go be

×