Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 Hay
http://bradfrostweb.com/blog/mobile/bdconf-...
WHAT IS AN INTERFACE MADE OF?
http://bradfrost.github.com/this-is-responsive/patterns.html
FRAMEWORKS
RESOURCE
http://foundation.zurb.com/
RESOURCE
http://twitter.github.com/bootstrap/
THESE THINGS ARE GREAT, BUT...
FRAMEWORK POTENTIAL PITFALLS
๏ Subscribe to other developers’ structure/naming/style
๏ Lookalike issues
๏ One-size-fits-al...
Tiny Bootstraps, for every client.
-Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your ...
PATTERN LIBRARIES
We’re not designing pages, we’re
designing systems of components.
-Stephen Hay
http://24ways.org/2011/front-end-style-guid...
BENEFITS OF FRONT-END STYLE GUIDES
๏ Easier to test
๏ Better workflow
๏ Shared vocabulary
๏ Useful reference
http://24ways...
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 lau...
ATOMIC DESIGN
H2 + O2 → H20
C + O2 → CO2
CH4 + O2 → CO2 + H2O
C8H18 + O2 → CO2 + H20
C2H6 + O2 → CO2 + H2O
H2+O2=H20
H2+O2→H20
http://joshduck.com/periodic-table.html
ATOMS
๏ Building blocks of an interface
๏ Can’t be broken down any further
without losing their meaning
๏ Abstract
๏ Often...
Actin’ fool breakin’ shit down
to molecules
-Busta Rhymes
H2+O2=H20
H2+O2→H20
MOLECULES
๏ Group of atoms bonded together
๏ Smallest fundamental units of a
compound
๏ More concrete than atoms
๏ Encoura...
ORGANISMS
๏ Group of molecules joined
together to form a distinct section
๏ Complex molecules
๏ Can consist of similar and...
http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
TEMPLATES
๏ Page-level
๏ Mostly comprised of groups of
organisms
๏ Begin their life as HTML
wireframes, increase fidelity ...
f
PAGES
๏ Specific instance of a template
๏ Highest fidelity.Template content
is replaced with real/sample
content
๏ The hub...
ABSTRACT CONCRETE
ABSTRACT CONCRETE
CREATORS CLIENTS
REFERENCE BUILD REVIEW
ATOMIC DESIGN
๏ Provides a methodology for crafting an effective
design system
๏ Easily traverse from abstract to concrete...
Pattern Lab is a collection of tools
to help create and maintain
atomic web design systems.
WHAT PATTERN LAB IS
๏ A comprehensive component library
๏ A pattern starter kit
๏ A design system builder
๏ A practical vi...
WHAT PATTERN LAB ISN’T
๏ A UI framework
๏ Language/library/style dependent
๏ Incredibly rigid
Responsive deliverables should look
a lot like fully-functioning Twitter
Bootstrap-style systems custom
tailored for your ...
PATTERN BUILDER
MOLECULE GUTS
code block<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
<?php inc('atom',...
BASIC INCLUDE
code block
<?php inc(‘molecule’,‘pagination’)?>
ORGANISM GUTS
code block<section class="comments section">
<div class="comments-container" id="comments-
container">
<h2 c...
BASIC INCLUDE
code block
<?php inc(‘organism’,‘comments’)?>
TEMPLATE GUTS
code block<?php inc('organism','header'); ?>
<div role="main">
<div class="l-two-col">
<div class="l-main">
...
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 Hay
http://bradfr...
MANUAL
VIEW MODES
WHY PATTERN LAB
๏ Serves as a hub for the entire design process
๏ Useful tool for everyone: information architects, design...
WHAT’S NEXT?
DAVE OLSEN@dmolsen
MINIMIZE DEPENDENCIES
MO LANGUAGES
INCLUDES ARE INCLUDES
code block//PHP
<?php inc(‘molecule’,‘pagination’)?>
//Codekit
<!-- @import "m-pagination.kit" -->
/...
HUGE THANK YOU
๏ Dave Olsen
๏ Dan Mall
๏ Josh Clark
๏ Jonathan Stark
๏ Jennifer Brook
๏ Anna Debenham
๏ Jeremy Keith
๏ Bre...
https://github.com/bradfrost/patternlab
http://patternlab.bradfrostweb.com
WHEN YOU’RE FINISHED CHANGING
YOU’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
Nächste SlideShare
Wird geladen in …5
×

von

Atomic design Slide 1 Atomic design Slide 2 Atomic design Slide 3 Atomic design Slide 4 Atomic design Slide 5 Atomic design Slide 6 Atomic design Slide 7 Atomic design Slide 8 Atomic design Slide 9 Atomic design Slide 10 Atomic design Slide 11 Atomic design Slide 12 Atomic design Slide 13 Atomic design Slide 14 Atomic design Slide 15 Atomic design Slide 16 Atomic design Slide 17 Atomic design Slide 18 Atomic design Slide 19 Atomic design Slide 20 Atomic design Slide 21 Atomic design Slide 22 Atomic design Slide 23 Atomic design Slide 24 Atomic design Slide 25 Atomic design Slide 26 Atomic design Slide 27 Atomic design Slide 28 Atomic design Slide 29 Atomic design Slide 30 Atomic design Slide 31 Atomic design Slide 32 Atomic design Slide 33 Atomic design Slide 34 Atomic design Slide 35 Atomic design Slide 36 Atomic design Slide 37 Atomic design Slide 38 Atomic design Slide 39 Atomic design Slide 40 Atomic design Slide 41 Atomic design Slide 42 Atomic design Slide 43 Atomic design Slide 44 Atomic design Slide 45 Atomic design Slide 46 Atomic design Slide 47 Atomic design Slide 48 Atomic design Slide 49 Atomic design Slide 50 Atomic design Slide 51 Atomic design Slide 52 Atomic design Slide 53 Atomic design Slide 54 Atomic design Slide 55 Atomic design Slide 56 Atomic design Slide 57 Atomic design Slide 58 Atomic design Slide 59 Atomic design Slide 60 Atomic design Slide 61 Atomic design Slide 62 Atomic design Slide 63 Atomic design Slide 64 Atomic design Slide 65 Atomic design Slide 66 Atomic design Slide 67 Atomic design Slide 68 Atomic design Slide 69 Atomic design Slide 70 Atomic design Slide 71 Atomic design Slide 72 Atomic design Slide 73 Atomic design Slide 74 Atomic design Slide 75 Atomic design Slide 76 Atomic design Slide 77 Atomic design Slide 78 Atomic design Slide 79 Atomic design Slide 80 Atomic design Slide 81 Atomic design Slide 82 Atomic design Slide 83 Atomic design Slide 84 Atomic design Slide 85 Atomic design Slide 86 Atomic design Slide 87 Atomic design Slide 88 Atomic design Slide 89 Atomic design Slide 90 Atomic design Slide 91 Atomic design Slide 92 Atomic design Slide 93 Atomic design Slide 94 Atomic design Slide 95 Atomic design Slide 96 Atomic design Slide 97 Atomic design Slide 98 Atomic design Slide 99 Atomic design Slide 100 Atomic design Slide 101 Atomic design Slide 102 Atomic design Slide 103 Atomic design Slide 104 Atomic design Slide 105 Atomic design Slide 106 Atomic design Slide 107 Atomic design Slide 108 Atomic design Slide 109 Atomic design Slide 110 Atomic design Slide 111 Atomic design Slide 112 Atomic design Slide 113 Atomic design Slide 114 Atomic design Slide 115 Atomic design Slide 116 Atomic design Slide 117 Atomic design Slide 118 Atomic design Slide 119 Atomic design Slide 120 Atomic design Slide 121 Atomic design Slide 122 Atomic design Slide 123 Atomic design Slide 124 Atomic design Slide 125 Atomic design Slide 126 Atomic design Slide 127 Atomic design Slide 128 Atomic design Slide 129 Atomic design Slide 130 Atomic design Slide 131 Atomic design Slide 132 Atomic design Slide 133 Atomic design Slide 134 Atomic design Slide 135 Atomic design Slide 136 Atomic design Slide 137 Atomic design Slide 138 Atomic design Slide 139 Atomic design Slide 140 Atomic design Slide 141 Atomic design Slide 142 Atomic design Slide 143 Atomic design Slide 144 Atomic design Slide 145 Atomic design Slide 146 Atomic design Slide 147 Atomic design Slide 148 Atomic design Slide 149 Atomic design Slide 150 Atomic design Slide 151 Atomic design Slide 152 Atomic design Slide 153 Atomic design Slide 154 Atomic design Slide 155 Atomic design Slide 156 Atomic design Slide 157 Atomic design Slide 158 Atomic design Slide 159 Atomic design Slide 160 Atomic design Slide 161 Atomic design Slide 162 Atomic design Slide 163 Atomic design Slide 164 Atomic design Slide 165 Atomic design Slide 166 Atomic design Slide 167 Atomic design Slide 168 Atomic design Slide 169 Atomic design Slide 170 Atomic design Slide 171 Atomic design Slide 172 Atomic design Slide 173
Nächste SlideShare
APBCSS - Atomic Parts Base CSS -
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

453 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

Atomic design

Herunterladen, um offline zu lesen

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.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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

    Nov. 23, 2021
  • SilvinaEmerson

    Sep. 22, 2021
  • GabrielHenrique613

    Jul. 26, 2021
  • irmrb88

    Feb. 4, 2021
  • LucaSomaschini1

    Oct. 9, 2020
  • whitneykmihoulides

    Jun. 3, 2020
  • RomeoBishLagasca

    May. 7, 2020
  • marta_cool

    Apr. 16, 2020
  • love0_0chen

    Apr. 9, 2020
  • VikneshGanesan2

    Mar. 12, 2020
  • dctrl

    Mar. 9, 2020
  • DarijeRamljak

    Mar. 7, 2020
  • SOULIKUMAR

    Dec. 10, 2019
  • PoppyFu

    Dec. 4, 2019
  • vfowler

    Nov. 18, 2019
  • mijlee

    Oct. 23, 2019
  • NicolaStocco

    Oct. 21, 2019
  • johnw3lls

    Oct. 16, 2019
  • EgorMiron

    Oct. 9, 2019
  • kanitronix

    Oct. 1, 2019

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.

Aufrufe

Aufrufe insgesamt

1.617.079

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

1.411.254

Befehle

Downloads

1.767

Geteilt

0

Kommentare

0

Likes

453

×