Atomic Design: Consistency that pays off

Web design has changed significantly in recent years. In the past all pages of a website were designed individually. Designers often did not pay attention to the re-use of elements, but rather treated all pages separately. When websites started growing in size and complexity, this often led to inconsistent user experiences, because existing templates were used to display content they were not designed for. Today, a much more holistic approach to web design is needed, taking current, changing, and future requirements into consideration.

Atomic Design 

In order to achieve a consistent user experience and interface design, Atomic Design is a great approach.

Atomic Design is not only a budget saver, but also your best friend for future requirements and allows you to fulfill customers wishes quickly and easily. 

The first step is to define the elements that are most in use. This would be, for example, colors, fonts, buttons and images. Starting with these simple elements, different components can be assembled, such as cards or sliders.

The analogy for atomic design is that it is organized along chemical notation, ranging from atoms to molecules to organisms to templates to pages. On each level the components are assembled from smaller components of the lower levels.

When we design user experiences (UX) at 1xINTERNET we try to build the best possible user interfaces with the fewest amount of components.

The focus is to create efficiency in the project and to potentially save budget. When fewer components are designed in UX, fewer components need to be programmed and tested. 

This approach not only reduces initial efforts considerably but also reduces the cost of the project and its maintenance.

Imagine the following example: You have three different interaction pages and you create a great but different UX for each of those. Then, the users have three different systems to learn. If you instead create an equally good UX by reusing as many components as possible, the user has to learn much less and can interact much faster with your application.

Conclusion

A strict design process and the right integration with the website technology certainly offers efficiency benefits. We plan to write more blog posts on the topic in the next few weeks and are looking forward to your feedback.