Atomic Design is a Design methodology in which elements of a website are broken down into basic components. By adding these components together piece by piece, a higher quality and more consistent product is achieved.
What is Atomic Design?
Atomic Design is a methodology that was devised by Brad Frost to craft interface design systems, taking inspiration from the field of chemistry. Atoms are the smallest elements of a website and the foundation upon which the process of Atomic Design rests. These are combined together to build bigger elements, called Molecules. Assembling many Molecules leads to the next component known as Organisms. Organisms are then used by the developer to create a Template, from which the final web pages begin to take shape.
Stages
Atoms
Atoms are the basic element of the web page. Having a list of Atoms before site creation means a developer can mock-up the necessary pages quickly and easily. This agile approach makes the development process more simple and allows for feedback at an earlier stage in the process. Web developers can tweak and create new Atoms, which as a result makes the code more consistent. Quick prototyping streamlines the development process.
Molecules
In terms of a User Interface (UI), an example of a Molecule would be a search form. The search form is made up of other Atoms working together as a functional unit; form label, input field and a button. The singular Atom now has a functional purpose, for example the button that was once a lonely Atom can now be used to submit the form. This makes for a conveniently reusable component that can be used anywhere in the UI where search functionality is needed.
Organisms
Organisms are seen as quite complex UI constituents but they provide a sense of context that isn’t apparent before they make the transition from Molecules to Organisms. These are made up of groups of Molecules and serve to build a more cohesive site structure. An example of this is a header, a singular section of a UI. It serves as a way to progress through a site and brings together multiple UI Molecules which have their own functionality. These can include a logo image, a navigation list and a search bar.
Templates (wireframes)
If combining Atoms leads to Molecules, and combining Molecules leads to Organisms, then the result of combining Organisms are…Templates. To quote Brad Frost:
“we break our chemistry analogy to get into language that makes more sense to our clients and our final output.”
Templates define the underlying structure of a page, they do not define the final content of a page. This means that important properties of components are defined before content is actually added to the page, for example image size and character lengths for paragraphs. Having defined component properties at this stage helps to accommodate varying dynamic content when it’s added to the page.
Pages
By this stage, content is added and the Templates become Pages. This is the final milestone in the entire process and results in a tangible web page. This is an important stage of development as it is what the User will engage with and is, in essence, the end product. Any placeholder imagery or text is replaced with actual content to give an accurate depiction of the website itself. This stage gives the developer context and can allow them to revise what they have created and test assumptions.
Why Atomic Design?
So what’s the point of Atomic Design. It serves as a more constructive approach to web development and Design. It is an efficient way of working within a team environment and a more agile approach. It creates modular page elements that can be reused and cuts down on development time. It ensures consistency and creates a clear path for the Design process to follow.
At Graphic Mint we are big believers in following a consistent Design process. Check out our UI Services and get in touch today to see how we can help you.
Do you need help with a Design project? We offer award-winning solutions. Contact us today.
