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.

Adventures in Atomic Design

679 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
  • Be the first to comment

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

×