Volkswagen Internet Marketing Design

Volkswagen Internet Marketing Design 4.0

Š argonauten G2 GmbH

Status: 17/11/09

1

Design 4.0 Styleguide

1 Introduction

The Volkswagen brand is a globally active brand.

Internationally, it has a uniform image and presents itself in all media with the highest degree of clarity. That is its forte. Inspired by the commercial centre of advertising and billboard design, the Volkswagen Corporate Design language has been transferred and further developed for the Internet Design 4.0.

Š argonauten G2 GmbH

Status: 17/11/09

The new Volkswagen Internet Design 4.0 reflects modern design, dialogue and interaction principles: simple, clear and recognisable. This Style Guide defines binding design elements and rules that ensure the uniform perception of the brand, even in the digital world.

5

Design 4.0 Styleguide

Š argonauten G2 GmbH

2 Basic Design Principles

Status: 17/11/09

6

Design 4.0 Styleguide

2.1 Framework

The „Frame“ is the essential style-defining design element in Design 4.0. It makes up the „Framework“ and is also cited in design elements. The „Framework“ is a binding, fundamental basic element for all templates and page types.

The „Framework“ is subject to the following rules: 1. Header and stage are separated with a horizontal drop shadow.

2. The stage is framed on the sides and to the bottom by a one-pixel line.

3. The frame borders the original contents.

4. The frame has a fixed defined width and can be extended to the bottom.

5. The frame contains the following elements: Logo, Main Navigation, Quick Start, Footer Navigation, Meta Navigation, Disclaimer.

Other elements are not permitted.

© argonauten G2 GmbH

Status: 17/11/09

7

Design 4.0 Styleguide

2.1 Framework Compare fixed stage size and flexible page length

Fixed page length: Homepage, Gallery, Highlights, Colours & Wheels

Flexible page length: HTML templates

Š argonauten G2 GmbH

Status: 17/11/09

8

Design 4.0 Styleguide

2.2 Grid

The entire website is embedded in a 5 x 5-pixel grid. This serves to define the column width as well as the positioning of the modules within the columns and the framework.

Within the modules, particularly for modules that are mainly defined by text formatting, the dimensions may differ from the 5-pixel grid.

Š argonauten G2 GmbH

Status: 17/11/09

9

Design 4.0 Styleguide

2.2 Grid Definition Stage The largest module in the grid forms the stage on the homepage and in the model area.

Š argonauten G2 GmbH

Status: 17/11/09

10

Design 4.0 Styleguide

2.2 Grid Definition Columns The stage is divided into 4 columns. They are indented by 20 pixels on the inside and outside.

The columns can be combined according to the template concept.

The 4-column division also structures the HTML area. Here, as a rule, the left column is generally reserved for the navigation.

Š argonauten G2 GmbH

Status: 17/11/09

11

Design 4.0 Styleguide

2.3 Image Concept

As a matter of principle, the vehicles on the Volkswagen website are shown in a real environment.

The use of cut-out vehicles in a virtual space is only permitted in the following cases: 1. In selection processes, e.g. in the Model Finder or Model Selector, the vehicle can be shown as a cut-out since in these cases it is easier to focus on distinctive features such as the body shape and size.

2. No appropriate material is present.

Š argonauten G2 GmbH

Status: 17/11/09

12

Design 4.0 Styleguide

2.3 Image Concept Exceptions

Image in a selection process: cut-outs in the Model Finder

No appropriate image material is present: cut-outs in the visualiser

Š argonauten G2 GmbH

Status: 17/11/09

13

Design 4.0 Styleguide

2.4 Typography Overview

Headlines

On the Volkswagen website, typography is used in a mediaspecific manner. Whenever technically possible, the original corporate fonts are used.

VW Headline OT - Black Subheadlines in Flash modules, Button copy

VW Headline OT - Semibold

For better readability, VW Headline Book replaces VW Utopian in the copy text in Flash modules.

In HTML modules, VW Utopia is replaced by the system font Arial.

Copytext and Link text in Flash modules

VW Headline OT - Book Subheadlines, Copytext and Link text in HTML modules

Arial

Š argonauten G2 GmbH

Status: 17/11/09

14

Design 4.0 Styleguide

2.5 Colours Overview

Corporate Design Volkswagen

On the Volkswagen website, all colours defined in the current corporate design can be used in accordance with the general rules and specifications in the Internet Style Guide.

Additional shades of grey have been defined particularly with regard to typography on the Internet.

Additional defined colours

Š argonauten G2 GmbH

Status: 17/11/09

15

Design 4.0 Styleguide

2.5 Colours Use of Colours

Corporate Design Volkswagen

Additional defined colours

Š argonauten G2 GmbH

Status: 17/11/09

16

Design 4.0 Styleguide

2.6 Icons Overview The icons used are designed in accordance with the current Volkswagen Corporate Design guidelines.

Š argonauten G2 GmbH

Status: 17/11/09

17

Design 4.0 Styleguide

3 Formative basic elements Overview Reduction and clarity are important for the image of Volkswagen.

White space is the primary structuring design element. White spaces define the basic grid for the contents. The repertoire of design elements defined in the current CD has been intentionally kept to a minimum. They have been utilised in Design 4.0 and further developed for interactive implementation.

Š argonauten G2 GmbH

Status: 17/11/09

18

Design 4.0 Styleguide

3.1 White Frames

Rules for the use of the white frame: 1. The frame makes up the framework of the page and of the layers.

2. The frame is displayed as empty space between modules.

3. Elements are framed if the original contents contain an image or a graphic and are not on a white background.

Š argonauten G2 GmbH

Status: 17/11/09

19

Design 4.0 Styleguide

3.2 Grey Areas

Rules for the use of grey areas: 1. They are fundamental elements for the content.

2. They serve to structure the content.

3. Clusters of control and form elements have a grey background.

4. Layers, flyouts and teaser elements in the margin column have a grey background.

Š argonauten G2 GmbH

Status: 17/11/09

20

Design 4.0 Styleguide

3.3 Dropshadow / Feel of the surface

Rules for the use of haptics (drop shadows): Spatial depth is used to structure elements on a page. Generally this applies for interaction elements such as buttons, thumbnails and teasers as well as to emphasise active elements and/or elements selected by the user (e.g. layers).

Š argonauten G2 GmbH

Status: 17/11/09

21

Design 4.0 Styleguide

3.3 Dropshadow / Feel of the surface 3.3 Drop shadow definition

Dropshadow

The drop shadow to be used is uniformly defined for all elements e.g. buttons, tabs, teasers, thumbnail navigations, etc.

Fireworks CS3

Š argonauten G2 GmbH

Status: 17/11/09

22

Design 4.0 Styleguide

3.4 Lines

Rules for the use of horizontal and vertical lines: Horizontal lines can be used to structure modules on the page or contents/content clusters within the modules.

Vertical lines are exclusively used for structuring navigation modules.

Š argonauten G2 GmbH

Status: 17/11/09

23

Design 4.0 Styleguide

Š argonauten G2 GmbH

4 Basic Elements of Production

Status: 17/11/09

24

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework Stage Homepage

Status: 17/11/09

25

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework Stage Showroom

Status: 17/11/09

26

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework Separation of columns

Status: 17/11/09

27

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework L100_Logo_c_l

Status: 17/11/09

29

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m500

Status: 17/11/09

30

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m501

Status: 17/11/09

31

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m502

Status: 17/11/09

32

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m503

Status: 17/11/09

33

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m504

Status: 17/11/09

34

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m505

Status: 17/11/09

35

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m508_Disclaimer_container

Status: 17/11/09

36

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework m506

Status: 17/11/09

37

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework Display NoFlash

Status: 17/11/09

38

Design 4.0 Styleguide

Š argonauten G2 GmbH

4.1 Dimensioning framework Display NoJavascript

Status: 17/11/09

39

Design 4.0 Styleguide

4.2 Typography Styles

Headlines

The text colour of the headlines is based upon the context, however, it should usually be #111111.

H1 Examples: Homepage, Showroom Stage

If a headline is used on images, it can be #FFFFFF regardless of the image.

VW Headline OT-Black, 30 pt Line spacing 110 % H2 Examples: Showroom Stage, Editorial Section

VW Headline OT-Black, 24 pt Line spacing 110 % H3 Examples: Layer

VW Headline OT-Black, 16 pt Line spacing 110 % H4 Examples: Section Label

VW Headline OT-Black, 14 pt Line spacing 110 %

© argonauten G2 GmbH

Status: 17/11/09

40

Design 4.0 Styleguide

4.2 Typography Styles

H5 Examples: Designed Teaser

VW Headline OT-Black, 13 pt Line spacing 110 %

H6 Examples: Modellselector, Model Finder VW Headline OT-Black, 12 pt Line spacing 120% H7 Examples: Eye-catcher in the Model Finder VW Headline OT-Black, 10 pt Line spacing 120% H8 Examples: Editorial Section Arial, 11 pt, bold

Line spacing 120 % H9 Examples: Price Model Finder VW Headline OT-Black, 12 pt Line spacing 120 % Colour: # 8994A0

Š argonauten G2 GmbH

Status: 17/11/09

41

Design 4.0 Styleguide

4.2 Typography Styles

H10 Examples: Keyvisual Buying Guide VW Headline OT-Black, 20 pt

© argonauten G2 GmbH

Status: 17/11/09

42

Design 4.0 Styleguide

4.2 Typography Styles

Subheadlines

The text colour of the sub-headlines is usually #111111.

S1 Examples: Modelfinder

If a sub-headline is used on images, it can be #FFFFFF regardless of the image.

VW Headline OT-Semibold, 12 pt Line spacing 120% S2 Examples: Subheadlines HTML Arial, bold, 11 pt Line spacing 120% S3 Examples: Quick Access Navigation on Homepage VW Headline OT-Semibold, 11 pt S4 Examples: Sub-headlines Event Calendar Arial, bold, 11 pt Colour: # 333333 Line spacing 120% S5 Examples: Cluster Model Finder VW Headline OT-Semibold, 11 pt Colour: # 5C6970

Š argonauten G2 GmbH

Status: 17/11/09

43

Design 4.0 Styleguide

4.2 Typography Styles

Copy C1 Examples: Copy text in Flash modules VW Headline OT-Book, 12 pt Colour: # 333333 Line spacing 120 % C2 Examples: Copy text in HTML modules Arial, 11 pt

Colour: # 333333 Line spacing 120 % C3 Examples: Disclaimer Arial 10 pt

Colour: # 8994A0 Line spacing 120 % C4 Examples: Error messages Arial, 11 pt

Colour: # E4002C Line spacing 120 %

© argonauten G2 GmbH

Status: 17/11/09

44

Design 4.0 Styleguide

4.2 Typography Styles

Printtemplates

Special styles for printing pages.

pH1 Examples: Headlines

Arial, bold, 11 pt Colour: # 111111 Line spacing 120%

pC1 Examples: Copy

Arial, 11 pt

Colour: # 333333 Line spacing 120 %

pC2 Examples: Legal texts

Arial 13 pt

Colour: # 8994A0 Line spacing 120 %

Š argonauten G2 GmbH

Status: 17/11/09

45

Design 4.0 Styleguide

4.2 Typography Styles

Navigation N1_1 Examples: 1st level navigation VW Headline OT-Semibold, 12 pt Colour: # 33434C, Over: # 22 74 AC, Active: # 22 74 AC N1_2 Examples: 2nd level navigation VW Headline OT-Book, 12 pt Colour: # 33434C, Over: # 22 74 AC, Active: # 22 74 AC N2 Examples: 3rd and 4th level navigation Arial, 11 pt

Colour: # 33434C, Over: # 22 74 AC, Active: # 22 74 AC N3 Examples: Meta and footer navigation Arial 10 pt

Colour: # 8994A0, Over: # 22 74 AC, Active: # 22 74 AC

Š argonauten G2 GmbH

Status: 17/11/09

46

Design 4.0 Styleguide

4.2 Typography Styles

N4 Examples: Section label

VW Headline OT-Black, 14 pt

Colour: # 111111, Over: # 22 74 AC, Active: # 111111 N5 Examples: Quick access VW Headline OT-Book, 11 pt Colour: #0055A4 , Over: # FFFFFF, Active: # FFFFFF N6 Examples: Model Finder VW Headline OT-Black, 12 pt Colour: # 111111, Over: # 22 74 AC

N7 Examples: Model Finder VW Headline OT-Black, 12 pt Colour: # 8994A0, Over: # 22 74 AC

N8 Examples: Model Selector Arial, bold, 11 pt

Colour: # 111111, Over: # 22 74 AC

© argonauten G2 GmbH

Status: 17/11/09

47

Design 4.0 Styleguide

4.2 Typography Styles

N9 Examples: Model Selector Arial, bold, 11 pt

Colour: # 8994A0, Over: # 22 74 AC

Š argonauten G2 GmbH

Status: 17/11/09

48

Design 4.0 Styleguide

4.2 Typography Styles

Pager P1 Examples: Pager links Arial, 11 pt

Colour: # 22 74 AC, Over: # 22 74 AC, underline P2 Examples: Pager pagination Arial, 11 pt

Link: # 22 74 AC, underline , Link active: # 22 74 AC, bold

Š argonauten G2 GmbH

Status: 17/11/09

49

Design 4.0 Styleguide

4.3 Definition Buttons and Links Overview Buttons, as well as the related sliders and video controls, are the only elements that have a slightly broken edge to support the look and feel during operation.

Arrow

Standard button / Call to Action with link arrow

Flat Standard Button

Settings for corner radius in Fireworks CS3

Form button without link arrow These elements are additionally highlighted with a drop shadow.

The text on the button has a vertical centred alignment.

Standard link with optional icon identifier

Š argonauten G2 GmbH

Status: 17/11/09

50

Design 4.0 Styleguide

4.3 Definition Buttons and Links Overview

Alignment definition Call to Action

Function buttons

Š argonauten G2 GmbH

Status: 17/11/09

51

Design 4.0 Styleguide

4.3 Definition Buttons and Links Call to Action

Cta Call to Action

Š argonauten G2 GmbH

Intended only for use in promotion modules.

Maximum one button per screen.

Status: 17/11/09

52

Design 4.0 Styleguide

4.3 Definitions for buttons and links Buttons

Std1 Buttons - Buttons to prioritise (Flat version Std4)

Control buttons / Call within applications, e.g. „next“ in CC, Model Selector

Std2 Buttons - Standard buttons (Flat version Std5)

© argonauten G2 GmbH

Status: 17/11/09

53

Design 4.0 Styleguide

4.3 Definitions for buttons and links Buttons

Std3 Buttons - inactive (Flat version Std6)

Š argonauten G2 GmbH

Status: 17/11/09

54

Design 4.0 Styleguide

4.3 Definitions for buttons and links Function and form buttons

Fkt1 Function buttons

Buttons for important standard functions (Print, Tell-a-friend, Summary, etc.)

Fkt2 Function buttons with text

Š argonauten G2 GmbH

Status: 17/11/09

55

Design 4.0 Styleguide

4.3 Definitions for buttons and links Function and form buttons

Fml1 Form buttons

Buttons to use in forms.

Fml2 Form buttons - inactive

Fml3 Form buttons

Š argonauten G2 GmbH

Status: 17/11/09

56

Design 4.0 Styleguide

4.3 Definitions for buttons and links Function and form buttons

Fml4 Form buttons

Š argonauten G2 GmbH

Status: 17/11/09

57

Design 4.0 Styleguide

4.3 Definitions for buttons and links Links

Lnk1 Standard link

Lnk2 Inline link

Lnk3 Glossary link

Lnk4 Standard link HTML

Lnk5 Inline link HTML

Š argonauten G2 GmbH

Status: 17/11/09

58

Design 4.0 Styleguide

4.3 Definitions for buttons and links Links

Lnk6 Glossary link

Lnk7 Link with icon

Lnk8 Top link

Š argonauten G2 GmbH

Status: 17/11/09

59

Design 4.0 Styleguide

4.4 Control items Slider

Sl1 Slider large

Š argonauten G2 GmbH

Status: 17/11/09

60

Design 4.0 Styleguide

4.4 Control items Slider

Sl2 Slider small

Š argonauten G2 GmbH

Status: 17/11/09

61

Design 4.0 Styleguide

4.4 Control items Slider

Sl4 Slider showroom large (in combination with thumbnails img2_8 & img2_9)

Š argonauten G2 GmbH

Status: 17/11/09

62

Design 4.0 Styleguide

4.4 Control items Slider

Sl5 Slider showroom small (in combination with thumbnails img2_9 & img2_13)

Sl3 Slider mini

Š argonauten G2 GmbH

Status: 17/11/09

63

Design 4.0 Styleguide

4.5 Forms

Form elements are modified where technically possible.

Pull-downs are not modified.

Text Area

Select Area

Textfield

Š argonauten G2 GmbH

Status: 17/11/09

64

Design 4.0 Styleguide

4.5 Forms

Checkbox

Radiobutton

Š argonauten G2 GmbH

Status: 17/11/09

65

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 1,979

Img1 Homepage

Š argonauten G2 GmbH

Status: 17/11/09

67

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 1,979

Img1_2 Teaser Homepage

Img1_3 Teaser Homepage large

Š argonauten G2 GmbH

Status: 17/11/09

68

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2 Full area stage format model area

Š argonauten G2 GmbH

Status: 17/11/09

69

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2_1 Image module in 3 columns

Š argonauten G2 GmbH

Status: 17/11/09

70

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2_2 Large image module in layers

Š argonauten G2 GmbH

Status: 17/11/09

71

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2_3 Image module in 2 columns

Š argonauten G2 GmbH

Status: 17/11/09

72

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2_5 Image module in 1 columns

Img2_6 Image flyout

Img2_7 Image event calendar

Š argonauten G2 GmbH

Status: 17/11/09

73

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2_8 Gallery thumbnail size1

Img2_9 Gallery thumbnail size2

Img2_10 Trim Level Detail Navigation

Img2_11 Trim Level Compare Flyout

Š argonauten G2 GmbH

Status: 17/11/09

74

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,109

Img2_12 Stage teaser

Img2_13 Gallery thumbnail size3

Š argonauten G2 GmbH

Status: 17/11/09

75

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,865

Img3 Full area stage module start pages editorial area

Š argonauten G2 GmbH

Status: 17/11/09

76

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 2,865

Img3_1 Teaser in the stage module start pages editorial area

Img3_2 Flat graphic teaser

Š argonauten G2 GmbH

Status: 17/11/09

77

Design 4.0 Styleguide

4.6 Images Aspect ratio 1 : 6,4

Img4 Flat full area stage module start pages editorial area, Buying Guide, error pages

Š argonauten G2 GmbH

Status: 17/11/09

78

Design 4.0 Styleguide

4.6 Images Special formats

Img5_1 Alternative full area stage module start pages editorial area in combination with colored areas

Š argonauten G2 GmbH

Status: 17/11/09

79

Design 4.0 Styleguide

4.6 Images Special formats

Img5_2 Thumbnail brochure download

Img5_3 Model finder state 1a

Img5_4 Model finder state 1b

Img5_5 Model finder state 1c

Š argonauten G2 GmbH

Status: 17/11/09

80

Design 4.0 Styleguide

4.6 Images Special formats

Img5_6 Model finderv state 2

Img5_7 Banner Showroom

Š argonauten G2 GmbH

Status: 17/11/09

81

Design 4.0 Styleguide

4.6 Images Special formats

Img5_8 Fallback 1-column 16:9 Video

Img5_9 Fallback 1-column 4:3 Video

Š argonauten G2 GmbH

Status: 17/11/09

82

Design 4.0 Styleguide

4.6 Images Special formats

Img5_10 Wallpaper 1024 x 768 1024 x 768 px Img5_11 Wallpaper 1280 x 1024 1280 x 1024 px Img5_12 Wallpaper 1440 x 900 1440 x 900 px Img5_13 Wallpaper 1680 x 1050 1680 x 1050 px

Š argonauten G2 GmbH

Status: 17/11/09

83

Design 4.0 Styleguide

Š argonauten G2 GmbH

5 Showroom Screens and Modules

Status: 17/11/09

84

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.1. S1_Homepage Example

Status: 17/11/09

85

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.1. S1_Homepage Example // Model Selector open with category

Status: 17/11/09

86

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.1. S1_Homepage Example // Model Selector open without category

Status: 17/11/09

87

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.1.1 S1_Homepage m401_home_main

Status: 17/11/09

90

Design 4.0 Styleguide

5.1.1 S1_Homepage m403_home_teaserbar

Teaser

Š argonauten G2 GmbH

Status: 17/11/09

93

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.3 S4_Holzauto_gallery_swf Example

Status: 17/11/09

135

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.3.1 S4_Holzauto_gallery_swf Modules

Status: 17/11/09

137

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.3.1 S4_Holzauto_gallery_swf m410_showroom_startpage_header

Status: 17/11/09

139

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7 S8_Trimlevel_overview Example

Status: 17/11/09

214

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview Modules

Status: 17/11/09

215

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview Modules

Status: 17/11/09

216

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview m432_trimleveloverview_header

Status: 17/11/09

217

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview m433_trimleveloverview_tile

Status: 17/11/09

218

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview m433_trimleveloverview_tile - example states

Status: 17/11/09

219

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview m433_trimleveloverview_tile - no picture avaiable

Status: 17/11/09

220

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview m433_2_trimleveloverviewtile_consumptionemission

Status: 17/11/09

221

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.7.1 S8_Trimlevel_overview m433_1_trimlevel_baseprice

Status: 17/11/09

222

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8 S9_Trimlevel_detail Example

Status: 17/11/09

229

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail Modules

Status: 17/11/09

230

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail Modules

Status: 17/11/09

231

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail Modules

Status: 17/11/09

232

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m434_trimleveldetail_header

Status: 17/11/09

233

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m435_trimleveldetail_stage

Status: 17/11/09

234

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m436_trimleveldetail_nextsteps

Status: 17/11/09

235

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_trimleveldetail_details

Status: 17/11/09

236

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_trimleveldetail_details

Status: 17/11/09

237

Design 4.0 Styleguide

© argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail TIMLEVELDETAILS_TABS

Status: 17/11/09

238

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_1_trimleveldetail_overview

Status: 17/11/09

239

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_2_1_trimleveldetails_engine_flyout

Status: 17/11/09

240

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_2_trimleveldetail_standard

Status: 17/11/09

241

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_3_trimleveldetail_options

Status: 17/11/09

242

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m437_4_trimleveldetails_technical

Status: 17/11/09

243

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.1 S9_Trimlevel_detail m438_trimleveldetail_trims_navigation

Status: 17/11/09

244

Design 4.0 Styleguide

Š argonauten G2 GmbH

5.8.2 S9_1_Trimlevel_detail_fallback m466_trimleveldetails_technical_fallback

Status: 17/11/09

245

Design 4.0 Styleguide

Š argonauten G2 GmbH

6 HTML Templates and Modules Editorial and Buying Guide

Status: 17/11/09

272

Design 4.0 Styleguide

6.1 Editorial Pages Module Positioning All modules in the margin column and content area are arranged under one another at 20-pixel intervals.

Š argonauten G2 GmbH

Status: 17/11/09

273

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.1 E1_Index1_EntryPages Example

Status: 17/11/09

274

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.1 E1_Index1_EntryPages Example

Status: 17/11/09

275

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.2 E2_Index2_ClassicIndex Example

Status: 17/11/09

276

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.2 E2_Index2_ClassicIndex Example

Status: 17/11/09

277

Design 4.0 Styleguide

© argonauten G2 GmbH

6.1.3 E3_Index2_TeaserIndex Example

Status: 17/11/09

278

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.4 E4_Index3_ContentIndex Example

Status: 17/11/09

279

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.4 E4_Index3_ContentIndex Example

Status: 17/11/09

280

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.5 E5_Content Example

Status: 17/11/09

281

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.5 E5_Content Example

Status: 17/11/09

282

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.6 E7_NewsIndex Example

Status: 17/11/09

283

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.7 E8_NewsDetail Example

Status: 17/11/09

284

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.7 E8_NewsDetail Example

Status: 17/11/09

285

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.8 E9_EventIndex Example

Status: 17/11/09

286

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.9 E10_EventDetail Example

Status: 17/11/09

287

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.10 E11_Search Example

Status: 17/11/09

288

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.12 E13_Generic_ContactForm Example

Status: 17/11/09

292

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.12 E13_Generic_ContactForm Example

Status: 17/11/09

293

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.13 E14_Sitemap Example

Status: 17/11/09

294

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.14 E15_Errorpage Example

Status: 17/11/09

295

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.1.15 E19_Technical lexicon Example

Status: 17/11/09

296

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.2 Buying Guide B2_Buying Guide Index 2

Status: 17/11/09

299

Design 4.0 Styleguide

6.2 Buying Guide Stylistic characteristic of the Buying Guide The module m302 has a standard structure when it is used as a header image in the Buying Guide

Š argonauten G2 GmbH

Status: 17/11/09

300

Design 4.0 Styleguide

6.2 Buying Guide Stylistic characteristic of the Buying Guide The module m204 has a standard structure when it is used on the start page of the Buying Guide

Š argonauten G2 GmbH

Status: 17/11/09

301

Design 4.0 Styleguide

6.3 Modules Module behaviour If a submodule is dropped within a module, the next will move up to take its place.

Š argonauten G2 GmbH

Status: 17/11/09

302

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3 Modules Module behaviour: Modules with grey background

Status: 17/11/09

303

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3 Modules Module behaviour: Modules with fixed height

Status: 17/11/09

304

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m100_1_PageTitle_2col

Status: 17/11/09

305

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m100_2_PageTitle_3col

Status: 17/11/09

306

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m101_Copy_2col

Status: 17/11/09

307

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m101_1_Copy_2col

Status: 17/11/09

308

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m102_ImageCopyOverflowYes_2col

Status: 17/11/09

309

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m103_ImageCopyIndex_2col

Status: 17/11/09

310

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m104_ImageCopyOverflowNo_2x1col

Status: 17/11/09

311

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m107_IndexNews_2col

Status: 17/11/09

312

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m108_IndexListNews_2col

Status: 17/11/09

313

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m109_IndexEvents_2col

Status: 17/11/09

314

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m110_IndexListEvents_2col

Status: 17/11/09

315

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m111_NewsDetail_2col

Status: 17/11/09

316

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m112_EventDetail_2col

Status: 17/11/09

317

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m113_DownloadImage_1col

Status: 17/11/09

318

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m116_SitemapModels_3col

Status: 17/11/09

320

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m117_SitemapSection_1col

Status: 17/11/09

321

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m118_Sitemap_FurtherLinks_3col

Status: 17/11/09

322

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m119_DownloadList_2col

Status: 17/11/09

323

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m120_Table

Status: 17/11/09

324

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m122_Button_bar

Status: 17/11/09

325

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m124_ FinancialOffer_2col

Status: 17/11/09

326

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m125_ Highlight_ImageCopyOverflowYes_2col

Status: 17/11/09

327

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m129_NavigationContainer_2col

Status: 17/11/09

328

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m129_NavigationContainer_2col

Status: 17/11/09

329

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m130_NavigationIndex_2col

Status: 17/11/09

330

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m131_NavigationTabs_2col

Status: 17/11/09

331

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m132_1_NavigationPagerIndex_2col

Status: 17/11/09

332

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m132_2_NavigationPagerContent_2col

Status: 17/11/09

333

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m132_3_NavigationPagerInline_2col

Status: 17/11/09

334

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m133_NavigationSitemapSection_2col

Status: 17/11/09

335

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m134_1_PageFunctionsPrintTop_2col

Status: 17/11/09

336

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m134_2_PageFunctionsPrintTop_3col

Status: 17/11/09

337

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m134_3_PageFunctionsPrintTop_4col

Status: 17/11/09

338

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m136_1_LineHorizontal_2col

Status: 17/11/09

339

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m136_2_LineHorizontal_3col

Status: 17/11/09

340

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m136_3_LineHorizontal_4col

Status: 17/11/09

341

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m140_Disclaimer

Status: 17/11/09

342

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m160_Form_2col

Status: 17/11/09

344

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m161_FormFeedback_2col

Status: 17/11/09

345

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m162_LexiconSearch_3col

Status: 17/11/09

346

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m163_LexiconIndex_1col

Status: 17/11/09

347

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m164_Lexicon_Detail_3col

Status: 17/11/09

348

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.1 Content Modules m170_LayerContainer

Status: 17/11/09

349

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m200_TeaserImageCopyRelated_1col

Status: 17/11/09

350

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m201_TeaserThematical_1col

Status: 17/11/09

351

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m202_TeaserImageGallery_1col

Status: 17/11/09

352

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m203_TeaserVideo_1col

Status: 17/11/09

353

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m204_BannerLarge

Status: 17/11/09

354

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m205_BannerSmall

Status: 17/11/09

355

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m205_1_BannerStageSmall

Status: 17/11/09

356

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m206_TeaserImagePager_1col

Status: 17/11/09

357

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m207_TeaserList_1col

Status: 17/11/09

358

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m208_TeaserListDownload_1col

Status: 17/11/09

359

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m210_1_TeaserListNews_1col

Status: 17/11/09

360

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m210_2_TeaserListNews_1col

Status: 17/11/09

361

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m210_3_TeaserListNews_1col

Status: 17/11/09

362

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m211_1_TeaserListEvents_1col

Status: 17/11/09

363

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m211_2_TeaserListEvents_1col

Status: 17/11/09

364

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m212_TeaserCalendarEvents_1col

Status: 17/11/09

365

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m213_TeaserContact_1col

Status: 17/11/09

366

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m217_SearchForm_1col

Status: 17/11/09

367

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m217_1_SearchForm_Standard

Status: 17/11/09

368

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m217_2_SearchForm_Advanced

Status: 17/11/09

369

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m218_TeaserListCatalogs_1col

Status: 17/11/09

370

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m220_Breaker_1col

Status: 17/11/09

371

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m221_TeaserIndexImageHL_1col

Status: 17/11/09

372

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m221_1_TeaserIndexHL_1col

Status: 17/11/09

373

Design 4.0 Styleguide

© argonauten G2 GmbH

6.3.2 Teaser Modules m222_TeaserIndexImageHLCopy_1col

Status: 17/11/09

374

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m223_TeaserIndexLinkList_1col

Status: 17/11/09

375

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.2 Teaser Modules m224_TeaserStageImageHL_1col

Status: 17/11/09

376

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m300_StageImageTeaser_4col

Status: 17/11/09

377

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m301_StageImageHighlight_4col

Status: 17/11/09

378

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m302_StageImageSmall_4col

Status: 17/11/09

379

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m303_Stage_3col

Status: 17/11/09

380

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m304_Stage_Content_2col

Status: 17/11/09

381

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m306_LayerImage

Status: 17/11/09

382

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m308_StageTeaserContainer

Status: 17/11/09

383

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m310_SpecialIntegration_4col

Status: 17/11/09

384

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m311_iFrameModule_4col

Status: 17/11/09

385

Design 4.0 Styleguide

Š argonauten G2 GmbH

6.3.3 Media Modules m312_iFrameModule_3col

Status: 17/11/09

386