Upload
mathias-stocker
View
228
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Alpiq Jahresmedienkonferenz PRESSEMAPPE
Citation preview
06 | Internet guideline. This document contains the design principles and the dimensional scet-ches of the Alpiq web design.
Alpiq Internet guideline, August 2009
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
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.
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.
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.
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.
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.
)
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.
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.
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.
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
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.
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
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.
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).
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.
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
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
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.
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
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.
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
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%.
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)
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
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
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
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
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
>
>
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
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
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
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.
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.
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
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
36Alpiq Internet guideline, August 2009
10.0 Contact
Brand Hotline
T +41 62 289 45 00
Corporate Branding
Beate Kehrberger, T +41 62 286 74 54
Sarah Früh, T +41 62 286 79 55