Building an Atomic Design System

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 CMSClient: 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 CMSClient: 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

SearchSearch

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 PatternsEvents

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 PatternsArticle

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 PatternsNarrow Card

Lorem ipsum dolor sit ametMorbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend.

LABEL

Dogs with BeardsIf your dog has a beard, this event is for you!

EVENT

Tim Wright, @csskarmaRevolve Conference 2016

Design PatternsWide Card

Lorem ipsum dolor sit ametMorbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend.

LABEL

Tim Wright, @csskarmaRevolve Conference 2016

Design PatternsWide Card

Dogs with BeardsIf your dog has a beard, this event is for you!

EVENT

Tim Wright, @csskarmaRevolve Conference 2016

Design PatternsWide Card, no image

Dogs with BeardsIf your dog has a beard, this

event is for you!

EVENT

Tim Wright, @csskarmaRevolve Conference 2016

Design PatternsCall 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 PatternsCall 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 PatternsCall 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 PatternsThe Master Template

Content Zone A

Content Zone C

Content Zone D

Master Template

Content Zone B

Tim Wright, @csskarmaRevolve Conference 2016

Layout PatternsContent Zone B

Purpose

Rules

Layout Style

Technical Dependencies

Voice & Tone

Tim Wright, @csskarmaRevolve Conference 2016

Layout PatternsModule Modifications

Lorem ipsum dolor sit ametMorbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend.

CATEGORY

Lorem ipsum dolor sit ametMorbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend.

CATEGORY

Tim Wright, @csskarmaRevolve Conference 2016

Layout PatternsTemplate Modifications

Tim Wright, @csskarmaRevolve Conference 2016

Layout PatternsTemplate 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.