Atomic design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Atomic design

on

  • 212,998 views

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 ...

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.

Statistics

Views

Total Views
212,998
Views on SlideShare
44,454
Embed Views
168,544

Actions

Likes
218
Downloads
610
Comments
4

102 Embeds 168,544

http://bradfrostweb.com 159115
http://jancbeck.com 4459
http://arquiteturadeinformacao.com 1257
http://www.scoop.it 794
http://192.168.1.145 541
https://twitter.com 488
http://www.zionandzion.com 312
http://unmatchedstyle.com 162
http://greatmobileux.com 160
http://blog.seenitbefore.net 108
http://translate.googleusercontent.com 108
http://lanyrd.com 97
http://webcache.googleusercontent.com 96
http://cloud.feedly.com 78
http://feedly.com 65
http://www.anotheruiguy.com 61
http://rollingindex.co.uk 45
http://www.dompteursdesouris.com 41
http://www.google.com 41
http://www.ostraining.com 41
http://plus.url.google.com 40
http://www.farnal.com 36
https://www.google.com 25
https://translate.googleusercontent.com 23
http://digg.com 21
http://webnerd.com.br 20
http://www.feedly.com 19
http://mymobilebrain.wordpress.com 18
http://www.newsblur.com 17
http://www.google.co.uk 17
http://newsblur.com 16
http://prezi4u.tistory.com 14
http://localhost 12
https://www.rebelmouse.com 10
http://wikipolis.tumblr.com 10
http://ladartcreative.net 9
http://www.google.ro 8
http://feeds.feedburner.com 8
http://www.feedspot.com 8
http://www.google.com.br 8
http://blog.naver.com 7
http://www.google.es 6
http://hivereader.com 6
http://dompteursdesouris.com 6
https://www.google.co.uk 5
http://news.google.com 5
http://www.google.no 5
http://live-mockup.com 4
http://www.google.at 4
http://fever.pixelbloom.com 4
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Video link for above presentation is http://vimeo.com/67476280
    Are you sure you want to
    Your message goes here
    Processing…
  • I agree with the slide regarding 'frameworks' especially. Why use other peoples stuff when you have slim solutions that are ready to go on a client by client basis.
    Are you sure you want to
    Your message goes here
    Processing…
  • Will video of the presentation be available anywhere at some point?
    Are you sure you want to
    Your message goes here
    Processing…
  • this is great stuff, Brad! i'm developing something like this internally. but your system is definitely better implemented. we can expand a lot more from here.

    everything you said about style guides is true. we treat it as a secondary project. but hopefully we can integrate it deeper with our workflow with this.

    thx for sharing!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Atomic design Presentation Transcript

  • 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 Hayhttp://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. RESOURCEhttp://foundation.zurb.com/
  • 11. RESOURCEhttp://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 Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
  • 15. Responsive deliverables should looka lot like fully-functioning TwitterBootstrap-style systems customtailored for your clients’ needs.-Dave Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
  • 16. PATTERN LIBRARIES
  • 17. We’re not designing pages, we’redesigning systems of components.-Stephen Hayhttp://24ways.org/2011/front-end-style-guides/
  • 18. BENEFITS OF FRONT-END STYLE GUIDES๏ Easier to test๏ Better workflow๏ Shared vocabulary๏ Useful referencehttp://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 → H20C + O2 → CO2CH4 + O2 → CO2 + H2OC8H18 + O2 → CO2 + H20C2H6 + O2 → CO2 + H2O
  • 29. H2+O2=H20H2+O2→H20
  • 30. http://joshduck.com/periodic-table.html
  • 31. ATOMS๏ Building blocks of an interface๏ Can’t be broken down any furtherwithout losing their meaning๏ Abstract๏ Often not too useful on their own๏ Good as an at-a-glance reference๏ See all your global styles laid outat once
  • 32. Actin’ fool breakin’ shit downto molecules-Busta Rhymes
  • 33. H2+O2=H20H2+O2→H20
  • 34. MOLECULES๏ Group of atoms bonded together๏ Smallest fundamental units of acompound๏ More concrete than atoms๏ Encourage a “do one thing anddo it well” philosophy๏ Often serve as the backbone for amore complex system
  • 35. ORGANISMS๏ Group of molecules joinedtogether to form a distinct section๏ Complex molecules๏ Can consist of similar and/ordifferent 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 oforganisms๏ Begin their life as HTMLwireframes, increase fidelity overtime๏ Client facing.Very concrete.๏ Eventually becomes thedeliverable/production code
  • 38. f
  • 39. PAGES๏ Specific instance of a template๏ Highest fidelity.Template contentis replaced with real/samplecontent๏ The hub for most people involvedin the process.๏ Test the effectiveness of thesystem๏ Test variations in the template:design/content tweaks, include/exclude organisms, etc.
  • 40. ABSTRACT CONCRETE
  • 41. ABSTRACT CONCRETECREATORS CLIENTS
  • 42. REFERENCE BUILD REVIEW
  • 43. ATOMIC DESIGN๏ Provides a methodology for crafting an effectivedesign system๏ Easily traverse from abstract to concrete๏ Promotes consistency and cohesion๏ Assembles rather than deconstructs
  • 44. Pattern Lab is a collection of toolsto help create and maintainatomic 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 looka lot like fully-functioning TwitterBootstrap-style systems customtailored for your clients’ needs.-Dave Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
  • 48. PATTERN BUILDER
  • 49. MOLECULE GUTScode 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 INCLUDEcode block<?php inc(‘molecule’,‘pagination’)?>
  • 51. ORGANISM GUTScode 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 INCLUDEcode block<?php inc(‘organism’,‘comments’)?>
  • 53. TEMPLATE GUTScode 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 Hayhttp://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 youplease.๏ 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 INCLUDEScode 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 CHANGINGYOU’RE FINISHED.
  • 77. WORK HARD.DON’T BE AN ASSHOLE.SHARE WHAT YOU KNOW.
  • 78. THANKS!@brad_frost