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

FRAMEWORKS

RESOURCE
http://foundation.zurb.com/

RESOURCE
http://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 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/

PATTERN LIBRARIES

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

BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test ๏ Better workflow ๏ 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://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 → 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

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

Actin’ fool breakin’ shit down
to molecules -Busta Rhymes

H2+O2=H20
H2+O2→H20

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

ORGANISMS ๏ Group of molecules
joined together to form a distinct section ๏ Complex molecules ๏ Can consist of similar and/or different 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 of organisms ๏ Begin their life as HTML wireframes, increase fidelity over time ๏ Client facing.Very concrete. ๏ Eventually becomes the deliverable/production code

f

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

ABSTRACT CONCRETE

ABSTRACT CONCRETE
CREATORS CLIENTS

REFERENCE BUILD REVIEW

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

Pattern Lab is a collection
of tools to help create and maintain atomic 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 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/

PATTERN BUILDER

MOLECULE GUTS code 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 INCLUDE code block <?php
inc(‘molecule’,‘pagination’)?>

ORGANISM GUTS code 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 INCLUDE code block <?php
inc(‘organism’,‘comments’)?>

TEMPLATE GUTS code 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 Hay http://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 you please. ๏ 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 INCLUDES code 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 CHANGING YOU’RE
FINISHED.

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

THANKS!@brad_frost