The header is the heart of the software. All buttons with global functions can be found here.
The appearance and the contents vary within the different devices. This is necessary because for example
mobile less details are necessary or the details have to be displayed in multiple levels. This also applies to the header.
The basis for all components of the "UI Flow" is the rem Unit of Bootstap.


More details about rem Unit you will find here

Grid System




Header Box
(Desktop Max-Small)

The header box is oriented to the left and right of the content cutter (3.25 rem).
It has a fixed distance from the top (2 rem).  The margin of the header box is fixed (1,5 rem).


Caution, all specifications within the UI definition are in rem




Header Content 
(Desktop Max-Small)

The header content consists of icons, dropdowns with menu and logo.
All elements have a fixed distance of 2 rem to each other.

Caution, all specifications within the UI definition are in rem





Best Practice
(Desktop Max-Small)

Here you can see the best practice of the MVP Header design.



Tablet and Mobile

Coming Soon

  • No labels

2 Comments

  1. Wannes Dhooge

    Jan 27, 2020

    Ron Oemus  Hi Ron,

    a question for our X-series, we would like to get some advice on the menu animation which starts when clicking on the hamburger. We found out 4 options:


    1) x-series-wireframe:

    Menu animation from left to right, header remains static, overlay over body (not visible in background)


    2) DSFM current version:

    Menu animation from left to right, header gets pushed away, overlay over body (but visible in background)


    3) Hannover Messe Demo

    Menu animation from left to right, header is static but body gets pushed away


    4) Proposition Thomas King (OBJT)

    Menu animation from left to right, overlay over header and body (but visible in background)


    I personally prefer the header which remains static, not pushing away the body, but if the body should remain visible when having the overlay is equal to me.

  2. Wannes Dhooge

    Jan 27, 2020

    Ron Oemus  Hi Ron,

    concerning a date range picker, we should go into this one also, I already started a page at UPW. Here you can find the link. There it is a summary of functional demands.

    Feel free to add comments or reactions.

    Date range picker