Framework
-
1
-
3
-
5
-
6
Temporary Startscreen
Optional transparency
Unsettled or colored backgrounds can make the text harder to read. To avoid this from happening, you can place the title text on a white logo bar box.
Choose the opacity for the logo bar box to suit both the legibility of your text elements, and the desired visibility of the background picture showing through the logo bar box.
Login
The login screen is displayed after the temporary startscreen and picks up the colors of the startscreen.
It contains entry fields and a login button, links to legal notice, disclaimer and data protection appear at the bottom of the viewport.
Details:
- the entry fields and the login button are in a column.
- the login buttons text is “Login”.
Navigation Bar
The navigation bar is placed at the top of the viewport.
The preferred background color is the defined corporate color.
The preferred structure of the bar contains:
- a “back arrow” on the left hand side
- a centered site ID
- the menu or single icons (e.g. a filter, share, like) on the right or on the left hand side
Tool Bar
The tool bar is placed at the bottom of the viewport. The preferred background color is the defined corporate color.
It contains icons with captions.
The maximum number of tools shown is 5
If there are more than 5 tools:
- the 4 main tools are shown
- the rest will be summarized in the 3-dot icon
Menu
The preferred background color is the defined corporate color.
Structure of the menu:
- logo centered at the top
- “close” icon in the upper right corner
- menu items separated with a line
- menu items are aligned left
- arrows of the menu items aligned right.
Links to the legal notice, disclaimer and data protection are at the bottom of the viewport.
Language Selector
Recommendation: Use language selector directly after the login screen when the user opens the app for the first time.
The preferred background color is the defined corporate color.
Structure of the language selector:
- “close” icon in the upper right corner (not if the language selector appears directly after the login screen)
- languages separated with a line
- languages aligned left
- arrows of the languages aligned right
Links to the legal notice, disclaimer and data protection are at the bottom of the viewport.