ATOMIC DESIGN
@brad_frost

PAGES GRAPHIC? WRITTEN PAGE? WEB
PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/

We’re not designing pages, we’re
designing systems of components. -Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

WHAT IS AN INTERFACE MADE
OF?

http://bradfrost.github.com/this-is-responsive/patterns.html

http://foundation.zurb.com/

getbootstrap.com

THESE THINGS ARE GREAT, BUT...

FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all
๏ Lookalike issues ๏ Potential for bloat/unneeded stuff ๏ Might not do everything you need ๏ Compatibility with existing sites ๏ Subscribe to someone else’s structure, naming, style

Tiny Bootstraps, for every client.
-Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/

Responsive deliverables should look a
lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/

BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference http://24ways.org/2011/front-end-style-guides/

http://gim.ie/fZyK

http://pea.rs/

http://brettjankord.com/projects/style-guide-boilerplate/

http://patternprimer.adactio.com/

http://malarkey.github.io/Rock-Hammer/

http://barebones.paulrobertlloyd.com

http://www.starbucks.com/static/reference/styleguide/
http://www.starbucks.com/static/reference/styleguide/

I LOVE THESE.

MO’ PATTERNS, MO’ PROBLEMS ๏
Time consuming to create ๏ Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often created after a project launches ๏ Often incomplete/only serving present cases ๏ Lacking a clear methodology

ATOMIC DESIGN

H2 + O2 → H20
C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O

H2+O2=H20
H2+O2→H20

http://joshduck.com/periodic-table.html

H2+O2=H20
H2+O2→H20

ABSTRACT
CONCRETE

ABSTRACT
CONCRETE
CREATORS
CLIENTS

REFERENCE
BUILD
REVIEW

DAVE OLSEN
@dmolsen

WHAT PATTERN LAB IS ๏
A design system builder ๏ A comprehensive custom component library ๏ A pattern starter kit ๏ A practical viewport resizer ๏ An annotation tool ๏ A developer tool (auto-refresh, page follow)

WHAT PATTERN LAB ISN’T ๏
A UI framework ๏ Language, library, or style dependent ๏ Incredibly rigid ๏ “just” a pattern library, but also not by itself a

SITE BUILDER

BLOW IT UP.

http://www.starbucks.com/static/reference/styleguide/

MOLECULE GUTS code block !
<div class="block block-inset"> <div class="b-thumb"> {{> atoms-img-landscape-4x3 }} </div> <div class="b-text"> <h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipisicing</h2> </div> </div> !

BASIC INCLUDE ! ! !
! ! code block ! ! ! {{> molecules-block-inset }} !

ORGANISM GUTS ! code block
! ! ! ! <header class="header cf" role="banner"> {{> atoms-logo }} <a href="#search" class="toggle-search">Search</a> <a href="#nav" class="toggle-menu">Menu</a> {{> molecules-primary-nav }} {{> molecules-search }} </header>

BASIC INCLUDE ! code block
! ! ! ! {{> organisms-header }}

TEMPLATE GUTS {{> codeorganisms-header block
}} <div role="main"> <div class="l-two-col"> <div class="l-main"> {{> organisms-article-body }} {{> molecules-social-share }} {{> organisms-comments }} </div><!--end l-main--> ! <div class="l-sidebar"> {{> organisms-related-posts }} {{> organisms-recent-tweets }} </div><!--end l-sidebar--> </div><!--end l-two-col--> </div><!--End role=main--> {{> organisms-footer }} !

CONTENT STRUCTURE
ACTUAL CONTENT

TEMPLATE GUTS code hero }}
{{# block {{> molecules-block-hero }} {{/ hero}} ! <div class="g g-3up"> {{# touts}} <div class="gi"> {{> molecules-inset-block }} </div> {{/ touts}} </div><!--end 3up-->

PIPING IN REAL CONTENT WITH
JSON "hero" : [ code {block } "img": { "landscape-16x9": { "src": "images/sample/mountains.jpg", "alt": "Mountains" } }, "headline" : { "medium" : "Top 10 mountin ranges for hiking" } ], "touts" : [ { "img": { "landscape-4x3": { "src": "../../images/sample/climber.jpg", "alt": "Climber" } }, "headline" : {

VIEWER

320PX.

320PX.
480PX.

320PX.
480PX.
768PX.

320PX.
480PX.
768PX.
1024PX.

320PX. 480PX. 768PX. 1024PX. THE
FOLD.

320PX. 480PX. 768PX. 1024PX. THE
FOLD. OH GOD THE FOLD.

DISCO MODE

HAY! MODE

Start with the small screen
first, then expand until it looks like shit. Time for a breakpoint! -Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

ANNOTATIONS

AUTO-REFRESH &
PAGE FOLLOW

PATTERN LAB ๏ Serves as
a hub for the entire design process ๏ Can easily traverse from abstract to concrete ๏ Useful tool for everyone: information architects, designers, developers, clients ๏ Fills the post-PSD void ๏ Write and name HTML/CSS/JS as you please. ๏ Start with a system first rather than deconstruct later ๏ Extensible and scalable ๏ Future friendly

SET EXPECTATIONS

http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg

As an industry, we sell
websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context. -Dan Mall http://danielmall.com/articles/the-post-psd-era/

B-SIDE THIS IS NOT THE
WEB.

WEB
WEB

DEATH TO NAVIGATION
COMPLEXTHE WATERFALL

Let’s change the phrase “designing
in the browser” to “deciding in the browser” -Dan Mall http://the-pastry-box-project.net/dan-mall/2012-september-12/

GATHER

http://stylifyme.com/

http://bradfrostweb.com/blog/post/interface-inventory/

http://blog.easy-designs.net/archives/evernote-for-interface-inventories/

INTERFACE INVENTORY ๏ Document your
interface ๏ Promote consistency ๏ Establish which elements will be challenging to translate into a responsive environment ๏ Lay the groundwork for a future style guide/pattern library

ESTABLISH DIRECTION

RCE
OU
RES
http://styletil.es/

ROLL UP OUR SLEEVES

CONTENT STRUCTURE
ACTUAL CONTENT

http://www.flickr.com/photos/15609463@N03/7854373494/

COLLABORATION AND COMMUNICATION
TRUMP DELIVERABLES

http://pattern-lab.info

IF ANYTHING GOES WRONG WITH
PATTERN LAB, BLAME THIS GUY.

HUGE THANK YOU ๏ Dave
Olsen ๏ Anna Debenham ๏ Dan Mall ๏ Andy Clarke ๏ Josh Clark ๏ Paul Robert Lloyd ๏ Jonathan Stark ๏ Jeremy Keith ๏ Jennifer Brook ๏ Brett Jankord ๏ Tyler Sticka ๏ Harry Roberts

WHEN YOU’RE FINISHED CHANGING YOU’RE
FINISHED.

THIS IS FUN!

THANKS!
@brad_frost