The web continues to evolve further and further away from its document based heritage. Whereas we once thought of fixed-dimension ‘pages’, today we think of ‘systems’ that serve a variety of devices and users. The requirements of a growing ecosystem have necessitated a change in workflow and methodology.
One popular approach, is Brad Frost’s Atomic Design.
Brad encourages the division of UI components into smaller ‘Lego bricks’ that continue to combine until they resemble the familiar page. You would start by identifying a feature (selecting users), then create a component which satisfies it (such as an interactive people-picker). This would, in turn, eventually reside within a template alongside other components which would make up the finished UI.
As Brad remarks:
A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI.
Instead of designing and building individual pages, Atomic Design focuses on the individual components needed in order to meet the demands of our application. The result of this is a pattern library, a set of reusable interface components that document both behaviour and implementation.
MailChimp’s Pattern Library, demonstrating various reusable components.
Conceptually this sounds great, enabling a cohesive design system and faster iteration. Yet how well does it work in practice?