Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ATOMIC DESIGN@brad_frost
DESIGN SYSTEMS
http://styletil.es
http://sparkbox.github.com/style-prototype/
COMPONENTS
We’re not designing pages,we’re designing systems of components.-Stephen Hayhttp://bradfrostweb.com/blog/mobile/bdconf-ste...
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
FRAMEWORKS
RESOURCEhttp://foundation.zurb.com/
RESOURCEhttp://twitter.github.com/bootstrap/
THESE THINGS ARE GREAT, BUT...
FRAMEWORK POTENTIAL PITFALLS๏ Subscribe to other developers’ structure/naming/style๏ Lookalike issues๏ One-size-fits-all๏ ...
Tiny Bootstraps, for every client.-Dave Ruperthttp://daverupert.com/2013/04/responsive-deliverables/
Responsive deliverables should looka lot like fully-functioning TwitterBootstrap-style systems customtailored for your cli...
PATTERN LIBRARIES
We’re not designing pages, we’redesigning systems of components.-Stephen Hayhttp://24ways.org/2011/front-end-style-guides/
BENEFITS OF FRONT-END STYLE GUIDES๏ Easier to test๏ Better workflow๏ Shared vocabulary๏ Useful referencehttp://24ways.org/...
http://gim.ie/fZyK
http://pea.rs/
http://brettjankord.com/projects/style-guide-boilerplate/
http://patternprimer.adactio.com/
http://barebones.paulrobertlloyd.com
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
I LOVE THESE.
MO’ PATTERNS, MO’ PROBLEMS๏ Time consuming to create๏ Treated as a auxiliary project๏ Often created after a project launch...
ATOMIC DESIGN
H2 + O2 → H20C + O2 → CO2CH4 + O2 → CO2 + H2OC8H18 + O2 → CO2 + H20C2H6 + O2 → CO2 + H2O
H2+O2=H20H2+O2→H20
http://joshduck.com/periodic-table.html
ATOMS๏ Building blocks of an interface๏ Can’t be broken down any furtherwithout losing their meaning๏ Abstract๏ Often not ...
Actin’ fool breakin’ shit downto molecules-Busta Rhymes
H2+O2=H20H2+O2→H20
MOLECULES๏ Group of atoms bonded together๏ Smallest fundamental units of acompound๏ More concrete than atoms๏ Encourage a ...
ORGANISMS๏ Group of molecules joinedtogether to form a distinct section๏ Complex molecules๏ Can consist of similar and/ord...
http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
TEMPLATES๏ Page-level๏ Mostly comprised of groups oforganisms๏ Begin their life as HTMLwireframes, increase fidelity overt...
f
PAGES๏ Specific instance of a template๏ Highest fidelity.Template contentis replaced with real/samplecontent๏ The hub for ...
ABSTRACT CONCRETE
ABSTRACT CONCRETECREATORS CLIENTS
REFERENCE BUILD REVIEW
ATOMIC DESIGN๏ Provides a methodology for crafting an effectivedesign system๏ Easily traverse from abstract to concrete๏ P...
Pattern Lab is a collection of toolsto help create and maintainatomic web design systems.
WHAT PATTERN LAB IS๏ A comprehensive component library๏ A pattern starter kit๏ A design system builder๏ A practical viewpo...
WHAT PATTERN LAB ISN’T๏ A UI framework๏ Language/library/style dependent๏ Incredibly rigid
Responsive deliverables should looka lot like fully-functioning TwitterBootstrap-style systems customtailored for your cli...
PATTERN BUILDER
MOLECULE GUTScode block<div class="block block-inset"><a href="#" class="inner"><div class="b-thumb"><?php inc(atom,landsc...
BASIC INCLUDEcode block<?php inc(‘molecule’,‘pagination’)?>
ORGANISM GUTScode block<section class="comments section"><div class="comments-container" id="comments-container"><h2 class...
BASIC INCLUDEcode block<?php inc(‘organism’,‘comments’)?>
TEMPLATE GUTScode block<?php inc(organism,header); ?><div role="main"><div class="l-two-col"><div class="l-main"><article ...
f
VIEWER
320PX.
320PX.480PX.
320PX.480PX.768PX.
320PX.480PX.768PX.1024PX.
320PX.480PX.768PX.1024PX.THE FOLD.
320PX.480PX.768PX.1024PX.THE FOLD.OH GOD THE FOLD.
DISCO MODE
HAY! MODE
Start with the small screen first,then expand until it looks like shit.Time for a breakpoint!-Stephen Hayhttp://bradfrostw...
MANUAL
VIEW MODES
WHY PATTERN LAB๏ Serves as a hub for the entire design process๏ Useful tool for everyone: information architects, designer...
WHAT’S NEXT?
DAVE OLSEN@dmolsen
MINIMIZE DEPENDENCIES
MO LANGUAGES
INCLUDES ARE INCLUDEScode block//PHP<?php inc(‘molecule’,‘pagination’)?>//Codekit<!-- @import "m-pagination.kit" -->//Hamm...
HUGE THANK YOU๏ Dave Olsen๏ Dan Mall๏ Josh Clark๏ Jonathan Stark๏ Jennifer Brook๏ Anna Debenham๏ Jeremy Keith๏ Brett Janko...
https://github.com/bradfrost/patternlab
http://patternlab.bradfrostweb.com
WHEN YOU’RE FINISHED CHANGINGYOU’RE FINISHED.
WORK HARD.DON’T BE AN ASSHOLE.SHARE WHAT YOU KNOW.
THANKS!@brad_frost
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Atomic design
Upcoming SlideShare
Loading in …5
×

Atomic design

1,415,652 views

Published on

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.

Published in: Technology, Design
no profile picture user
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks Packers and Movers in Marathahalli
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • BOOK-MARKED IT!.... STARTUPS...Send your pitchdeck to over 5700 of VC's and Angel's with just 1 click. Visit: Angelvisioninvestors.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Njce! Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

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

×