Atomic Design Methodology for Building Web Design Systems

Table Of Content

• The five stages of Atomic Design: atoms, molecules, organisms, templates, and pages
• We analyze top UI patterns and latest design trends, and provide actionable recipes for various user tasks
• Stop guessing about your digital experience with LogRocket
• Who introduced the atomic design methodology?
• Style guide structure

You can create mockups and prototypes faster by assembling existing components. Focus on creating generic, abstracted component APIs vs. tailored functionality. Composing UIs from pre-built components speeds development and reduces bugs.

The five stages of Atomic Design: atoms, molecules, organisms, templates, and pages

This makes it easier for designers or developers to divide and work on different areas at the same time. As teams combine components into more complex UI, the divisions set by atomic design prevent conflicts. React has quickly become one of the most popular open-source JavaScript frameworks for building user interfaces. Its component-based architecture provides a powerful way to break complex user interfaces into small, reusable pieces.

We analyze top UI patterns and latest design trends, and provide actionable recipes for various user tasks

Molecules, the second level, are small groups of atoms that work together to create a more complex component. For example, a search bar and submit button can be considered atoms but together they create a search molecule. We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before.

Stop guessing about your digital experience with LogRocket

Other times, the page design simply doesn’t offer good performance in user testing. While this can feel like a failure, it’s often an opportunity – to go back and improve. All designers know that in the world of UX design, there are many different approaches. Atomic Design is all about choosing a scientific approach to the interface, applying a framework that comes from chemistry. Each UI element requires an individual development approach in order to guarantee its optimal performance and visual aesthetic on any device.

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. A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way. We must create systems that establish reusable design patterns and also accurately reflect the reality of the content we’re putting inside of those patterns.

Much like the design thinking methodology, Atomic Design has a certain framework that means to help designers organize their efforts and guide them in the design process. Like in design thinking, when taking the atomic approach designers aren’t meant to install a linear workflow. Instead, there’s plenty of back and forth so that UI design decisions are made with a sound basis in validation. Another key aspect of a successful atomic project is the integration of frontend development with design from the get-go.

All the elements and components are well-optimized, so you won't face any lagging issues while working on your projects. In these components, a group of properties describes each component with its respected function and personality. One unique thing is that along with being a crucial member of a developing ecosystem, all components are free to function with others and transform on their own. Airbnb also keeps publishing blog articles about the behind the scenes of the design system to help users get an insight into the backend.

Sometimes we may need it to be a full-bleed element occupying the entire viewport. Other times we may need to include it in the context of an article. The dream is to build our components fluidly and they’ll adapt their styles and functionality to fit whatever containers we put them into.

Style guide structure

Nano-topology optimization for materials design with atom-by-atom control - Nature.com

Nano-topology optimization for materials design with atom-by-atom control.

Posted: Mon, 27 Jul 2020 07:00:00 GMT [source]

With atomic design, designers can easily share and reuse elements, ensuring consistency across the project. In atomic design, the process begins by defining the atoms and building them up into molecules, organisms, templates, and pages. This hierarchical approach allows designers to create a consistent look and feel across a project, while also making it easy to make changes and updates. It also allows for the reuse of common elements across different pages and templates, making the design process more efficient. Atomic design is a methodology developed by Brad Frost for creating design systems. In short, it works by breaking down interfaces into small and reusable components.

You’ll notice that our project has defined fields for us through our starter project. They’re also part of how we model the data that Prismic sends us through their API. Here’s how we approach web builds at Skyward, when we bring our atomic designs to life. A template is an entire webpage but instead of having fixed content, the content is dynamic, which means that you could use the same template with different content many times. A blog post will often have the same layout and structure across all the blog posts (a template) but the content will be different between each post (a page).

Most pattern libraries out there in the wild demonstrate a pattern’s underlying HTML, while others also include pattern-specific CSS and JavaScript. Salesforce’s Lightning design system, for example, shows a pattern’s HTML as well as all the (S)CSS pertaining to that pattern. A common pattern library feature is the ability to peek under the hood and view the underlying code that makes up a particular component. Exposing a UI pattern’s code speeds up development time (I love copying and pasting as much as the next coder) and helps team leaders enforce code syntax and style conventions.

Research existing design systems and best practices to inform the design process. Choosing the right pattern library tool depends on the size and complexity of the design system, team workflow, and budget. Finally, the templates are used to create the finished product, which is the final output of the design process. Pages, the final level, are the combination of templates and represent the finished product.

The header and footer of a website page consist of two or more molecules, making them both organisms. The search bar is an example of a molecule used to build a header component. Teams can adapt design systems defined in atomic design for use across different platforms like web, mobile, and so on, leading to product cohesion. However, care should be taken not to enforce atomic design rules dogmatically.

Fonts, color palettes, and animations are also considered atoms. In the above example, you can see atoms in action as individual UI elements. Developers can easily build a library of reusable atoms that act as a foundation of the frontend system. Teams reuse atoms frequently all over when building up higher-order organisms and templates. With atomic design, components have clearly defined purposes and limitations.

Even third parties responsible for matching their UIs with the look and feel of a company’s internal UIs can make great use of a style guide. Externally hosted experiences like payment portals or localized sites can better match the look and feel of the primary experience by applying the styles defined in the guide. Applying modular programming principles to JavaScript is a bit of a no-brainer, since JavaScript is itself a programming language. But object-oriented thinking is weaving its way into other aspects of the web as well, including CSS, the styling language of the web.