Designing for Atomic Design

This thesis deals with two mutually reinforcing problems: designing for a variable viewport size and design-development coordination.

Designing for the digital medium with its flexible and unforeseeable proportions can be challenging and complex. Instead of designing whole pages or screens, designing systems of interdependent components for an interface is the better approach as was found by this thesis. Such an approach requires the introduc- tion of terminology for components to keep them organised.

Atomic Design, a methodology first invented by Brad Frost in 2013, directly reflects this modular nature of front-end development for a variable medium. But for a design process, it misses crucial parts. This thesis extends the Atomic Design methodology to include design tokens and component states in the component/pattern library of a design system.

Designers and software engineers have to work together on the same objects while figuratively speaking different languages. This thesis addresses these issues from a software-development perspective by Atomic Design. This thesis attempts to re-interpret the software-engineering methodology as a design workflow optimised for design-development compatibility. It translates the logic of code into a design process. To do this, Atomic Design was critically examined in a Double Diamond process and found to be the best choice for creating digital designs to create software products.