Framework

Druck

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
Druck

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.

startscreen_logostreifenbox.jpg
Druck

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”.
Startscreen_Login.jpg
Druck

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
Druck

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
Framework_ToolBar.jpg
Druck

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.

 

Framework_Menu.jpg
Druck

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.

Framework_Languageselector.jpg

 

Contact and feedback

The team Brand Consultancy is happy to support you in case of questions: contact.
Please let us know what you think about our Brand Portal: Feedback.