Brad frost: Atomic design (Webdagene 2014)
-
Upload
webdagene -
Category
Presentations & Public Speaking
-
view
2.544 -
download
15
description
Transcript of Brad frost: Atomic design (Webdagene 2014)
![Page 1: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/1.jpg)
ATOMIC DESIGN@brad_frost
![Page 2: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/2.jpg)
PAGESGRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
![Page 3: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/3.jpg)
![Page 4: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/4.jpg)
![Page 5: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/5.jpg)
![Page 6: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/6.jpg)
![Page 7: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/7.jpg)
WHAT IS AN INTERFACE MADE OF?
![Page 8: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/8.jpg)
http://bradfrost.github.com/this-is-responsive/patterns.html
![Page 9: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/9.jpg)
Design systems, not pages. -Andy Clarke
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
![Page 10: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/10.jpg)
http://foundation.zurb.com/
![Page 11: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/11.jpg)
getbootstrap.com
![Page 12: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/12.jpg)
THESE THINGS ARE GREAT, BUT...
![Page 13: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/13.jpg)
![Page 14: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/14.jpg)
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
![Page 15: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/15.jpg)
Tiny Bootstraps, for every client. -Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
![Page 16: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/16.jpg)
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/
![Page 17: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/17.jpg)
http://maban.co.uk/projects/front-end-style-guides/
![Page 18: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/18.jpg)
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/
![Page 19: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/19.jpg)
http://brettjankord.com/projects/style-guide-boilerplate/
![Page 20: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/20.jpg)
http://patternprimer.adactio.com/
![Page 21: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/21.jpg)
http://barebones.paulrobertlloyd.com
![Page 22: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/22.jpg)
![Page 23: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/23.jpg)
![Page 24: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/24.jpg)
http://style.codeforamerica.org/
![Page 25: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/25.jpg)
http://ux.mailchimp.com/patterns/
![Page 26: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/26.jpg)
http://yelp.com/styleguide
![Page 27: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/27.jpg)
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
![Page 28: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/28.jpg)
![Page 29: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/29.jpg)
![Page 30: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/30.jpg)
![Page 31: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/31.jpg)
I LOVE THESE.
![Page 32: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/32.jpg)
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
![Page 33: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/33.jpg)
ATOMIC DESIGN
![Page 34: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/34.jpg)
2H2 + O2 → 2H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
![Page 35: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/35.jpg)
![Page 36: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/36.jpg)
2H2+O2→2H20
![Page 37: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/37.jpg)
![Page 38: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/38.jpg)
![Page 39: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/39.jpg)
![Page 40: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/40.jpg)
![Page 41: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/41.jpg)
![Page 43: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/43.jpg)
![Page 44: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/44.jpg)
![Page 45: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/45.jpg)
![Page 46: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/46.jpg)
![Page 47: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/47.jpg)
![Page 48: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/48.jpg)
ENTER KEYWORD
SEARCH THE SITE
SEARCH
![Page 49: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/49.jpg)
ENTER KEYWORD
SEARCH THE SITE
SEARCH
![Page 50: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/50.jpg)
![Page 51: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/51.jpg)
![Page 52: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/52.jpg)
![Page 53: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/53.jpg)
![Page 54: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/54.jpg)
![Page 55: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/55.jpg)
![Page 56: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/56.jpg)
![Page 57: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/57.jpg)
![Page 58: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/58.jpg)
![Page 59: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/59.jpg)
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
![Page 60: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/60.jpg)
![Page 61: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/61.jpg)
![Page 62: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/62.jpg)
![Page 63: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/63.jpg)
![Page 64: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/64.jpg)
ABSTRACT CONCRETE
![Page 65: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/65.jpg)
ABSTRACT CONCRETE
CREATORS CLIENTS
![Page 66: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/66.jpg)
REFERENCE BUILD REVIEW
![Page 67: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/67.jpg)
![Page 68: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/68.jpg)
![Page 69: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/69.jpg)
DAVE OLSEN@dmolsen
![Page 70: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/70.jpg)
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)
![Page 71: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/71.jpg)
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
![Page 72: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/72.jpg)
![Page 73: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/73.jpg)
![Page 74: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/74.jpg)
![Page 75: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/75.jpg)
![Page 76: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/76.jpg)
![Page 77: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/77.jpg)
![Page 78: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/78.jpg)
![Page 79: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/79.jpg)
![Page 80: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/80.jpg)
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> !
![Page 81: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/81.jpg)
BASIC INCLUDEcode block!!!!!
!
!
!
{{> molecules-block-post }} !
![Page 82: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/82.jpg)
![Page 83: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/83.jpg)
![Page 84: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/84.jpg)
ORGANISM GUTScode block!!!<header class="header" role="banner"> {{> atoms-ad-leaderboard }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>
![Page 85: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/85.jpg)
BASIC INCLUDEcode block!!!!!
!
{{> organisms-header }}
![Page 86: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/86.jpg)
![Page 87: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/87.jpg)
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 }}
![Page 88: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/88.jpg)
![Page 89: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/89.jpg)
![Page 90: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/90.jpg)
![Page 91: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/91.jpg)
![Page 92: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/92.jpg)
![Page 93: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/93.jpg)
![Page 94: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/94.jpg)
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>
![Page 95: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/95.jpg)
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" } } }
![Page 96: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/96.jpg)
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." } } }
![Page 97: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/97.jpg)
![Page 98: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/98.jpg)
VIEWER
![Page 99: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/99.jpg)
320PX.
![Page 100: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/100.jpg)
320PX. 480PX.
![Page 101: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/101.jpg)
320PX. 480PX. 768PX.
![Page 102: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/102.jpg)
320PX. 480PX. 768PX. 1024PX.
![Page 103: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/103.jpg)
320PX. 480PX. 768PX. 1024PX. THE FOLD.
![Page 104: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/104.jpg)
320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
![Page 105: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/105.jpg)
![Page 106: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/106.jpg)
![Page 107: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/107.jpg)
ANNOTATIONS
![Page 108: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/108.jpg)
![Page 109: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/109.jpg)
![Page 110: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/110.jpg)
LINEAGE
![Page 111: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/111.jpg)
![Page 112: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/112.jpg)
http://patternlab.io
![Page 113: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/113.jpg)
IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.
![Page 114: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/114.jpg)
![Page 115: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/115.jpg)
SET EXPECTATIONS
![Page 116: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/116.jpg)
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
![Page 117: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/117.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/
![Page 118: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/118.jpg)
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
![Page 119: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/119.jpg)
![Page 120: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/120.jpg)
![Page 121: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/121.jpg)
![Page 122: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/122.jpg)
![Page 123: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/123.jpg)
![Page 124: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/124.jpg)
GATHER
![Page 125: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/125.jpg)
http://bradfrostweb.com/blog/post/interface-inventory/
![Page 126: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/126.jpg)
![Page 127: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/127.jpg)
![Page 128: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/128.jpg)
![Page 129: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/129.jpg)
![Page 130: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/130.jpg)
![Page 131: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/131.jpg)
![Page 132: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/132.jpg)
![Page 133: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/133.jpg)
๏ 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
![Page 134: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/134.jpg)
ESTABLISH DIRECTION
![Page 135: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/135.jpg)
![Page 136: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/136.jpg)
![Page 137: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/137.jpg)
![Page 138: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/138.jpg)
![Page 139: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/139.jpg)
![Page 140: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/140.jpg)
RESOURCEhttp://styletil.es/
![Page 141: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/141.jpg)
![Page 142: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/142.jpg)
![Page 143: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/143.jpg)
![Page 144: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/144.jpg)
![Page 145: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/145.jpg)
![Page 146: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/146.jpg)
![Page 147: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/147.jpg)
ROLL UP OUR SLEEVES
![Page 148: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/148.jpg)
![Page 149: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/149.jpg)
![Page 150: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/150.jpg)
![Page 151: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/151.jpg)
![Page 152: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/152.jpg)
![Page 153: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/153.jpg)
![Page 154: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/154.jpg)
![Page 155: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/155.jpg)
![Page 156: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/156.jpg)
![Page 157: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/157.jpg)
![Page 158: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/158.jpg)
![Page 159: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/159.jpg)
http://trentwalton.com/2011/07/14/content-choreography/
![Page 160: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/160.jpg)
![Page 161: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/161.jpg)
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
![Page 162: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/162.jpg)
THIS IS FUN!
![Page 163: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/163.jpg)
MOBILE WEB
![Page 164: Brad frost: Atomic design (Webdagene 2014)](https://reader037.fdocuments.net/reader037/viewer/2022102814/5476b9ffb4af9fca128b46d3/html5/thumbnails/164.jpg)
THANKS! @brad_frost