audi style guide
Post on 12-Mar-2015
3.447 Views
Preview:
TRANSCRIPT
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Introduction and Overview 03
Site Organization 04
Primary layout and grid structure 06
Navigation overview 08
Global navigation 09
Regional navigation 11
Branding area and utility navigation 12
Content area components 13
Logo usage 14
Typography 15
Scrolling Guidelines 17
Graphic Elements 18
Color overview 19
Image usage 20
Further guidelines 24
Content voice and tone 25
Tecnical recommendations 27
Example layouts 28
Page 2
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Introduction
Audiusa.com Graphic Guidelines describes a design system that has
evolved through careful consideration of user needs and the character-
istics of the Audi brand. It provides a set of rules designed to maintain
consistency and simplicity through the site and give enough flexibility
for growth and evolution.
The purpose of providing graphic guidelines is to ensure that develop-
ment of Audi of America websites is based on the standards developed
for audiusa.com. This document should be used by all Audi partners.
For general internet guidelines which are not covered in this docu-
ment, refer to the Internet Style Guide which can be found at:
http://www.audi-marketing.com
user name: importer
password: marketing
Click on the ‘Importer’s Area’ link and then the ‘Internet Style Guide’
link which appears on the left.
Overview
While retaining the strengths of previous audiusa.com websites, the
new redesign will make the following enhancements to the user expe-
rience:
Welcome the uninitiated
Better serve visitors who are drawn to the brand but are unfamiliar
with the product line
Distinguish the families
Affirm and differentiate each model’s unique identity
Surface valuable content
Help visitors find what they need, when they need it
Extend the Audi experience
Help visitors engage with the brand more deeply
Page 3
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Site organization
The audiusa.com site structure—the broad categories into which content and
functionality fit—emerges from a synthesis of the current site structure, the
Audi AG style guide, and Sapient’s experience and expertise with OEM web-
sites. The site structure is designed to support users through the entire
process of buying and owning a car; from becoming aware of a brand, to
researching the purchase of a vehicle, owning and maintaining that vehicle
and, eventually, to starting that life cycle anew. Within this broad framework,
the new Audiusa.com strives to permit a flexible, comparative exploration of
features and content.
The Experience Audi and About Audi sections are designed as a preview or
introduction to the Audi brand. It provides insight into the company, what
things are important to Audi, and what qualities they strive to engineer into
their vehicles. The purpose of these sections is to establish a correlation
between the values and principles of Audi and those of the user.
With this connection established, users can investigate the Vehicles and Pre-
owned section to learn more about the specific Audi that meets their needs.
The Vehicles area is the centerpiece of the site, by far more important than
any other site section. Accordingly, every family and model home page is
accessible as part of the global navigation (see p. 9). A full model line page
also exists as part of the Vehicles section.
In expanding the information architecture of the new Audiusa.com, it is
important to be mindful of the broad areas of the purchase life cycle and
sensitive to the cross-linking strategies both within the Vehicles area and
between the Vehicles and Brand Preview areas. Above all, the information
architecture is designed to deliver a personal, unique, and responsive
experience, and any expansion or modification should be made with an
eye toward that goal.
Crucial to the site, the full line page previews all of the models and families
in the Audi line; it serves as a starting point for users unfamiliar with the
product offering. The jump module represents another important aspect of
the Vehicles section. It provides convenient cross-links to corresponding
pages across the various models. For example, from the A4 1.8T specifica-
tions page, a user could jump directly to the specifications page for any
other vehicle.
Of course, Audi vehicles express the brand, and the brand positioning
describes the vehicles. As such, there is a significant amount of cross-linking
between the Brand Preview area (i.e. Experience Audi, About Audi) and the
Vehicles area. For example, from the page that tells the story of A4 per-
formance, users can navigate directly to the page within the Experience
Audi section that explains why and how Audi values performance. For sim-
plicity and consistency, the stories about the vehicles are told in the same
terms as the stories told within the Brand Preview area. These terms map
roughly to the Audi brand DNA: advanced technology, design, performance,
and emotion.
The My Audi section offers content and tools useful for repeated use of the
audiusa.com site, such as the ability to save configurations and compar-
isons, and surfacing relevant information about an Audi owner’s vehicle.
Currently, the suite of tools available for owners is quite limited. As these
features become available, they should be located within the My Audi area
of the site.
Page 4
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Site organization
The diagram at right illustrates the overarching organizational model of the
new audiusa.com. The blue circles represent the phases of the purchase
life cycle; below each circle is a description of the site sections that corre-
spond to that life cycle phase.
Note: The pages listed are a representative sample of pages and function-
ality and do not include all pages on the site.
Page 5
Site Sections
Experience Audi
Audi DesignAudi PerformanceAudi TechnologyAudi SafetyQuattroHeritageFutureMotorsports
About Audi
Press ReleasesCareer SearchEventsNews and Awards
Site Sections
Vehicles
Audi Full Model LineFamily (e.g. A4) DesignFamily PerformanceFamily TechnologyFamily SafetyModel Features and SpecificationsGalleryConfiguratorPayment EstimatorModel News and AwardsCompetitive Comparison
Pre-owned
Nation Pre-owned Search
Financial Services
Dealer LocatorContact AudiBrochure RequestSite IndexPrivacy Policy Usage AgreementAudi Canada
Site Sections
My Audi
Sign in/RegisterRoadside AssistanceWarranty InformationHelpful Tips
Shop the Collection
Cross Linking
Utilities
Brand PreviewBrand Preview VehiclesVehicles
UtilitiesUtilities
OwnershipOwnership
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Primary layout and grid structure
The primary grid and layout forms the foundation of every page on the
audiusa.com website.
The smaller grid unit is 20 x 12 pixels. There is also a larger grid unit meas-
uring 80 x 48 pixels.
The visual page templates are based on 5 columns. The first 3 columns
are 160 pixels wide. The 4th column is a variable column depending on
screen resolution and browser width. The 5th column, reserved for global
navigation is 150 pixels wide.
Page 6
20
12
80
48
160 160 160 variable 150
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Primary layout and grid structure
There are 5 layout variations, labeled A through E to the right. All pages
on the site conform to one of these five layouts. The blue denotes areas
which are universal and global to all pages.
As well, t here are 5 distinct content areas on the site:
• Branding area
• Global navigation
• Regional navigation
• Utility navigation
• Main content area
Icons representing these 5 areas will appear where appropriate on the fol-
lowing pages to indicate page location.
Page 7
A.
B.
C.
D.
E.
Branding area
Main Content area
Utility navigation
Global navigation
Regional navigation
Layout variations Distinct content areas
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Navigation overview
Three levels of navigation are available to give users access to content on
the site. The first level of links is global navigation, which appears on
every page of the site and gives users access to the high-level sections of
audiusa.com. Regional navigation contains links that are related to a sec-
tion of the site and remain consistent within that particular section.
Tertiary navigation appears on particular pages that require further links
to lower level pages.
Page 8
Global Navigation Regional Navigation Tertiary Navigation
Contains: Links related to the entire site
The global navigation, in its placement and
its contents, remains consistent across ev-
ery page on the site. It contains the highest
and broadest level of links such that users
can access any section of the site from the
global navigation.
In order to ensure the usefullness and im-
portance of this area of navigation, links
should be kept to a minimum. No further
links should be added to this section.
Contains: Links related to a section of the
site
Appearing to the left of global navigation,
regional navigation contains links specific
to a particular section of the site. For exam-
ple, the regional navigation for the A4 1.8T
section of the site would contain links to
the configurator, specification page, media
gallery, etc.
Contains: Links related to a particular page
of the site
The third level of navigation on the site is
tertiary navigation which contains links re-
lated to the particular page on which they
appear. The tertiary navigation appears in
the third column of the content area of the
page and is contained within a light green
color field.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Global navigation
Appearing on the right side of every page, the global navigation is the
primary means through which the user accesses the site. The vehicle sec-
tion with a list of all Audi family lines is featured prominently in a darker
background. Rolling over a family name, such as “A4” reveals a second-
ary list of models to the left. From this discrete vehicle area, a user can
access any family or model in the website. Other sections of the site
appear on the lighter background below the vehicle module.
Note:
The global navigation, with its highlight and rollover states, is built using
DHTML. Flash, or any other tool requiring a browser plug-in, should not
be used to compose the global navigation.
Page 9
142
140
50
10
27
10
8
15
22
21
2
4
4
150
94
105
4
16
48
15
5
4
R178 G178 B178 / B2B2B2
R232 G232 B232 / E8E8E8
R210 G210 B210 / D2D2D2
Vehicle Text
Typeface: Univers RomanPoint Size: 10pt (20 Tracking)Leading: 22ptColor: R65 G65 B65 / 414141
Model RolloverText
Typeface: Univers RomanPoint Size: 10pt (No Tracking)Leading: 16ptColor: R103 G103 B103 / 676767
Global Text
Typeface: Univers RomanPoint Size: 10pt (No Tracking)Leading: 16ptColor: R103 G103 B103 / 676767
Utility Text
Refer to Link Style 2
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Navigation in the context of a page
The examples to the right demonstrate how the model rollover navigation
reveals to the left of the global navigation. On pages where there is
regional navigation, the model menu appears on top of this area of navi-
gation.
Page 10
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Regional navigation
Links specific to a certain section of the site are contained in the regional
navigation which always appears to the left of the global navigation.
Menu option links are always anchored ten pixels from the content area.
However, the color field, which contains the regional navigation, is vari-
able and extends to fill the gap between global navigation and the con-
tent area. The size of this gap is determined by the width of the user’s
browser.
Page 11
Variable(130 pixel minimum)
240
18
10 10
64
The width of the regional navigation area is variable and
is determined by the width of the user's browser. The
background color field and hairlines extend to fill the navi-
gation area. Menu options remain anchored to the left.
Menu Option Text
Typeface: Verdana
Point Size: 9pt (No Tracking)
Leading: 18pt
Color: R255 G255 B255 / FFFFF
R152 G152 B152 / 989898
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Branding area and utility navigation
The top 72 pixels of the page are devoted to the header area which con-
tains a large expanse of white space and the Audi Logo. This space gives
even the most content-rich pages an area to breathe, and also allows for
the Audi logo to appear in a consistent location throughout the site. A
480x12 dark gray bar appears at the top left corner, anchoring the page
and giving it definition.
The utility navigation contains helpful links which are important enough
to be on every page, but do not need to be featured prominently. Since
the site does not use frames, this navigation may fall below the fold if the
page grows long. In this instance, the user would have to scroll to view
these links.
Page 12
480
20
120 12024020
6
10
R103 G103 B103 / 676767
R204 G204 B204 / CCCCCC
R237 G24 B70 / ED1846
Footer Text
Typeface: Verdana
Point Size: 9pt (No Tracking)
Color: R103 G103 B103 / 676767
12
480 134
60 72
20
20
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Content area components
Page 13
Page Title
Primary Image
Text Style 2
Story Headline
Link Style 2
Regional Title
Logo
Secondary Image
Color Field
Feature Headline
Text Style 1
Link Style 1
Hairlines
Feature area
The feature area contains large imagery and general and
high-level copy for the subject of the page. The prominence
of imagery and text in this area allows for the emotional and
evocative qualities of the Audi brand to emerge.
Secondary area
The secondary area of the page can accommodate a variety
of content such as short feature stories, news articles, and
promotions. The content in this area can be more informa-
tional. Time-sensitive promotions should appear here.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Logo usage
The logo on the audiusa.com site is a minimum of 60x38 pixels and
always appears on the upper-right corner of pages (refer to p.8). Where
possible, it should be placed close to global navigation and remain in a
consistent location from page to page. The logo should be surrounded by
large amounts of white-space as to avoid clutter and noise around the
mark.
The logo is not an interactive area. It can neither be clicked and does not
have a rollover state. The one exception is when it appears as a partner
logo on a sponsoring page that is not Audi’s own; it may then be linked to
audiusa.com.
General guidelines for usage appear on the right. For further guidance
refer to the ‘Audi Logo’ section of the Corporate Design website which
can be found at:
http://www.audi-marketing.com/1_corpo/ e_cor_ri.html
user name: importer
password: marketing
Page 14
38
60
The word and image ele-ments of the logo must never be separated. They may not be used as abasis for graphic illustra-tions.
The logo may not appear against a red or green background.
The logo must be sur-rounded by a minimum white-space of the diame-ter of one ring.
The background for the logo should be a solid white. If this is not possible, a light gray or dark gray background is acceptable. If the background is not a solid color, a simple and neutral background area should be used.
The logo must be sur-rounded by a minimum white-space of the diame-ter of one ring.
Do not stretch or distort the proportions of the logo.
Do not change the colors of either the word or im-age elements of the logo.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Typography
Titles and headlines
The audiusa.com website primarily uses the Univers family of typefaces
for displaying titles and headlines. In general, areas that require visual
and emotional impact should be treated in Univers Bold Extended with
generous leading. For emphasis, a background color field can be used
behind text. However, this color should be no darker than R65 G65 B65 /
414141 such that legibility is not compromised. Text that is more informa-
tional should use Univers Roman, such as in global navigation.
Text typed in the Univers family should be bitmapped and converted to
image files. For legibility, text should be no lighter than R103 G103 B103 /
676767.
Univers Bold Extended
ABCDEFGHIJKLMNOPQR
STUVWXYZ!@#$%^&*( )
abcdefghi jk lmnopqrst
uvwxyz1234567890
Univers Roman
A B C D F G H I J K L M N O P Q RS 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 tu v w x y z 1 2 3 4 5 6 7 8 9 0
Page 15
Page Title
Typeface: Univers Bold Extended
Point Size: 15pt (20 Tracking)
Leading: 20pt
Color: R103 G103 B103 / 676767
Story Headline
Typeface: Verdana
Point Size: 12pt (No Tracking)
Leading: 18pt
Color: R103 G103 B103 / 676767
Regional Nav Title
Typeface: Univers Bold Extended
Larger Point Size: 13pt (20 Tracking)
Color: R103 G103 B103 / 676767
Feature Headline
Typeface: Univers Bold Extended
Point Size: 12.5pt (20 Tracking)
Color: R103 G103 B103 / HEX676767
Background Color: R229 G232 B226 / E5E8E2
Tertiary Nav Title
Typeface: Univers Bold Extended
Point Size: 11pt (20 Tracking)
Color: R103 G103 B103 / 676767
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Page 16
Text Style 1
Typeface: Verdana
Point Size: 9pt (No Tracking)
Leading: 16pt
Color: R103 G103 B103 / 676767
Link Style 1
Typeface: Verdana Bold
Point Size: 9pt (No Tracking)
Color: R103 G103 B103 / 676767
Rollover color: R210 G99 B44 / D2632C
Link Style 2
Typeface: Verdana
Point Size: 9pt (No Tracking)
Color: R103 G103 B103 / 676767
Rollover color: R210 G99 B44 / D2632C
Text Style 2
Typeface: Verdana
Point Size: 9pt (No Tracking)
Leading: 13pt
Color: R103 G103 B103 / 676767
HTML Link
Typeface: Verdana
Point Size: 9pt (No Tracking)
Leading: 13pt
Color: R210 G99 B44 / D2632C
Note: Underlines on rollover
Typography
Body text and links
There are two types of HTML text. Text Style 1 is 9pt Verdana with 16pt
leading and is used for feature stories and instructional copy or anywhere
greater legibility is required. Text Style 2 is 9pt Verdana with 13pt leading.
This is the basic body copy style used for general blocks of text.
Links that appear in copy are called out in the orange accent color and
underline upon rollover. Links that appear outside body copy, (Link Style
1) are Verdana Bold and are called out with an orange arrow. Upon
rollover, they turn to the accent orange. Secondary navigation links, (Link
Style 2) act similarly but are set in Verdana Regular.
Verdana Regular
Verdana Bold
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Scrolling guidelines
When designing pages which grow long, it is important to consider page
balance and the use of anchor links. Pages become awkward on two col-
umn pages when one column is much longer than another. Effort should
be made to keep columns within 200 pixels of each other.
Anchor links act as a quick index of the page as well as give easy access
to specific areas of content. Because of their usefulness, anchor links
should be used wherever pages grow longer than 1200 pixels.
Page 17
Page Balance
When two column templates are used, effort should be made to
balance the length of the columns such that one column does not
grow much longer than the other. As a general rule, columns
should have no more than a 200 pixel difference in length.
Anchor Links
When pages grow longer than 1200 pixels, anchor links should
be used to give users access to content low on the page. On two
column templates, anchor links should appear in the right
column. Single column templates should display anchor links at
the beginning of content.
Anchor Links
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Graphic elements
In addition to the specific uses of typography, there are graphic elements
which can be used to enhance the visual interest of a composition as well
as give the site some common motifs to tie pages together. In general,
these elements should be used sparingly throughout the site and should
never obstruct the impact of the photography or be used ornamentally.
Page 18
Hairlines
The visual intrigue of the main feature
images can be enhanced by overlay-
ing faint hairlines which surface parts
of the underlying grid. No more than
four gridlines should be surfaced on
an image. The lines are one pixel thick
white lines with a 40% opacity.
Translucent Color Fields
Images can be further enhanced with a
translucent field of color complimenta-
ry to the image. The color field should
be applied on top of the image with
the 'multiply' fill in Photoshop.
Form Buttons
The arrow to the left is used for links
which come at the end of form elements
such as text boxes and pull-down me-
nus. When the link is simply a submit
button at the end of a form element
such as in the search box above, then
the button can be appended to the right
of the form element. If the link must be
accompanied with text, the arrow must
always precede the text.
Gray:R153 G153 B153 / 99999
Orange:R237 G24 B70 / ED1846
15
11 5
11
3 2
Dotted Boxes
Links which appear in the global and
tertiary navigation are called out with
a small box of one pixel dots. On roll-
over, the boxes highlight by changing
to white. They should be separated by
a vertical space of three pixels.
1
1
3
11
Dot Color:R153 G153 B153 / 999999
Background Color:R210 G210 B210 / D2D2D2
Orange Accents
An orange accent color can be used to the
assist the user's eyes to important areas of
the page. Accent lines which span two col-
umns must use a one pixel thick line. A four
pixel thick line can be used for stronger em-
phasis, but it must never span more than
one column.
Orange:
R210 G99 B44
D2632C
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Color overview
Specific instances of color usage are called out on previous pages. This
page provides a general overview of how color is used.
Elements on the page that remain consistent such as global navigation
and the top-left anchor bar always appear in different shades of gray. The
four primary grays used throughout audiusa.com are specified to the
right. The secondary colors for the site are two shades of a muted green
that are used in the content areas of the page. They apply a warmth to
page composition as well mirror the colors in Audi advertising. An accent
orange is used sparingly throughout the site to draw the eye to important
areas of the page. The red of the Audi logo should be used only for the
logo and not in any page element.
Page 19
1
8
2
3
4
5
6
1
1
7
1 2 3 4 5 6 7 8
R103 G103 B103676767
• Anchor bar• HTML text• Image text
R178 G178 B178B2B2B2
• Vehicle area in global navigation
R210 G210 B210D2D2D2
• Background color in global navigation
R232 G232 B232E8E8E8
• Model rollover in global navigation
R206 G209 B201CED1C9
• Areas of interaction in the content area
R229 G232 B226E5E5E5
• Background color for feature headline
R210 G99 B44D2632C
• Highlights important areas of the page • Rollover text color for link styles 1 and 2
R237 G24 B70ED1846
• Logotype color• Should not be used anywhere else on the web site
On images that stretch the length of the page, a color
field must be applied on top of the photograph. This
color can be determined by sampling colors from the
image itself until there is a complimentary color match.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Image usage
The overall concept for imagery is to feature the vehicle photography as
large as possible. A full 3/4 shot of the vehicle should be used wherever
possible.
Always choose color images with dynamic compositions. Silhouetted
images can be used when differentiation between body styles is critical.
Images should be cropped to enhance the page layout and create move-
ment through the page. Asymmetry can add visual intrigue and variation
to compositions.
Product correctness should always be considered when choosing
imagery.
Stylization and special effects should not be be used in photography.
Black-and-white or tinted imagery should be avoided.
Image sizes
The size of imagery is variable and flexible according to the purposes of
the particular page. Still, image dimensions should be informed by the
20x12 grid. The width of images should be multiples of 20. The height of
images should be multiples of 12. When uncertain, use one of the dimen-
sions below:
Large size: 280x240 pixels
Medium size: 160x96 pixels
Small size: 120x72 pixels
Page 20
Large location photography
should always be the focal
point of a page.
In instances where a second-
ary image overlaps the fea-
ture photo, a 4 pixel white
rule may be used to set it off
from the background photo.
Imagery size should maintain
multiples of the 20 x 12 grid.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Image usage
The stretching strategy on the audiusa.com site takes full advantage of
the imagery on a page.
When a monitor is set to larger than 800 x 600 pixels the user will see a
stretched version of the page. When the page stretches the global naviga-
tion sticks to the right of the browser window. As the 4th column opens, a
continuation of the feature image is revealed.
Feature images should fade gracefully to an appropriate solid color wher-
ever possible. Images should never begin to fade before 700 pixels from
the left.
On pages with regional navigation, the page stretches to reveal more of
the feature image and hairline rules. The regional navigation link location
is fixed.
Page 21
160 160
740
160 Variable column width 150
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Image usage
Imagery should be chosen in careful consideration of the message that
needs to be communicated. For instance, when speaking about perform-
ance, a static museum shot would be far less impactful than an image of
the vehicle with a blurred road in the background. Conversely, differenti-
ating body types in the Audi model line would be the most clear if the
vehicles were displayed in the museum shot and detail or environment
shots would be far less effective. General guidelines for using different
image types appear to the right.
Page 22
Environment Shot
This is the recommended shot for all feature image
areas or wherever the vehicle is prominently displayed.
By virtue of being in a physical location, viewers can
draw associations and better relate to the vehicle and
its purpose.
Museum Shot
Where it is important to distinguish between body
types, such as the 'All Models' page, the museum shot
should be used. It provides an objective view of the
car and lets the vehicle speak for itself.
Detail Shot
When speaking about a particular aspect of the vehi-
cle, the detail shot can aid users in their understand-
ing and appreciation of the vehicle. The detail shot is
particularly useful for small image areas and secon-
dary stories.
Interior Shot
In order to give a sense of what it looks and feels like to
sit in an Audi, interior shots should be used throughout
vehicle sections. Full interior shots should be large
enough to capture the details of the interior. Smaller in-
terior images should use detail shots.
Illustration
Illustrations should not be used except for on
the specification pages which outline the di-
mensions of the vehicle.
Lifestyle Shot
Featuring people in and next to Audi vehicles can lend
warmth and help users better relate to the cars. Life-
style imagery should be carefully chosen for the target
audience and must not alienate potential buyers.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Image Usage: Optimization
In the example to the right, the photo labeled as number one is the origi-
nal. The tool that was used to optimize these photos was Adobe
ImageReady, which is widely considered an industry standard tool for
optimization. The "view" that is represented in the picture is a 4-up com-
parison. Being able to view the photos in this side-by-side way is one of
the benefits of ImageReady as an optimization tool.
Photo #2 has been optimized to a point where the colors of the photo
have not been distorted, and the car itself has no noticeable distortions or
fuzziness. Balancing the trade-off between image quality and file size is a
subjective process, however the photograph's context in the visual hierar-
chy of the page should be considered. For example, if an image is the
largest and most prominent image on the homepage, quality may out-
weigh file size concerns. Conversely, if an image is less prominently fea-
tured or one of many images on a page, a smaller file size may be more
appropriate. Photo #3 is the perfect example of this quality trade-off in
service of file size. There is some slight blurring in the photo, but the file
size is cut down by a third.
Photo #4 has been over-optimized. Blurring and distortion in the back of
the car is evident. In this case the quality degradation is not worth the
minimal file size reduction.
Page 23
General File Size Ranges for Photos on audiusa.com:
Large JPEG (approx. 610 x 240) 10-17k
Medium JPEG (approx. 300 x 170) 5-10k
Small JPEG (approx. 100 x 100) 3-5k
The above ranges reflect the optimization considerations as mentioned in the above example as well as the amount of colors
and complexity of gradations from photo to photo.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Further guidelines
Page 24
Icons
Icons should never replace actual words. The use of
icons can introduce ambiguity and compromise
usability if not properly executed.
If used, icons must always be accompanied with text.
They should be rendered in a single color and should
be simple and easy to understand. The size of the
icon should be no larger than 15x15 pixels. If this is
not possible, the two link styles specified on p.13
should be used.
Pop-up windows
The use of pop-up windows is highly discouraged;
pop-up windows are disruptive to the user experi-
ence and can proliferate across the site if not tightly
controlled. The content area of the audiusa.com web-
site is flexible and can accommodate a diversity of
content types. A reconfiguration of the grid can lend
itself to a multitude of new page types.
Thus, where it can be avoided, content should not
appear in pop-up windows.
Underlines
All text links should not be underlined. Links are
either called out by an accent color or an arrow. This
signifies to the user that they are clickable and do
not require the redundancy of the underline. The one
exception to this rule is in HTML copy if, when the
user mouses over the link, it is underlined to indicate
a rollover state.
Framing
Frames should not be used anywhere on the
audiusa.com website. Pages have been designed
such that important elements always appear above
the fold of even the smallest browser size (800x600).
Therefore, it is not necessary to surface content in
always-present frames.
Further, frames should not be used when content is
being provided by outside Audi partners. Content
must be integrated into scrolling pages and must not
be loaded into a frame.
conte
nt
conte
nt
framed page scrolling page
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Content voice and tone
Introduction
Overview
The voice recommendations for audiusa.com provide a framework for
effectively conveying the Audi brand character in the online environment.
Applying these principles throughout the redesign effort as we develop
and select content and images will help to ensure a consistent and brand-
enhancing experience for audiusa.com visitors.
The audiusa.com voice serves a number of purposes. Conceptually, it
• defines the tone of the site
• informs language practices
• provides a point of correlation for the site’s visual language
In practice, the audiusa.com voice recommendations will serve as a refer-
ence for development of
• descriptive copy for company history, practices, and products
• model-line copy and images
• feature descriptions
• headlines and captions
• nomenclature and navigational elements
Methodology
The audiusa.com voice proposed here draws from the conclusions of a
number of research efforts:
• high-level assessment of Audi of America’s existing brand guidelines
• low-level review of all available brochures and collateral material
• audit of competitive and complementary sites, establishing effective
practices and points of differentiation
• observation of the online behavior of Audi owners and customers
• establishment of an organizational model and informational hierarchy
for the redesigned audiusa.com
The voice recommendations also draw directly from Sapient’s experience
developing content for consumer Web sites and premium brands.
Voice Recommendations
Objectives
The audiusa.com URL represents a significant point of contact between
Audi of America and its customers, touching hundreds of thousands of
visitors every month. Audiusa.com thus serves as a key component of
Audi of America’s integrated marketing communications and a critical site
for expression of the character and values of the Audi brand.
The voice with which the site speaks to its visitors will constitute the
online expression of Audi’s brand character. In this capacity, the site voice
has an obligation to embody the brand DNA and values and to help Audi
take its place in North America among the Tier 1 luxury automotive mar-
ques.
The Voice of Audiusa.com
Audi occupies a distinct position among premium European brands in
embracing the traditional virtues of the German motorcar – precision,
rigor, frankness – while also celebrating aesthetic and emotional rewards
as critical elements of a truly fulfilling automotive experience.
Rather than isolate the driver from the experience of driving, Audi seeks
to inspire communion between driver, machine, and road. To drive an
Audi is to experience mastery, confidence, and control – but also discov-
ery, pleasure, even joy. Joy in the play of light and form, joy in the look
and touch of fine materials, joy in the responses of a machine engineered
with equal parts slide-rule and soul.
In expressing the Audi brand values – human, passionate, leading, vision-
ary – the voice of audiusa.com must seek that same balance of precision
and beauty. The specific voice recommendations detailed below seek to
build upon this unique value proposition and to define its expression in
terms of specific editorial principles.
These voice recommendations establish general guidelines for online rep-
resentation of the Audi brand. However, the more familiar you become
with the brand’s current and past expressions – as found, for example, in
brochures, collateral, print advertising, and television spots – the clearer
Audi’s unique voice will become.
Tone: Passionate and Informed
Let cooler hearts prevail: be enthusiastic… and credible
Forward-thinking consumers enjoy developing the knowledge that lets
them make studied choices. Like the brands they seek out, these con-
sumers perceive themselves as leaders, not followers. Ultimately, these
knowledgeable consumers know what’s hot, but decide for themselves
what’s cool. They are skeptical of herd behavior and likely to spend luxury
dollars in idiosyncratic and knowing ways.
Audiusa.com must match this considered approach to consumption. The
site’s credibility comes from its recognition that the act of driving, at its
best, is an end in itself, an invigorating performance that engages and
stimulates all five senses. The site believes in Audi because it knows what
drivers need, is aware of the alternatives available, and understands that
vehicles bearing the Audi mark enable this total driving experience more
purely than anything else on the road today.
Editorial Principles:
Avoid cheerleading
Well-informed consumers tend to be sensitive to hyperbole. The voice
of audiusa.com must therefore be careful to ground its legitimate
enthusiasm in facts, and (while avoiding direct comparisons to other
brands) to demonstrate tacit awareness of how well Audi products
truly compete. Based solely on their manifest virtues, Audi products
stand on equal footing with any competitor. It is the responsibility of
Page 25
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
audiusa.com to identify and elaborate those virtues, generating enthu-
siasm through passionate education rather than brute assertion.
Focus on why, not what
Leading-edge consumers value advancement and technology, but
unlike propeller-head types they do not value these qualities for their
own sake. Similarly, audiusa.com does not gush over a pivot bearing’s
repositioned rotational axis. Rather, it celebrates the experience of
greater performance, control, and comfort that this advance achieves.
What’s most exciting about the new multitronic™ CVT is not that it
represents an engineering and materials breakthrough, but that it rep-
resents a driving breakthrough: all of the virtues of both manual and
automatic transmissions, with none of the compromises.
Language: Elegant and Inclusive
Welcome all visitors equally
As Audi continues to expand its North American presence, audiusa.com
needs to offer an experience that speaks to the heart of the Audi enthusi-
ast while immersing the novice in Audi’s values and worldview.
Because Web audiences, no matter what their experience with the brand,
expect to quickly find specific pieces of data, writing should be thorough
but to the point, assuring users that they can get information and
resources simply and directly. The rule of thumb for audiusa.com content
is, “Will this have any value for users?” If there is too much extraneous
information, users may simply leave the site – perhaps never to return.
Also bear in mind that while audiusa.com is specifically targeted to U.S.
audiences, its visitors will reflect a diverse mix of cultural backgrounds.
It’s reasonable to expect that visitors will be proficient in English, but
audiusa.com content creators should exercise care in the use of language
that may not be accessible to all audiences (e.g. dialect, idiomatic lan-
guage, uncommon abbreviations).
Editorial Principles:
Elegance: the marriage of beauty and precision
Elegance describes a beauty that arises from careful consideration.
Achieving elegance does not require economy of materials – in fact, it
may require that no expense be spared – but it does require economy
of ideas. Every element in an elegant composition, room, or even
paragraph is present for a reason.
Customers looking for the elegance expressed in the Audi brand find
affectation both suspect and distasteful. Thus while audiusa.com must
avoid the forced intimacy of ingratiating, breezy, or “folksy” language,
it must be equally vigilant against highfalutin’ or “purple” language
that mistakes self-indulgence for luxury. Aesthetic pleasure is a funda-
mental component of the brand’s humanity, but that pleasure must
contribute to a larger experience in the same way that the elegant
lines of the TT both express and enable its commitment to perform-
ance.
Inclusion: the true voice of experience
It should go without saying that audiusa.com knows more about auto-
motive engineering and history than most of its visitors will ever
know. But rather than sounding like an expert, concerned only with
demonstrating authority, audiusa.com should sound like a master, so
secure in its knowledge as to be equally comfortable sharing ideas
with novices and experts.
Especially when discussing technical features, it’s important not to
bludgeon visitors with specialist terminology (jargon). Instead, engage
them in an ongoing conversation and help them understand why a
given feature will enrich their driving experience.
The Voice in Brief
Some visitors use audiusa.com to browse what’s available, others need
justification for a decision they’re ready to make; still others want to know
how to extend their existing relationship with Audi. Some of these visi-
tors are looking for facts and points of comparison, others for an emo-
tional communion with the brand.
Audiusa.com should deliver the Audi point of view in all of its content.
This point of view is the living expression of the Audi ethos – that cars
are not for owning or riding in but driving, and that a certain type of vehi-
cle provides the ideal driving experience.
Audiusa.com must speak with a voice that is human, passionate, leading,
and visionary; a voice that
• celebrates performance drivers can feel
• engages with the act of driving
• believes in both precision and pleasure
• respects tradition while looking toward the future
Above all, what Audi promises is an experience of exquisite passion tem-
pered and channeled through engineering and design.
Page 26
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Technical recommendations
Download Time:
It is important to understand that download time to an end user is defined
by four elements: page size, connection speed, net congestion (at any
given moment), and server-side processing time. Because of the lack of
control over total download time, partners should optimize and be respon-
sible for what they can control, but cannot be held responsible for overall
download time to an end user. For the Audi of America site a benchmark
of 60 to 70k is recommended for optimization purposes.
Supported browsers
Selection of the supported operating systems and supported browsers rep-
resented in the chart at right is based on usage statistics of the most popu-
lar browsers as well as additional requirements from Audi.
Coding languages and standards
The audiusa.com website is built using the following coding languages:
XHTML, Cascading Style Sheets, and JavaScript. Standards have been
established to ensure consistency and to maximize maintainability across
the code base.
XHTML
XHTML code will adhere to the W3C’s XHTML 1.0 specification.
• Code should be created so that it is efficient in size and easily readable
• Indentation of code should be used to the extent that main document
structures are visible and easily located
Cascading Style Sheets
All Cascading Style Sheets should adhere to the W3C’s CSS 2.0 specifica-
tion.
• Styles defining different aspects of the site should be broken up into mul-
tiple files to reduce load time
• Style definitions should be explicitly called out
• “Short hand” definitions should not be used
Javascript includes
Javascript code should adhere to the ECMAScript 1.2 specification.
• Javascript includes should be used for common javascript functionality
such as standard form validation functions, rollover scripts and DHTML
drop-down menus
• Standard Java naming conventions should be used
• Java style formatting should be used for javascript code
Server side includes
Server side includes should be utilized as much as possible. This will
allow for the creation of a more global client-side template. This client-
side template file can then remain independent of the business logic
used to acquire the content it needs to display a page.
Conforming to XML standards
All code should adhere to the XML format as explained by W3Schools
http://www.w3schools.com/xhtml/xhtml_html.asp
• All XHTML tags and attribute names must be in lower case
• Elements must be properly nested
• All XHTML elements must be closed
• Empty elements must also be closed
• Attribute minimization is forbidden
• The id attribute replaces the name attribute
• The <!DOCTYPE> attribute is mandatory on all pages
• All images should contain alt attributes
Preferred Integration with Audi Partners
The preferred method for integrating is via HTTP; whenever possible
third parties should plan to integrate with Audiusa and Canada using this
protocol. Sapient will follow up with individual parties concerning inte-
gration details.
Page 27
IE 4.01 SP2, Netscape 4.7 and higher
IE 5.01, Netscape 4.7 and higher
IE 5.01, Netscape 4.7 and higher
IE 5.5, Netscape 4.7 and higher
IE 5.01, Netscape 4.7 and higher
IE 5.5, Netscape 4.7 and higher
AOL 6, Netscape 4.7 and higher
Whatever is included w/ core OS
Whatever is included w/ core OS
IE 5.5
WinNT4 SP6 + Win 95B DualBoot
WinNT4 SP6 + Win 95B DualBoot
Win2K + Win 98 DualBoot
Win2K + Win 98 DualBoot
Windows 98 SE
Windows 98 SE
Windows 98 SE
Windows 98 (straight load)
Windows ME (straight load)
WinNT4 SP6 + Win 95B Dual Boot
PC Matrix
1
2
3
4
5
6
7
8
9
10
Operating System Installed Browsers
IE 4.5, Netscape 4.7 and higher
IE 5.0, Netscape 4.7 and higher
AOL, Netscape 4.7 and higher
MAC OS 9
MAC OS 9
MAC OS 9
Mac Matrix
1
2
3
Operating System Installed Browsers
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Example layouts: Home page
• The user is greeted with a flash animation of a feature vehicle with
smaller images below showing different angles and highlights.
• The copy underneath this page gives a high-level overview of the vehi-
cle showing how it is an expression of the Audi brand.
• Underneath this area are two story areas that can showcase secondary
feature stories or time-sensitive articles. The larger story has an associ-
ated photo and contains a 200 character text block. The smaller story
has no image and a 160 character text block.
This page uses visual page template variation A.
Page 28
This area of the home page
should be used for promotions
and other frequently updated
content. Only two promotions
should be used at a time, one
2-column promotion (200 char-
acters) with a photo and one 1-
column promotion (160 charac-
ters) without a photo.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Example layouts: Family home page
• Upon selecting a vehicle family, the A4 family for example, the user
arrives at the family home page which features a large, fully expanding
image of the vehicle.
• Underneath is high-level family positioning copy with a link to featured
content in a lower level page.
• If the user finds the family irrelevant to their vehicle search, they can
jump to an equivalent page for any other family by selecting the family
in the “Jump to” pull-down menu. The “jump-to” module appears on
most of the pages in the vehicle section and wherever parallel navigat-
ing is critical.
• If the user is still interested in the A4 family in general, he can learn about
the “Technology,” “Design,” “Performance,” and “Safety” features of
the A4 family by accessing those pages from the regional navigation on
the right.
• The user also has the opportunity to directly link to specific A4 models by
using the module that appears to the bottom right of the feature image.
Rolling over model names reveals an image of that specific model as
well as positioning copy below. Clicking on a specific model takes the
user to that model’s home page.
This page uses visual page template variation C.
Page 29
A new secondary image
replaces the default image
upon rollover of model names.
Also, model specific positioning
copy replaces default copy.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Example layouts: Design attribute page
• If the user wants to learn more about the design features of the family,
they can access the design page from the family home page. A main
feature story gives a general overview of the design features of the
vehicle.
• In this example, the user sees a profile image of the vehicle with small
icons at the top of the page that switch between views of the car.
Clicking on a different view replaces the large image area with that
view.
• Areas of interest on the car are highlighted with orange boxes.
• Rolling over the active areas reveals a short caption.
• Clicking on the square gives a larger image of the highlight area and a
story about that particular detail. The larger image format allows for
large, seductive images that highlight the thoughtfulness and care that
goes into Audi products.
• The format of the page creates a more engaging and interactive experi-
ence and a sense of discovery.
• Similar to its function on the previous page, the “Jump to” module
takes the user to an equivalent design page for a different family.
This page uses visual page template variation C.
Page 30
A new feature photo replaces
the previous with a magnified
detail view.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Page 31
Example layouts: Model home page
• The model home page gives an introduction to the specific model with
large imagery of the vehicle that spans the width of the page.
• The main feature story gives an overview of the model and its unique
features. Below this story is a link to "Build Your Audi."
• To the right, a secondary story draws content from one of the related
lower level pages, such as the “Gallery” or “Features” page. The user
can link to that page from this module.
• Lower level pages for this model are accessible from the regional naviga-
tion which appears to the right area of the page.
• A4 family links move below the regional navigation such that those pages
are available even at the model level.
This page uses visual page template variation C.
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Example layouts: Gallery page
• The user can view larger images of the vehicle as well as movies and
QTVRs on the gallery page.
• At this lower level, pages are more informational so images do not
expand the width of page. Regional navigation goes to a solid gray.
• When the user first arrives, they have an image of the model and
thumbnail links underneath to the various asset types.
• The top area becomes the canvas area and the media types populate
this canvas. For example, clicking on the exterior QTVR thumbnail popu-
lates the space above with the QTVR movie.
• Underneath the thumbnails is instructional copy for viewing the differ-
ent media types as well as links to required plug-ins.
This page uses visual page template variation E.
Page 32
Prepared by Sapient for Audi of America
http://www.audisusa.comRelease 1.0
October 4, 2001Audiusa.com Graphic Guidelines
Example layouts: Features and specs page
• The top area of the page is dedicated to illustrations and highlight
images of the vehicle to enhance the presentation of specification data.
• Disclaimer, copyright, and trademark information not covered in the
“Privacy and Use” page appears 30 pixels below the last element on
the page, but above utility navigation. Text appears in Verdana 9pt in a
lighter gray than normal body text (R149 G149 B149 / #959595).
This page uses visual page template variation D.
Page 33
Disclaimer, copyright, and
trademark information should
appear here, 30 pixels below
the last element on the page.
top related