atomic design - bdconf nashville, 2013
DESCRIPTION
Atomic design is a methodology for creating robust design systems.TRANSCRIPT
ATOMIC DESIGN@brad_frost
PAGESGRAPHIC? 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=H20H2+O2→H20
http://joshduck.com/periodic-table.html
H2+O2=H20H2+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 GUTScode 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 INCLUDEcode block!!!!!
!
!
!
{{> molecules-block-inset }} !
ORGANISM GUTScode 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 INCLUDEcode block!!!!!
{{> organisms-header }}
TEMPLATE GUTScode block{{> organisms-header }} <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 GUTScode block{{# hero }} {{> 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 JSONcode block "hero" : [ { "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-SIDETHIS IS NOT
THE WEB.
WEB
WEB
COMPLEX NAVIGATIONDEATH TO THE 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/
๏ 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
INTERFACE INVENTORY
ESTABLISH DIRECTION
RESOURCEhttp://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 ๏ Dan Mall ๏ Josh Clark ๏ Jonathan Stark ๏ Jennifer Brook
๏ Anna Debenham ๏ Andy Clarke ๏ Paul Robert Lloyd ๏ Jeremy Keith ๏ Brett Jankord ๏ Tyler Sticka ๏ Harry Roberts
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
THANKS! @brad_frost