Atomic Design: What is it and why is it important in 2020?

your brand isn't static it's a living thing that responds to its environment changes big and small happen all the time if you have a website with millions of products thousands of pages and multiple brands making changes is time-consuming and it's easier to deviate from brand consistency over the years a beautifully designed website can well turn into a bit of a Frankenstein there's an easier way a way that's designed to be flexible and consistent from the very beginning it's called atomic design it uses atoms molecules and organisms to create something completely adaptable helping your website to flourish atoms are the most basic components the building blocks things like buttons fonts and search fields when atoms come together they form molecules molecules are components like hero's alerts and search navigations they are simple portable reusable components that can be dropped anywhere when atoms combine with molecules or molecules with molecules we create organisms organisms are things like headers footers and stack forms they make your website more engaging and easier to use so how does this work in practice well here are three separate atoms they don't do much by themselves but combine them into a molecule and suddenly it can do something we can search that's ok but I think we can jazz it up let's have an image in this case by joining an atom to our molecule now we have a far more beautiful and engaging organism crucially because we've used atomic design any changes we want to make we only have to make an atom level want to change the button color across your whole website across those millions of products and thousands of pages it only takes one change one little atom and everything updates organisms are sections of a website but they need something to hold them all together templates are the glue a template is a home for organisms we can see how components look and function together for example we can take our search organism and apply it to a home page template we can try it out and move it around we can also set some standards like image size so even when the content changes this standard stays the same finally that brings us to pages pages show us the interface with real content so we've taken a small and rather abstract atom and built up to a concrete web page this is what users see and experience now we can test the design does everything look great and function as it should if the answer is no then we simply loop back and modify our molecules organisms and templates to better address our needs or we can create a new pattern from our atoms and molecules and that's atomic design its atoms the smallest UI elements that make up molecules that doing components that make up organisms the sections of an interface held together by templates the glue to finally create pages what the world sees its innovative design that saves time and maintains brand consistency no matter how many changes or on what device your website appears on you

Channel: Proctor + Stevenson

Views: 9,004

Keywords: design, webdesign, website, branding, brandmaintenance, webdevelopment, atomic design

Id: Yi-A20x2dcA

Length: 3min 55sec (235 seconds)

Published: Wed Aug 28 2019