NOLTE WEB STYLE GUIDE 2013Stand: 2013-08-28
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 2
TITLE PAGE
Index of Contents ........................................................2
Introduction ................................................................3
A1 Grid .......................................................................4
A2 Navigation .............................................................5
A3 Typeface ................................................................6
A4 Colors ....................................................................7
A5 Sliders ...................................................................8
A6 Elements ................................................................9
B EXAMPLES ......................................................10-22
01 Templates .............................................................23
Sitemap ................................................................24
02 Home ...................................................................25
03 Map .....................................................................26
04 Layer Map .......................................................27-29
05 News ...................................................................30
06 Products ..............................................................31
07 Slider Open ..........................................................32
08 Content Portrait ...................................................33
09 Content Landscape...............................................34
10 Layer Privacy ........................................................35
11 Layer Legal Notice ................................................36
12 Layer Contact .......................................................37
Index of Contents
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 3
INTRODUCTIONThis website style guide provides the basic rules for creating your Nolte website while also hel-
ping to establish Nolte as a company with a uniform appearance.
These design guidelines focus on the visual design grids of the website and the interplay of the
individual graphical elements such as icons, buttons, layers, menus, colours and fonts.
The websites you create can only be clearly recognised as Nolte websites if the rules listed here
are strictly adhered to.
Our aim: identification and emotional connection to the Nolte brand.
The needs of our customers are at the heart of the way we think and act. We help our customers
to design their personal living space creatively and intuitively. Our products and space solutions
are aimed at giving our customers a feeling of security, safety, calmness, community, and support.
We also want to convey this feeling of support, safety and security to customers via our website.
Across the world.
The long-term aim of these measures should be to link the various Nolte websites. Also, users
should always instantly recognise that they have entered the Nolte world.
NOLTE – ROOM FOR LIFE.
CONTACTLisa Arnold
Nolte Home Studio GmbH
Konrad-Nolte-Str. 20
D-76726 Germersheim
Germany
e-Mail: [email protected]
Take a look at the Nolte website here to get an idea:
http://www.nolte-kuechen.de/en/Company
http://www.nolte-moebel.de/en/Company
Introduction
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 4
424
424 x 390211 x 194 211 x 194
211
22
2 2
1
1
137
1
2
211424
1178
1280
A1 BASIC GRID.The basic grid is divided into global (yellow)
and local (grey) sections.
The image material for the global section
is supplied. You may incorporate your own
image material into the local section.
Motifs (local section to the right) can be ar-
ranged freely based on the grid (see options).
The yellow markings denote the spacing in
pixels.
OPTIONS
GLOBAL LOCAL LOCAL
GLOBAL GLOBAL
SITE SHADOWThe website has a shadow element at the bottom.
Grid
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 5
1280
33
12
3310380
A2
18
8 8
47
16
820
NAVIGATION.The font for the main navigation
is Arial, regular,14 pt. Individual
navigation points can be omitted
if required. The search field is
placed next to the navigation.
LOGOThe logo is placed top right
next to the search field. Please
place your own country logo here.
Please adhere to the prescribed
dimensions. The logo should be
right justified.
HOVERThe sub-pages (second level) for
the menu points are accessed via
a hover menu. The sub-navigation
for these points is structured as
shown in the figure opposite:
The menu entries listed here are
also selected via a hover menu
(#FFE900).
*
*Please place your own country logo here.
Alignment: left, width as needed
Navigation
20
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 6
H1 Youngsook BTN, 40px, #FFFFFF
H2 Arial, bold, 20px/24px, #000000
H3 Arial, bold 12pxt/16px, #000000
Copy Arial, regular 12px/16px, #000000
Slider Arial, regular 12px/16px, #FFFFFF
Navigation Arial, regular 14px/16px, #000000
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
FONT TYPE
A3
Youngsook BTN
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Typeface
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 7
#FFE900
Navigation-Hover, Location-Hover (Maps),
Arrow in Button, 1px Line inside Slider and Footer
Fill - #FFE900, Outline #000000
Location-Dots (Map)#000000
H2, H3, Copy, Background Flyout
#000000, 70%
Background Button
#000000, 50%
Background Slider
#FFFFFF
H1 (Title), Copy-Buttons, Copy-Footer, Copy Slidert
#FFFFFF, 70%
Arrows in Slider
40%Opacity
Position 70%
COLOR.The overview of colours opposite shows whe-
re the company colours should be used, as
well as the transparency used for each colour.
EXAMPLE.The colour white (#FFFFFF) is used, for ex-
ample, in the title (H1), copy for the buttons
and in the slider and footer.
COLOUR PROFILE.The only colour profile used is sRGB.
#000000 #FFFFFF
Background Titles 640 x 20
A4 Colors
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 8
SLIDERA slider element is available for the product
section to enable quicker navigation. This
slider is positioned at the bottom edge but
above the footer. Five thumbnails are display-
ed as standard. The number of thumbnails
can be increased depending on requirements.
The thumbnails are contrasted with the back-
ground by a 1 pt wide outline, colour #cccccc.
A hover effect whereby the outline changes
colour to #FFE900 is initiated.
When the page is first accessed, the slider
will appear and then disappear just once to
make users aware that it is there. The slider
can be activated or deactivated by clicking on
the arrow (slide down/slide up).
FooterThe footer is the bottom element on the
website. Links to the company (e.g. contact,
information, etc.) are placed here.
The footer also offers space for social media
plug-ins and enables users to call up the
slider navigation.
A5
137
194130 x 90 130 x 90130 x 90130 x 90130 x 90
1Title: Arial regular, 12px, #FFFFFF
Arial regular, 12px, #FFFFFF
Sliders
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 9
BUTTONS, LINK AND ICONSOverview of inserted buttons and links
These can be taken from the PSD master file.
A6 Elements
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 10
EXAMPLES LOOK AND FEELThe following layers will give you an example of the Look and Feel of the Nolte Website including visuals.
Depending on the material that you will use, your website will look slightly different.
B Examples
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 11
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 12
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 13
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 14
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 15
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 16
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 17
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 18
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 19
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 20
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 21
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 22
B
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 23
TYPE OF SITESThe overview shows the 11 available site
types/site formats that can be incorporated
into the website depending on individual
requirements. These represent all the cont-
ent-relevant grids available. The pages can be
filled with individual content. The description
for the relevant site type shows what kind of
content can be incorporated.
In some cases (03 map), it is possible to omit
individual elements.
02 home
06 products
11 layer legal notice
03 map
08 content portrait
12 layer contact
04 layer map
09 content landscape
05 news
10 layer privacy
07slider open
Templates01
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 24
SITEMAPThis overview depicts the site map and its
corresponding content and sub navigations.
In addition, the overview illustrates the
assignment of the corresponding layers that
need to be used for certain content (see also
above).
One must choose one of the suggested layer
types. However, one should not use multiple
layer types simultaneously.
FOR EXAMPLE:About Nolte, Nolte Group, corresponding
layers are:
07 or 08 or 09.
Projects, corresponding layers are: 05 or 06 or
07 or 08 or 09.
Note: You may skip individual menu items
respectively your focus of your business.
ABOUT NOLTE–Nolte Group (07, 08, 09)
–History (07, 08, 09)
–Philosophy (07, 08, 09)
–Facts & Figures (07, 08, 09)
–Quality (07, 08, 09)
–Sustainability (07, 08, 09)
KITCHENS–Nolte Kitchens (06, 07, 08, 09)
–Express Kitchens (06, 07, 08, 09)
BEDROOMS–Nolte Furniture (06, 07, 08, 09)
–Express Furniture (06, 07, 08, 09)
–CS Schmal Furniture (06, 07, 08, 09)
LIVING ROOMS–Nolte (06, 07, 08, 09)
–CS Schmal (06, 07, 08, 09)
INNOVATIONS(06, 07, 08, 09)
PROJECTS(05, 06, 07, 08, 09)
SHOWROOMS–Concept introduction (09)
–Local showrooms map (03+04)
CONTACT–Team (08, 09)
–Contact details (11)
–Contact form (12)
NEWS(05)
FOOTER:Contact (v.s.)
Legal (11)
Privacy (10)
Sitemap
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 25
424
424 x 390211 x 194 211 x 194
211
22
2 2
1
1
137
1
2
211424
1178
1280
02 HOMEThe homepage is divided into a total of five sec-
tions. There are three global sections (depicted
here in yellow) which are the same for every
country. The respective content for these is
supplied by Nolte Home Studio in Germersheim
(Germany).
For the local section (depicted here in grey), the
grid has two sections, whereby the right-hand
section can be divided up in accordance with
the basic grid. This provides seven options for
incorporating content.
TITLEThe length of the background bar for the title
always stays the same. It has a fixed size, within
which the headline and logo are positioned in
the prescribed size. The respective country logo
is placed here.
Youngsook BTN font, 40 pt, #FFFFFF (H1) is
used.
NAVIGATION ELEMENTSThe background elements for the buttons have
a fixed height but adjust to fit the length of the
lettering.
LOGO 208 x 94Title Background Graphic 850x140 32
22
16
455
H1
Home
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 26
1
03 MAP/SHOWROOMIndividual map excerpts can be used here. Your
locations should be displayed centrally on the
map.
Arrows can be incorporated to the right and left
enabling users to scroll the map.
There is also the option to control the map view
using the zoom buttons (plus/minus symbols).
HOVER LOCATIONBy hovering over a location point, the name of
the location and description of your Home Stu-
dio will be displayed. A click calls up the detail
layer using a light-box effect. See next page.
TITLEFont type: Youngsook BTN (H1)s
COPYFont type: Arial 12 pt/16 pt
This section gives you the option to provide a
more detailed description of the map view.
1280 x 520
1280
25
35
25
Map
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 27
1
04 DETAIL LAYER SHOWROOMUp to four images from the respective showroom can
be displayed in the opened detail layer. By clicking on
one of the images, an enlarged preview of the motif
is displayed. See the following two pages for details
and view.
To the right of this, there is some copy text that pro-
vides additional information about the selected Home
Studio, as well as address and contact details.
By clicking on the Google Maps link, a new browser
window or tab is opened. This contains additional
information such as directions.
COPYFont type: Arial 12px /16px
THUMBSPossible arrangements
1280
850
Frame: 3px
390125 125
125x125
5050
40
44
Layer Map
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 28
1
04 DETAIL LAYER/MOTIF PREVIEWFormat:
Landscape mode
COPYFont type: Arial 12px/16px
1280
850
Frame: 3px
390
340
320 x 340
Frame 10
320
70
Layer Map
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 29
1
04
1280
850
Frame: 3px
390240 x 320
Frame 10
320
65
340
Layer Map
DETAIL LAYER/MOTIF PREVIEWFormat:
Portrait mode
COPYFont type: Arial 12px/16px
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 30
1
05 NEWSThe news section is structured as follows:
Up to three news teasers (motifs) can be dis-
played at the same time. The number of news
teasers can of course be increased according
to requirements. By using the arrows to the
right and left, you can navigate to other news
teasers.
The two-column section underneath the news
teaser is used for the copy.
COPYFont type: Arial 12px/16px
1280
424 x 390
424 x 45
H2
H3
424 x 45 424 x 45
424 x 390
222 2
424
390
News
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 31
125
37
1
06 PRODUCTSMotifs are displayed in landscape format across
the entire width.
The section below is divided into two columns:
the left section contains the headline and copy,
and the right section offers space for up to three
thumbnails and a download button.
Motifs can be selected using the thumbnails. The
download button can be used for topics such as
information material.
COPYFont type: Arial 12px /16px
125125125125
1280 x 520
1280
5 5 5H2
It is possible to set up three navigati-on-thumbs and one download image.
Products
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 32
07 SLIDERThe slider is an alternative navigation system
for displaying image material within the
selected area1280
194130 x 90 130 x 90130 x 90130 x 90130 x 90
1
H1
Slider Open
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 33
90
1
1280
08 CONTENT PORTRAITThe motifs are displayed in portrait format
across the whole height of the page up to the
top navigation.
The left section comprises the headline and
copy, as well as the option to provide docu-
ments for users to download.
Motifs cannot be selected using thumbnails.
COPYFont type: Arial 12px /16px
805 x 819475
H2
H1
Content Portrait
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 34
80 80
130
67
1
09
1280 x 520
90
1280
H2
H1
CONTENT LANDSCAPEMotifs are displayed in landscape format
across the entire width of the page.
The headline and copy are placed underneath
the motif, and there is an option to provide
documents for users to download.
Motifs cannot be selected using thumbnails.
However, the slider can be used for this
purpose.
COPYFont type: Arial 12px /16px
Content Landscape
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 35
1
10 LAYER PRIVACYA light-box effect is used to make this layer
appear from the footer.
628
H2
H2
H3
594
1280
45
Frame: 3px
Layer Privacy
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 36
11 LAYER LEGAL NOTICEA light-box effect is used to make this layer
appear from the footer.
There is also the option to incorporate a map
view with route planner using Google Maps.
1280
628
Imge or Map570 x 260
594
45
Frame: 3px
H2
H3
H2
Layer Legal Notice
NOLTE WEB STYLE GUIDE 2013 //
EXAMPLES FOR GRAPHIC-ELEMENTS SEE PSD-FILE NOLTE WEB STYLE GUIDE 2013 | ALL UNITS ARE DEFINED IN PIXEL PAGE 37
12 LAYER CONTACTThis layer is accessed from the top navigation
or footer using a light-box effect.
This layer contains obligatory fields that must
be completed by the user.
These are identified by asterisks.
There are also optional fields (without
asterisks). In the field ‘What can we do for
you?’, users can write a brief synopsis of their
request.
1280
45
955
555
H2
H2
Layer Contact