Download as PDF, PPTX
Uploaded byBrad Frost
Atomic design
The document discusses the concept of Atomic Design in creating design systems, emphasizing the importance of components such as atoms, molecules, organisms, templates, and pages in the web design process. It highlights the benefits and challenges of front-end style guides and responsive deliverables while introducing Pattern Lab as a tool for building and maintaining these design systems. The author encourages a methodological approach to design, promoting consistency and collaboration among designers and developers.
More Related Content
Atomic design
- 1.
- 3.
- 6.
- 10.
- 12.
- 13. We’re not designingpages, we’re designing systems of components. -Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
- 14. WHAT IS ANINTERFACE MADE OF?
- 18.
- 19.
- 20.
- 21.
- 22. THESE THINGS AREGREAT, BUT...
- 23. FRAMEWORK POTENTIAL PITFALLS ๏Subscribe to other developers’ structure/naming/style ๏ Lookalike issues ๏ One-size-fits-all ๏ Potential for bloat/unneeded stuff ๏ Might not do everything you need ๏ Ability to scale ๏ Compatibility with existing sites
- 24. Tiny Bootstraps, forevery client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
- 25. Responsive deliverables shouldlook a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
- 26.
- 27. We’re not designingpages, we’re designing systems of components. -Stephen Hay http://24ways.org/2011/front-end-style-guides/
- 28. BENEFITS OF FRONT-ENDSTYLE GUIDES ๏ Easier to test ๏ Better workflow ๏ Shared vocabulary ๏ Useful reference http://24ways.org/2011/front-end-style-guides/
- 29.
- 30.
- 31.
- 32.
- 33.
- 37.
- 41.
- 42. MO’ PATTERNS, MO’PROBLEMS ๏ Time consuming to create ๏ Treated as a auxiliary project ๏ Often created after a project launches ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often incomplete/only serving present cases ๏ Lacking a methodology
- 43.
- 44. H2 + O2→ H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
- 46.
- 52.
- 61. ATOMS ๏ Building blocksof an interface ๏ Can’t be broken down any further without losing their meaning ๏ Abstract ๏ Often not too useful on their own ๏ Good as an at-a-glance reference ๏ See all your global styles laid out at once
- 63. Actin’ fool breakin’shit down to molecules -Busta Rhymes
- 65.
- 68. MOLECULES ๏ Group ofatoms bonded together ๏ Smallest fundamental units of a compound ๏ More concrete than atoms ๏ Encourage a “do one thing and do it well” philosophy ๏ Often serve as the backbone for a more complex system
- 73. ORGANISMS ๏ Group ofmolecules joined together to form a distinct section ๏ Complex molecules ๏ Can consist of similar and/or different molecule types ๏ Encourages creating standalone, portable, reusable components
- 77.
- 80. TEMPLATES ๏ Page-level ๏ Mostlycomprised of groups of organisms ๏ Begin their life as HTML wireframes, increase fidelity over time ๏ Client facing.Very concrete. ๏ Eventually becomes the deliverable/production code
- 81.
- 84. PAGES ๏ Specific instanceof a template ๏ Highest fidelity.Template content is replaced with real/sample content ๏ The hub for most people involved in the process. ๏ Test the effectiveness of the system ๏ Test variations in the template: design/content tweaks, include/ exclude organisms, etc.
- 86.
- 87.
- 88.
- 89. ATOMIC DESIGN ๏ Providesa methodology for crafting an effective design system ๏ Easily traverse from abstract to concrete ๏ Promotes consistency and cohesion ๏ Assembles rather than deconstructs
- 92. Pattern Lab isa collection of tools to help create and maintain atomic web design systems.
- 93. WHAT PATTERN LABIS ๏ A comprehensive component library ๏ A pattern starter kit ๏ A design system builder ๏ A practical viewport resizer ๏ A design annotation tool
- 94. WHAT PATTERN LABISN’T ๏ A UI framework ๏ Language/library/style dependent ๏ Incredibly rigid
- 96. Responsive deliverables shouldlook a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
- 97.
- 111. MOLECULE GUTS code block<divclass="block block-inset"> <a href="#" class="inner"> <div class="b-thumb"> <?php inc('atom','landscape') ?> </div> <div class="b-text"> <h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipisicing</h2> </div> </a> </div>
- 112. BASIC INCLUDE code block <?phpinc(‘molecule’,‘pagination’)?>
- 115. ORGANISM GUTS code block<sectionclass="comments section"> <div class="comments-container" id="comments- container"> <h2 class="section-title">59 Comments</h2> <?php inc('molecule','comment-form'); ?> <ul class="comment-list"> <?php inc('molecule','single-comment'); ?> <?php inc('molecule','single-comment'); ?> <?php inc('molecule','single-comment'); ?> <?php inc('molecule','single-comment'); ?> <?php inc('molecule','single-comment'); ?> </ul> </div> <?php inc('molecule','pagination') ?> </section>
- 116. BASIC INCLUDE code block <?phpinc(‘organism’,‘comments’)?>
- 121. TEMPLATE GUTS code block<?phpinc('organism','header'); ?> <div role="main"> <div class="l-two-col"> <div class="l-main"> <article class="article"> <header class="article-header"> <h1>Article Headline Lorem ipsum dolor sit</h1> <?php inc('molecule','byline-author-time') ?> </header> <?php inc('organism','article-body') ?> </article><!--end .article--> <?php inc('molecule','social-share') ?> <?php inc('organism','comment-thread') ?> </div><!--end l-main--> <div class="l-sidebar"> <?php inc('organism','related-posts') ?> <?php inc('organism','recent-tweets') ?> </div><!--end l-sidebar--> </div><!--end l-two-col--> </div><!--End role=main--> <?php inc('organism','footer'); ?>
- 122.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 139.
- 141.
- 142. Start with thesmall 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/
- 144.
- 147.
- 151. WHY PATTERN LAB ๏Serves as a hub for the entire design process ๏ Useful tool for everyone: information architects, designers, developers, clients ๏ Can easily traverse from abstract to concrete ๏ Write HTML/CSS/JS as you please. Name things as you please. ๏ Start with a system rather than deconstruct later ๏ Encourages flexibility ๏ Document as you go
- 152.
- 153.
- 157.
- 158.
- 161. INCLUDES ARE INCLUDES codeblock//PHP <?php inc(‘molecule’,‘pagination’)?> //Codekit <!-- @import "m-pagination.kit" --> //Hammer <!-- @include _m-pagination.html --> //Ruby (maybe, I don’t know) load 'm-pagination.rb'
- 163. HUGE THANK YOU ๏Dave Olsen ๏ Dan Mall ๏ Josh Clark ๏ Jonathan Stark ๏ Jennifer Brook ๏ Anna Debenham ๏ Jeremy Keith ๏ Brett Jankord ๏ Paul Robert Lloyd ๏ Tyler Sticka ๏ Harry Roberts ๏ Dan Cederholm
- 165.
- 167.
- 168. WHEN YOU’RE FINISHEDCHANGING YOU’RE FINISHED.
- 172. WORK HARD. DON’T BEAN ASSHOLE. SHARE WHAT YOU KNOW.
- 173.