ATOMIC DESIGN@brad_frost

PAGESGRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?

http://www.flickr.com/photos/pandora_6666/4927865092/

WHAT IS AN INTERFACE MADE OF?

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

Design systems, not pages. -Andy Clarke

http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/

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/

http://maban.co.uk/projects/front-end-style-guides/

BENEFITS OF FRONT-END STYLE GUIDES๏ Promotes consistency and cohesion ๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference

http://24ways.org/2011/front-end-style-guides/

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

http://patternprimer.adactio.com/

http://barebones.paulrobertlloyd.com

http://style.codeforamerica.org/

http://ux.mailchimp.com/patterns/

http://yelp.com/styleguide

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

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

2H2+O2→2H20

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

ENTER KEYWORD

SEARCH THE SITE

SEARCH

ENTER KEYWORD

SEARCH THE SITE

SEARCH

You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. -Mark Boulton

http://www.markboulton.co.uk/journal/structure-first-content-always

ABSTRACT CONCRETE

ABSTRACT CONCRETE

CREATORS CLIENTS

REFERENCE BUILD REVIEW

DAVE OLSEN@dmolsen

WHAT PATTERN LAB IS๏ A design system builder ๏ Your comprehensive custom component library ๏ A pattern starter kit ๏ A design toolkit (viewport resizer and other tools)

WHAT PATTERN LAB AIN’T๏ A UI framework ๏ Language, library, style, workflow dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready

static site generator

MOLECULE GUTScode block!!!<div class="block block-post"> <a href="{{ url }}"> <div class="b-img"> {{> atoms-thumb }} </div> <h3 class="b-title">{{ headline }}</h3> <p class="b-excerpt">{{ excerpt }}</p> </a> </div> !

BASIC INCLUDEcode block!!!!!

!

!

!

{{> molecules-block-post }} !

ORGANISM GUTScode block!!!<header class="header" role="banner"> {{> atoms-ad-leaderboard }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>

BASIC INCLUDEcode block!!!!!

!

{{> organisms-header }}

TEMPLATE GUTScode block{{> organisms-header }} <main 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--> </main><!--End role=main--> {{> organisms-footer }}

TEMPLATE GUTScode block{{> organisms-header }} <main role="main"> {{# hero }} {{> molecules-hero-video }} {{/ hero }} <section class="section"> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section class="section"> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }} </section>

PIPING IN REAL CONTENTcode block{ "title" : "Time Inc.", "bodyClass": "home", "hero" : [ { "headline": { "xs": "Moving People" }, "img": { "hero-full": { "src": "../../images/sample/hero_beyonce.jpg", "alt": "Beyonce" } } }

PIPING IN REAL CONTENTcode block"experience" : { "heroClass" : "experience", "img" : { "hero-main": { "src": "../../images/sample/hero_skater.jpg", "alt": "Olympic Figure Skater" } }, "eyebrow" : "Experiences", "headline" : { "short" : “Champions at the Olympics" }, "excerpt" : { "medium" : "Time Inc’s brands cover every aspect of the Sochi XXII Winter Olympic Games. From the best athletes to the best viewing parties." } } }

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.

ANNOTATIONS

LINEAGE

http://patternlab.io

IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.

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/

COMPLEX NAVIGATIONDEATH TO THE WATERFALL

GATHER

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

๏ Document your interface ๏ Promote consistency ๏ Establish scope of work for translating to a responsive

interface ๏ Lay the groundwork for a future style guide/pattern library

INTERFACE INVENTORY

ESTABLISH DIRECTION

RESOURCEhttp://styletil.es/

ROLL UP OUR SLEEVES

http://trentwalton.com/2011/07/14/content-choreography/

WHEN YOU’RE FINISHED CHANGING

YOU’RE FINISHED.

THIS IS FUN!

MOBILE WEB

THANKS! @brad_frost