NOLTE WEB STYLE GUIDE 2013 · 2018. 12. 18. · NOLTE WEB STYLE GUIDE 2013 // EXAMPLES FO...

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



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



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



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



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


FONT TYPE

A3

Youngsook BTN


Typeface



#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



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



BUTTONS, LINK AND ICONSOverview of inserted buttons and links

These can be taken from the PSD master file.

A6 Elements



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



B



B



B



B



B



B



B



B



B



B



B



B



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



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



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



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



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



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



1

04

1280

850

Frame: 3px

390240 x 320

Frame 10

320

65

340

Layer Map

DETAIL LAYER/MOTIF PREVIEWFormat:

Portrait mode




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.


1280

424 x 390

424 x 45

H2

H3

424 x 45 424 x 45

424 x 390

222 2

424

390

News



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.


125125125125

1280 x 520

1280

5 5 5H2

It is possible to set up three navigati-on-thumbs and one download image.

Products



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



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.


805 x 819475

H2

H1

Content Portrait



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.


Content Landscape



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



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



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

Date post:	18-Dec-2020
Category:	Documents
Upload:	others
View:	3 times
Download:	0 times

NOLTE WEB STYLE GUIDE 2013 · 2018. 12. 18. · NOLTE WEB STYLE GUIDE 2013 // EXAMPLES FO...

Documents