Atomic Design @brad_frost
•
26 likes•8,450 views
The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to Atomic Design @brad_frost
Similar to Atomic Design @brad_frost (20)
More from webdagene
More from webdagene (20)
Recently uploaded
Recently uploaded (20)
Atomic Design @brad_frost
- 2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
- 7. WHAT IS AN INTERFACE MADE OF?
- 9. Design systems, not pages. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
- 11. getbootstrap.com
- 12. THESE THINGS ARE GREAT, BUT...
- 14. 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
- 15. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
- 16. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
- 18. BENEFITS OF FRONT-END STYLE GUIDES ๏ Promotes consistency and cohesion ๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference http://24ways.org/2011/front-end-style-guides/
- 31. I LOVE THESE.
- 32. 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
- 33. ATOMIC DESIGN
- 34. 2H2 + O2 → 2H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
- 36. 2H2+O2→2H20
- 48. SEARCH THE SITE ENTER KEYWORD SEARCH
- 49. SEARCH THE SITE ENTER KEYWORD SEARCH
- 59. 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
- 65. ABSTRACT CONCRETE CREATORS CLIENTS
- 70. 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)
- 71. 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
- 80. MOLECULE GUTS c!ode 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> !
- 81. BASIC INCLUDE code block !!!!! ! ! ! {{> molecules-block-post }} !
- 84. ORGANISM GUTS c!ode block ! ! <header class="header" role="banner"> {{> atoms-ad-leaderboard }} {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} {{> molecules-social-nav }} </header>
- 85. BASIC INCLUDE c!ode block ! ! ! ! ! {{> organisms-header }}
- 87. TEMPLATE GUTS c{o{d>e o rbglaonicskms-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 }}
- 94. TEMPLATE GUTS c{o{d>e orbglaonciskms-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>
- 95. PIPING IN REAL CONTENT c{o de block "title" : "Time Inc.", "bodyClass": "home", "hero" : [ { "headline": { "xs": "Moving People" }, "img": { "hero-full": { "src": "../../images/sample/ hero_beyonce.jpg", "alt": "Beyonce" } } }
- 96. PIPING IN REAL CONTENT c"oedxpee ribenlcoe"c k: { "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." } } }
- 98. VIEWER
- 99. 320PX.
- 100. 320PX. 480PX.
- 101. 320PX. 480PX. 768PX.
- 102. 320PX. 480PX. 768PX. 1024PX.
- 103. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
- 104. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
- 107. ANNOTATIONS
- 110. LINEAGE
- 112. http://patternlab.io
- 113. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME @DMOLSEN.
- 115. SET EXPECTATIONS
- 117. 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/
- 118. CDOEAMTPH LTEOX T HNEA WVAIGTEARTFIAOLNL
- 124. GATHER
- 133. INTERFACE INVENTORY ๏ 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
- 134. ESTABLISH DIRECTION
- 147. ROLL UP OUR SLEEVES
- 161. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
- 162. THIS IS FUN!
- 163. MOBILE WEB
- 164. THANKS! @brad_frost