Temporary Startscreen
Framework
-
1
-
3
-
5
-
6
Temporary Startscreen
The startscreen is the first impression of the app. It is the place for presenting the brand. The following informations shows what it looks like:
The startscreen appears after opening the app and disappears automatically once the app is loaded or after a defined time in which the user should be able to read the text that is being displayed. If you expect long loading times, place use a loading spinner. Design your startscreen like a cover page. The logo bar box can be set to either white, a suitable opacity or fully omitted
Loading ...
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
Loading ...
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.
