Putting Atomic Design to Work

Atomic design is a web development philosophy employing a system of elements that combine with one another to create larger components, templates, and ultimately, web pages. As a concept, atomic design can transform the way you think about website design. And in practice, it offers tremendous benefits to efficiency, consistency, communication, and collaboration.

What atomic design looks like in practice varies by team and organization, but the approach can benefit all disciplines. Developing a pattern library using the atomic design methodology often involves user experience architects, developers, and designers working together to ideate and build components. Working together with a shared approach helps keep things consistent, assuring that the functionality and naming of components is clear to everyone.

For a college or university system, a pattern library can be used to bring a brand guide into the digital realm, where it can be easily updated, extended, shared, and used to create a family of websites.

Using a pattern library helps designers and developers create a functional, visually unified system that can be recombined to build new pages while maintaining quality and consistency. It creates efficiency, as elements combine to create new styles and components that you can leverage throughout your entire site.

This allows you to quickly and easily create working digital prototypes rather than designing with static visuals. A scaled-down page design printed on a piece of paper can’t capture interactive elements and functionality, and gives an incomplete picture of the final product. Rapidly prototyping concepts makes it easier to get effective buy-in from stakeholders, who can interact with a living, breathing demo site.

Even better, quick, global changes are easy to make. There’s no need to keep re-typing code to modify components or spend hours in a design program modifying individual elements for each template or page design.

We’ll share some tools you can use for managing and creating pattern libraries and design-focused tools that support an atomic design approach.

Learn how atomic design can help you:
– Control the conversation and gain buy-in through rapid prototyping
– Establish naming conventions and improve collaboration and communication
– Create technical documentation and build shared libraries of code

Slides