Audi user interfaces are as varied as their uses – ranging from inspiring websites to applications for a particular service. 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.

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.

Design for Small Viewports First

If an application is to be made available on different devices, create and design it for small viewports first.

 

Subdivision into Blocks

The layout is generously subdivided into blocks, vertically and horizontally, so as to clearly structure the content and content sections.

 

Structuring by means of tiles

Content can be displayed inside rectangular tiles. Tiles are used in the brand colours. They can be separated from one another using narrow padding. 

It is also possible to place an image in a tile which covers the full space. When doing so, ensure that there is sufficient contrast to the background on which the tile is placed, in order to clearly separate the colours from one another. 

The tiles can in turn be divided in themselves according to the layout structure. This means that tiles may include both an image and a colour field. If tiles are assigned one or more functions, they are known as cards. Cards can be used both in the brand colours and in grey scale.

Structuring of content according to the layout principle.
Image gallery from tiles.
Tile with text content
Application with cards calling an action or a page.
Tiles are placed within the content area with padding to the margin.
Fine lines are placed between the elements to be separated, but not above and below them.

Separation of Elements

Clear spacing separates elements from each other in a very natural way.

If elements have to be grouped compactly for reasons of space, for example, a fine line is applied as a separation element.

Fine lines are placed between the elements to be separated, not above or below them.

Hierarchical Structure and Highlighting

Elements and content items that are important to the user are highlighted by means of their size and placement.

In this way, the relevance and status of elements is conveyed through the way they contrast with their background. Active and important elements contrast starkly with the background. Inactive and less important elements exhibit a less marked contrast.

Important elements and content items are placed in the user’s focus by means of large text and prominent placement, for example.
An active navigation item in a list navigation is given maximum contrast with the background. The inactive and deactivated items are shown with a less marked contrast.

Superimpositions

Superimpositions should be avoided as a general rule for purely design-based reasons. From a functional point of view, superimpositions are often necessary, e.g. in the case of a sticky header. Here the block which is one level above the layout is given a subtle soft shadow.

If the superimposing block is to be shifted into focus, the background is darkened with 90 % black. One example of this is modals.

Sticky header
Tooltip
Modal
The colour of a superimposing block and that of the layout background can differ. For a clear overall look, however, uniform colouring is recommended.


Don't

Superimpositions and overlaps impair the clarity of the layout and are avoided.
  • The shadow used is as subtle as possible. It is only an aid for separating two white, overlapping fields.
  • It is always made up of two shadows: a short one and a long one. The long, soft shadow creates space and depth. The short shadow reinforces the clear separation of blocks.
  • The shadow is not offset. As a result it is the same on all four sides in the case of an block that is not bled to the edge.
  • The shadow can be individually adjusted in size and opacity depending on background, context and viewport. It remains as subtle as possible, however.
  • Display of the shadow in the browser and application should be checked since the same shadow definition produces different results in different layout programmes in some cases.



Basic definition in CSS

(box shadow: horizontal offset, vertical offset, soft focus/size, spread, colour and opacity):

  • box shadow: 0 0 [2px–4px] 0 rgba(0, 0, 0, [0.03–0.1]), 0 0 [20px–80px] 0 rgba(0, 0, 0, [0.03–0.15]);

 

Examples of adaptations of the basic definition:

  • box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 40px 0 rgba(0, 0, 0, 0.05);
  • box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.03), 0 0 60px 0 rgba(0, 0, 0, 0.09);
  • box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 0 rgba(0, 0, 0, 0.05);

 

 

Horizontal and Vertical Placement

Elements are placed vertically and horizontally flush to each other for a calm, balanced overall look. Clear axes provide orientation.

 

Placement on Colours

If the background is white or a grey scale lighter than 30 % black (#b3b3b3), black and dark components are placed against it. If the background is black, progressive red or a grey scale darker than 30 % black (#b3b3b3), white and light components are placed against it.


Cut-out images can be placed against a subtle gradient so as to achieve a subtle distinction from other images within a list. This also provides the cut-out image with visual support.

The gradient for cut-out images is applied at an angle of 90° from top to bottom. Possible colours are white, black and grey tones from the colour palette. The lighter colour is always 5 %–10 % lighter than the darker one. In the case of a gradient lighter than 30 % black, the darker shade is at the bottom. With a darker gradient, the reverse applies and the lighter shade is at the bottom.

 
Example of a light gradient from white to a light grey: 
top white (#ffffff), bottom 5 % black (#f2f2f2)
Example of a dark gradient from black to a dark grey: top black (#000000), bottom 90 % black (#1a1a1a)

Don’t

Components are only placed against a red background subject to limitations so as to avoid pink shades.

Placement on Images and Videos

Elements are placed in such a way as to ensure good readability and visibility. If the background is agitated or dynamic in its size and position, a black block can be applied with an opacity of up to 30 % across the entire image or video.

Darkening is recommended in the case of agitated visual backgrounds.
The visibility and readability of elements should be ensured for all viewports.
Calm, light visual backgrounds are suitable for placing dark elements.

Placement of the Rings

The rings are placed prominently in the splash screen of an app, in the header or in navigation menus. On the following screens and on subpages, the rings do not have to be permanently visible.

Typographic elements and icons are placed vertically or horizontally to the inner edges of the rings.

Positioning of the rings with a message on the splash screen of an app.
Positioning of the rings with a menu icon on a start page.
Positioning of rings with menu items in an off-canvas menu.
The rings can be omitted on subpages and subsequent screens.

Size of Text and Components

Type sizes and some components are designed to be adaptable in size to viewport width and purpose. In this way the layout can be kept compact with small viewports and a generous overall look can be created for large viewports. The size of the components is linked to the defined basic type size in question.

Small basic type size of 16 px and components in small size, recommended for a mobile application, for example.
Medium-sized basic type size of 18 px and medium-sized components, e.g. for a tablet application.
Large basic type size of 20 px and large components, e.g. for a generously designed website to be displayed on a large screen.

Buttons and Interactions

A clear hierarchy helps provide guidance for the user. A primary button draws attention to the most important action on a page, followed by secondary buttons, text buttons and other interactions.

 

Animations

Animations give a dynamic and lively character to an app. They are used to fulfil functional tasks in the interface and to improve the user experience: they guide the user through an app, help to provide visual orientation between two views, give feedback in interactions, support visual cues and give information about a status. Overall, they provide a high-quality feeling.

 

Audi UI Kit – Integration into Sketch library

To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.

 

Audi UI Kit for Figma

To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.

Audi Figma UI-Kit and Icons
Figma Files for UI-Komponents, Icon Library and a Readme-file to get started and how to proceed with updating the files.
ZIP
20.9 MB