atomic design - bdconf nashville, 2013
DESCRIPTION
Atomic design is a methodology for creating robust design systems.TRANSCRIPT
![Page 1: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/1.jpg)
ATOMIC DESIGN@brad_frost
![Page 2: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/2.jpg)
PAGESGRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
![Page 3: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/3.jpg)
![Page 4: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/4.jpg)
![Page 5: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/5.jpg)
![Page 6: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/6.jpg)
![Page 7: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/7.jpg)
![Page 8: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/8.jpg)
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/
![Page 9: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/9.jpg)
WHAT IS AN INTERFACE MADE OF?
![Page 10: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/10.jpg)
http://bradfrost.github.com/this-is-responsive/patterns.html
![Page 11: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/11.jpg)
http://foundation.zurb.com/
![Page 12: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/12.jpg)
getbootstrap.com
![Page 13: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/13.jpg)
THESE THINGS ARE GREAT, BUT...
![Page 14: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/14.jpg)
![Page 15: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/15.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 16: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/16.jpg)
Tiny Bootstraps, for every client. -Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
![Page 17: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/17.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 18: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/18.jpg)
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/
![Page 19: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/19.jpg)
http://gim.ie/fZyK
![Page 20: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/20.jpg)
http://pea.rs/
![Page 21: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/21.jpg)
http://brettjankord.com/projects/style-guide-boilerplate/
![Page 22: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/22.jpg)
http://patternprimer.adactio.com/
![Page 23: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/23.jpg)
http://malarkey.github.io/Rock-Hammer/
![Page 24: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/24.jpg)
http://barebones.paulrobertlloyd.com
![Page 25: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/25.jpg)
![Page 26: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/26.jpg)
![Page 27: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/27.jpg)
![Page 28: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/28.jpg)
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
![Page 29: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/29.jpg)
![Page 30: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/30.jpg)
![Page 31: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/31.jpg)
![Page 32: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/32.jpg)
I LOVE THESE.
![Page 33: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/33.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 34: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/34.jpg)
ATOMIC DESIGN
![Page 35: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/35.jpg)
H2 + O2 → H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
![Page 36: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/36.jpg)
![Page 37: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/37.jpg)
H2+O2=H20H2+O2→H20
![Page 38: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/38.jpg)
![Page 39: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/39.jpg)
![Page 40: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/40.jpg)
![Page 41: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/41.jpg)
![Page 42: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/42.jpg)
![Page 44: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/44.jpg)
![Page 45: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/45.jpg)
![Page 46: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/46.jpg)
![Page 47: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/47.jpg)
![Page 48: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/48.jpg)
![Page 49: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/49.jpg)
![Page 50: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/50.jpg)
![Page 51: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/51.jpg)
![Page 52: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/52.jpg)
![Page 53: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/53.jpg)
![Page 54: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/54.jpg)
H2+O2=H20H2+O2→H20
![Page 55: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/55.jpg)
![Page 56: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/56.jpg)
![Page 57: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/57.jpg)
![Page 58: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/58.jpg)
![Page 59: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/59.jpg)
![Page 60: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/60.jpg)
![Page 61: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/61.jpg)
![Page 62: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/62.jpg)
![Page 63: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/63.jpg)
![Page 64: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/64.jpg)
![Page 65: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/65.jpg)
![Page 66: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/66.jpg)
![Page 67: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/67.jpg)
![Page 68: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/68.jpg)
![Page 69: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/69.jpg)
ABSTRACT CONCRETE
![Page 70: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/70.jpg)
ABSTRACT CONCRETE
CREATORS CLIENTS
![Page 71: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/71.jpg)
REFERENCE BUILD REVIEW
![Page 72: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/72.jpg)
![Page 73: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/73.jpg)
![Page 74: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/74.jpg)
DAVE OLSEN@dmolsen
![Page 75: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/75.jpg)
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)
![Page 76: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/76.jpg)
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
![Page 77: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/77.jpg)
![Page 78: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/78.jpg)
SITE BUILDER
![Page 79: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/79.jpg)
![Page 80: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/80.jpg)
![Page 81: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/81.jpg)
![Page 82: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/82.jpg)
![Page 83: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/83.jpg)
![Page 84: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/84.jpg)
BLOW IT UP.
![Page 85: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/85.jpg)
http://www.starbucks.com/static/reference/styleguide/
![Page 86: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/86.jpg)
![Page 87: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/87.jpg)
![Page 88: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/88.jpg)
![Page 89: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/89.jpg)
![Page 90: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/90.jpg)
![Page 91: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/91.jpg)
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> !
![Page 92: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/92.jpg)
BASIC INCLUDEcode block!!!!!
!
!
!
{{> molecules-block-inset }} !
![Page 93: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/93.jpg)
![Page 94: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/94.jpg)
![Page 95: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/95.jpg)
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>
![Page 96: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/96.jpg)
BASIC INCLUDEcode block!!!!!
{{> organisms-header }}
![Page 97: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/97.jpg)
![Page 98: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/98.jpg)
![Page 99: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/99.jpg)
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 }} !
![Page 100: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/100.jpg)
![Page 101: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/101.jpg)
CONTENT STRUCTURE ACTUAL CONTENT
![Page 102: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/102.jpg)
![Page 103: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/103.jpg)
![Page 104: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/104.jpg)
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-->
![Page 105: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/105.jpg)
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" : {
![Page 106: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/106.jpg)
VIEWER
![Page 107: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/107.jpg)
320PX.
![Page 108: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/108.jpg)
320PX. 480PX.
![Page 109: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/109.jpg)
320PX. 480PX. 768PX.
![Page 110: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/110.jpg)
320PX. 480PX. 768PX. 1024PX.
![Page 111: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/111.jpg)
320PX. 480PX. 768PX. 1024PX. THE FOLD.
![Page 112: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/112.jpg)
320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
![Page 113: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/113.jpg)
![Page 114: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/114.jpg)
![Page 115: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/115.jpg)
![Page 116: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/116.jpg)
![Page 117: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/117.jpg)
![Page 118: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/118.jpg)
![Page 119: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/119.jpg)
![Page 120: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/120.jpg)
DISCO MODE
![Page 121: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/121.jpg)
![Page 122: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/122.jpg)
HAY! MODE
![Page 123: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/123.jpg)
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/
![Page 124: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/124.jpg)
![Page 125: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/125.jpg)
ANNOTATIONS
![Page 126: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/126.jpg)
![Page 127: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/127.jpg)
AUTO-REFRESH & PAGE FOLLOW
![Page 128: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/128.jpg)
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
![Page 129: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/129.jpg)
![Page 130: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/130.jpg)
![Page 131: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/131.jpg)
![Page 132: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/132.jpg)
![Page 133: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/133.jpg)
SET EXPECTATIONS
![Page 134: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/134.jpg)
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
![Page 135: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/135.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 136: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/136.jpg)
B-SIDETHIS IS NOT
THE WEB.
![Page 137: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/137.jpg)
![Page 138: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/138.jpg)
WEB
WEB
![Page 139: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/139.jpg)
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
![Page 140: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/140.jpg)
![Page 141: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/141.jpg)
![Page 142: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/142.jpg)
![Page 143: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/143.jpg)
![Page 144: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/144.jpg)
![Page 145: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/145.jpg)
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/
![Page 146: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/146.jpg)
![Page 147: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/147.jpg)
![Page 148: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/148.jpg)
![Page 149: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/149.jpg)
GATHER
![Page 150: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/150.jpg)
http://stylifyme.com/
![Page 151: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/151.jpg)
![Page 152: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/152.jpg)
http://bradfrostweb.com/blog/post/interface-inventory/
![Page 153: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/153.jpg)
![Page 154: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/154.jpg)
![Page 155: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/155.jpg)
![Page 156: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/156.jpg)
![Page 157: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/157.jpg)
![Page 158: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/158.jpg)
![Page 159: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/159.jpg)
![Page 160: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/160.jpg)
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
![Page 161: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/161.jpg)
๏ 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
![Page 162: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/162.jpg)
ESTABLISH DIRECTION
![Page 163: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/163.jpg)
![Page 164: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/164.jpg)
![Page 165: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/165.jpg)
![Page 166: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/166.jpg)
![Page 167: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/167.jpg)
![Page 168: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/168.jpg)
![Page 169: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/169.jpg)
![Page 170: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/170.jpg)
![Page 171: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/171.jpg)
![Page 172: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/172.jpg)
RESOURCEhttp://styletil.es/
![Page 173: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/173.jpg)
![Page 174: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/174.jpg)
![Page 175: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/175.jpg)
![Page 176: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/176.jpg)
![Page 177: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/177.jpg)
![Page 178: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/178.jpg)
![Page 179: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/179.jpg)
ROLL UP OUR SLEEVES
![Page 180: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/180.jpg)
![Page 181: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/181.jpg)
![Page 182: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/182.jpg)
![Page 183: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/183.jpg)
![Page 184: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/184.jpg)
![Page 185: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/185.jpg)
![Page 186: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/186.jpg)
![Page 187: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/187.jpg)
![Page 188: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/188.jpg)
![Page 189: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/189.jpg)
![Page 190: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/190.jpg)
![Page 191: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/191.jpg)
![Page 192: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/192.jpg)
![Page 193: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/193.jpg)
CONTENT STRUCTURE ACTUAL CONTENT
![Page 194: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/194.jpg)
![Page 195: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/195.jpg)
![Page 196: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/196.jpg)
![Page 197: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/197.jpg)
![Page 198: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/198.jpg)
![Page 199: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/199.jpg)
![Page 200: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/200.jpg)
![Page 201: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/201.jpg)
http://www.flickr.com/photos/15609463@N03/7854373494/
![Page 202: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/202.jpg)
![Page 203: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/203.jpg)
COLLABORATION AND COMMUNICATION TRUMP DELIVERABLES
![Page 204: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/204.jpg)
http://pattern-lab.info
![Page 205: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/205.jpg)
IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME THIS GUY.
![Page 206: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/206.jpg)
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
![Page 207: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/207.jpg)
![Page 208: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/208.jpg)
![Page 209: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/209.jpg)
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
![Page 210: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/210.jpg)
THIS IS FUN!
![Page 211: Atomic Design - BDConf Nashville, 2013](https://reader038.vdocuments.us/reader038/viewer/2022103013/540cef0d7bef0a84278b8266/html5/thumbnails/211.jpg)
THANKS! @brad_frost