blog

The atomic design methodology was created to help improve user experiences by breaking down functionality at the early stages of the design process and building the design up from there. Due to the ability of designers to identify and track individual elements for updating, atomic design promotes consistency, creates cleaner code, and aids in making prototype design concepts quickly. While atomic design may seem more complex to designers first adopting the practice, once familiar, the system will create a much more scalable and easily adaptable project.

Below we discuss the five components of atomic design.

1. Atoms. Color palettes, fonts, buttons, headers and other individual elements are called atoms in atomic design. Like the in science, atoms are the smallest building blocks that must combine to make a more complex element, which will be the molecules.

2. Molecules. A single element, when combined with another, becomes a molecule. For example, a button is an atom, but when partnered with an attached form when you click the button, it makes a molecule.

3. Organisms. By combining molecules, more complex pieces come together, which are called organisms. An organism might be a navigation header that includes a logo, links, and buttons.

4. Templates. Bringing multiple organisms together create templates. Once at the template stage of atomic design, the big picture starts to come together. By building a template through atomic design, designers and team members can view and track the individual pieces. This makes making changes easier, reduces the probability of duplicating code that could reduce website performance, and makes de-bugging easier.

5. Pages. In the pages stage of atomic design, the final version of the design emerges. Pages should be tested for the effectiveness of the underlying design. In pages, if there is an issue with any of the content in regards to aesthetics or functionality, designers can go back and modify any of the basic elements in atoms, molecules, or organisms.

Avatar New York is an innovating, award-winning web design New York firm dedicated to providing clients with responsive websites that help grow brands and convert visitors to customers. With an expertise in web development, branding, cloud hosting, mobile app development, and CMS and e-commerce solutions, Avatar New York's top tier designers have the ability to create intelligent websites for any type of business.