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.

Building an Atomic Design System

1,128 views

Published on

Atomic design and pattern libraries are great for scalability and creating a consistent design system for a product, but they can get quickly out of control. This talk will take you through the creation of an atomic system that separates a product into 3 pattern buckets:

- Content patterns,
- Design patterns, and
- Layout patterns.

We’ll also walk through workflows and how these patterns can all come together to create a scalable system that can create content-based design modifications that create endless module combinations with almost no extra effort.

Published in: Design
  • Be the first to comment

Building an Atomic Design System

  1. 1. Tim Wright, @csskarmaRevolve Conference 2016 Building an Atomic Design System Content Design Layout
  2. 2. Tim Wright, @csskarmaRevolve Conference 2016 The CMS
  3. 3. Tim Wright, @csskarmaRevolve Conference 2016 The CMS Client: Can you update my photo on the website? Developer: Sure, let me know if there’s anything 
 else you need! Client: EMERGENCY! There’s a typo on the home page. Developer: Fixed! Client: Can you add our phone number to the contact
 page? Developer: …yeah, sure December 24, 1992
  4. 4. Tim Wright, @csskarmaRevolve Conference 2016 The CMS Client: We hired someone, can you add them to the
 about page? Developer: …uh huh Client: That person got fired, can you take them down
 ASAP?! Developer: Good news! I built you a CMS, so you can make 
 these all these changes yourself!
  5. 5. Tim Wright, @csskarmaRevolve Conference 2016 – Sun Tzu, The Art of War “There are [only a few] musical notes, yet the combinations of these […] give rise to more melodies than can ever be heard.”
  6. 6. Tim Wright, @csskarmaRevolve Conference 2016 Style Guide
  7. 7. Tim Wright, @csskarmaRevolve Conference 2016 BUTTON Text Input Checkbox Radio Button Select Menu Textarea Style Guide
  8. 8. Tim Wright, @csskarmaRevolve Conference 2016 SIGN IN Password Username Remember Me Sign In
  9. 9. Tim Wright, @csskarmaRevolve Conference 2016 SEARCH Search Search
  10. 10. Tim Wright, @csskarmaRevolve Conference 2016 Checkout CHECKOUT Name I have read the privacy policy State Street Address Zip Code Credit Card Number
  11. 11. Tim Wright, @csskarmaRevolve Conference 2016 BUTTON Text Input Checkbox Radio Button Select Menu Textarea Style Guide
  12. 12. Tim Wright, @csskarmaRevolve Conference 2016 The Design System
  13. 13. Tim Wright, @csskarmaRevolve Conference 2016 – Peter Drucker, Managing Oneself “It takes far more energy and work to improve from incompetence to mediocrity than it takes to improve from first-rate performance to excellence.”
  14. 14. Tim Wright, @csskarmaRevolve Conference 2016 Content Design Layout System Patterns
  15. 15. Tim Wright, @csskarmaRevolve Conference 2016 Content Patterns
  16. 16. Tim Wright, @csskarmaRevolve Conference 2016 Content Patterns Events URL: http://dogs-with-beards.com Title: Bearded Dogs Description: If your dog has a beard, this event is for you! Image(s):
  17. 17. Tim Wright, @csskarmaRevolve Conference 2016 Content Patterns Article URL: http://this-article.com Title: Amazing Article about Dogs Author(s): Bobby Orr Publish Date: Oct. 1, 2016 Content: Lorem Ipsum…
  18. 18. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns
  19. 19. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Narrow Card Lorem ipsum dolor sit amet Morbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend. LABEL Dogs with Beards If your dog has a beard, this event is for you! EVENT
  20. 20. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Wide Card Lorem ipsum dolor sit amet Morbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend. LABEL
  21. 21. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Wide Card Dogs with Beards If your dog has a beard, this event is for you! EVENT
  22. 22. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Wide Card, no image Dogs with Beards If your dog has a beard, this event is for you! EVENT
  23. 23. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Call to action Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend hendrerit neque id tempor. Curabitur placerat commodo erat sit amet volutpat. CTA Button Lorem ipsum dolor sit amet
  24. 24. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Call to action Come out to the park with your bearded dog for some fun in the sun. If you’re dog doesn’t have a beard already there will be a shaving station. Don’t Miss the Bearded Dog Event
  25. 25. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Call to action We have the best newsletter, it’s great… it’s the best newsletter of all time. You’ll love every email we send you. It’s the best. Sign Up Sign Up for Our Newsletter
  26. 26. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns
  27. 27. Tim Wright, @csskarmaRevolve Conference 2016 Hero Navigation Feature One Feature Two Feature Three Call to action Footer
  28. 28. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns The Master Template Content Zone A Content Zone C Content Zone D Master Template Content Zone B
  29. 29. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Content Zone B Purpose Rules Layout Style Technical Dependencies Voice & Tone
  30. 30. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Module Modifications Lorem ipsum dolor sit amet Morbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend. CATEGORY Lorem ipsum dolor sit amet Morbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend. CATEGORY
  31. 31. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Template Modifications
  32. 32. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Template Modifications
  33. 33. Tim Wright, @csskarmaRevolve Conference 2016
  34. 34. Tim Wright, @csskarmaRevolve Conference 2016
  35. 35. Tim Wright, @csskarmaRevolve Conference 2016 Designer Editor CMS System Patterns “I need a button”“Here’s a button” “The button should say, “Learn more about dogs.””
  36. 36. Tim Wright, @csskarmaRevolve Conference 2016 LEARN MORE ABOUT DOGS
  37. 37. Tim Wright, @csskarmaRevolve Conference 2016 – Elon Musk, Miscellaneous rant, 2016 “We realized that the true problem, the true difficulty, and where the greatest potential is – is building the machine that makes the machine.”
  38. 38. Tim Wright, @csskarmaRevolve Conference 2016 Thank you for listening …and I’ll try and do better next time.

×