Audi GL Onlineadvertising

Audi online advertising

Corporate Design Guideline

Corporate Design | Advertising | Online Advertising

As at: 11/2010

2Corporate Design Advertising Online Advertising AUDI AG 11/2010

Contents

Introduction 3

Design parameters 3

Audi online advertising 4

Design rules for Audi online advertising 5

Design 6

1 Formats 6

1.1 Landscape format 6

1.2 Portrait format 6

1.3 Square format 7

1.4 Special format 8

1.5 Sources of information 8

1.6 Further information 8

2 Audi online ending 9

2.1 General use 9

2.2 Ready-made file formats 9

2.3 Overview of ready-made file formats 12

3 Basic elements 13

3.1 Typography 14

3.2 Colours 16

4 Extended design elements 17

4.1 Pictures 17

4.2 Illustrations 17

4.3 Animations using film-style presentation 18

5 Static online advertising 19

5.1 e-mail straplines 19

5.2 Static banners 20

Interactive elements 22

6 Links 22

6.1 Basic link 22

6.2 Text link 22

6.3 Links on dark layers 22

6.4 Promotion links 22

7 Icons 23

7.1 Summary of icons 23

8 Buttons and input boxes 24

8.1 Basic button 24

8.2 Basic button Plus 24

8.3 Process button 24

8.4 Call-to-action button 24

8.5 Full screen button 25

8.6 Scroll arrow in full-screen mode 25

8.7 Close button in full-screen mode 25

8.8 Input boxes 26

Checklist for briefing and release 27

General information 28


Design parameters

Audis corporate design makes the brand identity visible

and helps to convey it in the communication of all web-based

digital media at Audi. The brand code pure & clean is the

basis of the visual identity. It highlights the brand essence

Vorsprung durch Technik and the brand value progressive.

Communication measures from the Audi brand are clear and

enthralling they are always reduced to what is essential

and focus on the product and its USPs. They convey an open,

positive attitude and are aimed at discerning, progressive

people.

The design parameters

The aim is a uniform image for the Audi brand in digital online

advertising. This is essentially achieved by means of the use

of the predefined basic elements and the strict application

of the design elements. The following parameters are critical

to the look of the brand code pure & clean:

the logo

the formal idiom, the typography and the colour code

the layout principle

In this guideline you will find all the necessary information to

create digital online advertising according to the Audi Corporate

Design.

Introduction



The premium credentials of the Audi brand are reflected not

only in Audis own website, but also in Audi advertising on

third-party websites. Audi online advertising stands out from

the visual noise of conventional banners as a result of its

design. The thematic surroundings of the websites on which

Audi advertising appears are chosen carefully.

The design of online advertising is based on that of classic

advertising. Advertising messages are transposed to the

Internet and further developed in a way that corresponds

to the technical and aesthetic peculiarities of the medium.

This par ticularly applies to Audi advertising campaigns that

are used across different media.

For Audi, progressive technology is a matter of course.

The latest web technologies are used in the implementation

of online advertising.

Audi actively uses the medium of the Internet and makes use

of innovative ad server technologies. Audi exploits existing

advertising formats to optimum effect to ensure carefully

targeted and efficient advertising. This guideline describes

how to use online advertising.


e-tronEvery era has its technology.

The future belongs to Audi e-tron.

Highly e cient.

Basically, an Audi

like any other.

Highly e cient.

Basically, an Audi

like any other.


Basic design rules for Audi online advertising

The most important rules and advice for the design of online

advertising:

Positioning

Audi online advertising is positioned generously and exclu-

sively, for example as a banner, skyscraper, wallpaper or

content ad. The advertising should always be positioned

in an area that is immediately visible.

Online ending

Every item of animated Audi online advertising concludes

with the Audi online ending. As a fixed entity the ending

always includes the logo.

Style elements

The style elements asymmetry, dynamics, movement and

spaciousness stand for the Audi image and highlight the

visionary appearance of the advertising.

Cross-media communication

Online advertising should ideally be based on classic adver-

tising, transferring it to the web.

Browser compatibility

The advertising must not irritate the user nor be perceived

as distracting. Audi online advertising is displayed in a user-

friendly way on standard browsers and uses common plug-ins.

Animation

Animations should be used carefully and sparingly.


1 Formats

Audi online advertising can be divided into four different stand-

ard formats. The requirements in terms of online advertising

formats, functionality and file sizes are subject to ongoing

change and may differ depending on the ad server provider. For

this reason, in-depth consultation is required for each project.

1.1 Landscape format

Banners are the most widespread form of online advertising.

They appear in a broad range of formats.

Leaderboard banner

The leaderboard banner or superbanner is one of the most

frequently used banners, with a format of 728 90 px.

1-pixel border

So that the banner stands out clearly from the page back-

ground, the format may have a border comprising a black

1-pixel line.

1.2 Portrait format

Skyscrapers are vertical-format advertising spaces on the web,

which are normally positioned on the right next to the content

of a website.

Skyscrapers

Skyscrapers vary in height from 500 px to 800 px, and in

width from 120 px to 220 px. Standard sizes are usually

120 600 px and 160 600 px.

Design

Leaderboard banner

Skyscraper

Every era has its technology.


Every era has

its technology.

e-tron


1.3 Square format

Various advertising spaces in square format are used on the

web. One of the most frequently used square ad formats is

the content ad.

Content ad

A content ad is integrated into a websites editorial area and

is surrounded by editorial content on at least three sides.

Content ad size

Due to their positioning, the size of content ads depends

greatly on the width of the copytext. A frequently used format

is 300 250 px. For advertising spaces with a mouseover

function, the online ad may be enlarged to a size of up to

500 500 px.

Donts

Power layers, pop-ups and pop-unders also have a square

format but most users now find them very distracting.

Theseadvertising formats do not comply with the premium

credentials of Audi and should not be used if at all possible.

Content ad




1.4 Special formats

The web is undergoing constant development. As a result, new

advertising opportunities with special formats and new technical

processes are always appearing. Wallpaper, for example, has

now become a popular format.

Wallpaper

The special wallpaper format (or homepage takeover) com-

bines a banner and a skyscraper, with which the advertiser

frames almost the entire page.

Leaderboard banner/superbanner

Leaderboard banners/superbanners are normally in the

format 728 90 px (see section 1.1).

Skyscrapers

Skyscrapers vary in size. Skyscrapers with dimensions from

120 600 px to 220 600 px are often used for wallpaper.

1.5 Sources of information

Because the opportunities for interactive advertising spaces

on the web are being continually developed, close collaboration

with the relevant project contact personnel at Audi and the rele-

vant marketing agencies is recommended.

1.6 Further information

Information required by law and other information such as

opening times must be provided and included in the online

advertising.

Donts

In the case of animated online advertising, the Audi logo is not

integrated into the actual online advertising but only appears

in the online ending.

Wallpaper

Donts: Direct integration of the logo into

the online advertising


The Audi online ending is derived from the Audi products

and leads via the visually distinctive dimensions perceptive,

influential and imaginative to the brand logo.

The Audi online ending is compulsory for all countries. The

templates for the corresponding country versions are provided

centrally. If required, please send us an e-mail using the contact

form on the Audi Corporate Design portal. You will then receive

the appropriate country version from AUDI AG, in the ending

formats that you require.

The online ending concludes all Audi online advertising with a

standard strapline. Visually, it is closely related to the Audi TV

ending used worldwide and thus ensures standardised and pre-

mium-quality communication of the Audi brand across all media.

2.1 General use

Every item of animated Audi online advertising concludes with

the Audi online ending. These files may not be modified. All

advertising messages are faded into the online ending using the

colours black or white. When online advertising messages are

created, the maximum file sizes stipulated by the relevant ad

server provider must be adhered to.

The rings and Audi (without the claim) may be used for par-

ticularly small formats.

If sound is added, the heartbeat must be used for the online

ending. The sound file is available as a separate sound track to

download from the CD portal.

Lorem praesse facin hendio od magna

augait laoreet ueriliquat.

Audi online ending, fade from black

Audi online ending, fade from white

2 Audi online ending

10

Corporate Design Advertising Online Advertising AUDI AG 11/2010

Audi online ending Size in pixels File name

Teaser 135 106 Teaser_135106.fla

NavBox 150 110 NavBox_150110.fla

FlashLayer 400 400 FlashLayer_400400.fla

Content-Ad 300 250 ContentAd_300250.fla

MedRectangle 300 250 MedRectangle_300250.fla

MaxiAd 640 480 MaxiAd_640480.fla

TandemAd728 90

400 400

TandemAd_72890.fla

TandemAd_400400.fla

Banner 728 90 banner_72890.fla

Skyscraper 160 600 skyscraper_160160.fla

Wallpaper778 100

160 600

wallpaper_778100.fla

(Ending in banner)

Wallpaper1004 90

132 600


(Ending in banner)

Wallpaper728 90

160 600

wallpaper_72890.fla

(Ending in banner)

Wallpaper809 110

200 600


(Ending in banner)

Wallpaper855 90

165 600

wallpaper_85590.fla

(Ending in banner)

Audi online ending download2.2 Ready-made file formats

Ready-made files are available in the Audi Corporate Design por-

tal for formats that are used particularly frequently. The follow-

ing steps for integrating the ending must be observed:

Step 1: Download

Download the appropriate template for the ending of your

online advertising from the CD portal: Advertising | Online

Advertising.

11


Step 2: Integration

In order to be able to play the ending in your film you must

integrate the file called ending_mc_ 000000.fla in your

Flash film.

Create a Flash file with identical dimensions and the same

frame rate (25.0 bps).

Open both documents alongside each other for a better

overview.

Copy the folder called audi flashbanner ending from

the library of the template file.

Paste this folder into the library of your own banner file.

In the main scene of your file, create a new level for the

ending script, which is above the other levels, and insert

a key image on the last frame.

Copy the key image on the first frame including the script

from the template file and paste it into your file on the last

frame of the script level.

When it is played, the banner will now stop automatically

at this point and the ending will start. Then the animation

will start again from the beginning.

After the last frame it is possible to change both the interval

until restart and the starting position.

The design of special formats

Special formats must be adapted accordingly and approved by

Audi. If required, please send us an e-mail using the contact

form on the Audi Corporate Design portal. You will then receive

the appropriate ending format from AUDI AG.

Copy folder from the template

Copy frame with script from the template

Paste folder into your file

Paste frame with script into your file

12


Banner_72890

Wallpaper_778100

Wallpaper_100490ContentAd_300250

NavBox_150110

Teaser_135106MaxiAd_640480

TandemAd_400400

Skyscraper_160600

2.3 Overview of ready-made file formats

Wallpaper_72890 Wallpaper_85590

Wallpaper_809110

13


a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z0 1 2 3 4 5 6 7 8 9 "$01V%rRQSU# % $ + - = < > * ! ? @ &

a b c d e f g h i j k l m n o p q r s t u v w x y z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

0 1 2 3 4 5 6 7 8 9

"$01V%rRQSU# % $ + - = < > * ! ? @ &

3.1 Typography

In online advertising, Audi typography is generally set flush left

and ragged, and positioned top left in the format. In the case

of animated banners the type area borders are 20 px. Static

banners are divided into two groups. In the case of large banners

the type borders are 15 pixels, and 10 pixels for small ones.

Headline offsetting is still available as an option. It may only be

used if it suits the content. Setting entire words in capitals is

not permitted. The typography is always set in black or white.

Audi Type, a sans-serif typeface that is particularly easy to read,

was created exclusively for Audi. Audi owns all licence rights.

It can be used free of charge worldwide for digital media, and

is used in various font styles: Audi Type Extended Normal, Audi

Type Extended Bold, Audi Type Regular and Audi Type Bold.

Headlines

Headlines are inserted as vector graphics. This is carried out

with the predefined font sizes and styles, Audi Type Extended

Normal and Audi Type Extended Bold. The font size of the

headlines depends on the size of the banner and the campaign

in question. The minimum font size is 10 pt (at 72 dpi), the

line-spacing is 130 % of the font size (smoothing: rounded).

Headline font, Audi Type Extended Bold

Headline font, Audi Type Extended Normal

3 Basic elements

Positioning of a flush-left headline in animated banners

(detail view)

Positioning of an indented headline in animated banners

(detail view)

Headline in the format

Indented headline in the format

20 px

20 px

20

px

20

px

p

p

14


Copytext

Depending on the file format, copytext may be used as graphic

text (picture or font/vector graphics with Flash) or in excep-

tional cases as HTML text. There are predefined font sizes

and styles for copytext. As graphic text: Audi Type Regular or

Audi Type Bold styles. The minimum font size is 10 pt (at

72 dpi), the line spacing is 130 % of the font size (smoothing:

rounded).

In exceptional cases the Verdana font can be used as HTML

text (smoothing: none). The minimum font size is 10 pt.

The colour of the copytext is determined by the background.

Black text is used on light background colours, and white

text on dark backgrounds. Copytext is always set flush left

in ragged paragraphs.

Production notes:

A suitable DTP program, e.g. Photoshop from version 6 upwards,

should be used for designing and generating headlines in GIF

format.

a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z0 1 2 3 4 5 6 7 8 9fi fl , . : ; " ' ` / | \ ( ) [ ] _ # % $ + - = < > * ! ? @ &

Verdana Regular (to be used only in exceptional cases)

Copytext, Audi Type Regular

Copytext, Audi Type Bold



0 1 2 3 4 5 6 7 8 9

: ; " ' ` / | \ ( ) [ ] _ -

# % $ + - = < > * ! ? @ &



0 1 2 3 4 5 6 7 8 9

: ; " ' ` / | \ ( ) [ ] _ -

# % $ + - = < > * ! ? @ &

15


Colour Web RGB

Audi Aluminium Silver #999999 153/153/153

Audi Red #CC0033 204/0/51

Audi White #FFFFFF 255/255/255

Black #000000 0/0/0

Dark Grey #434C53 67/76/83

Medium Grey #6D7579 109/117/121

Light Grey #B0B6B8 176/182/184

Pale Grey #D5D9D8 213/217/216

3.2 Colours

Audi colour code

With regard to the Audi colour code, the brand code pure &

clean signifies a reductive approach based on primary colours

that determine the overall appearance of all communication

media. This ensures a uniform, clear appearance.

Audi Aluminium Silver

The defining Audi colour is Aluminium Silver. It communicates

the sophistication and technological excellence of the products

(vehicles).

Download CD portal:

Basic elements / colours / Audi colour gradient

Audi Red

Audi Red is used primarily for the Audi logotype and for subtle

highlights (such as link arrows). It is a visual representation

of the brand value sporty. Audi Red must not be used for text.

White and black

Large areas of white are used as backgrounds and in three-

dimensional designs for surfaces. Black is primarily used

for text. The two colours white and black represent discerning

style and provide a contrast to Aluminium Silver.

RGB gradient

Audi colour code

16


In addition to the use of the Audi basic elements in a way that

is appropriate for the medium concerned, online advertising

makes use of pictures, illustrations and animations for the

design of advertising messages.

4.1 Pictures

The formal idiom pure & clean: This basic principle is

expressed in clear, precise perspectives. The formal idiom

conveys an open, positive basic attitude, with a strong

claim to modern aesthetics.

CAD-generated images, for example from Audi dealer adver-

tising, may be used in addition to colour photographs.

The pictures cover the entire area.

Attention must be paid to careful handling of pictures. Prod-

ucts can be illustrated in full, in part or in detail. The choice

of picture details must be appropriate. The rings on the vehicle

must not be bled off.

The stationary vehicle should preferably be depicted from

the front, from the side or directly from the rear (clear,

precise perspectives).

4.2 Illustrations

Illustrations in the form of line drawings may be used

in addition to pictures. Illustrations of people should be

avoided.

Full view

4 Extended design elements

Partial view

Detail

Illustrations

17


4.3 Animations using film-style presentation

The animation options for online advertising are many and varied.

Animations are used selectively to present the advertising mes-

sage in an exciting and dynamic manner that complies with the

premium claim. Audi online advertising focuses on realistic and

dynamic animated sequences.

Animating pictures

If images from current Audi campaigns are used as the tem-

plate for animations, it is important to avoid imitation film

sequences by animating individual image components. These

are usually still recognisable as fakes and so do not comply

with the quality and premium credentials of Audi. If animations

of this kind are used, they should be as realistic as possible.

If pictures (stills) are used, the following animation techniques

may be employed:

Movement

Movement can be portrayed by using tracking shots of the

picture motifs. The correct picture section provides the neces-

sary excitement.

Drama

Dramatic effects can be created by zooming into and out

of pictures. Details can play a key role when this technique

is used.

Fades

Pictures or coloured areas can be faded into one another.

Donts

Individual picture components (e.g. tyres or lights) are only

animated, rotated or zoomed in on separately if a realistic over-

all impression can still be created. If the effect is of an unreal-

istic imitation of real-life pictures, this form of animation should

not be used.

Animating pictures using tracking shots and

zoom

18


Integrating films

Audi films and film sequences may be integrated into online

advertising. If films are used, the scenes should be exciting

and of a high quality in terms of production techniques.

Animating typography

In the same way as the deliberate use of pictures, the look of

Audi online advertising is characterised by the sophisticated

use of typography. The consistent use of fonts gives the brand

a uniform and unmistakable look.

Text may be faded in and out. Fading should be dynamic.

Zooming into and out of headlines is permitted. Zooming

should be dynamic. Optimal legibility must be guaranteed.

The size difference when zooming into and out of text

should not be more than 160 %.

Text should remain stationary for a few seconds. During this

time, the text must not tremble or flicker.

Donts

Text must not move constantly. It is always still for a few

seconds.

Rapid transitions to text or fading do not create an impres-

sion of high quality. Transitions must be fluid and dynami-

cally coordinated with one another.

Zoom effects that are too rapid or extreme do not comply

with premium quality. They should be avoided.

Fading in text Fading out text Zooming text

p



p



p

pp

e-tron

p

e-tron

19


5 Static online advertising

Static online advertising includes e-mail straplines and static

banners.

5.1 e-mail straplines

Format

The size of the e-mail strapline is fixed at 560 px 101 px.

Background

e-mail straplines should preferably have a background (e.g.

the predefined RGB gradient for digital media). In the case

of white backgrounds or background motifs that are not bled

off, the strapline is surrounded with a 1-pixel black line.

Type area

The type area borders are 10 pixels all round. All typographical

elements are positioned within the type area.

Rings with claim / Rings with logotype

The rings with claim or the rings with logotype are positioned

at the bottom right in the format. The height of the rings

is 20 pixels. The baseline of the Audi claim is aligned on the

lower edge of the type area. (The rings are positioned at one

ring thickness outside the type area.) The rings with logotype

are either at a minimum distance of one ring-thickness from

one another or the logotype is set flush left in the type area.

Rings and claim or rings and logotype are to be provided with

a protected zone the height of one ring inside the type area.

Detailed descriptions about the use of the logo and

logotypes can be found in the relevant guidelines on the

CD portal.

Specimen e-mail straplines

Static banner

xxxxxxxxxxxxxxxxxx

Wechseln Sie jetzt auf Sommer

Audi

Original Zubehr

Machen Sie Ihren Audi jetzt

noch sportlicher ...

Mit den Kleinen auf groer Fahrt.

Audi

Original Zubehr

Hier erfahren Sie mehr ber die

Audi Kinderwelt und Kindersitze.

Ihre ganz persnliche Premiere.

Jetzt Probefahren.



e-tron

10 px 10 px

20 px

10 px

Lorem Ipsum

Dimensions of e-mail straplines

10 px 10 px

10 px

20 px

10 px

10 px

Audi

Original Zubehr

10 px

20 px

10 px

10 px

Audi

Original Zubehr

20


5.2 Static banners

The type area and the size and position of the logo are pre-

defined in the case of static banners.

Format

Static banners are in principle divided into two groups.

Large banners (> 300 300 px), which include maxi-ads

or wallpaper, for example

Small banners ( 300 300 px), which include content ads,

for example, as well as the extremely narrow banners

(skyscrapers)

MaxiAd_640x480

Large banners Small banners



Skyscraper_160x600

e-tron

The future belongs

to Audi e-tron.

Every era

has its

technology.



ContentAd_300x250

Wallpaper_855x90

The future belongs

to Audi e-tron.

Every era

has its

technology.

e-tron

21


MaxiAd_640x480

Skyscraper_160x600





ContentAd_300x250

Wallpaper_855x90

The future belongs

to Audi e-tron.

Every era

has its

technology.

e-trone-tron

The future belongs

to Audi e-tron.

Every era

has its

technology.

e-tron

The future belongs

to Audi e-tron.

Every era

has its

technology.

Audi

Geschftsfeld

10 px

20 px

15 px

15 px

29 px

29 px

10 px

20 px

Type area

- Large banners (> 300 300 px)

The type area borders are exactly 15 pixels on each side

- Small banners ( 300 300 px)

The type area borders are exactly 10 pixels on each side

All typographical elements are located within this frame.

Rings with claim / rings with logotypes

Rings with the claim or with a logotype are always to be used

on static banners.

Large banners: The height of the rings is exactly 29 px.

Small banners: The height of the rings is exactly 20 px.

In square or rectangular banners the logo is always located

at the bottom of the format, on the right. The baseline of

the brand claim, Vorsprung durch Technik, is aligned on the

lower edge of the type area. (The rings are positioned at

one ring thickness outside the type area.) In the case of narrow,

vertical-format banners (skyscrapers), the version of the

logo with the claim below the rings is used, and is positioned

at the bottom left of the format. The baseline of the brand

claim Vorsprung durch Technik is on the bottom edge of the

type area. (The rings are positioned on the left, at one ring

thickness outside the type area.) In the case of banners in

wallpaper format, the logo is at the top right of the format.

The rings are positioned at one ring thickness outside the type

area. Rings and claim or rings and logotype are to be provided

with a protected zone the height of one ring inside the type

area.

Detailed descriptions about the use of the logo and

logotypes can be found in the relevant guidelines on

the CD portal.

22


Interactive elements

Basic link

Text link

Passive

RolloverPassive

Rollover

Passive

Promotion link

Rollover

Links on dark layers (e.g. small layers, functional layers)

The standardised design of interactive elements

such as links, icons, buttons and input boxes ensures

that the Digital Media have a consistent appearance.

6.1 Basic link

Simple link to information and services of no special

importance.

Verdana Regular, 10 pt, line spacing: 12 pt

Normal: #000000/Rollover: #FFFFFF

Arrow element: #CC0033

6.2 Text link

Simple link to information and services of no special

importance.


Normal: #000000, underlined/

Rollover: #000000, not underlined

6.3 Links on dark layers


Normal: #FFFFFF/Rollover: #B4B4B4

Arrow element: #CC0033

6.4 Promotion links

Promotion links are used in order to link to important,

website-specific applications, tools etc. (e.g. configura-

tor, Audi tv, myAudi etc.). Audi Type Extended Bold, 11 pt

Normal: #FFFFFF/Rollover: #CECECE

Note:

The Audi web links are available to download from

the CD portal under the heading Digital Media/Basic

Elements.

6 Links

23


7.1 Summary of icons

A few frequently occurring functions are also given

icons. Each of these is made up of grey (#41464C) and

red (#CC0033) pixel elements.

The purpose of the list of icons is to provide an overview.

It is not complete and merely represents the current

development status of the icons.

Note:

The Audi web icons are available to download from

the CD portal, under the heading Digital Media/Basic

Elements.

360-degree view icon

On wish list (shop) icon

Exterior view icon

Edit icon

Order icon

Bookmark icon

Details icon

Print icon

Recommend icon

Find dealer icon

Embed into the blog icon

Saving onto myAudi icon

Interior view icon

Configure icon

Delete icon

Send message icon

Change note icon

PDF icon

Save icon

Search icon

Event update notification icon

Video icon

Wallpaper icon

Reset icon

7 Icons

24


8 Buttons and input boxes

8.1 Basic button

A basic button is used when a simple function or a system

activity is carried out.

Verdana Bold, 10 pt

Text colour: #FFFFFF, button colour on rollover: 15 % darker

8.2 Basic button Plus

The Basic button Plus can also be used without a button

text for self-explanatory functions (e.g. Search).

Arrow colour: #FFFFFF, button colour on rollover: 15 % darker

8.3 Process button

The Process button displays a multi-stage process

(e.g. registration). The Process button may also appear

in the colour red.

Verdana Bold, 10 pt

Text colour: #FFFFFF, button colour on rollover: 15 % darker

8.4 Call-to-action button

The Call-to-Action button prompts the user to launch a

particular action (e.g. start configurator from 360-degree

view). The Call-to-Action-button is always a different colour

from the Basic button.

Verdana Bold, 10 pt, text colour: #2B2F33, text colour on

rollover: #FFFFFF, button colour on rollover: 15 % darker

Verdana Bold, 10 pt

Text colour: #FFFFFF, text colour on rollover: #FFFFFF

Button colour on rollover: 15 % darker

01

02

03

Passive

Passive

Passive

Basic button

Basic button Plus

Process button

115

Rollover

Rollover

Rollover

21

21

21

68

90

20

11

21

91

Passive

Passive

Passive

Rollover

Rollover

01

02

03

Call-to-action button

Rollover

21

152

25


8.5 Full screen button

The full screen button opens elements in full-screen mode.

Button colour #41464C/Rollover #5D6267

8.6 Scroll arrows in full-screen mode

With gallery images in full-screen mode, scroll arrows

appear at the edge of the screen on mouseover, with which

the user can switch between the images.

Arrow colour: #FFFFFF

Button colour: #000000, 80 %

8.7 Close button in full-screen mode

Verdana Regular, 9 pt

Text colour: #DBDBDB

Rollover text colour: #FFFFFF

Button colour: #FFFFFF

X-colour: #CC0033

Note:

Backgrounds for buttons are available to download

from the CD portal, under the heading Digital Media/

Basic Elements.

Passive

Passive

Previous image

Rollover

Next image

Open / Close Area button

Scroll arrows in full-screen mode

Close button in full-screen mode

24

31

31

30

11

11

Rollover

26


8.8 Input boxes

Boxes on forms are always aligned below one another.

The space beside them is reserved for error messages.

Verdana Bold, 10 pt, #000000

Verdana Regular, 10 pt, #000000

Height of input boxes and dropdowns: 16 pt

In the case of error messages, a red frame with an excla-

mation mark is placed around the box in question.

As soon as the user clicks in the box or the on the excla-

mation mark, a note appears beside it on the right,

explaining what form of input is expected.

Verdana Bold, 10 pt

Text/frame colour: #CC0033

If there is no room available beside a box, the exclama-

tion sign box appears below it together with the error

message. The following content is moved down by the

corresponding height.

01

02

03

04

Input boxes error message

01 02

03

04

10

10

Input boxes

Dropdowns

Checkboxes Radio buttons

Input boxes error message

27


Checklist for briefing and release

Audi online ending Animated Audi online advertising concludes with the Audi online ending.

The ready-made file formats are used for particularly popular formats.

New formats (special formats) are made available by Audi on request.

Typography The specified font styles and font sizes have been complied with.

All the typography is set in black or white.

Colours The Audi primary colours Audi Aluminium Silver, Audi Red, white and black

are emphasised in the images / the animations.

Pictures The selected picture details are convincing and appropriate.

Animations Animations are used sparingly and selectively.

Pictures (stills) are animated using tracking shots (movement of picture sections),

zoom and fading techniques.

The type area borders are 20 pixels on all sides.

Typography does not move constantly.

The size difference when zooming into and out of text is not more than 160 %.

Text is always stationary for a few seconds before and after an animation. It does not

tremble or flicker.

Static online advertising The logo is positioned prominently in the location defined for the format.

The layout corresponds with the Audi design parameters.

Type area borders (10 px or 15 px) and logos (20 px or 29 px) are the correct size.

Interactive elements The standardised design of interactive elements such as links, icons, buttons and

input boxes ensures that the Digital Media have a consistent appearance.

The interactive elements are used in accordance with their applications.

The templates from the CD portal have been used for any interactive elements.

Form boxes are aligned below one another so that there is room on the right for

an error message if required.

28


You can obtain digital templates and additional information

from the Corporate Design Portal on the Internet.

URL: www.audi.com/cd

User name: audiuser

Password: marketing

Section: Advertising

Responsible for content:

AUDI AG

I/VS-21

Brand Development/Corporate Identity

D-85045 Ingolstadt

Note:

The reproduction of colours may vary depending on the output

device used. The colours of the illustrations are not binding,

and in some cases illustrations are shown reduced or enlarged.

Downloads General information

/ColorImageDict > /JPEG2000ColorACSImageDict > /JPEG2000ColorImageDict > /AntiAliasGrayImages false /CropGrayImages false /GrayImageMinResolution 150 /GrayImageMinResolutionPolicy /OK /DownsampleGrayImages true /GrayImageDownsampleType /Bicubic /GrayImageResolution 144 /GrayImageDepth -1 /GrayImageMinDownsampleDepth 2 /GrayImageDownsampleThreshold 1.00000 /EncodeGrayImages true /GrayImageFilter /DCTEncode /AutoFilterGrayImages true /GrayImageAutoFilterStrategy /JPEG /GrayACSImageDict > /GrayImageDict > /JPEG2000GrayACSImageDict > /JPEG2000GrayImageDict > /AntiAliasMonoImages false /CropMonoImages false /MonoImageMinResolution 300 /MonoImageMinResolutionPolicy /OK /DownsampleMonoImages true /MonoImageDownsampleType /Bicubic /MonoImageResolution 432 /MonoImageDepth -1 /MonoImageDownsampleThreshold 1.00000 /EncodeMonoImages true /MonoImageFilter /CCITTFaxEncode /MonoImageDict > /AllowPSXObjects true /CheckCompliance [ /None ] /PDFX1aCheck false /PDFX3Check false /PDFXCompliantPDFOnly false /PDFXNoTrimBoxError true /PDFXTrimBoxToMediaBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXSetBleedBoxToMediaBox true /PDFXBleedBoxToTrimBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXOutputIntentProfile (Coated FOGRA27 \050ISO 12647-2:2004\051) /PDFXOutputConditionIdentifier (FOGRA27) /PDFXOutputCondition () /PDFXRegistryName (http://www.color.org) /PDFXTrapped /False

/CreateJDFFile false /Description > /Namespace [ (Adobe) (Common) (1.0) ] /OtherNamespaces [ > > /FormElements true /GenerateStructure false /IncludeBookmarks true /IncludeHyperlinks true /IncludeInteractive false /IncludeLayers false /IncludeProfiles false /MarksOffset 6 /MarksWeight 0.250000 /MultimediaHandling /UseObjectSettings /Namespace [ (Adobe) (CreativeSuite) (2.0) ] /PDFXOutputIntentProfileSelector /UseName /PageMarksFile /RomanDefault /PreserveEditing true /UntaggedCMYKHandling /LeaveUntagged /UntaggedRGBHandling /LeaveUntagged /UseDocumentBleed false >> ]>> setdistillerparams> setpagedevice

Audi GL Onlineadvertising

Documents

Transcript of Audi GL Onlineadvertising