{"id":1320,"date":"2017-02-05T09:36:47","date_gmt":"2017-02-05T09:36:47","guid":{"rendered":"http:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/?p=1320"},"modified":"2017-02-05T09:46:59","modified_gmt":"2017-02-05T09:46:59","slug":"atomic-design","status":"publish","type":"post","link":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/2017\/02\/05\/atomic-design\/","title":{"rendered":"Atomic Design"},"content":{"rendered":"

We\u2019re not designing pages, we\u2019re designing systems of components.\u2014Stephen Hay<\/p><\/blockquote>\n

Atoms<\/strong>
\nAtoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
\n\"\"
\nAtoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
\nLike atoms in nature they\u2019re fairly abstract and often not terribly useful on their own. However, they\u2019re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.<\/p>\n

Molecules<\/strong>
\nThings start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
\nFor example, a form label, input or button aren\u2019t too useful by themselves, but combine them together as a form and now they can actually do something together.
\n\"\"
\nBuilding up to molecules from atoms encourages a \u201cdo one thing and do it well\u201d mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.<\/p>\n

Organisms<\/strong>
\nMolecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
\n\"\"
\nWe\u2019re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I\u2019m working with on several projects) uses element collages, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).
\nOrganisms can consist of similar and\/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a \u201cproduct grid\u201d organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.
\nBuilding up from molecules to organisms encourages creating standalone, portable, reusable components.<\/p>\n

Templates<\/strong>
\nAt the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It\u2019s here where we start to see the design coming together and start seeing things like layout in action.
\n\"\"
\nTemplates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place. In my experience working with this methodology, templates begin their life as HTML wireframes, but over time increase fidelity to ultimately become the final deliverable. Bearded Studio in Pittsburgh follow a similar process, where designs start grayscale and layout-less but slowly increase fidelity until the final design is in place.<\/p>\n

Pages<\/strong>
\nPages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.
\n\"\"
\nPages are the highest level of fidelity and because they\u2019re the most tangible, it\u2019s typically where most people in the process spend most of their time and what most reviews revolve around.
\nThe page stage is essential as it\u2019s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.
\nPages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.<\/p>\n

http:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"We\u2019re not designing pages, we\u2019re designing systems of components.\u2014Stephen Hay Atoms Atoms are the basic building blocks of matter. Applied to web interfaces, \n [...]<\/a>","protected":false},"author":1,"featured_media":1321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3,9],"tags":[34,20],"class_list":["post-1320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-layout","category-typografie","category-vorm","tag-screen-design","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":7,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":1324,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/posts\/1320\/revisions\/1324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/media\/1321"}],"wp:attachment":[{"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vakgroep.cmd.hr.nl\/algemeen\/inspiratie\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}