KSB Online-Styleguide

Transcription

1 KSB Online-Styleguide Guide Stand Version November August

2 Design guidelines for online presence 2 In addition to print media, KSB also has an online presence. This style guide documents the main design elements of the KSB website as well as specific aspects relating to display on mobile devices such as tablets and smartphones. As web applications can vary in their objectives and functionality, the design elements cannot be adopted in their entirty. Nevertheless, this style guide gives you valuable tips regarding the design of your web application.

3 KSB website style guide Table of contents 3 I KSB website. Design basics. Fonts Colours Trademark/Logo Brand claim....5 Wave Structure and page types 2. Basic grid Home page layout Content layout Search results page layout Country sites home page Navigation elements 3. Main navigator Fly-out menu for country selection Meta navigator Footer Page navigator Content navigator Process display Tab navigator Content elements 4. Table elements Product configurator Image gallery Image gallery lightbox Video player List elements Forms Search Downloads Contact finder Margin column teaser Overview page teaser Interactive elements 5. Text links Buttons Icons Image formats 6. Teaser images Images in text Miscellaneous... 42

4 KSB website style guide Table of contents 4 II Mobile applications. Structure and page types. Basic grid Home page layout Content layout Search results page layout Navigation elements 2. Main navigator Footer Content navigator Content elements 3. Download search module Download search results module Contact search module Contact results module Selection elements Interactive elements 4. Text links Interactive list element Buttons Icons Image formats 5. Teaser images Images in text Miscellaneous... 62

5 KSB website style guide. Design basics 5. Fonts CartoGothic Pro should be used as the standard web font on the website. The user does not need to have this installed in advance. It is an online alternative to the Frutiger font that is used offline. CartoGothic Pro is to be predominantly used for headlines. Arial, the system font, should be used for body copy, navigation elements and interactive modules. Arial also serves as a fallback font for CartoGothic Pro. Helvetica is used as a fallback font for Arial. If neither of the system fonts Arial or Helvetica are installed on the user s machine, another sans serif font that is installed on the user s machine is used. CartoGothic Pro a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Arial a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Helvetica a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

6 KSB website style guide. Design basics 6 Fonts to be used on the home page Arial, 4 px #777 8 Arial Bold, 2 px 5 # Arial Bold, 3 px # Arial Bold, 4 px # CartoGothic Pro, 4 px 6 #FFFFFF Arial Bold, 3 px #CCCCCC 3 CartoGothic Pro Bold, 4 px # CartoGothic Pro Bold, 2 px #9EAA CartoGothic Pro, 24 px # CartoGothic Pro, 2 px #BBB Arial Bold, 4 px #FFFFFF CartoGothic Pro, 4 px #AEAEAE Arial Bold, 2 px #FFFFFF Arial Bold, 8 px # Arial, 2 px # Arial, 2 px #336699

7 KSB website style guide. Design basics 7 Fonts to be used on content pages Arial Bold, 2 px # Arial, 6 px # Arial Bold, 4 px # Arial, 4 px # CartoGothic Pro Book, 26 px #2A2A2A Arial, 4 px # Arial, 8 px # Arial, 3 px #FFFFFF Arial Bold, 6 px # Arial, 4 px #393939

8 KSB website style guide. Design basics 8.2 Colours KSB blue is the primary colour to be used on the website. This provides a high recognition factor and a compelling look and feel that is in line with the rest of KSB s online presence. Buttons that lead to items such as newsletter registrations and KSB microsites ( call-toaction buttons) should be coloured orange (emphasis colour), along with the navigation arrows that appear on the home page platform when the mouse cursor is placed over an item. Various shades of grey and other colour gradients are also available. Primary colours Emphasis colour KSB blue # White #FFFFFF Orange #FF57F Secondary colours Black # Grey 0 #2A2A2A Grey 02 # Grey 03 # Grey 04 # Blue #4E8B3 Grey gradient Meta navigator #FDFDFD #ECECEC Grey gradient Configurator # # Background website gradient #FFFFFF #CDDBEA #49688E

9 KSB website style guide. Design basics 9.3 Trademark/Logo The KSB logo is located in the top-left section of the website, indicating the sender. Its specified dimensions are 7 x 48 pixels. The KSB logo has been internationally registered as a trademark and cannot be changed. It consists of the letters KSB in this sequence and the circulation symbol which combine to form the company logo Not permitted

10 KSB website style guide. Design basics.4 Brand claim plus products and services The brand claim and the line summarising the range of products and services (Pumps, Valves, Service) is always located in the top-right section and always appears in conjunction with the KSB logo. The specified size of the claim in English is 90 x 26 pixels. The brand claim may not be alienated. The brand claim and the line summarising the range of products and services (Pumps, Valves, Service) may not be displayed separately from one another. The brand claim appears on all web applications, such as websites, microsites and pump lexicon. The brand claim is not included on websites of KSB subsidiaries with independent corporate brands. 90 KSB brand claim normal Our technology. Your success. Pumps n Valves n Service 2 Our technology. Your success. Pumps Valves Service 26 KSB barnd claim negative 42 Our technology. Your success. Pumps n Valves n Service Position of KSB logo and brand claim Not permitted

11 KSB website style guide. Design basics.5 Wave The wave style element provides the layout with an easily recognisable formal style and ensures that the KSB brand stands out from the competition. The specified size of the header is 24 x 2 pixels. In the case of larger resolutions, the background colour white expands infinitely 2 pixels to the left and 53 pixels to the right. The corner radius (curvature) of the wave is 2 pixels Combination of KSB logo, brand claim and wave 24

12 KSB website style guide 2. Structure and page types 2 2. Basic grid The newly designed KSB website is based on a 2-column grid which is optimised for the standard resolution of,024 x 768 pixels. All pixel values defined in this style guide are therefore only relevant for this resolution. Column grid 2 columns

13 KSB website style guide 2. Structure and page types Home page layout The home page layout is divided into the areas of navigation, platform, navigator, two teaser areas and footer. The background image has a specified width of,806 pixels. The height is flexible, but should be at least 754 pixels. 960 x 55 Header x x Navigation 640 x x 462 Platform and navigator x 342 Teaser area x 342 Teaser area 960 x Footer

14 KSB website style guide 2. Structure and page types Content layout The content layout highlights the content of the corresponding page. Beside this, there is a column displaying the navigation, providing a quick overview of the site as well as access to all relevant information. There may be room for content teasers and the navigator in the margin column. 960 x x x x 347

15 KSB website style guide 2. Structure and page types Search results page layout The search results page layout does not feature the navigation column for the content page. This allows more space for search results. The search results page layout is a typical single-column layout, as is also used on the contact page, for instance. 960 x x x x 347

16 KSB website style guide 2. Structure and page types Country sites home page The layout for the individual country sites is structured in a similar manner to the.com home page. The main difference is the closed platform. This is designed to make maintenance with new images easier for in-country designers. The site s background is enriched through the use of a colour gradient. 960 x x x x x x x x 347

17 KSB website style guide 3. Navigation elements 7 3. Main navigator The horizontal main navigator is located within the header area and consists of up to five navigation items. The navigator has a width of 760 pixels. Two rows of navigation items are not envisaged here. Normal 45 Rollover

18 KSB website style guide 3. Navigation elements Fly-out menu for country selection The fly-out menu for country selection is located in the header area within the meta navigator. It brings together all of the national sites and provides quick and clear access. Normal Rollover

19 KSB website style guide 3. Navigation elements Meta navigator In addition to quick access to the country sites, the meta navigator also allows visitors to directly access various website tools. The menu is an all-encompassing navigator for the site Footer The footer is included on each page and is also displayed by default on the home page. It enables visitors to access further relevant information. Visitors can also subscribe to the KSB newsletter via the footer. Normal Closed Country site footer

20 KSB website style guide 3. Navigation elements Page navigator The page navigator is located in the left-hand column of the content pages. The various statuses are shown in the illustrations below. Active items and rollovers are shown in full. Level rollover Level 2 rollover Level 2 active

21 KSB website style guide 3. Navigation elements Content navigation Various modules are available for navigation in the content area. These enable individual guidance of users tailored to the specific content Process display The process display divides a given process into multiple steps; it is illustrated below via the application process, by way of example. The user s current step is highlighted and is thus very clear to them. This enables a clear presentation of a given process. Highlighting of current step Completed step

22 KSB website style guide 3. Navigation elements Tab navigator The tab navigator enables navigation within content. In this way, content can be grouped together and displayed in a compact manner. Current Tab Rollover Two-stage tab module

23 KSB website style guide 4. Content elements Table elements The table element is flexible in terms of the number of rows and columns. The width of the columns depends on the content and is thus variable. 430

24 KSB website style guide 4. Content elements Navigator The navigator groups various page functions into a single module. It contains access to the navigator, product catalogue, customer portal, service and replacement parts. It is used on the home page as well as in the margin column on content pages. It has a width of 240 pixels when displayed in the margin column. Its height is based on the content. Navigator Rollover Product Catalogue Customer Portal Service & Spare Parts

25 KSB website style guide 4. Content elements Image gallery The image gallery groups image content relating to a specific topic into a single module. Users also have the option to view the images in enlarged form in the lightbox. Image gallery content Image gallery content hover tool

26 KSB website style guide 4. Content elements Image gallery lightbox The lightbox presents enlarged versions of images from the image gallery. When opened, the image gallery behind the enlarged picture is darkened, thus providing a clearer view of the particular image. Image gallery lightbox

27 KSB website style guide 4. Content elements Video player The video player is used to play a range of videos on the content pages. It has a control menu and also allows users to play videos in full-screen mode. Video player content Video player content hover tool

28 KSB website style guide 4. Content elements List elements The list element is designed to clearly display facts within the body copy.

29 KSB website style guide 4. Content elements Forms Forms can be made up of various input fields. Alerts generated when a field has not been filled out are highlighted in red (#CC0000). Alerts

30 KSB website style guide 4. Content elements Search The search page lists all search results. If more than six results are generated, there is a pager option enabling navigation between the results. A filter, located in the margin column, can be used to refine the results shown. Results filter option

31 KSB website style guide 4. Content elements Downloads All downloads located on the KSB site can be found in the downloads area. A filter can be used to refine the search, allowing the user to obtain the desired results.

32 KSB website style guide 4. Content elements Contact finder Various contacts and points of contact can be located using the contact finder. The search function allows users to find specific contacts.

33 KSB website style guide 4. Content elements Margin column teaser Teasers can notify users of content or sub-menus located in the deeper levels of the site, or of relevant content, such as downloads or contacts. Teaser with image Teaser with download Contact with image Teaser with download and image Contact teaser Links teaser Video teaser Expanded links teaser Frequently searched teaser Flexible height 240

34 KSB website style guide 4. Content elements Overview page teaser Overview page teasers refer users to specific content in the various areas. If there is an even number of teasers, they are displayed in a single column beside one another. If there is an odd number of teasers, they are displayed in two columns beneath one another. Single-column teaser Two-column teaser 430 Flexible height 2

35 KSB website style guide 5. Interactive elements Text links Link Hover tool Corporate Responsibility Corporate Responsibility Arial, 4 px Colour: # Hover tool: # All Press Releases All Press Releases Arial Bold, 5 px Colour: # Hover tool: #77070 More More Arial Bold, 3 px Colour: # Hover tool: Underline cooling water for Qatar cooling water for Qatar Arial, 3 px Colour: # Hover tool: Underline extern Link extern Link Arial, 4 px Colour: # Hover tool: # Send Send Arial, 3 px Colour: # Hover tool: #737373

36 KSB website style guide 5. Interactive elements Buttons Button Hover tool product Configurator product Configurator Arial Bold, 2 px Text colour: # Gradient: #F4F5F7 #E4E8EB Arial Bold, 2 px Text colour: # Colour: #DADCE0 Arial Bold, 2 px SEARCH SEARCH Text colour: # Colour: #EAEDEF Hover tool: # Arial Bold, 2 px Text colour: #FFFFFF SEARCH SEARCH Colour: #36293 Hover tool: # Arial Bold, px Send Send Colour: # Hover tool: # BACK BACK Arial Bold, px Colour: # Hover tool: #3F3F3F Arial, 2 px GO TO PRODUCT CATALOGUE GO TO PRODUCT CATALOGUE Colour: # Hover tool: # Arial Bold, px SHOW Call-to-Action buttons MORE SHOW MORE Colour: # Hover tool: #EE5E8 Hover tool: #DADCEO Arial Bold, 3 px Colour: #FF57F Hover tool: #F36B3B

37 KSB website style guide 5. Interactive elements Icons Documents Training/Education Photo General Video Audio Calendar News items Vacancies Social media Facebook Twitter LinkedIn YouTube Google+ Private customers Footer Energy, industry, water, wastewater Private households and facilities engineering Configurator numbers

38 KSB website style guide 5. Interactive elements 38 Additional icons The icon sprites file can be downloaded in the established KSB online style.

39 39 KSB website style guide 6. Image formats 6. Teaser images Margin column 240 x x 40 Content area 2 x 34 Homepage 280 x x 83

40 KSB website style guide 6. Image formats 40 Teasers in list and search results 98 x x Images in text 408 x x 80 x 70 Header image 660 x 240 Corner radius: 6 px

41 KSB website style guide 6. Image formats x x x x x x 40

42 KSB website style guide 6. Image formats Miscellaneous in the mega-drop-down menu 68 x 80 Corner radius: 6 px Image gallery 430 x 275 Thumbnail: 85 x x 275 Lightbox 650 x x 46

43 KSB website style guide 6. Image formats 43 Platform module background 580 x 300 Video player: Splash image 430 x 242

44 Style guide for mobile applications 44 Design guidelines for mobile applications The previous pages outline the design of the KSB website for display on a desktop PC. With the mobile version, users can also view the KSB website on their smartphone. In its design, the mobile version has to accommodate for smaller screen sizes compared to desktop PCs, as well as lower potential data transmissions and a different mode of operation ( swiping ). The subsequent new design elements are displayed on the following pages and their functionality is described.

45 Style guide for mobile applications. Structure and page types 45. Basic grid The mobile application is based on a two-column grid optimised for a standard resolution of a width of 320 pixels. All pixel values defined on the following pages are therefore only relevant for this resolution

46 Style guide for mobile applications. Structure and page types 46.2 Home page layout The main elements of the home page layout are the teaser platform and the Download search module. The interactive list element allows the user to access the contact search. Content teasers can optionally be added. The footer is the final part. 320 x 2 Header 2 5 CartoGothic Pro Bold 3 px, # CartoGothic Pro Book 6 px, # x 26 Teaser platform x 77 Download search module Precise module description in Content elements area 300 x 40 Contact search module Precise module description in Interactive elements area Content 300 x 2 Content teaser Precise module description in Navigation elements area Footer Precise module description in Footer 2.2 area

47 Style guide for mobile applications. Structure and page types 47.3 Content layout The content layout contains the headline and body text. The body text can be displayed in two different font sizes. An image can also be added to the article. If necessary, other elements can also be added (list elements, form elements, etc.). 320 x 2 Header (main navigator) x 9 Article image 25 2 Body text x 35 Pull-down 2 Content HL CartoGothic Pro Bold 6 px, # Body text 0 Arial Regular 5 px, # Body text 02 Arial Regular 4 px, #434343

48 Style guide for mobile applications. Structure and page types 48.4 Search results layout The search page lists all search results. If more than six results are generated, there is a pager option enabling navigation between the results. 320 x 2 Header (main navigator) x 9 Download search module (expanded) Precise module description in Content elements area Arial Bold 2 px, # Dividing line px, #EAEAEA 300 x height depends on text Download search results module Precise module description in Content elements area 2 Additional results 20 5 Pager module Precise module description in Interactive elements area

49 Style guide for mobile applications 2. Navigation elements Main navigator The horizontal main navigator consists of the KSB logo and a Home button. Both elements link back to the home page KSB logo Home button

50 Style guide for mobile applications 2. Navigation elements Footer The footer is included on every page. It enables visitors to access further relevant information. It provides access to the desktop version or to KSB pages on social networks, for example x7 9x6 7x7 7x7 7x x Arial Bold (uppercase) px, #CCCCCC 2 Module colour #3F3F3F 3 Lines px, #4A4A4A

51 Style guide for mobile applications 2. Navigation elements Content navigator (Content teaser module) The content teaser on the home page allows the user to access additional content pages. 7 x CartoGothic Pro Bold 3 Line (uppercase) px, #EAEAEA 3 px, # Module colour 2 Arial Bold #FFFFFF 4 px, # Teaser dividing line Teasers are separated by a line. There should be no upper edge for the first teaser. 5 5 Dividing line px, #DDD 960 x 347

52 Style guide for mobile applications 3. Content elements Download search module The user can enter a search term using the quick search function on the home page. This brings them to an extended download search where they can set and view additional parameters CartoGothic Pro Bold (uppercase) 3 px, # Module colour #FFFFFF 2 Input inactive Arial Regular 3 px, #A9A9A9 Download search (extended) 5 35 Input Arial Regular 3 px, # Input fields and pull-downs are described in the Interactive elements area

53 Style guide for mobile applications 3. Content elements Download search results module The search results are displayed in a list. The individual results are separated from one another by a line Pager module Precise module description in Interactive elements area 2 3 CartoGothic Pro Bold 2 px, # Arial Bold 4 px, # Arial Bold 2 px, # Line px, #EAEAEA Module colour #FFFFFF

54 Style guide for mobile applications 3. Content elements Contact search module An interactive list element on the home page brings the user to the Contact search module. Interactive list element Precise module description in Interactive elements area Contact search input module Input fields and pull-downs are described in the Interactive elements area.

55 Style guide for mobile applications 3. Content elements Contact search results module Results Results 02 (press) CartoGothic Pro Bold (uppercase) 2 px, # Arial Bold (uppercase) 2 px, # Arial Bold 3 px, # Arial Regular 3 px, #434343

56 Style guide for mobile applications 3. Content elements 56 Results 03 (investors) CartoGothic Pro Bold (uppercase) 3 2 px, # Arial Bold (uppercase) 2 px, # Arial Bold 3 px, # Arial Regular 3 px, #434343

57 Style guide for mobile applications 3. Content elements Selection elements Input field 2 Pump 280 Drop-down 2 Pump Contour 2 px, #CFD3D6 Shadow facing inwards 40%, # Input Arial Regular 3 px, # Input inactive Arial Regular 3 px, #336699

58 Style guide for mobile applications 4. Interactive elements Text links Individual words or sections within a text may be highlighted and linked. Link Tap Corporate Responsibility Corporate Responsibility Arial, 4 px # Tap: # Interactive list element Link 9x CartoGothic Pro Bold (uppercase) 5 px, # Tap CartoGothic Pro Bold CONTACT (uppercase) 5 px, #336699

59 Style guide for mobile applications 4. Interactive elements Buttons Button Tap Arial Bold, 4 px Text colour: #FFFFFF # #3D7AAD Tap: #3D7AAD # Standard button (with text or icon) Text/Icon colour # Arial Bold, 4 px 35 Gradient (Opacity 50%) #04080C #FFFFFF Tap: #FFFFFF #04080C 280 Contour px, #D4D6D8 #EAEDEF Back button Tap Same values as Standard button Other control elements Same values as Standard button Pager Same values as buttons Same values as Standard button

60 Style guide for mobile applications 4. Interactive elements Icons Social networks LinkedIn YouTube Twitter Facebook Google+ The icon sprites file can be downloaded in the KSB s Online Corporate Design Manual.

61 Style guide for mobile applications 5. Image formats 6 5. Teaser images Home page Teaser platform, 300 x 26 Content teaser, 7 x 82 Contour line facing inwards, px #d0d0d0 5.2 Images in text 280 x 79 Header, 300 x 9

62 Style guide for mobile applications 5. Image formats Miscellaneous Investor point of contact 98 x 40