Audi GL Onlineadvertising

Audi online advertising
Corporate Design Guideline

Corporate Design | Advertising | Online Advertising
As at: 11/2010
2
Corporate 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
3
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
4
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-tron
Every 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.
5
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.
6
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.
e-tron
7
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
e-tron
8
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
9
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
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
TandemAd
728 90
400 400
TandemAd_72890.fla
TandemAd_400400.fla
Banner 728 90 banner_72890.fla
Skyscraper 160 600 skyscraper_160160.fla
Wallpaper
778 100
160 600
wallpaper_778100.fla
(Ending in banner)
Wallpaper
1004 90
132 600
(Ending in banner)
Wallpaper
728 90
160 600
wallpaper_72890.fla
(Ending in banner)
Wallpaper
809 110
200 600
(Ending in banner)
Wallpaper
855 90
165 600
wallpaper_85590.fla
(Ending in banner)
Audi online ending download 2.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_100490 ContentAd_300250
NavBox_150110
Teaser_135106 MaxiAd_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 Z
0 1 2 3 4 5 6 7 8 9

, . . : ; " " ' ' " ' ` / ] \ ( ) J | _ - > - -
# % $ + - = < > * ! ? @ &
0 1 2 3 4 5 6 7 8 9

, . . : ; " ' ' ` ` / | \ ( ) ] | - - -
# % $ + - = < > * ! ? @ &
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
2
0

p
x
2
0

p
x
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.
0 1 2 3 4 5 6 7 8 9

, . : ; " ' ` / | \ ( ) [ ] _
# % $ + - = < > * ! ? @ &
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
p p
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
xxxx xxxx xxxx xx xxxx
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
e-tron
Skyscraper_160x600
e-tron
The future belongs
to Audi e-tron.
Every era
has its
technology.
e-tron
ContentAd_300x250
Wallpaper_855x90
The future belongs
to Audi e-tron.
Every era
has its
technology.
e-tron
21
MaxiAd_640x480
Skyscraper_160x600
e-tron
e-tron
ContentAd_300x250
Wallpaper_855x90
The future belongs
to Audi e-tron.
Every era
has its
technology.
e-tron
e-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
Rollover Passive
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

Audi GL Onlineadvertising

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Audi GL Onlineadvertising

Diunggah oleh

Hak Cipta:

Format Tersedia

Audi online advertising

Corporate Design Guideline

Mit den Kleinen auf groer Fahrt.

Ihre ganz persnliche Premiere.

Anda mungkin juga menyukai