Successfully reported this slideshow.

Atomic design

453

Share

Loading in …3
×
1 of 173
1 of 173

Atomic design

453

Share

Download to read offline

All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.

All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Atomic design

  1. ATOMIC DESIGN@brad_frost
  2. DESIGN SYSTEMS
  3. http://styletil.es
  4. http://sparkbox.github.com/style-prototype/
  5. COMPONENTS
  6. 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/
  7. WHAT IS AN INTERFACE MADE OF?
  8. http://bradfrost.github.com/this-is-responsive/patterns.html
  9. FRAMEWORKS
  10. RESOURCE http://foundation.zurb.com/
  11. RESOURCE http://twitter.github.com/bootstrap/
  12. THESE THINGS ARE GREAT, BUT...
  13. 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
  14. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  15. 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/
  16. PATTERN LIBRARIES
  17. We’re not designing pages, we’re designing systems of components. -Stephen Hay http://24ways.org/2011/front-end-style-guides/
  18. BENEFITS OF FRONT-END STYLE GUIDES ๏ Easier to test ๏ Better workflow ๏ Shared vocabulary ๏ Useful reference http://24ways.org/2011/front-end-style-guides/
  19. http://gim.ie/fZyK
  20. http://pea.rs/
  21. http://brettjankord.com/projects/style-guide-boilerplate/
  22. http://patternprimer.adactio.com/
  23. http://barebones.paulrobertlloyd.com
  24. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  25. I LOVE THESE.
  26. 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
  27. ATOMIC DESIGN
  28. H2 + O2 → H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
  29. H2+O2=H20 H2+O2→H20
  30. http://joshduck.com/periodic-table.html
  31. ATOMS ๏ Building blocks of 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
  32. Actin’ fool breakin’ shit down to molecules -Busta Rhymes
  33. H2+O2=H20 H2+O2→H20
  34. MOLECULES ๏ Group of atoms 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
  35. ORGANISMS ๏ Group of molecules joined together to form a distinct section ๏ Complex molecules ๏ Can consist of similar and/or different molecule types ๏ Encourages creating standalone, portable, reusable components
  36. http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
  37. TEMPLATES ๏ Page-level ๏ Mostly comprised of groups of organisms ๏ Begin their life as HTML wireframes, increase fidelity over time ๏ Client facing.Very concrete. ๏ Eventually becomes the deliverable/production code
  38. f
  39. PAGES ๏ Specific instance of 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.
  40. ABSTRACT CONCRETE
  41. ABSTRACT CONCRETE CREATORS CLIENTS
  42. REFERENCE BUILD REVIEW
  43. ATOMIC DESIGN ๏ Provides a methodology for crafting an effective design system ๏ Easily traverse from abstract to concrete ๏ Promotes consistency and cohesion ๏ Assembles rather than deconstructs
  44. Pattern Lab is a collection of tools to help create and maintain atomic web design systems.
  45. WHAT PATTERN LAB IS ๏ A comprehensive component library ๏ A pattern starter kit ๏ A design system builder ๏ A practical viewport resizer ๏ A design annotation tool
  46. WHAT PATTERN LAB ISN’T ๏ A UI framework ๏ Language/library/style dependent ๏ Incredibly rigid
  47. 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/
  48. PATTERN BUILDER
  49. MOLECULE GUTS code block<div class="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>
  50. BASIC INCLUDE code block <?php inc(‘molecule’,‘pagination’)?>
  51. ORGANISM GUTS code block<section class="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>
  52. BASIC INCLUDE code block <?php inc(‘organism’,‘comments’)?>
  53. TEMPLATE GUTS code block<?php inc('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'); ?>
  54. f
  55. VIEWER
  56. 320PX.
  57. 320PX. 480PX.
  58. 320PX. 480PX. 768PX.
  59. 320PX. 480PX. 768PX. 1024PX.
  60. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  61. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  62. DISCO MODE
  63. HAY! MODE
  64. 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/
  65. MANUAL
  66. VIEW MODES
  67. 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
  68. WHAT’S NEXT?
  69. DAVE OLSEN@dmolsen
  70. MINIMIZE DEPENDENCIES
  71. MO LANGUAGES
  72. INCLUDES ARE INCLUDES code block//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'
  73. 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
  74. https://github.com/bradfrost/patternlab
  75. http://patternlab.bradfrostweb.com
  76. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
  77. WORK HARD. DON’T BE AN ASSHOLE. SHARE WHAT YOU KNOW.
  78. THANKS!@brad_frost

×