Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Tim Wright, profile picture
Uploaded byTim Wright
2,005 views

Building an Atomic Design System

Tim Wright's presentation at the CSS Karma Revolve Conference 2016 discusses the importance of building efficient content management systems (CMS) and design systems. He highlights various design patterns, content structures, and the benefits of empowering clients to manage their own website changes. The talk emphasizes the relationship between design elements and user experience through a series of examples and quotations from influential figures.

Design◦
Downloaded 232 times
Tim Wright, @csskarmaRevolve Conference 2016 Building an Atomic Design System Content Design Layout
Tim Wright, @csskarmaRevolve Conference 2016 The CMS
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
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!
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.”
Tim Wright, @csskarmaRevolve Conference 2016 Style Guide
Tim Wright, @csskarmaRevolve Conference 2016 BUTTON Text Input Checkbox Radio Button Select Menu Textarea Style Guide
Tim Wright, @csskarmaRevolve Conference 2016 SIGN IN Password Username Remember Me Sign In
Tim Wright, @csskarmaRevolve Conference 2016 SEARCH Search Search
Tim Wright, @csskarmaRevolve Conference 2016 Checkout CHECKOUT Name I have read the privacy policy State Street Address Zip Code Credit Card Number
Tim Wright, @csskarmaRevolve Conference 2016 BUTTON Text Input Checkbox Radio Button Select Menu Textarea Style Guide
Tim Wright, @csskarmaRevolve Conference 2016 The Design System
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.”
Tim Wright, @csskarmaRevolve Conference 2016 Content Design Layout System Patterns
Tim Wright, @csskarmaRevolve Conference 2016 Content Patterns
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):
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…
Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns
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
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
Tim Wright, @csskarmaRevolve Conference 2016 Design Patterns Wide Card Dogs with Beards If your dog has a beard, this event is for you! EVENT
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
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
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
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
Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns
Tim Wright, @csskarmaRevolve Conference 2016 Hero Navigation Feature One Feature Two Feature Three Call to action Footer
Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns The Master Template Content Zone A Content Zone C Content Zone D Master Template Content Zone B
Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Content Zone B Purpose Rules Layout Style Technical Dependencies Voice & Tone
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
Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Template Modifications
Tim Wright, @csskarmaRevolve Conference 2016 Layout Patterns Template Modifications
Tim Wright, @csskarmaRevolve Conference 2016
Tim Wright, @csskarmaRevolve Conference 2016
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.””
Tim Wright, @csskarmaRevolve Conference 2016 LEARN MORE ABOUT DOGS
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.”
Tim Wright, @csskarmaRevolve Conference 2016 Thank you for listening …and I’ll try and do better next time.