Headers

Headers guideline is created on 14 May 2018

One of the more important UI components to our mobile apps, headers set a tone and serve as an anchor in our mobile apps. Users are able to see our branding, our guidance, and their user journey when they look at the header. Therefore, it is crucial that we carefully design our app headers to eliminate confusion our users might experience.

In terms of branding, the header colour will always showcase the dominant brand colour of the respective brand with the exception of JobStreet as its logo is in blue. In the following examples, jobsDB (#0F2C55) and JobStreet (#FFFFFF). Ultimately, we use colours to differentiate our brands as the goal of the white-label solution is to create an uniform product ecosystem.


iOS

Our headers for iOS apps embraces native iOS design guidelines. There are two sizes: regular and large to support various UI elements. The regular size is used most often, while the large size is used situationally in the example below.

iOS Headers Example

Android

Android headers are inspired by Google Material Design guidelines. Similar to the iOS headers, there are two Android header sizes. We adopt the same usage justifications as our iOS headers.

Android Headers Example