User Interface / UI Introduction

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 can appear in one of the brand colours or in a grey scale and are positioned flush with each other with narrow gaps between them.

It is also possible to place an image in a tile which covers the full space. Here, care must always be taken to ensure differentiation between the space inside the tile and the background.

Tiles can in turn be split within themselves based on the layout structure, in other words they can contain an image and a block of colour. If tiles are assigned one or more functions, they are known as cards.

Structuring of content according to the layout principle.

Application with cards calling an action or a page.

Tiles are placed inside the grid, spaced from the edge.

Alternatively they can be placed at a narrow spacing from the edge that is exactly equal to the spacing between the tiles.

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.

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.

Hard shadow applied is as subtly as possible. It is merely an aid to separating superimposed blocks of the same colour.
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.

In the case of horizontal placement, a flexible and optionally applicable 12-column grid is helpful.

Vertical spacing between text and other elements is created in a uniform rhythm.

It is useful to establish a global basic unit of one quarter of the basic type size (0.25 rem). This is geared towards the text formatting. Based on this figure it is possible to define line spacing and baseline grids, margins and card padding, column spacing in the grid and other parameters.

With a basic type size of 16 px, for example, the interim column spacing and card spacing is 4px. As a basis for the vertical rhythm of text, this means the line spacing for a short reading text is a multiple of 4 px = 20 px.

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. The rings do not have to be permanently visible on subsequent screens and on subpages.

Typographical elements and icons are placed vertically or horizontally to 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.

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

All animations have the dynamic character defined in the look, giving an application a lively feel. They perform functional tasks in the interface and improve the user experience: they guide the user through an application, help provide visual orientation between two views, give feedback on interactions, support visual cues and provide information on status. All in all they ensure a sense of high quality.

Audi UI Kit – Integration into Sketch library

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

UI Introduction