ksb mobile app style guide · ksb se & co. kgaa / last updated: may 2018 ksb mobile app style...

KSB Mobile App Style GuideMay 2018

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

2KSB Mobile App Style Guide | Introduction

KSB creates mobile applications for the iPhone and iPad as well as for smartphones and tablets running the

Android operating system. This style guide defines clear guidelines to ensure that the KSB brand is easily

recognised in mobile applications. These guidelines allow us to maintain formal consistency among the

various KSB apps and adapt the basic specifications of the KSB corporate design for mobile services.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

3KSB Mobile App Style Guide | Contents

1. Design Basics

1.1 Special aspects of using mobile devices ................................................................................................................................................................5

1.2 Principles of the different operating systems ..................................................................................................................................................6

1.3 Fonts .......................................................................................................................................................................................................................................................7

1.4 Colours ..................................................................................................................................................................................................................................................8

1.5 Logo ........................................................................................................................................................................................................................................................9

1.6 Language selection ...............................................................................................................................................................................................................10

1.7 Images ...............................................................................................................................................................................................................................................10

1.8 App icon ........................................................................................................................................................................................................................................... 11

1.9 Splash screen ................................................................................................................................................................................................................................12

2. iOS Smartphones

2.1 Interactive elements ........................................................................................................................................................................................................... 15

2.1.1 Navigation with tab bar .................................................................................................................................................................................. 15

2.1.2 Off-canvas navigation ..................................................................................................................................................................................... 17

2.1.3 Buttons and text links ..................................................................................................................................................................................... 18

2.1.4 Teaser buttons .......................................................................................................................................................................................................... 19

2.1.5 Lists ........................................................................................................................................................................................................................................ 21

2.1.6 Input fields .................................................................................................................................................................................................................... 22

2.1.7 Settings ............................................................................................................................................................................................................................ 23

2.1.8 Other interactive elements ........................................................................................................................................................................... 24

2.2 Fonts ................................................................................................................................................................................................................................................. 25

2.3 Tables ................................................................................................................................................................................................................................................ 26

2.4 Sample designs ....................................................................................................................................................................................................................... 27

3. Android Smartphones

3.1 Interactive elements ........................................................................................................................................................................................................... 31

3.1.1 Navigation ...................................................................................................................................................................................................................... 31

3.1.2 Buttons and text links .......................................................................................................................................................................................33

3.1.3 Teaser buttons ............................................................................................................................................................................................................34

3.1.4 Lists .........................................................................................................................................................................................................................................36

3.1.5 Input fields ....................................................................................................................................................................................................................37

3.1.6 Settings ..............................................................................................................................................................................................................................38

3.1.7 Tabs ........................................................................................................................................................................................................................................39

3.2 Fonts ...................................................................................................................................................................................................................................................40

3.3 Tables ..................................................................................................................................................................................................................................................41

3.4 Sample designs ........................................................................................................................................................................................................................42

4. Tablets

4.1 General ................................................................................................................................................................................................................................................44

4.2 Split view .........................................................................................................................................................................................................................................45

5. User Interface Adaptation

5.1 Portrait and landscape format .................................................................................................................................................................................48

5.2 Adapting to other display screen sizes ............................................................................................................................................................49

1. Design Basics

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

5KSB Mobile App Style Guide | 1. Design Basics

Digital products are conceived and designed in relation to the end device of the user and the user scenario.

The way that smartphone apps are used involves a different set of design requirements than those that

apply to Web sites, for example. Smartphones are typically used on the go, in situations in which users can

become more quickly distracted by their environment. This is why only key, relevant content should be dis-

played in an app. To this end, ensure that you incorporate flat hierarchies and just a few navigation levels

to keep the structure of the app easy to view. Interactive elements must appear larger than on the Web

to ensure that they can be clicked on with a finger, which in turn requires more space.

Utilise the strengths of mobile devices – such as location-specific services, GPS and device sensors – to pro-

vide for a helpful and useful interactive experience. Also avoid their pitfalls, however, such as asking users

to complete lengthy forms. In addition, take potential constraints into account, like the environment in which

the user would like to complete specific tasks. What are the lighting conditions, for instance? Many navigation

apps allow users to configure a bright version for use in normal daylight conditions and a darker one that

does not dazzle as much for use during the evening and in the night.

1.1 Special aspects of using mobile devices

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


The KSB App Style Guide defines the appearance of KSB apps for the two most widely used operating systems:

Apple iOS and Google Android. Each operating system has its own design language and navigation principles,

which form the basis for designing a KSB app.

To ensure that KSB apps have a standardised appearance and can be easily used on both operating systems,

the navigation principles of these systems must be taken into account when developing a KSB app.

The iOS and Google Android operating systems are updated at regular intervals. To minimise the outlay

required to adapt KSB apps to these updates, the standard elements of the respective operating systems

should be used when designing the apps.

Apple iOS

The current specifications for the Apple iOS operating system can be viewed on the Internet at:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html

(Last updated: 10/2017)

All dimensions in this Style Guide are indicated in retina pixels (@2 x).

All designs were created for the iPhone 6s/7/8 (750 x 1334 px) and iOS 11. Font sizes are indicated in pixels.

All photos and images must be stored in @3x format to ensure a crisp display.”

Google Android

The current specifications of Android’s operating system version 8 ‘Oreo’ (with Material Design) can be

consulted online:

https://www.android.com/versions/oreo-8-0/

https://developer.android.com/design/index.html

(Last updated: 21.08.2017)

All size specifications are given in “dp” in this style guide. Fonts are indicated in pixels. All designs were

created in MDPI (360 x 640 px). MDPI is regarded as the baseline that is also incorporated in the official

Android guidelines. MDPI makes it easier to scale to larger designs than the other way around. MDPI displays

a design 100 % and is the equivalent of 100 % or @1x for Apple iOS.

1.2 Principles of the different operating systems

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html

http://www.google.com/design/spec/material-design/introduction.html

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1.3 Fonts

KSB applications generally use the default system fonts set for the operating system in question. Additional

information on fonts can be found in the relevant sections on the iOS smartphone and Android smartphone.

Text is always left-aligned, or ragged right, and never justified. Text also never appears centred, except for

button text.

All text appears using mixed-case spelling, except for buttons on the Android system.

The standardised spelling and notation of recurring text elements such as phone numbers, e-mail addresses

and Internet addresses is defined in the CD section entitled “Notation”.

Additional information on KSB fonts:

https://www.ksb.com/Corporate-Design/Basic_Elements/Notation_Rules/Basiselemente/Schreibweisen/

http://www.ksb.com/KSB-Erscheinungsbild/Basiselemente/Schreibweisen/

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1.4 Colours

Primar Accent

Secondary

KSB blue

#336699

RGB 51/102/153

Buttons

Text links

Interactive elements

Orange

#FF6900

RGB 255/105/0

Notes

Highlighting

CTA buttons

White

#FFFFFF

RGB 255/255/255

Lists

Tables

Image background

Input fields (iOS)

Light grey

#F1F1F1

RGB 241/241/241

Text level

background

Grey

#555555

RGB 85/85/85

Title

Headings/Labels

Medium grey

#C2C2C2

RGB 194/194/194

Inactive buttons

Black

#000000

RGB 0/0/0

Body text

Navigation bar title

Tab bar title

Red

#DE0C21

RGB 222/12/33

Error messages

Warnings

KSB blue is the most important colour of a KSB app and is used for buttons, text links and interactive elements.

This ensures high recognition value and a standardised look that is aligned with the rest of KSB’s corporate

design. Call-to-action (CTA) buttons appear in the accent colour orange. Body text appears in black, whereas

titles and headings/labels have a dark grey hue.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1.5 Logo

The KSB logo appears in the app icon, on the splash screen and on the start page of every KSB application.

If sufficient space is available, the KSB logo can also be placed on the subpages in the navigation bar (for

iOS) or in the app bar (for Android). Doing so may not be compliant with the guidelines established for the

respective operating system, however, in which case the app would be rejected by Apple’s App Store, for

example. Therefore, when a new KSB app is designed, a decision must be made as to whether the KSB

logo should appear on the subpages. If yes, the second step is to define exactly where the logo should be

positioned.

App icon

Splash screen Start

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1.6 Language selection

If a KSB app is available in several languages, the app will automatically be displayed in the language the

user has set for the operating system.

It is also possible to limit or restrict an app to a specific country in the Apple App Store or the Google Play

Store.

If the international nature of the app or the language selection option itself should be readily visible, a

menu item can be provided for changing the language (e.g. in settings).

When designing a new KSB app, the KSB specialist department responsible must define the policy for

handling or dealing with language versions.

1.7 Images

All images used in a KSB app correspond with the KSB photo style (also refer to the KSB photo style guide-

lines).

Additional information on the KSB photo style:

https://www.ksb.com/linkableblob/Corporate-Design/341772-514211/data/Photo_style-data.pdf

Not!

Image size

Images must not be displayed too small in a KSB

app and ideally should span the full width of the

screen. Small images are only permitted as thumb-

nails in tables and lists.

Arrangement

Text is not combined with images. The image

must be displayed over the full width above or

below the corresponding text.

For the correct layout, see

2.1.8 Other interactive elements.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1.8 App icon

Note:

To ensure that the display name appears in full on the

home screen, the text should include no more than

approximately 11 characters. Longer names will be

truncated with an ellipsis.

All other iOS display sizes:

https://developer.apple.com/ios/human-interface-guide-

lines/icons-and-images/app-icon/

Note:

The length of the display name depends on the device

being used. After the maximum length available is

reached, the name is truncated with an ellipsis.

For more information please see:

https://material.io/guidelines/style/icons.html

220 px ≈ 43%

512 x 512 px

400 x 400 dp

301 x 133 px

iOS app icon (example)

Android product icon (example)

43%

236 x 104 dp

iOS home screen with KSB app icons

Android home screen with KSB product icon

The KSB brand is clearly communicated in every app icon. The app icon includes the image of the splash

screen and the KSB logo. No text appears in the app icon itself.

The app’s display name appears in the icon label below the app icon on the home screen. Due to the

limited number of characters that can be used, the display name generally does not include “KSB”.

App icons for iOS can be downloaded as PSD files.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1.9 Splash screen

The splash screen appears after the user starts the app and remains visible until the app has fully loaded.

The time it takes to load an app can vary depending on the scope of the application. Once the app has

fully loaded, the start page appears in place of the splash screen.

Fixed elements of the splash screen include the KSB logo, the KSB brand claim, a large image with the

“wave” and the name or title of the app. The image can be a product photo or another, appropriate motif,

depending on the purpose and content of the app (also refer to the KSB photo style guidelines). The image

that appears on the splash screen is also used for the app icon (see page 11). Splash screens for Apple iOS

can be downloaded as PSD files.

1/31/3

90 px

45 dp

24 px12 dp

60 px 60 px

54 px

22 dp142 x 64 px

72 x 32 dp

344 x 54 px

172 x 27 dp

500 px = 2/32/3

500 px ≈ 37%

≈ 33%

iOS smartphone Android smartphone

Heading 1

SF Pro Display Bold 70 px

Line spacing 88 px

Grey, RGB 85/85/85

Heading 1

Roboto Bold 34 px

Line spacing 44 px

Grey, #555555

20 dp 20 dp

1

2

21

Additional definitions and specifications for iOS splash screens:

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Android tablet

iOS tablet

1/3

1/3

40 dp

80 px

30 dp

60 px

40 dp

80 px

2/3

2/3

ca. 40%

ca. 34%

ca. 10%

ca. 10%

ca. 6%

ca. 6%

158 x 70 dp

316 x 140 px

194 x 30 dp

388 x 60 px

Heading 0: Roboto Bold 56 px, line spacing 66 px, grey, #555555

Heading 0: SF Pro Display Bold 100 px, line spacing 120 px, grey, #555555

1

1

1 12 px

24 px

2. iOS Smartphones

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

15KSB Mobile App Style Guide | 2. iOS Smartphones

Navigation elements are displayed in line with the iOS standard. The lower tab bar navigation panel displays up to five

menu items and is used if the user wants to quickly navigate between several items. The menu item selected in the tab

bar is highlighted in blue.

The navigation bar is used to navigate in the upper area. On the app’s start page, the KSB logo is positioned centrally

in the navigation bar. On the subpages, the page title appears in the navigation bar so that users know where they

are in the app.

The tab bar is always displayed together with the navigation bar.

Different buttons, text links and the standard iOS segmented controls element can be used for interactions in a KSB

app.

2.1 Interactive elements

2.1.1 Navigation with tab bar

Additional definitions and specifications for navigation bars:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html

Use of standard icons:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html

Subpage with navigation bar in normal conditionStart page with upper navigation bar and lower tab bar

2

2

3

3

The back button is positioned at the left in the navi-

gation bar and takes the user back to the last page, to

the higher-level menu item or to the start page.

Selected menu item in the tab bar

Icons are taken from the standard iOS coll-

ection. If icons are custom-designed, they

must be formally aligned with the existing

iOS icons with respect to line thickness,

corner rounding and similar.

The toolbar is optionally located at the right in the

navigation bar and includes additional functions on a

page, such as search, share, note and edit.

1

ca. 50 x 50 px

Navigation Bar =193 px

Status Bar = 40 px

Tab

Bar 1

00px

189 x 84 px

1

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/%20%20%20

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Subpage with navigation bar when scrollingSubpage with navigation bar in normal condition

Navigation bar =193 px

1 2

2 Navigation bar at half heightNavigation bar normal1

On the app’s start page, the KSB logo is positioned centrally in the navigation bar. On the subpages, the page title

appears in large type on the left-hand side. If users swipe up to see content that is not visible in the display area, the

height of the navigation bar is halved and the page title appears in smaller type in the middle of the navigation bar.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


The off-canvas menu is practical for navigating with more than five menu items that do not always need to

be within view. The menu can only be accessed from the app’s start page. The active menu item is high-

lighted by a blue line at the left margin. On all other subpages, a back button is positioned in place of the

menu icon.

2.1.2 Off-canvas navigation

Message icon

Used for new messages in the inbox or

important messages, for example

Größe: 60 px x 44 px

Radius: 12 px

Text link

SF Pro Display Regular 34 px

KSB blue, RGB 51/102/153

1 2

2

1

Start page with off-canvas menu in the navigation bar Off-canvas menu open

120 px

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Standard buttons appear in KSB blue. Call-to-action buttons trigger an action (e.g. order, log on, download,

purchase). These buttons appear in orange and should be used sparingly. A button can be inactive if forms

have not been completed, fields have not been selected or a process has not been concluded, for example.

On larger displays, only the width of the buttons is adapted, not the height. Clickable texts (text links)

appear in KSB blue.

2.1.3 Buttons und text links

Call-to-Action buttons

Text links

Standard buttons

1

4

1

4

6

6

ButtonButton: KSB blue, RGB 51/102/153Text: White

Button when pressedButton: 30% blackText: White

Inaktiv buttonButton: medium grey, RGB 194/194/194Text: grey, RGB 85/85/85

ButtonButton: Orange, RGB 255/87/31Text: White

Button when pressedButton: 30% blackText: White

Text linksText: SF Pro Display Medium 34 px KSB blue, RGB 51/102/153

Text links when pressed30% black

2

5

2

5

77

3

3

3

88 px

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Teaser buttons take the user to a subpage or to a page that contains additional information. A teaser can

be used with a background photo on the start page. All buttons are displayed with rounded corners (12 px).

On display screens of different sizes, only the width of these buttons is adapted, while graphics and images

increase in size proportionately.

See 2.1.3. Buttons for information on how the buttons appear when pressed, or clicked on.

2.1.4 Teaser buttons

Teaser buttons, largeTeaser button on start page

Button: KSB blue, RGB 3/75/147Text: SF Pro Display Medium 34 px, white

1

image heightmin. 300 pxmax. 420 px

88 px

30 px 30 px

1

1

30 px

30 px

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018



30 px30 px 30 px

30 px

Teaser buttons, small

Bildhöhemin. 300 pxmax. 350 px

1

1 Background colourLight grey, RGB 241/241/241

Not!

Related teaser buttons may not be separated.

120 px

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Interactive list rows measure 100 px in height (taller than the iOS standard elements of 88 px) to improve

usability.

List rows that contain graphics measure 130 px in height. The graphics used should not include too many

details and must be easy to view and recognise.

Lists are always presented on a white background. The heading has a grey background.

2.1.5 Lists

100 px 130 px

Lists with thumbnailsBasic lists

1

2

2

3

1 Heading 3

SF Pro Display Semibold 34 px

Line spacing 46 px

Grey, RGB 85/85/85

Text links


Line spacing 40 px


When pressed: 30% Schwarz

2

3 Image format

94 x 94 px

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Input fields such as login fields are displayed in line with the iOS standard.

The fields span the full width of the screen and are grouped by topic, with no spaces between the rows.

The input field titles have a grey background.

2.1.6 Input fields

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


The settings are displayed in line with the iOS standard. The fields span the full width and are grouped by

topic, with no spaces between the rows.

2.1.7 Settings

Additional definitions and specifications for settings:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Content-Views.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Additional interactive elements are displayed in line with the iOS standard.

The segmented controls interactive element comprises two or more buttons arranged next to each other that

display several possible statuses or menu items. On Android systems, tabs are used instead (see 3.1.7 Tabs).

Only one item can be selected at a time. The item selected is highlighted in blue.

2.1.8 Other interactive elements

Not!

1

1

Back button


The name of the higher-level page can be placed to

the right of the back button.

Toolbar element

E.g. text links or icons


Segmented controls



Items selected are highlighted in blue.

2

2

3

3

Additional definitions and specifications for interactive elements:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Controls.html

The menu items of iOS segmented controls always

have the same importance, or significance, meaning

that no one specific menu item is subordinate to

another.

The back button is always positioned left and takes

the user to the next-highest menu level.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html%20

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


2.2 Fonts

66 px

60 px

1

1

Heading 1


Line spacing 88 px

Grey, RGB 85/85/85

Heading 2


Line spacing 66 px

Grey, RGB 85/85/85

Heading 3


Line spacing 26 px

Grey, RGB 85/85/85

Body text

SF Pro Text Regular 32 px

Line spacing 44 px

Black

Text navigation bar

SF Pro Text Semibold 34 px

Black

Text links

SF Pro Text Regular 34 px


When pressed: 30% black

Hintergrund

Light grey, RGB 241/241/241

2

2

4

5

6

7

7

7

6

5

4

3

3

The respective iOS system font is used (iOS 11: San Francisco Pro Display for headlines and San Francisco

Pro Text for copy).

To provide a better backdrop and contrast for images and text, body text is presented on a light grey back-

ground (see 1.4 Colours). Headings always appear in grey, with body text in black and text links in blue.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


1

2

Heading 3


Line spacing 46 px

Grey, RGB 85/85/85

Table title


Line spacing 34 px

Grey, RGB 85/85/85

Tables have a continuous white background. The heading of the table has a grey background.

2.3 Tables

Dividers2 pxLight grey, RGB 241/241/241

36 px

1

2

3

3 Table text


Line spacing 42 px

Black

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


2.4 Sample designs

Start page with full-scale teaser button

Front page with teaser buttons Subpage with small teaser buttons

Off-canvas menu open

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


2.4 Sample designs

Lists

Product details page

Lists with thumbnails

Product details page with table and CTA button

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


2.4 Sample designs

Product details page with full-screen image

3. Android Smartphones

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

31KSB Mobile App Style Guide | 3. Android Smartphones

Navigation drawerApp bar on the front page

54 dp

30 dp

Status Bar = 24 dp

App Bar = 56 dp60 dp

36 dp

28 dp

140 x 64 dp1 2

3

1

2

Side navigation

Toolbar

The toolbar optionally appears at the right in the

app bar and includes additional functions on a

page, such as search, share, note and edit.

3

4

4

Navigation drawer

The higher-level navigation drawer menu

spans the full height of the display screen.

When opened, it slides in from left to right

over the current page.

Secondary menu item

Roboto Medium 18 px, KSB blue, #336699

Additional definitions and specifications for navigation elements:

https://material.io/guidelines/layout/structure.html

The Android “side navigation” standard element is used for navigating. If there are only a few menu items,

the side navigation element can be left out (not required). The menu items can then be accessed via the

app bar navigation panel, for example.

Different buttons, text links and tabs can be used for interactions in a KSB app.

3.1. Interactive elements

3.1.1 Navigation

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Open menu in toolbar

Back button

The back button is positioned on all

subpages and takes the user back to

the higher-level page.

5

5

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


36 dp

56 dp

48 dp Touch-Fläche

Additional definitions and specifications for buttons:

https://material.io/guidelines/components/buttons.html

1

4

6

7

ButtonButton: KSB Blue, #336699Text: White

Button when pressedButton: 30 % blackText: White

Inactive buttonButton: Medium grey, #C2C2C2Text: Grey, #555555

ButtonButton: Orange, #FF571FText: White

Button when pressedButton: 30 % blackText: White

FABButton: Orange, #FF571FIcon: White

Text link

Text: KSB blue, #336699

Text link, pressed

Text: KSB blue, #336699

Background: Medium grey, #C2C2C2

Inactive text link

Text: Medium grey, #C2C2C2

2

5

8

3

1

4

6

2

5

7

3

3

8

99

Standard buttons

Call-to-action buttons

Text links

Floating action button (FAB)

Buttons are a material design standard element. Standard buttons appear in KSB blue. Call-to-action buttons

trigger an action (e.g. order, log on, download, purchase). These buttons should be used sparingly. A button

can be inactive if forms have not been completed, fields have not been selected or a process has not been

concluded, for example.

On larger displays, only the width of the buttons is adapted, not the height. Clickable texts (text links) appear in

KSB blue.

3.1.2 Buttons and text links

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Teaser buttons take the user to a subpage or to a page that contains additional information. A teaser can

be used with a background photo on the start page.

All teaser buttons are displayed with rounded corners (5 dp).

On display screens of different sizes, only the width of the blue buttons is adapted, while the graphics and

images increase in size proportionately. See 3.1.2 Buttons for information on how the buttons appear

when pressed.


Teaser button on the start page Teaser buttons, large

1 Button: KSB blue, #336699

Text: Roboto Medium 14 px, white

16 dp

16 dp

16 dp 16 dp

Bildhöhemin. 170 dpmax. 200 dp

48 dp1

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018



Teaser buttons, small

2 Background colour

Light grey, #F1F1F1

16 dp

Bildhöhemin. 170 dp max. 190 dp

2

16 dp 16 dp

16 dp

60 dp

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


52 dp72 dp

1

1

2

2 3

3Heading 3

Roboto Medium 16 px

Line spacing 22 px

Grau, #555555

List title

Roboto Medium 16 px

Line spacing 22 px

Blau, #336699

Image format

50 x 50 dp

Additional definitions and specifications for lists:

https://material.io/guidelines/components/lists.html

Basic lists Lists with thumbnails

2 Background colour

Light grey, #F1F1F1

2

3.1.4 Lists

Interactive list rows measure 52 dp in height to improve usability. List rows that contain graphics measure

72 dp in height. The graphics used should not include too many details and must be easy to view and

recognise. Lists are always presented on a white background. The heading has a grey background.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Additional definitions and specifications for input fields:

https://material.io/guidelines/components/text-fields.html

1 Text entry

Roboto Regular 16 px

Black

1

Input fields without text Input fields with text

3.1.5 Input fields

Input fields such as login fields are displayed in line with the Android standard.

Unlike with lists and tables, the text entered appears against a background shaded in light grey.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Additional definitions and specifications for settings:

https://material.io/guidelines/patterns/settings.html

52 dp

1

1

Heading of text entry

Roboto Medium 12 px

Grey, #555555

3.1.6 Settings

Settings are displayed in line with the Android standard.

The fields span the full width and are grouped by topic, with no spaces between the rows.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


Tabs with three menu items Scrollable tabs containing more than three menu items

74 dp

74 dp

1

11

Tab title

Roboto Medium 14 px

KSB blue, #336699

Additional definitions and specifications for tabs:

https://material.io/guidelines/components/tabs.html

3.1.7 Tabs

Tabs allow users to navigate on a particular page and display several possible statuses or menu items.

Only one tab item can be selected at a time. The tab item currently selected is highlighted with a blue line

below the tab title. On iOS devices, segmented controls are used in place of tabs (see 2.1.8 Other interactive

elements).

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


3.2 Fonts

The respective Android system font is used (bei OS8: Roboto).

To provide a better backdrop and contrast for images and text, body text is presented on a light grey back-

ground. Headings always appear in grey, with body text in black and text links in blue.

30 dp3

3

1

1

44

4

5

5

6

6

7

7

2

2

Heading 2

Roboto Medium 22 px

Line spacing 28 px

Grey, #555555

Body text


Line spacing 22 px

Black

Background

Light grey, #F1F1F1

App bar page title

Roboto Medium 20 px

Grey, #555555

Heading 3

Roboto Medium 16 px

Line spacing 22 px

Grey, #555555

Text links

Roboto Medium 16 px

Blue, #336699

When pressed: 30 % black

Heading 1

Roboto Medium 34 px

Line spacing 44 px

Grey, #555555

Additional definitions and specifications for fonts:

https://material.io/guidelines/style/typography.html

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


3.3 Tables

Tables have a continuous white background.

The heading of the table has a light grey background.

1

1

2

2 3

3Heading 3

Roboto Medium 16 px

Line spacing 22 px

Grey, #555555

Table title

Roboto Medium 14 px

Line spacing 22 px

Black

Dividers1 dpLight grey, #F1F1F1

20 dp

16 dp

20 dp

Table text


Line spacing 22 px

Black

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018


3.4 Sample designs

Start page with full-scale teaser button

Subpage with teaser buttons Subpage with tabs

Navigation drawer

4. Tablets

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

44KSB Mobile App Style Guide | 4. Tablets

4.1. General

A new app does not need to be programmed to adapt a smartphone app to a tablet device. All graphics and

interface elements of the smartphone can also be used on the tablet. The sizes and styles of the interface

elements remain as is but can vary in width, depending on the display screen (e.g. buttons, tables, tab bar

and navigation bar). Otherwise, the same specifications that apply to smartphones running the iOS or Android

operating system also apply. Examples and resources for making tablet adaptations can be referred to in

the specifications for the operating systems.

The sample screenshot below shows the navigation drawer and the content area of an Android screen.

The width of the navigation drawer and the height of the list elements correspond to smartphone standards.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

45KSB Mobile App Style Guide | 4. Tablets

4.2. Split view

The advantage of large-screen tablets lies in combining several smartphone pages, which results in a split

view. This allows space to be used more efficiently and makes it easier for the user to navigate the app.

The split view also provides for a more streamlined overview of the content of the app.

On this sample Android screen, a page containing teaser buttons is combined with the product page.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

46KSB Mobile App Style Guide |

On this sample iOS screen, a list page is combined with a teaser button page.

4. Tablets

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

48KSB Mobile App Style Guide | 5. User Interface Adaptation

Sample view of an iOS smartphone in portrait and

landscape format

1

1

1

The status bar and tab bar can also be removed in landscape format

to add more space for content if the app was also designed in portrait

format.

5.1 Portrait and landscape

Examples

Apps can be designed in portrait and/or landscape format. Not every app needs to be designed to support

both formats, however, as some applications lend themselves to a specific format (games, for example, are

best played in landscape format).

Changing the format can also be practical within an app for certain functions, as the following explains. The

size of each element included on the screen generally remains as is when the format is changed. System

buttons are adapted to the corresponding screen width, while the elements in the tab bar are distributed

across the screen.

There are different ways to adapt an app designed in portrait format to landscape format:

1. The interface elements are realigned automatically. For example, two teaser buttons are arranged next

to each other in portrait format, with three appearing in landscape format. List elements are adapted

automatically and become wider.

2. Additional elements or functions are displayed in landscape format, such as a profile containing additi-

onal product details on a pump.

3. Supplementary or similar content is displayed in landscape format. For example, an app shows a list

overview in portrait format and an additional diagram in landscape format.

4. Completely different contents can also be displayed in landscape format. In default portrait format, for

example, all functions of a KSB app are displayed, while landscape format offers quick access to pump

settings.

© K

SB S

E &

Co.

KG

aA /

Las

t up

date

d: M

ay 2

018

49KSB Mobile App Style Guide |

iPhone 6 iPhone 5

Proportional

Width

Height remains identical

Spacing remains identical

1

1

1

Icons (= symbols, pictograms) and indi-

vidual graphics remain as is.


5.2 Adapting to other display screen sizes

Interface elements are adapted differently for smaller and larger display screen sizes (e.g. for the iPhone 6,

the iPhone 5 and tablets). In the process, standard elements such as the tab bar and navigation bar, buttons,

tables and input fields retain their original height and only change in width. Graphics and images increase

in size proportionately.

ksb mobile app style guide · ksb se & co. kgaa / last updated: may 2018 ksb mobile app style...

Documents