ATOMIC DESIGN@brad_frost

DESIGN SYSTEMS

http://styletil.es

http://sparkbox.github.com/style-prototype/

COMPONENTS

We’re not designing pages,we’re designing
systems of components.-Stephen Hayhttp://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

FRAMEWORKS

RESOURCEhttp://foundation.zurb.com/

RESOURCEhttp://twitter.github.com/bootstrap/

THESE THINGS ARE GREAT, BUT...

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

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

Responsive deliverables should looka lot
like fully-functioning TwitterBootstrap-style systems customtailored for your clients’ needs.-Dave Ruperthttp://daverupert.com/2013/04/responsive-deliverables/

PATTERN LIBRARIES

We’re not designing pages, we’redesigning
systems of components.-Stephen Hayhttp://24ways.org/2011/front-end-style-guides/

BENEFITS OF FRONT-END STYLE GUIDES๏
Easier to test๏ Better workflow๏ Shared vocabulary๏ Useful referencehttp://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://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 created after a project launches๏ Often too abstract๏ Seen only as a designer/developer tool๏ Often incomplete/only serving present cases๏ Lacking a methodology

ATOMIC DESIGN

H2 + O2 → H20C
+ O2 → CO2CH4 + O2 → CO2 + H2OC8H18 + O2 → CO2 + H20C2H6 + O2 → CO2 + H2O

H2+O2=H20H2+O2→H20

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

ATOMS๏ Building blocks of an
interface๏ Can’t be broken down any furtherwithout losing their meaning๏ Abstract๏ Often not too useful on their own๏ Good as an at-a-glance reference๏ See all your global styles laid outat once

Actin’ fool breakin’ shit downto
molecules-Busta Rhymes

H2+O2=H20H2+O2→H20

MOLECULES๏ Group of atoms bonded
together๏ Smallest fundamental units of acompound๏ More concrete than atoms๏ Encourage a “do one thing anddo it well” philosophy๏ Often serve as the backbone for amore complex system

ORGANISMS๏ Group of molecules joinedtogether
to form a distinct section๏ Complex molecules๏ Can consist of similar and/ordifferent molecule types๏ Encourages creating standalone,portable, reusable components

http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

TEMPLATES๏ Page-level๏ Mostly comprised of
groups oforganisms๏ Begin their life as HTMLwireframes, increase fidelity overtime๏ Client facing.Very concrete.๏ Eventually becomes thedeliverable/production code

f

PAGES๏ Specific instance of a
template๏ Highest fidelity.Template contentis replaced with real/samplecontent๏ The hub for most people involvedin the process.๏ Test the effectiveness of thesystem๏ Test variations in the template:design/content tweaks, include/exclude organisms, etc.

ABSTRACT CONCRETE

ABSTRACT CONCRETECREATORS CLIENTS

REFERENCE BUILD REVIEW

ATOMIC DESIGN๏ Provides a methodology
for crafting an effectivedesign system๏ Easily traverse from abstract to concrete๏ Promotes consistency and cohesion๏ Assembles rather than deconstructs

Pattern Lab is a collection
of toolsto help create and maintainatomic web design systems.

WHAT PATTERN LAB IS๏ A
comprehensive component library๏ A pattern starter kit๏ A design system builder๏ A practical viewport resizer๏ A design annotation tool

WHAT PATTERN LAB ISN’T๏ A
UI framework๏ Language/library/style dependent๏ Incredibly rigid

Responsive deliverables should looka lot
like fully-functioning TwitterBootstrap-style systems customtailored for your clients’ needs.-Dave Ruperthttp://daverupert.com/2013/04/responsive-deliverables/

PATTERN BUILDER

MOLECULE GUTScode block<div class="block block-inset"><a
href="#" class="inner"><div class="b-thumb"><?php inc(atom,landscape) ?></div><div class="b-text"><h2 class="headline">Headline:Lorem ipsum dolor sit amet,consectetur adipisicing</h2></div></a></div>

BASIC INCLUDEcode block<?php inc(‘molecule’,‘pagination’)?>

ORGANISM GUTScode block<section class="comments section"><div
class="comments-container" id="comments-container"><h2 class="section-title">59 Comments</h2><?php inc(molecule,comment-form); ?><ul class="comment-list"><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?><?php inc(molecule,single-comment); ?></ul></div><?php inc(molecule,pagination) ?></section>

BASIC INCLUDEcode block<?php inc(‘organism’,‘comments’)?>

TEMPLATE GUTScode block<?php inc(organism,header); ?><div
role="main"><div class="l-two-col"><div class="l-main"><article class="article"><header class="article-header"><h1>Article Headline Lorem ipsum dolor sit</h1><?php inc(molecule,byline-author-time) ?></header><?php inc(organism,article-body) ?></article><!--end .article--><?php inc(molecule,social-share) ?><?php inc(organism,comment-thread) ?></div><!--end l-main--><div class="l-sidebar"><?php inc(organism,related-posts) ?><?php inc(organism,recent-tweets) ?></div><!--end l-sidebar--></div><!--end l-two-col--></div><!--End role=main--><?php inc(organism,footer); ?>

f

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 Hayhttp://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

MANUAL

VIEW MODES

WHY PATTERN LAB๏ Serves as
a hub for the entire design process๏ Useful tool for everyone: information architects, designers,developers, clients๏ Can easily traverse from abstract to concrete๏ Write HTML/CSS/JS as you please. Name things as youplease.๏ Start with a system rather than deconstruct later๏ Encourages flexibility๏ Document as you go

WHAT’S NEXT?

DAVE OLSEN@dmolsen

MINIMIZE DEPENDENCIES

MO LANGUAGES

INCLUDES ARE INCLUDEScode block//PHP<?php inc(‘molecule’,‘pagination’)?>//Codekit<!--
@import "m-pagination.kit" -->//Hammer<!-- @include _m-pagination.html -->//Ruby (maybe, I don’t know)load m-pagination.rb

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

https://github.com/bradfrost/patternlab

http://patternlab.bradfrostweb.com

WHEN YOU’RE FINISHED CHANGINGYOU’RE FINISHED.

WORK HARD.DON’T BE AN ASSHOLE.SHARE
WHAT YOU KNOW.

THANKS!@brad_frost