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.

of

Adventures in Atomic Design Slide 1 Adventures in Atomic Design Slide 2 Adventures in Atomic Design Slide 3 Adventures in Atomic Design Slide 4 Adventures in Atomic Design Slide 5 Adventures in Atomic Design Slide 6 Adventures in Atomic Design Slide 7 Adventures in Atomic Design Slide 8 Adventures in Atomic Design Slide 9 Adventures in Atomic Design Slide 10 Adventures in Atomic Design Slide 11 Adventures in Atomic Design Slide 12 Adventures in Atomic Design Slide 13 Adventures in Atomic Design Slide 14 Adventures in Atomic Design Slide 15 Adventures in Atomic Design Slide 16 Adventures in Atomic Design Slide 17 Adventures in Atomic Design Slide 18 Adventures in Atomic Design Slide 19 Adventures in Atomic Design Slide 20 Adventures in Atomic Design Slide 21 Adventures in Atomic Design Slide 22 Adventures in Atomic Design Slide 23 Adventures in Atomic Design Slide 24 Adventures in Atomic Design Slide 25 Adventures in Atomic Design Slide 26 Adventures in Atomic Design Slide 27 Adventures in Atomic Design Slide 28 Adventures in Atomic Design Slide 29 Adventures in Atomic Design Slide 30 Adventures in Atomic Design Slide 31 Adventures in Atomic Design Slide 32 Adventures in Atomic Design Slide 33 Adventures in Atomic Design Slide 34 Adventures in Atomic Design Slide 35 Adventures in Atomic Design Slide 36 Adventures in Atomic Design Slide 37 Adventures in Atomic Design Slide 38 Adventures in Atomic Design Slide 39 Adventures in Atomic Design Slide 40 Adventures in Atomic Design Slide 41 Adventures in Atomic Design Slide 42 Adventures in Atomic Design Slide 43 Adventures in Atomic Design Slide 44 Adventures in Atomic Design Slide 45 Adventures in Atomic Design Slide 46 Adventures in Atomic Design Slide 47 Adventures in Atomic Design Slide 48 Adventures in Atomic Design Slide 49 Adventures in Atomic Design Slide 50 Adventures in Atomic Design Slide 51 Adventures in Atomic Design Slide 52 Adventures in Atomic Design Slide 53 Adventures in Atomic Design Slide 54 Adventures in Atomic Design Slide 55 Adventures in Atomic Design Slide 56 Adventures in Atomic Design Slide 57 Adventures in Atomic Design Slide 58 Adventures in Atomic Design Slide 59 Adventures in Atomic Design Slide 60 Adventures in Atomic Design Slide 61 Adventures in Atomic Design Slide 62 Adventures in Atomic Design Slide 63 Adventures in Atomic Design Slide 64 Adventures in Atomic Design Slide 65 Adventures in Atomic Design Slide 66 Adventures in Atomic Design Slide 67 Adventures in Atomic Design Slide 68 Adventures in Atomic Design Slide 69 Adventures in Atomic Design Slide 70 Adventures in Atomic Design Slide 71 Adventures in Atomic Design Slide 72 Adventures in Atomic Design Slide 73 Adventures in Atomic Design Slide 74 Adventures in Atomic Design Slide 75 Adventures in Atomic Design Slide 76 Adventures in Atomic Design Slide 77 Adventures in Atomic Design Slide 78 Adventures in Atomic Design Slide 79 Adventures in Atomic Design Slide 80 Adventures in Atomic Design Slide 81 Adventures in Atomic Design Slide 82 Adventures in Atomic Design Slide 83 Adventures in Atomic Design Slide 84
Upcoming SlideShare
Atomic design, a problem of expectations
Next
Download to read offline and view in fullscreen.

3 Likes

Share

Download to read offline

Adventures in Atomic Design

Download to read offline

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • NicholasEvans58

    Feb. 20, 2018
  • ThomasLarsen9

    Apr. 14, 2017
  • SantiagoArcucci

    Apr. 12, 2017

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

Views

Total views

1,161

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

33

Shares

0

Comments

0

Likes

3

×