Atomic Design - BDConf Nashville, 2013

18,124 views
17,063 views

Published on

Atomic design is a methodology for creating robust design systems.

Published in: Technology, Design
8 Comments
84 Likes
Statistics
Notes
No Downloads
Views
Total views
18,124
On SlideShare
0
From Embeds
0
Number of Embeds
1,543
Actions
Shares
0
Downloads
195
Comments
8
Likes
84
Embeds 0
No embeds

No notes for slide

Atomic Design - BDConf Nashville, 2013

  1. ATOMIC DESIGN @brad_frost
  2. PAGES GRAPHIC? WRITTEN PAGE? WEB PAGE? BOTH? http://www.flickr.com/photos/pandora_6666/4927865092/
  3. 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/
  4. WHAT IS AN INTERFACE MADE OF?
  5. http://bradfrost.github.com/this-is-responsive/patterns.html
  6. http://foundation.zurb.com/
  7. getbootstrap.com
  8. THESE THINGS ARE GREAT, BUT...
  9. 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
  10. Tiny Bootstraps, for every client. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  11. 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/
  12. 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/
  13. http://gim.ie/fZyK
  14. http://pea.rs/
  15. http://brettjankord.com/projects/style-guide-boilerplate/
  16. http://patternprimer.adactio.com/
  17. http://malarkey.github.io/Rock-Hammer/
  18. http://barebones.paulrobertlloyd.com
  19. http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/
  20. I LOVE THESE.
  21. 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
  22. ATOMIC DESIGN
  23. H2 + O2 → H20 C + O2 → CO2 CH4 + O2 → CO2 + H2O C8H18 + O2 → CO2 + H20 C2H6 + O2 → CO2 + H2O
  24. H2+O2=H20 H2+O2→H20
  25. http://joshduck.com/periodic-table.html
  26. H2+O2=H20 H2+O2→H20
  27. ABSTRACT CONCRETE
  28. ABSTRACT CONCRETE CREATORS CLIENTS
  29. REFERENCE BUILD REVIEW
  30. DAVE OLSEN @dmolsen
  31. 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)
  32. 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
  33. SITE BUILDER
  34. BLOW IT UP.
  35. http://www.starbucks.com/static/reference/styleguide/
  36. MOLECULE GUTS code 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> !
  37. BASIC INCLUDE ! ! ! ! ! code block ! ! ! {{> molecules-block-inset }} !
  38. ORGANISM GUTS ! code 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>
  39. BASIC INCLUDE ! code block ! ! ! ! {{> organisms-header }}
  40. TEMPLATE GUTS {{> codeorganisms-header block }} <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 }} !
  41. CONTENT STRUCTURE ACTUAL CONTENT
  42. TEMPLATE GUTS code hero }} {{# block {{> molecules-block-hero }} {{/ hero}} ! <div class="g g-3up"> {{# touts}} <div class="gi"> {{> molecules-inset-block }} </div> {{/ touts}} </div><!--end 3up-->
  43. PIPING IN REAL CONTENT WITH JSON "hero" : [ code {block } "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" : {
  44. VIEWER
  45. 320PX.
  46. 320PX. 480PX.
  47. 320PX. 480PX. 768PX.
  48. 320PX. 480PX. 768PX. 1024PX.
  49. 320PX. 480PX. 768PX. 1024PX. THE FOLD.
  50. 320PX. 480PX. 768PX. 1024PX. THE FOLD. OH GOD THE FOLD.
  51. DISCO MODE
  52. HAY! MODE
  53. 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/
  54. ANNOTATIONS
  55. AUTO-REFRESH & PAGE FOLLOW
  56. 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
  57. SET EXPECTATIONS
  58. http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
  59. 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/
  60. B-SIDE THIS IS NOT THE WEB.
  61. WEB WEB
  62. DEATH TO NAVIGATION COMPLEXTHE WATERFALL
  63. 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/
  64. GATHER
  65. http://stylifyme.com/
  66. http://bradfrostweb.com/blog/post/interface-inventory/
  67. http://blog.easy-designs.net/archives/evernote-for-interface-inventories/
  68. INTERFACE INVENTORY ๏ 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
  69. ESTABLISH DIRECTION
  70. RCE OU RES http://styletil.es/
  71. ROLL UP OUR SLEEVES
  72. CONTENT STRUCTURE ACTUAL CONTENT
  73. http://www.flickr.com/photos/15609463@N03/7854373494/
  74. COLLABORATION AND COMMUNICATION TRUMP DELIVERABLES
  75. http://pattern-lab.info
  76. IF ANYTHING GOES WRONG WITH PATTERN LAB, BLAME THIS GUY.
  77. HUGE THANK YOU ๏ Dave Olsen ๏ Anna Debenham ๏ Dan Mall ๏ Andy Clarke ๏ Josh Clark ๏ Paul Robert Lloyd ๏ Jonathan Stark ๏ Jeremy Keith ๏ Jennifer Brook ๏ Brett Jankord ๏ Tyler Sticka ๏ Harry Roberts
  78. WHEN YOU’RE FINISHED CHANGING YOU’RE FINISHED.
  79. THIS IS FUN!
  80. THANKS! @brad_frost

×