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