Atomic Design - BDConf Nashville, 2013
•
84 likes•50,751 views
Atomic design is a methodology for creating robust design systems.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Atomic Design - BDConf Nashville, 2013
Similar to Atomic Design - BDConf Nashville, 2013 (20)
More from Brad Frost
More from Brad Frost (12)
Recently uploaded
Recently uploaded (20)
Atomic Design - BDConf Nashville, 2013
- 2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
- 8. 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/
- 9. WHAT IS AN INTERFACE MADE OF?
- 12. getbootstrap.com
- 13. THESE THINGS ARE GREAT, BUT...
- 15. 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
- 16. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
- 17. 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/
- 18. 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/
- 20. http://pea.rs/
- 32. I LOVE THESE.
- 33. 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
- 34. ATOMIC DESIGN
- 35. H2 + O2 → H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
- 75. 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)
- 76. 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
- 78. SITE BUILDER
- 84. BLOW IT UP.
- 91. 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> !
- 92. BASIC INCLUDE ! ! ! ! ! code block ! ! ! {{> molecules-block-inset }} !
- 95. 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>
- 96. BASIC INCLUDE ! code block ! ! ! ! {{> organisms-header }}
- 99. 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 }} !
- 104. 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-->
- 105. 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" : {
- 106. VIEWER
- 107. 320PX.
- 108. 320PX. 480PX.
- 109. 320PX. 480PX. 768PX.
- 112. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
- 120. DISCO MODE
- 122. HAY! MODE
- 123. 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/
- 125. ANNOTATIONS
- 128. 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
- 133. SET EXPECTATIONS
- 135. 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/
- 136. B-SIDE THIS IS NOT THE WEB.
- 138. WEB WEB
- 139. DEATH TO NAVIGATION COMPLEXTHE WATERFALL
- 145. 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/
- 149. GATHER
- 161. 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
- 162. ESTABLISH DIRECTION
- 179. ROLL UP OUR SLEEVES
- 203. COLLABORATION AND COMMUNICATION TRUMP DELIVERABLES
- 205. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME THIS GUY.
- 206. 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
- 209. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
- 210. THIS IS FUN!
- 211. THANKS! @brad_frost