Atomic Design

When design becomes
a methodology

InsightsPerspective

In evaluating the digital appearance, we applied the change in perspective at Audi to the design.

Our thought process started not only from the smallest device, but also from the smallest elements of the design.

InsightsScalability

"Atomic" means

fundamental rather

than minuscule.

Atomic design involves working from the inside out. To begin with, components such as buttons or input fields are designed – the "atoms" that make up the design. Even at this early stage, the manner in which Audi interacts with the user is defined.

The end result is a consistent experience that is scalable across all interfaces, from car displays to smart watches.

Atomic Design Functionality

Funktionsweise Atomic Design

InsightsAlways Beta

Resources for

change

Together with Audi, we developed a state-of-the-art brand portal. Each element can be experienced interactively and all elements are based on a common source code. This makes changes easy to implement, globally visible and desired: The agile platform expands and is refined by the input of designers and programmers from around the globe. Furthermore, the digital components are made available with a link to the GitHub development platform.

We are ready for the future.

Screenshot / Brand Portal

Screenshot / Brand Portal Photoshop Template

Link to

the Audi digital brand portal

Link to

the Audi GitHub repository

"Is open source dangerous? That question and the mindset that gave rise to it are from a different time." Thomas Michelbach,
Head of Development Strichpunkt

DFBCorporate Branding

DFB

New

Tactics

VorwerkCorporate Branding

Vorwerk

Dawn of

modern