Atomic Design - An Event Apart San Diego
Click here to load reader
-
Upload
brad-frost -
Category
Design
-
view
35.965 -
download
3
Transcript of Atomic Design - An Event Apart San Diego
![Page 1: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/1.jpg)
ATOMIC DESIGN@brad_frost
![Page 2: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/2.jpg)
PAGESGRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH?
http://www.flickr.com/photos/pandora_6666/4927865092/
![Page 3: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/3.jpg)
![Page 4: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/4.jpg)
![Page 5: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/5.jpg)
![Page 6: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/6.jpg)
![Page 7: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/7.jpg)
WHAT IS AN INTERFACE MADE OF?
![Page 8: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/8.jpg)
http://bradfrost.github.com/this-is-responsive/patterns.html
![Page 9: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/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: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/10.jpg)
http://foundation.zurb.com/
![Page 11: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/11.jpg)
getbootstrap.com
![Page 12: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/12.jpg)
THESE THINGS ARE GREAT, BUT...
![Page 13: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/13.jpg)
![Page 14: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/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: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/15.jpg)
Tiny Bootstraps, for every client. -Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
![Page 16: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/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: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/17.jpg)
http://maban.co.uk/projects/front-end-style-guides/
![Page 18: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/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: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/19.jpg)
http://brettjankord.com/projects/style-guide-boilerplate/
![Page 20: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/20.jpg)
http://patternprimer.adactio.com/
![Page 21: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/21.jpg)
http://barebones.paulrobertlloyd.com
![Page 22: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/22.jpg)
![Page 23: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/23.jpg)
![Page 24: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/24.jpg)
http://style.codeforamerica.org/
![Page 25: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/25.jpg)
http://ux.mailchimp.com/patterns/
![Page 26: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/26.jpg)
http://yelp.com/styleguide
![Page 27: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/27.jpg)
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
![Page 28: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/28.jpg)
![Page 29: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/29.jpg)
![Page 30: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/30.jpg)
![Page 31: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/31.jpg)
I LOVE THESE.
![Page 32: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/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: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/33.jpg)
ATOMIC DESIGN
![Page 34: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/34.jpg)
2H2 + O2 → 2H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
![Page 35: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/35.jpg)
![Page 36: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/36.jpg)
2H2+O2→2H20
![Page 37: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/37.jpg)
![Page 38: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/38.jpg)
![Page 39: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/39.jpg)
![Page 40: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/40.jpg)
![Page 41: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/41.jpg)
![Page 43: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/43.jpg)
![Page 44: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/44.jpg)
![Page 45: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/45.jpg)
![Page 46: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/46.jpg)
![Page 47: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/47.jpg)
![Page 48: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/48.jpg)
ENTER KEYWORD
SEARCH THE SITE
SEARCH
![Page 49: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/49.jpg)
ENTER KEYWORD
SEARCH THE SITE
SEARCH
![Page 50: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/50.jpg)
![Page 51: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/51.jpg)
![Page 52: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/52.jpg)
![Page 53: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/53.jpg)
![Page 54: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/54.jpg)
![Page 55: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/55.jpg)
![Page 56: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/56.jpg)
![Page 57: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/57.jpg)
![Page 58: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/58.jpg)
![Page 59: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/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: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/60.jpg)
![Page 61: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/61.jpg)
![Page 62: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/62.jpg)
![Page 63: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/63.jpg)
![Page 64: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/64.jpg)
ABSTRACT CONCRETE
![Page 65: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/65.jpg)
ABSTRACT CONCRETE
CREATORS CLIENTS
![Page 66: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/66.jpg)
REFERENCE BUILD REVIEW
![Page 67: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/67.jpg)
The idea of designing components like this, out of context and without layout, might sound strange—particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble. -Andy Clarke
http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
![Page 68: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/68.jpg)
![Page 69: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/69.jpg)
![Page 70: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/70.jpg)
DAVE OLSEN@dmolsen
![Page 71: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/71.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
![Page 72: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/72.jpg)
WHAT PATTERN LAB AIN’T๏ A UI framework ๏ Language, library, or style dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready
static site generator
![Page 73: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/73.jpg)
![Page 74: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/74.jpg)
![Page 75: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/75.jpg)
![Page 76: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/76.jpg)
![Page 77: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/77.jpg)
![Page 78: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/78.jpg)
![Page 79: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/79.jpg)
![Page 80: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/80.jpg)
![Page 81: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/81.jpg)
![Page 82: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/82.jpg)
MOLECULE GUTScode block!!<div class="block block-inset"> <div class="b-thumb"> {{> atoms-img-landscape-4x3 }} </div> <div class="b-text"> <h2>{{ headline.short }}</h2> </div> </div> !
![Page 83: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/83.jpg)
BASIC INCLUDEcode block!!!!!
!
!
!
{{> molecules-block-inset }} !
![Page 84: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/84.jpg)
![Page 85: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/85.jpg)
![Page 86: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/86.jpg)
ORGANISM GUTScode block!!!<header class="header" role="banner"> {{> atoms-header-ad }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>
![Page 87: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/87.jpg)
BASIC INCLUDEcode block!!!!!
{{> organisms-header }}
![Page 88: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/88.jpg)
![Page 89: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/89.jpg)
![Page 90: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/90.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 91: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/91.jpg)
![Page 92: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/92.jpg)
![Page 93: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/93.jpg)
CONTENT STRUCTURE ACTUAL CONTENT
![Page 94: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/94.jpg)
![Page 95: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/95.jpg)
![Page 96: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/96.jpg)
TEMPLATE GUTScode block{{# hero }} {{> molecules-block-hero }} {{/ hero}} !
<div class="g g-3up"> {{# touts}} <div class="gi"> {{> molecules-inset-block }} </div> {{/ touts}} </div>
![Page 97: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/97.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" } }
![Page 98: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/98.jpg)
PIPING IN REAL CONTENT WITH JSONcode block"touts" : [ { "img": { "landscape-4x3": { "src": "../../images/sample/climber.jpg", "alt": "Climber" } }, "headline" : { "short" : "Extreme climbing tips" } }, { "img": { "landscape-4x3": { "src": “../../images/sample/stream.jpg", "alt": "Stream" } }, "headline" : { "short" : “Stream Hiking" }
![Page 99: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/99.jpg)
VIEWER
![Page 100: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/100.jpg)
320PX.
![Page 101: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/101.jpg)
320PX. 480PX.
![Page 102: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/102.jpg)
320PX. 480PX. 768PX.
![Page 103: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/103.jpg)
320PX. 480PX. 768PX. 1024PX.
![Page 104: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/104.jpg)
320PX. 480PX. 768PX. 1024PX. THE FOLD.
![Page 105: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/105.jpg)
320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
![Page 106: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/106.jpg)
RESOURCEhttp://bradfrostweb.com/demo/ish/
![Page 107: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/107.jpg)
![Page 108: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/108.jpg)
![Page 109: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/109.jpg)
![Page 110: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/110.jpg)
ANNOTATIONS
![Page 111: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/111.jpg)
![Page 112: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/112.jpg)
![Page 113: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/113.jpg)
code block!!{ "el": ".header", "title": "Header", "title": "The header is a global element…" }, { "el": ".nav", "title": "Primary Navigation", "title": "The navigation is…" }
ANNOTATIONS WITH JSON
![Page 114: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/114.jpg)
LINEAGE
![Page 115: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/115.jpg)
![Page 116: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/116.jpg)
A BUNCH OF OTHER STUFF๏ Code view (Mustache and rendered HTML) ๏ Pattern status ๏ Auto-refresh ๏ Page follow ๏ Future: plugins
![Page 117: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/117.jpg)
http://patternlab.io
![Page 118: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/118.jpg)
IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.
![Page 119: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/119.jpg)
![Page 120: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/120.jpg)
![Page 121: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/121.jpg)
![Page 122: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/122.jpg)
![Page 123: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/123.jpg)
SET EXPECTATIONS
![Page 124: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/124.jpg)
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
![Page 125: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/125.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 126: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/126.jpg)
COMPLEX NAVIGATIONDEATH TO THE WATERFALL
![Page 127: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/127.jpg)
![Page 128: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/128.jpg)
![Page 129: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/129.jpg)
![Page 130: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/130.jpg)
![Page 131: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/131.jpg)
![Page 132: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/132.jpg)
GATHER
![Page 133: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/133.jpg)
http://stylifyme.com/
![Page 134: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/134.jpg)
![Page 135: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/135.jpg)
http://bradfrostweb.com/blog/post/interface-inventory/
![Page 136: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/136.jpg)
![Page 137: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/137.jpg)
![Page 138: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/138.jpg)
![Page 139: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/139.jpg)
![Page 140: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/140.jpg)
![Page 141: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/141.jpg)
![Page 142: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/142.jpg)
![Page 143: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/143.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 144: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/144.jpg)
http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
![Page 145: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/145.jpg)
ESTABLISH DIRECTION
![Page 146: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/146.jpg)
![Page 147: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/147.jpg)
![Page 148: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/148.jpg)
![Page 149: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/149.jpg)
![Page 150: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/150.jpg)
![Page 151: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/151.jpg)
![Page 152: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/152.jpg)
![Page 153: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/153.jpg)
![Page 154: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/154.jpg)
![Page 155: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/155.jpg)
RESOURCEhttp://styletil.es/
![Page 156: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/156.jpg)
![Page 157: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/157.jpg)
![Page 158: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/158.jpg)
![Page 159: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/159.jpg)
ROLL UP OUR SLEEVES
![Page 160: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/160.jpg)
![Page 161: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/161.jpg)
![Page 162: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/162.jpg)
![Page 163: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/163.jpg)
![Page 164: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/164.jpg)
![Page 165: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/165.jpg)
![Page 166: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/166.jpg)
![Page 167: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/167.jpg)
![Page 168: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/168.jpg)
![Page 169: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/169.jpg)
![Page 170: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/170.jpg)
CONTENT STRUCTURE ACTUAL CONTENT
![Page 171: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/171.jpg)
![Page 172: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/172.jpg)
![Page 173: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/173.jpg)
![Page 174: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/174.jpg)
![Page 175: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/175.jpg)
![Page 176: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/176.jpg)
http://trentwalton.com/2011/07/14/content-choreography/
![Page 177: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/177.jpg)
![Page 178: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/178.jpg)
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
![Page 179: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/179.jpg)
THIS IS FUN!
![Page 180: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/180.jpg)
MOBILE WEB
![Page 181: Atomic Design - An Event Apart San Diego](https://reader037.fdocuments.in/reader037/viewer/2022102316/53ed1a858d7f721a1e8b7397/html5/thumbnails/181.jpg)
THANKS! @brad_frost