Building an Atomic Design System
•
4 likes•1,968 views
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.
Report
Share
Building an Atomic Design System
- 1. Tim Wright, @csskarmaRevolve Conference 2016 Building an Atomic Design System Content Design Layout
- 2. Tim Wright, @csskarmaRevolve Conference 2016 The CMS
- 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. 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. 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. Tim Wright, @csskarmaRevolve Conference 2016 Style Guide
- 7. Tim Wright, @csskarmaRevolve Conference 2016 BUTTON Text Input Checkbox Radio Button Select Menu Textarea Style Guide
- 8. Tim Wright, @csskarmaRevolve Conference 2016 SIGN IN Password Username Remember Me Sign In
- 9. Tim Wright, @csskarmaRevolve Conference 2016 SEARCH Search Search
- 10. Tim Wright, @csskarmaRevolve Conference 2016 Checkout CHECKOUT Name I have read the privacy policy State Street Address Zip Code Credit Card Number
- 11. Tim Wright, @csskarmaRevolve Conference 2016 BUTTON Text Input Checkbox Radio Button Select Menu Textarea Style Guide
- 12. Tim Wright, @csskarmaRevolve Conference 2016 The Design System
- 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. Tim Wright, @csskarmaRevolve Conference 2016 Content Design Layout System Patterns
- 15. Tim Wright, @csskarmaRevolve Conference 2016 Content Patterns
- 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. 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. Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns
- 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. 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. 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. 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. 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. 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. 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. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns
- 27. Tim Wright, @csskarmaRevolve Conference 2016 Hero Navigation Feature One Feature Two Feature Three Call to action Footer
- 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. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Content Zone B Purpose Rules Layout Style Technical Dependencies Voice & Tone
- 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. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Template Modifications
- 32. Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Template Modifications
- 33. Tim Wright, @csskarmaRevolve Conference 2016
- 34. Tim Wright, @csskarmaRevolve Conference 2016
- 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. Tim Wright, @csskarmaRevolve Conference 2016 LEARN MORE ABOUT DOGS
- 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. Tim Wright, @csskarmaRevolve Conference 2016 Thank you for listening …and I’ll try and do better next time.