Audi

Audi stock locator

Audi stock locator is created based on a global Audi design system and is targeted to help the potential buyers to find a stock Audi vehicle among the multiple dealers in Baltic states. Fullscreen layout large imagery and detailed car specs allow user to inspect and choose the suitable vehicle. As well, user friendly filtering and search option allows to easily find and purchase the model user is interested in.
DisciplineStrategy
Prototyping
Webdesign
UI/UX
Interaction

Design system

Audi user interfaces are as varied as their uses – ranging from inspiring websites to applications for a particular service. They are based on the principles of the Audi look: variety, honesty and balance. The aim is to create varied solutions and a well-balanced, system-wide user experience – from the app to the vehicle. The basis for this is provided by a joint set of components, modules and animations.
Design System
Colors

Text Styles

The use of the different type weights enables content to be clearly structured and pages to be showcased in an effective, diversified manner. The text formats provided here are based on the typography basics and can be supplemented and adapted according to the project.
Headings
Example

Grid system

The flexible and optional grid consists of 12 columns and can be nested. The spacing between the columns is 0.25 rem (one quarter of the basic type size). The maximum width is determined for each project.

The minimum spacing to the left and right-hand edge of the viewport is 4 %. On very large screens, the content is centred.
Grid - d1440 template
Example

Layout

The components and the layout offer wide-ranging options in the application for the inspiring presentation of content and functions. The user is our benchmark. It is the user’s activities and needs that provide the key focus. User interaction options are designed clearly and simply.
Desktop
Cars
Desktop
Inside category
Desktop
Inside category
Desktop
Inside category

Small Viewports First

If an application is to be made available on different devices, create and design it for small viewports first.s
Grid Mobile Device
Example
Placeholder
Example
Credits
13

Credits

Project Management: Maksims Kusnarevs

Web design: Konstantins Sedunovs

Case study:Karina Karsecjana
Next Project

Helio