37
06 | Internet guideline. This document contains the design principles and the dimensional scet- ches of the Alpiq web design. Alpiq Internet guideline, August 2009

PRESSEMAPPE DEMO

Embed Size (px)

DESCRIPTION

Alpiq Jahresmedienkonferenz PRESSEMAPPE

Citation preview

Page 1: PRESSEMAPPE DEMO

06 | Internet guideline. This document contains the design principles and the dimensional scet-ches of the Alpiq web design.

Alpiq Internet guideline, August 2009

Page 2: PRESSEMAPPE DEMO

1Alpiq Internet guideline, August 2009

Welcome to the internet guideline

2 1.0 Internet

3 2.0 Overview

3.0 Design principles

4 Logo positioning for screen applications

5 Colours

6 Typography

7 Grid

8 Page architecture, level one

9 Page architecture, level two

10 Header, level one, story animation

11 Header, level one, dimensions headlines

12 Header, level one, dimensions label

13 Navigation, in general

14 Navigation, dimensions of the dropdown layer

15 Image, sizes

16 Image, for light box

17 Image, protective area for content images

18 Information graphics, in general

19 Information graphics, diagrams and organigrams

20 Information graphics, maps

4.0 General dimensions

21 Content pages

22 Tables

23 Forms

5.0 Style specifications

24 Navigation

26 Content

6.0 Online banner layouts

29 Leaderboard, 728 x 90 px

30 Skyscraper, 120 x 600 px

31 Rectangle, 180 x 150 px

7.0 Video

32 Fibre belt and information box

33 Video player

34 8.0 Notes

35 9.0 Overview of Alpiq guidelines

36 10.0 Contacts

Page 3: PRESSEMAPPE DEMO

2Alpiq Internet guideline, August 2009

1.0 Internet

The Internet is a global medium. Here, con-

sistency and a systematic approach to the

Alpiq brand is of particular importance.

Simplicity and clarity are the basic require-

ments for an effective Internet presence

across all Alpiq online platforms. A well

thought-through, clear content structure

enables simple navigation.

Page 4: PRESSEMAPPE DEMO

Sample pages, Energy Services segment

3Alpiq Internet guideline, August 2009

2.0 Overview

Sample pages, Energy segment

Alpiq’s website meets the specific require-

ments of the medium and combines a high

degree of user-friendliness with a graphic

interface that is typical of Alpiq.

Well-structured entry pages, with generously

proportioned headers, ensure rapid naviga-

tion, as well as an emotional encounter with

the Alpiq brand.

Short animated flash sequences greet the

user on the main entry page as well as the

segment entry pages, illustrating successful

projects and services. With one click, the

user can access detailed information on the

relevant topic.

Page 5: PRESSEMAPPE DEMO

x

Alpiq aligns with its base-line

x100 px

18 18100

18

64

18

General logo position on websites

Logo position in small headers without images

Sample application in the Alpiq picturepark

Background may be extended

to the width of the application

4Alpiq Internet guideline, August 2009

3.0 Design principles Logo positioning for screen applications

The position of the logo depends on the for-

mat and is based on the grid. For standard

web applications, the logo is always placed

in the lower right corner of the label. A logo

width of 100 px applies in these cases.

The distance of the logo from the lower as

well as the right-hand border of the label

is identical.

There is a special logo position for small

headers on more informative applications.

Page 6: PRESSEMAPPE DEMO

Alpiq RGB Bin Hex

Blue 5/47/67 #052F43

White 255/255/255 #FFFFFF

Dark Orange 250/98/0 #FA6200

Warm Orange 255/148/0 #FF9400

Light Orange 252/193/0 #FCC100

RGB Bin Hex 90% 80% 70% 60% 50% 40% 30% 20% 10%

Light Blue 0/119/173 #0077AD #3392BD #66ADCE #99C9DE #CCE4EF

Cool Green 90/150/100 #5A9664 #7BAB83 #9CC0A2 #BDD5C1 #DEEAE0

Warm Green 170/180/100 #AAB464 #BBC383 #CCD2A2 #DDE1C1 #EEF0E0

Warm Grey 160/150/137 #A09689 #A9A095 #B3ABA1 #BCB5AC #C6C0B8 #CFCAC4 #D9D5D0 #E2DFDB #ECEAE7 #F5F4F3

Bin Hex

#CDD5D9

#666666

#099CC

Primary colours

Secondary colours

Web optimised values for specific application

5Alpiq Internet guideline, August 2009

Alpiq Blue is used in the label backgrounds

of the header of the Energy segment, in the

main navigation bar and as the main colour

for headlines and copy text. The orange sha-

des appear in the header area and in dia-

grams.

The logo is set in Alpiq Warm Orange. Active

links are coloured in Alpiq Light Blue. On

mouseover, the Alpiq Light Blue turns to

Alpiq Warm Orange. Sidebar copy is tinted in

Alpiq Warm Grey. Alpiq Warm Grey is also

used to structure tables or as background

for maps and certain diagrams.

3.0 Design principles Colours

Hint

Detailed colour specifications for each

style can be found on page 24 et seq.

Page 7: PRESSEMAPPE DEMO

6Alpiq Internet guideline, August 2009

Vista Slab Medium OTCE

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789 & $ fi fl fi fl g ¤ § @ ( ) ; >

Vista Slab Book OTCE

AbCDefghIjkLmnOpqrsTuvWxyz

abcdefghijklmnopqrstuvwxyz

0123456789 & $ fi fl fi fl g ¤ § @ ( ) ; >

3.0 Design principles Typography

Verdana has been selected as the typeface

for the Alpiq websites. Verdana is a system

font which is available and exchangeable

across all technical platforms. It was specifi-

cally created to address the challenges of

on-screen display. Its generous width and

spacing ensures good legibility. Verdana is

unicode-compatible.

Verdana Regular

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789 & $ fi fl fi fl g § @ ();c

Verdana Bold

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789 & $ fi fl fi fl g § @ () ; c

Hint

If working with SIFR technology or

other means of displaying non-system

fonts, headlines of 1st and 2nd rank

appear in Vista Slab Medium OTCE.

Page 8: PRESSEMAPPE DEMO

)

0

20

10

)

1 unit10x10 px

= content area

7Alpiq Internet guideline, August 2009

3.0 Design principles grid

The grid forms the architecture for screen

applications. It is based on the same princi-

ple as applied in print media. The grid always

originates from the zero point on the upper

right-hand corner. The basic grid is always

10 x 10 px, regardless of the format.

Page 9: PRESSEMAPPE DEMO

1st navigation level 2nd navigation level

8Alpiq Internet guideline, August 2009

3.0 Design principles page architecture, level one

All pages, including home and 1st navigation

level, are based on this grid. A flash animation

with Alpiq stories is positioned in the charac-

teristic large header area, giving this page

type its bold and emotional look and feel.

Page 10: PRESSEMAPPE DEMO

1st navigation level 2nd navigation level

9Alpiq Internet guideline, August 2009

3.0 Design principles page architecture, level two

All pages of the 2nd navigation level are based

on this grid. Images primarily from the pow-

erful scenery and industrial highlights pool

are placed within the header area.

The reduced header height (180 px) indicates

the lower navigation level and allows for

more space within the content area.

Hint

For more information about the Alpiq

image style, please refer to the basic ele-

ments guideline, image style chapter.

Page 11: PRESSEMAPPE DEMO

10Alpiq Internet guideline, August 2009

3.0 Design principles header, level one, story animation

A flash animation illustrating Alpiq stories, is

positioned within the header area of level

one. Alpiq’s success stories are conveyed in

four steps, leading to a teaser text placed on

a label (see step 4). From here the user may

either choose to read detailed information

on the story by clicking on the Alpiq Light

Blue link, or navigate to a further story using

the arrows in the lower right-hand corner of

the header area.

The actual image dimension is 960 x 300 px.

The image is then moved by 30 px within the

flash mask of 960 x 270. A downwards move-

ment is always followed by an upwards move-

ment in the subsequent step, and vice versa.

Step 1

First image appears. Single-line headline

on one of the defined positions (see page

11 for positioning). First image moves

down slowly

Fade to second picture

Fade to third picture

The picture stops at its lowest position

Navigation to the next superstory by clicking

on the arrow in the lower right-hand corner.

Step 2

Single-line headline on one of the de-

fined positions.

Second image moves up slowly

Step 3

No headline

Third picture moves down slowly

Step 4

Label with teaser text is revealed from the

right-hand side. (For size and positioning,

please see page 12)

Step 5

The next superstory moves in from the right-

hand side.

Sample animation sequence

Page 12: PRESSEMAPPE DEMO

Lorem ipsum dolor sit

Header, single-line headlines

3535

35

35

x-axis

x-axis

x-axis

35

35

25

120

210

Lorem ipsum dolor sit

Lorem ipsum dolor sit

11Alpiq Internet guideline, August 2009

3.0 Design principles header, level one, dimensions headlines

Headlines White

Vista Slab Book

30 px

Single-line

Max 50 characters

Possible positions on y-axis,

measured from the top edge of

the format:

25 px

120 px

210 px

There are three possible positions for the

single-line headline which appears in step 1

and 2 of the flash animation. The position on

the x-axis is optional within the protective

area.

Hint

While deciding on the position of a white

headline, always consider sufficient

contrast to the image to ensure legibility.

Page 13: PRESSEMAPPE DEMO

Sample header, Energy segment 960 x 270

Sample header, Energy Services segment 960 x 270

20

20480

422

200

20202010080

20

20

20

100140

110

12Alpiq Internet guideline, August 2009

3.0 Design principles header, level one, dimensions label

The teaser text of the label is highlighted in

the Alpiq Orange shades. The order of the

colours – from the darker shade towards

the lighter shade – must not be changed.

The invitation to read more about the story

appears in Alpiq Light Blue. To optimize leg-

ibility on the dark-blue label, Alpiq Light Blue

appears in # 099CC instead of # 0077AD.

The main difference between the websites

of the Energy and Energy Services segments

is the label background colour of the header.

All other dimensions and design principles

below are valid for both segments. The back-

ground colour for the Energy segment is

Alpiq Blue: # 052F43, for the Energy Services

segment it is Alpiq White # FFFFFF.

Hint

Stories are only teased within the large

header (1st navigation level).

Arrows

Background

Alpiq Blue

#052F43

Arrows

Alpiq Light Blue

#0099CC

on mouseover

Alpiq White

#FFFFFF

Arrow link on mouseover

Energy segment

Alpi q White

#FFFFFF

Arrow link on mouseover

Energy Services segment

Alpiq Blue

#052F43

Typography within the label

Vista Slab Book

20 px, line spacing 22 px

Max 5 lines

Max 220 characters

Colour sequence

Alpiq Dark Orange:

#FA6200

Alpiq Warm Orange:

#FF9400

Alpiq Light Orange:

#FCC100

Alpiq Light Blue:

#0099CC

Label Energy segment

Alpiq Blue

#052F43

Label Energy Services

segment

Alpiq White

#FFFFFF

Page 14: PRESSEMAPPE DEMO

1st navigation with dropdown field

1st level navigation on click 2nd level navigation

3rd level navigation 4th level navigation

13Alpiq Internet guideline, August 2009

3.0 Design principles navigation, in general

1st navigation level with

dropdown layer

On mouseover, the copy colour

changes to Alpiq Warm Orange.

Items within the layer are left-

aligned, with a fixed distance in

between.

The mouseover colour is Alpiq

Light Blue.

1st level navigation on click

On click: Copy remains coloured

in Alpiq Warm Orange.

2nd level navigation

On mouseover, copy colour

changes to Alpiq Light Blue.

3rd level navigation

On mouseover, copy colour

changes to Alpiq Light Blue.

4th level navigation

On mouseover, copy colour

changes to Alpiq Light Blue.

On click: Navigation point

turns from Verdana Regular

to Verdana Bold.

Hint

In the case of large amounts of 3rd level

navigation points, as in the example,

navigation layers may be used to guaran-

tee a structured overview.

For detailed specifications, please refer

to page 14.

The 1st navigation level is placed on an Alpiq

Blue band (#052F43). The 2nd navigation

layer is placed on a 30% Warm Grey band

(#E2DFDB). The dropdown navigation layer

is coloured in 20% Alpiq Warm Grey

(#ECEAE7). The content is generally placed

on an Alpiq White background.

Page 15: PRESSEMAPPE DEMO

14Alpiq Internet guideline, August 2009

3.0 Design principles navigation, dimensions of the dropdown layer

The navigation points “who we are” and

“what we offer” use navigation layers on

mouseover to enable the user to access

3rd level navigation points with only one click.

This is a big advantage when navigating com-

plex pages. This navigation layer is coloured

in Alpiq Warm Grey 20% (#ECEAE7).

Page 16: PRESSEMAPPE DEMO

490 x 160 px240 x 120 px

Standard image sizes

Image sizes, for light box

160 x 160 px120 x 120 px80 x 80 px

700 x 500 px 500 x 700 px

15Alpiq Internet guideline, August 2009

There are five main image sizes available for

integration within the content area. All de-

fined formats are based on the grid and are

aligned to the columns.

The image style plays an important role in

the Alpiq corporate design. Correct use of

visuals is therefore very important.

3.0 Design principles Image, sizes

Hint

For more information about the Alpiq

image style, please refer to the basic

elements guideline, image style chapter.

Page 17: PRESSEMAPPE DEMO

Starting point for zoom

The image caption is optional.

The image width and height

should not exceed 700 px .

Sample light box applicationsLight box

16Alpiq Internet guideline, August 2009

All images with a “plus icon” are enlargeable.

On clicking a lightbox opens. Beneath the

image there is space for an optional image

caption.

3.0 Design principles Image, for light box

Page 18: PRESSEMAPPE DEMO

Protective area around images

1.5 units = 15 px

1 unit = 10 pxcolumn spacing: 1 unit = 10 px

2 units = 20 px

17Alpiq Internet guideline, August 2009

A universal protective area surrounds all

images, regardless of the image size, and

defines the spacing in relation to other

elements or text.

3.0 Design principles Image, protective area for content images

Page 19: PRESSEMAPPE DEMO

Sample application

30% Light Blue

Alpiq Dark Orange

Alpiq Warm Orange

Alpiq Light Orange

100% Light Blue

60% Light Blue

100% Warm Grey

60% Warm Grey

30% Warm Grey

75%

Cool Green

Alpiq Warm Orange

Warm Grey shades

100%

Cool Green

50%

Cool Green

25%

Cool Green

30% Light Blue

Alpiq Warm Orange

60% Light Blue

100% Warm Grey

60% Warm Grey

30% Warm Grey

segment 1

segment 2

segment 3

segment 4

segment 5

31

12

18

22

44

segment 1

segment 2

segment 3

segment 4

31

18

22

56

segment 1

segment 2

segment 3

segment 4

segment 5

31

12

18

22

44

18Alpiq Internet guideline, August 2009

3.0 Design principles Information graphics, in general

In general, the defined graphic style for the

Alpiq Corporate Design is also valid for web

graphics. They are usually placed on a white

background.

If diagrams have large colour areas or only

one single accentuation, a reduced colour

palette is recommended. In these cases, only

Alpiq Warm Grey shades, with the possibility

of Alpiq Warm Orange accentuation, are used

on an Alpiq Warm Grey 20% (#ECEAE7) back-

ground.

Use of colour

Nine colours are defined and appear in the

same order for all graphics.

Single accentuation

If a web graphic needs only one accen-

tuation, Alpiq Warm Orange may be used

together with Alpiq Warm Grey shades. For

large diagram areas, the Warm Grey shades

are also recommended. These information

graphics are placed on a 20% Alpiq Warm

Grey background (see following page for

some examples).

Additional colours

If the defined colours are not sufficient,

the Alpiq Cool Green palette may be used in

addition.

Accentuation

To accentuate specific information, Alpiq

Warm Orange may be used.

Hint

For more information about the Alpiq

information graphic style, please refer

to the print brochure guideline.

Page 20: PRESSEMAPPE DEMO

19Alpiq Internet guideline, August 2009

3.0 Design principles Information graphics, diagrams and organigrams

Diagram copy is usually set in 11 px Verdana

Regular and Bold. In the case of extensive

copy, e.g. organigrams, 10 px sizes may be

used. The type colour is Alpiq Blue or Alpiq

White depending on the background. Special

typographic highlights may be coloured in

Alpiq Light Blue or Alpiq Dark Orange. Divid-

ing or highlighting lines have the width of

one pixel. Coloured squares for captions or

for locations on maps are 8 x 8 pixel in size.

For optimum legibility, diagram copy in Ver-

dana is never anti-aliased.

Examples of pie charts, bar diagrams and organigrams

Page 21: PRESSEMAPPE DEMO

By activating or deactivating the check boxes,

the locations on the map react accordingly.

20Alpiq Internet guideline, August 2009

3.0 Design principles Information graphics, maps

Step three:

On mouseover, the name of

the location appears in an

information box.

Step four:

On click, an information box

shows the contact details or

plant information. The place-

ment of an image within this

box is possible. Plants are

linked with further details.

Map animation

Inactive state:

Countries served

Countries not served

Step one:

On mouseover, the

chosen country colour

changes into Alpiq Blue.

The name of the coun-

try appears in an infor-

mation box.

Step two:

On click, the chosen

country enlarges itself

to the full width/height

of the frame. The Alpiq

locations appear in the

respective Alpiq colours.

Interactive Alpiq maps are used throughout

the website, showing countries served, opera-

tional and plant locations. Some additional

information is provided for every location.

On clicking to enlarge a country, the loca-

tions appear as 8 x 8 pixel squares. With

further click additional information and

images appear.

Page 22: PRESSEMAPPE DEMO

21Alpiq Internet guideline, August 2009

4.0 general dimensions Content pages

Hints

For detailed style specifications, please

refer to the overview table on page 24

et seq.

If working with SIFR technology or other

means of displaying non-system fonts,

headlines of 1st and 2nd rank appear in

Vista Slab Medium OTCE.Clearly defined dimensions, font types, pic-

ture sizes and general distances ensure a

consistent appearance throughout the site.

Headline 1st rank

Headline 2nd rank

General distances

General distance between sidebar

modules without separating line

General distance between baseline

of headline to copytext modules

without separator

General distances before and after

a separating line

Page 23: PRESSEMAPPE DEMO

22Alpiq Internet guideline, August 2009

4.0 general dimensions Tables

The table layout for web applications is

based on the definitions for print media.

Columns with a combined content are not

divided by a vertical separation space.

Columns that determine the active sorting of

data in the table are highlighted with Alpiq

Warm Grey 20%.

Page 24: PRESSEMAPPE DEMO

23Alpiq Internet guideline, August 2009

4.0 general dimensions forms

In order to ensure good usability, the layout

of web forms must be arranged as clearly and

precisely as possible. All form backgrounds

use an Alpiq Warm Grey graduation.

Error messages are coloured in

Alpiq Dark Orange (#FA6200)

Page 25: PRESSEMAPPE DEMO

Global navigation

typeface cut size line spacing colour

Menu point Verdana Regular 10 px 16 px #A09689

Mouseover Verdana Regular 10 px 16 px #052F43

On click Verdana Regular 10 px 16 px #052F43

1st navigation level

typeface cut size line spacing colour

Menu point Verdana Bold 11 px 16 px #CDD5D9

Mouseover Verdana Bold 11 px 16 px #FF9400

On click Verdana Bold 11 px 16 px # FF9400

2nd navigation level

typeface cut size line spacing colour

Menu point Verdana Regular 11 px 16 px #052F43

Mouseover Verdana Bold 11 px 16 px #0077AD

On click Verdana Bold 11 px 16 px #0077AD

3rd navigation level

typeface cut size line spacing colour

Menu point Verdana Regular 11 px 20 px #052F43

Mouseover Verdana Regular 11 px 20 px #0077AD

On click Verdana Bold 11 px 20 px #052F43

4th navigation level

typeface cut size line spacing colour

Menu point Verdana Regular 11 px 20 px #666666

Mouseover Verdana Regular 11 px 20 px #0077AD

On click Verdana Bold 11 px 20 px #666666

24Alpiq Internet guideline, August 2009

5.0 style specifications navigation

Page 26: PRESSEMAPPE DEMO

Alpiq Internet guideline, August 2009

Navigation layers

Headline Verdana Bold 11 px 20 px #A09689

Subheadline Verdana Bold 11 px 16 px #052F43

Links Verdana Regular 11 px 20 px #052F43

• Mouseover Verdana Regular 11 px 20 px #0077AD

• On click Verdana Regular 11 px 20 px #0077AD

25

5.0 style specifications navigation

Page 27: PRESSEMAPPE DEMO

General use

Headlines typeface cut size line spacing colour

hierarchy level 1 Vista Slab OTCE Medium 18 px 20 px #052F43

• Link Vista Slab OTCE Medium 18 px 20 px #0077AD

• Mouseover Vista Slab OTCE Medium 18 px 20 px #FF9400

hierarchy level 2 Vista Slab OTCE Medium 14 px 20 px #052F43

• Link Vista Slab OTCE Medium 14 px 20 px #0077AD

• Mouseover Vista Slab OTCE Medium 14 px 20 px #FF9400

hierarchy level 3 Verdana Bold 12 px 16 px #052F43

• Link Verdana Bold 12 px 16 px #0077AD

• Mouseover Verdana Bold 12 px 16 px #FF9400

overline / date Verdana Regular 10 px 20 px #A09689

Body copy

copy Verdana Regular 12 px 16 px #052F43

caption Verdana Regular 10 px 16 px #052F43

Left margin, tagcloud

• XS Verdana Regular 9 px 18 px #0077AD

• S Verdana Regular 12 px 20 px #0077AD

• M Verdana Bold 12 px 20 px #0077AD

• L Verdana Regular 14 px 20 px #0077AD

• XL Verdana Bold 16 px 22 px #0077AD

• XXL Verdana Bold 20 px 24 px #0077AD

Current topics

Headline Vista Slab OTCE Medium 14 px 16 px #052F43

• Link Verdana Regular 11 px 16 px #0077AD

• Mouseover Verdana Regular 11 px 16 px #FF9400

• On click Verdana Regular 11 px 16 px #FF9400

Contact

• Headline Vista Slab OTCE Medium 14 px 20 px #052F43

• Copy Verdana Regular 11 px 16 px #666666

• Emphasis Verdana Bold 11 px 16 px #666666

Teaser

Copy Verdana Regular 11 px 16 px #052F43

Alpiq Internet guideline, August 2009 26Alpiq Internet guideline, August 2009

5.0 style specifications Content

Page 28: PRESSEMAPPE DEMO

Right margin typeface cut size line spacing colour

Teaser

• Headline Vista Slab OTCE Medium 14 px 20 px #052F43

• Copy Verdana Regular 11 px 16 px #666666

Related links

• Headline Vista Slab OTCE Medium 14 px 16 px #052F43

• Emphasis Verdana Bold 11 px 16 px #666666

• Link Verdana Regular 11 px 16 px #0077AD

News

• Headline Vista Slab OTCE Medium 14 px 16 px #052F43

• Emphasis (link) Verdana Bold 11 px 16 px #0077AD

• Link Verdana Regular 11 px 16 px #0077AD

• Copy Verdana Regular 11 px 16 px #666666

Forms

Headline Vista Slab OTCE Medium 14 px 20 px #052F43

Labelling Verdana Regular 11 px 25 px #052F43

Emphasis Verdana Bold 11 px 25 px #052F43

Error Verdana Regular 11 px 25 px #FA6200

Annotation Verdana Regular 10 px 16 px #666666

Tools

Headline Vista Slab OTCE Medium 14 px 20 px #052F43

Copy Verdana Regular 11 px 16 px #666666

Links Verdana Regular 11 px 16 px #052F43

• Mouseover Verdana Regular 11 px 16 px #0077AD

• On click Verdana Regular 11 px 16 px #052F43

27Alpiq Internet guideline, August 2009

5.0 style specifications Content

Page 29: PRESSEMAPPE DEMO

Alternative typeface for headlines set in Vista Slab Book

typeface cut size line spacing colour

Hierarchy level 1 Verdana Regular 16 px 20 px #052F43

Mouseover Verdana Regular 16 px 20 px #0077AD

On click Verdana Regular 16 px 20 px #052F43

Hierarchy level 2 Verdana Regular 14 px 20 px #052F43

Mouseover Verdana Regular 14 px 20 px #0077AD

On click Verdana Regular 14 px 20 px #052F43

Forward/backward navigation

typeface cut size line spacing colour

Menu point Verdana Regular 11 px 16 px #052F43

Mouseover Verdana Regular 11 px 16 px #FF9400

On click Verdana Bold 11 px 16 px #052F43

disabled Verdana Regular 11 px 16 px #A09689

28Alpiq Internet guideline, August 2009

5.0 style specifications Content

Page 30: PRESSEMAPPE DEMO

>

>

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen. last

line

Layout dimensions and layout examples

Animation example

Possible 1st frame

Label and logo appear

Typography appears

Volobore min utpatisim quis nostrud do, conulputpat nullamet lum diam vel incipis am.

energie 2 Atel und eOs schliessen sich zusammen.

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

8 8816

20

58

5810 10

8

8

8

8

10

10

29Alpiq Internet guideline, August 2009

Logo

Width: 58 px

Label and margins

Image layouts: 8 px

Full-page label layouts: 10 px

Background image

728 × 90 px, 72 dpi

Headline, recommended sizes

Vista Slab Book

40 px, line spacing 44 px

28 px, line spacing 32 px

Lead, recommended sizes

Vista Slab Book

18 px, line spacing 22 px

14 px, line spacing 18 px

Copy, recommended size

Vista Sans Book

12 px, line spacing 16 px

Copy sizes are flexible. The

defined minimum size is 12 px,

the maximum size is 40 px.

The copy size may be scaled

in 4 px steps.

6.0 Online banner layouts Leaderboard, 728 × 90 px

Position in the window

The layouts shown are common banner for-

mats. Please note that all size specifications

are based on a resolution of 72 dpi.

Dimensions on this page are given in pixels.

The colours of online banners are defined

in RGB.

Dimensions in pixels

Page 31: PRESSEMAPPE DEMO

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

energie 2

Atel und eOs schliessen

sich zusammen.

mehr energie. für Ihr

unternehmen.

energie 2

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

8 8 8 8 10 10

10

10

48

last line

last line

50

5858

88

8

Layout dimensions and layout examples

> >

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

Possible 1st frame

Label and logo appear

Typography appears

30Alpiq Internet guideline, August 2009

Logo

Width: 58 px

Label and margins

Image layouts: 8 px

Full-page label layouts: 10 px

Background image

120 × 600 px, 72 dpi

Headline, recommended sizes

Vista Slab Book

40 px, line spacing 44 px

28 px, line spacing 32 px

Lead, recommended sizes

Vista Slab Book

18 px, line spacing 22 px

14 px, line spacing 18 px

Copy, recommended size

Vista Sans Book

12 px, line spacing 16 px

Copy sizes are flexible. The

defined minimum size is 12 px,

the maximum size is 40 px.

The copy size may be scaled

in 4 px steps.

6.0 Online banner layouts skyscraper, 120 × 600 px

Position in the window

The layouts shown are common banner

formats. Please note that all size specifica-

tions are based on a resolution of 72 dpi.

Dimensions on this page are given in pixels.

Animation example Dimensions in pixels

Page 32: PRESSEMAPPE DEMO

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

energie 2

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

> >

Atel und eOs schliessen sich zusammen. mehr energie. für Ihr unternehmen.

energie 2 Atel und eOs schliessen sich zusammen.

energie 2 Atel und eOs schliessen sich zusammen.

8 88 108 10

8

8

810

10

5048

5816 20

8

last line

last line

58

Possible 1st frame

Layout dimensions and layout examples

Label and logo appear Typography appears

31Alpiq Internet guideline, August 2009

Logo

Width: 58 px

Label and margins

Image layouts: 8 px

Full-page label layouts: 10 px

Background image

180 × 150 px, 72 dpi

Headline, recommended sizes

Vista Slab Book

40 px, line spacing 44 px

28 px, line spacing 32 px

Lead, recommended sizes

Vista Slab Book

18 px, line spacing 22 px

14 px, line spacing 18 px

Copy, recommended size

Vista Sans Book

12 px, line spacing 16 px

Copy sizes are flexible. The

defined minimum size is 12 px,

the maximum size is 40 px.

The copy size may be scaled

in 4 px steps.

6.0 Online banner layouts rectangle, 180 × 150 px

Position in the type area

The layouts shown are common banner

formats. Please note that all size specifica-

tions are based on a resolution of 72 dpi.

Dimensions on this page are given in pixels.

Animation example Dimensions in pixels

Page 33: PRESSEMAPPE DEMO

Fibre belt

Information box

1080

1080

200

200

x

x x208

1680

1680

1920

1920

x

32Alpiq Internet guideline, August 2009

7.0 video fibre belt and information box

Fibre belt

Name and title are aligned with the upper

and lower logo border. The fibre belt rolls out

from the left-hand side. The text area ends

on both sides with the same distance to the

label border.

Information box

The copy text is aligned on the left-hand side

of the label. The text area ends on both sides

with the same distance to the label border.

The info box rolls out from the left-hand side.

Name

Vista Slab Book

135 px

Alpiq White

# FFFFFF

Title

Vista Slab Book

70 px

Alpiq Light Blue

# 66ADCE

Background

Alpiq Blue

# 052F43

Slightly transparent

Copy infobox

Vista Slab Book

90 px

Line spacing 70 px

Title colour: Alpiq White

# FFFFFF

Copy colour: Alpiq Light Blue

# 66ADCE

Background

Alpiq Blue

# 052F43

Slightly transparent

Safety margin area

The safety margin area guaran-

tees fully visible fibre belt and

information box on all different

screen sizes and player formats.

Page 34: PRESSEMAPPE DEMO

While playing

On mouseover

Startscreen

Play button

Mouseover

33Alpiq Internet guideline, August 2009

7.0 video video player

Main play button

Play/pause and back button

Title of video

Control panel

Slightly transparent

Total time/actual time

Volume control

Full screen mode

Progress bar

All Alpiq videos shown on the website should

use the Alpiq video player, which has been

specially designed and customised. Videos

should be integrated according to the stand-

ard column widths.

(big: 740 pixels = 3 columns)

(medium: 490 pixels = 2 columns)

(small: 240 pixels = 1 column)

They may appear within the content as well

as the side bar area.

Page 35: PRESSEMAPPE DEMO

34Alpiq Internet guideline, August 2009

Illustrations

With a few exceptions, all design

plans are shown in reduced form.

Units of measurement

Unless otherwise stated, all measure-

ments are given in pixels.

Abbreviations

OTCE = OpenType Central European

px = pixels

BinHex = BinHex is a six-digit, hexa-

decimal number used in HTML, CSS,

SVG, and other computing applica-

tions, to represent colours.

8.0 notes

Page 36: PRESSEMAPPE DEMO

35Alpiq Internet guideline, August 2009

9.0 Overview of Alpiq guidelines

* Separate versions of these guidelines are available for the Energy

and Energy Services segments.

Basic elements

Tone of voice

Stationery *

PowerPoint *

Print brochures *

Internet

Building signage *

Corporate fashion

Vehicle signage

Exhibitions and events

Advertising *

Employer branding *

Promotional gifts

01

02

03

04

05

06

07

08

09

10

11

12

13

Page 37: PRESSEMAPPE DEMO

36Alpiq Internet guideline, August 2009

10.0 Contact

Brand Hotline

T +41 62 289 45 00

[email protected]

Corporate Branding

Beate Kehrberger, T +41 62 286 74 54

[email protected]

Sarah Früh, T +41 62 286 79 55

[email protected]