Atomic Design

When design becomes
a methodology

/work/audi/audi-insights-man-full.jpg
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.

/work/audi/gadgets-mobile.png
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

/work/audi/audi-insights-atomic.png
/work/audi/screendesigns-bg-full.jpg
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

/work/audi/brandportal.jpg

Screenshot / Brand Portal Photoshop Template

/work/audi/uikit.jpg
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

/work/dfb/teaser.jpg
DFB

New

Tactics

VorwerkCorporate Branding

/work/vorwerk/teaser.jpg
Vorwerk

Dawn of

modern