SlideShare a Scribd company logo
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.

More Related Content

Viewers also liked

Atomic design
Atomic designAtomic design
Atomic design
danielModea
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
Todd Moy
 
Atomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital AgencyAtomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital Agency
Atomic Design & Consulting
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
GiantJohnPepper
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
Steve Zyglowicz
 
Atomic designで助かった人たち
Atomic designで助かった人たちAtomic designで助かった人たち
Atomic designで助かった人たち
Iida Yukako
 
Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016
Matt Vanderpol
 
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Jason Kalawe
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
die.agilen GmbH
 
Atomic design
Atomic designAtomic design
Atomic design
Brad Frost
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Digital Surgeons
 

Viewers also liked (11)

Atomic design
Atomic designAtomic design
Atomic design
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
 
Atomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital AgencyAtomic Design - Dallas Digital Agency
Atomic Design - Dallas Digital Agency
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
Atomic designで助かった人たち
Atomic designで助かった人たちAtomic designで助かった人たち
Atomic designで助かった人たち
 
Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016
 
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
Atomic design
Atomic designAtomic design
Atomic design
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
 

Similar to Building an Atomic Design System

Coding a SaaS
Coding a SaaSCoding a SaaS
Coding a SaaS
Chris on Code
 
Marketing Tools 2016 T&C2016 Roland Frasier Marketing Tools Presentation
Marketing Tools 2016 T&C2016 Roland Frasier Marketing Tools PresentationMarketing Tools 2016 T&C2016 Roland Frasier Marketing Tools Presentation
Marketing Tools 2016 T&C2016 Roland Frasier Marketing Tools Presentation
Roland Frasier
 
Up and Running with WordPress in 30 Minutes
Up and Running with WordPress in 30 MinutesUp and Running with WordPress in 30 Minutes
Up and Running with WordPress in 30 Minutes
Erik Mattheis
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
umesh patil
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
umesh patil
 
A Guide to Properly Migrating a CMS: The Rainbow Edition
A Guide to Properly Migrating a CMS: The Rainbow EditionA Guide to Properly Migrating a CMS: The Rainbow Edition
A Guide to Properly Migrating a CMS: The Rainbow Edition
Kristina Azarenko
 
Scaling Enterprise SEM Campaigns - SMX Muenchen 2016
Scaling Enterprise SEM Campaigns - SMX Muenchen 2016Scaling Enterprise SEM Campaigns - SMX Muenchen 2016
Scaling Enterprise SEM Campaigns - SMX Muenchen 2016
Christi Olson
 
Mass Conversions | Product Mix | Conversion Optimization
Mass Conversions | Product Mix | Conversion OptimizationMass Conversions | Product Mix | Conversion Optimization
Mass Conversions | Product Mix | Conversion Optimization
Roland Frasier
 
Pitch Deck Template 3 (reading version) - BaseTemplates
Pitch Deck Template 3 (reading version) - BaseTemplatesPitch Deck Template 3 (reading version) - BaseTemplates
Pitch Deck Template 3 (reading version) - BaseTemplates
Vasyl Slobodian
 
Designing for the inbox of the future
Designing for the inbox of the futureDesigning for the inbox of the future
Designing for the inbox of the future
Adestra
 
SEO Strategies by Thirdparty Labs and Shovemedia
SEO Strategies by Thirdparty Labs and ShovemediaSEO Strategies by Thirdparty Labs and Shovemedia
SEO Strategies by Thirdparty Labs and Shovemedia
RobRuchte
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
elliotjaystocks
 
Intro to WordPress Theming
Intro to WordPress ThemingIntro to WordPress Theming
Intro to WordPress Theming
Andy McIlwain
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
Trent Walton
 
Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...
Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...
Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...
Amazon Web Services
 
Proposal For Copywriting PowerPoint Presentation Slides
Proposal For Copywriting PowerPoint Presentation SlidesProposal For Copywriting PowerPoint Presentation Slides
Proposal For Copywriting PowerPoint Presentation Slides
SlideTeam
 
Custom V CMS
Custom V CMSCustom V CMS
Custom V CMS
Diana Mounter
 
Creating a Digitally Innovative University
Creating a Digitally Innovative UniversityCreating a Digitally Innovative University
Creating a Digitally Innovative University
Amazon Web Services
 
Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...
Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...
Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...
Amazon Web Services
 
Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...
Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...
Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...
Amazon Web Services
 

Similar to Building an Atomic Design System (20)

Coding a SaaS
Coding a SaaSCoding a SaaS
Coding a SaaS
 
Marketing Tools 2016 T&C2016 Roland Frasier Marketing Tools Presentation
Marketing Tools 2016 T&C2016 Roland Frasier Marketing Tools PresentationMarketing Tools 2016 T&C2016 Roland Frasier Marketing Tools Presentation
Marketing Tools 2016 T&C2016 Roland Frasier Marketing Tools Presentation
 
Up and Running with WordPress in 30 Minutes
Up and Running with WordPress in 30 MinutesUp and Running with WordPress in 30 Minutes
Up and Running with WordPress in 30 Minutes
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
 
A Guide to Properly Migrating a CMS: The Rainbow Edition
A Guide to Properly Migrating a CMS: The Rainbow EditionA Guide to Properly Migrating a CMS: The Rainbow Edition
A Guide to Properly Migrating a CMS: The Rainbow Edition
 
Scaling Enterprise SEM Campaigns - SMX Muenchen 2016
Scaling Enterprise SEM Campaigns - SMX Muenchen 2016Scaling Enterprise SEM Campaigns - SMX Muenchen 2016
Scaling Enterprise SEM Campaigns - SMX Muenchen 2016
 
Mass Conversions | Product Mix | Conversion Optimization
Mass Conversions | Product Mix | Conversion OptimizationMass Conversions | Product Mix | Conversion Optimization
Mass Conversions | Product Mix | Conversion Optimization
 
Pitch Deck Template 3 (reading version) - BaseTemplates
Pitch Deck Template 3 (reading version) - BaseTemplatesPitch Deck Template 3 (reading version) - BaseTemplates
Pitch Deck Template 3 (reading version) - BaseTemplates
 
Designing for the inbox of the future
Designing for the inbox of the futureDesigning for the inbox of the future
Designing for the inbox of the future
 
SEO Strategies by Thirdparty Labs and Shovemedia
SEO Strategies by Thirdparty Labs and ShovemediaSEO Strategies by Thirdparty Labs and Shovemedia
SEO Strategies by Thirdparty Labs and Shovemedia
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
 
Intro to WordPress Theming
Intro to WordPress ThemingIntro to WordPress Theming
Intro to WordPress Theming
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...
Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...
Leadership Session: Digital Advertising - Customer Learning & the Road Ahead ...
 
Proposal For Copywriting PowerPoint Presentation Slides
Proposal For Copywriting PowerPoint Presentation SlidesProposal For Copywriting PowerPoint Presentation Slides
Proposal For Copywriting PowerPoint Presentation Slides
 
Custom V CMS
Custom V CMSCustom V CMS
Custom V CMS
 
Creating a Digitally Innovative University
Creating a Digitally Innovative UniversityCreating a Digitally Innovative University
Creating a Digitally Innovative University
 
Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...
Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...
Build, Deploy, and Serve Machine Learning Models on Streaming Data (ANT345-R1...
 
Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...
Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...
Build a Searchable Media Library & Moderate Content at Scale Using Machine Le...
 

More from Tim Wright

An Introduction to HTTP/2
An Introduction to HTTP/2An Introduction to HTTP/2
An Introduction to HTTP/2
Tim Wright
 
Creating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device APICreating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device API
Tim Wright
 
Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
Tim Wright
 
Bringing Environmental Design to the Web
Bringing Environmental Design to the WebBringing Environmental Design to the Web
Bringing Environmental Design to the Web
Tim Wright
 
Environmental Design Vol. 2
Environmental Design Vol. 2Environmental Design Vol. 2
Environmental Design Vol. 2
Tim Wright
 
Environmental Design on The Web
Environmental Design on The WebEnvironmental Design on The Web
Environmental Design on The Web
Tim Wright
 
Form design
Form designForm design
Form design
Tim Wright
 
Color & Typography
Color & TypographyColor & Typography
Color & Typography
Tim Wright
 
Design process
Design processDesign process
Design process
Tim Wright
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
Tim Wright
 
Implementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyImplementing a Scalable Mobile Strategy
Implementing a Scalable Mobile Strategy
Tim Wright
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
Tim Wright
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
Tim Wright
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
Tim Wright
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
Tim Wright
 

More from Tim Wright (16)

An Introduction to HTTP/2
An Introduction to HTTP/2An Introduction to HTTP/2
An Introduction to HTTP/2
 
Creating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device APICreating Contextual Applications with Maslow & The Device API
Creating Contextual Applications with Maslow & The Device API
 
Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
 
Bringing Environmental Design to the Web
Bringing Environmental Design to the WebBringing Environmental Design to the Web
Bringing Environmental Design to the Web
 
Environmental Design Vol. 2
Environmental Design Vol. 2Environmental Design Vol. 2
Environmental Design Vol. 2
 
Environmental Design on The Web
Environmental Design on The WebEnvironmental Design on The Web
Environmental Design on The Web
 
Form design
Form designForm design
Form design
 
Color & Typography
Color & TypographyColor & Typography
Color & Typography
 
Design process
Design processDesign process
Design process
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Implementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyImplementing a Scalable Mobile Strategy
Implementing a Scalable Mobile Strategy
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
 

Recently uploaded

一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
w26izoeb
 
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
mfria419
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
tobbk6s8
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
qa8dk1wm
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
67n7f53
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 

Recently uploaded (20)

一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
 
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 

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.