Adventures in Atomic Design
•
4 likes•1,239 views
Slides for my talk at CSS Summit 2016 about the approach of atomic design in creating componentized, reusable design systems for sites and apps.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Adventures in Atomic Design
Similar to Adventures in Atomic Design (20)
Recently uploaded
Recently uploaded (20)
Adventures in Atomic Design
- 2. ABOUT ME Web developer since 1997 Senior frontend developer at MoZeus Illustrator, cartoonist, writer, daddy 2 I’m AtlantaJones everywhere: andrew@atlantajones.com
- 3. “WEBSITES” 3
- 4. “WEBSITES” 4
- 5. WHAT ARE PAGES EVEN? 5 photo: Jeremy Keith (bit.ly/adtalk-devices)
- 6. WHAT ARE PAGES EVEN? 6 != “Pages”
- 7. 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
- 8. –Stephen Hay “WE’RE NOT DESIGNING PAGES. WE’RE DESIGNING SYSTEMS OF COMPONENTS.” 8
- 10. 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
- 11. 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
- 12. EARLY ISSUES Inconsistent designs Leads to many minor variations Lots of CSS specificity 12
- 13. EARLY ISSUES Modules not truly modular Break when moved around Class names lose meaning 13
- 14. EARLY ISSUES “Living” style guides? Not very flexible Provides no context Easily outdated or abandoned 14
- 16. WHAT IS ATOMIC DESIGN? Dreamed up by Brad Frost in 2013 Based on a chemistry-inspired metaphor Five phases: 16
- 17. 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
- 18. ATOMS: EXAMPLE 18 SEARCH THE SITE SEARCH LABEL INPUTENTER KEYWORD BUTTON
- 19. MOLECULES Groups of two or more atoms Form simple, functional components Groups of UI elements functioning together as a unit 19
- 20. MOLECULES: EXAMPLE 20 SEARCH THE SITE SEARCHENTER KEYWORD
- 21. ORGANISMS Groups of molecules and atoms Can also contain smaller organisms Form distinct sections of an interface 21
- 22. ORGANISMS: EXAMPLE 22 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
- 23. ORGANISMS: EXAMPLE 23 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT Atom: logo Molecule: Nav Molecule: Search Organism: Global Header
- 24. TEMPLATES Like low-fidelity wireframes Provide context for molecules and organisms Contain only placeholder text and images 24
- 25. TEMPLATES: EXAMPLE 25 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
- 26. PAGES Most concrete stage in Atomic Design Specific “instances” of templates Real representative content Multiple pages from single templates 26
- 27. TEMPLATES: EXAMPLE 27 SEARCH THE SITE SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
- 30. PATTERN LIBRARIES Promote consistency Allow faster, more collaborative workflow Establish a shared vocabulary Make testing easier Make estimating easier Serve as documentation 30
- 31. Style Tiles Element Collages PATTERN LIBRARIES 31
- 32. Mail chimp Big Nerd Ranch PATTERN LIBRARIES 32
- 34. 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
- 35. 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
- 40. 40
- 41. 41
- 42. 42
- 43. 43
- 44. 44
- 45. 45
- 46. 46
- 47. 47
- 48. 48
- 49. 49
- 50. 50
- 51. 51
- 52. 52
- 53. 53
- 54. 54
- 55. 55
- 56. 56
- 57. 57
- 58. 58
- 59. 59
- 60. 60
- 61. 61
- 62. 62
- 63. 63
- 65. UNDER THE HOOD 65 misc config files Pattern Lab “engine” static file output working files & templates php Composer dependencies
- 66. UNDER THE HOOD 66 annotation data global data global template includes five phases of Atomic Design
- 69. 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
- 73. 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
- 74. THE HOLY GRAIL Two-way synchronization between the library and backend Gem libraries? Composer packages?? Node modules??? 74
- 77. 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
- 78. 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
- 79. “AFTER WE DELIVER THIS SITE, WE WON’T BE INVOLVED ANYMORE. IS IT STILL WORTH BUILDING A WHOLE PATTERN LIBRARY?” 79
- 80. “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:
- 81. 81
- 82. 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