EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.9.Header Design and Navigation

3.9.Header Design and Navigation

Since 2019-07-24 the new header design for external sites and applications has to be implemented as shown in the Image below. The company logo, site name and assist bar have to be placed upon the background graphic in the shown way.

It ist binding to use the Daimler Chrome logo on silver brushing. The description of the header can be downloaded as PDF or sketch file. Other ZIP files with company logo and matching brushed metal background in the appropriate sizes for four different viewports are also available.

The header and the site identifier in the header area of a site are the name of the application and the assist bar, which includes links such as help, contact or profile settings.

For external sites and applications the Provider/Privacy link with the related icon must be placed in the top right-hand corner.

The navigation concept is comprised of various components. All of the elements are interlocking, thus ensuring that the information available on the page is both clear and accessible to the user.

3.0.Components      3.9.Header Design and Navigation      3.9.1.Header layout for external sites and applications

3.9.1.Header layout for external sites and applications

Sites and applications that are primarily accessible externally use the Daimler logo in 3D. Accordingly, the header area must be designed differently and the use of brushed metal background is mandatory.

Some Image
Illustration

The structure and features of the header of an external application or website

    The Daimler corporate logotype must always be aligned left of content area. The site name is aligned flush right at the same baseline.

    The "Daimler CS" font must be used for all typographic elements.

    Some Image
    Illustration

    From top to bottom, layout of the Provider/Privacy link for viewport sizes Desktop XL (more than 1680 pixels), Desktop L (to 1680 pixels), M (tablet portrait format) and XS (smartphone).

      Note: The Provider/Privacy link is a mandatory element for all external sites. It must be placed in the header next to the "i" icon. This link must always be placed in the upper right-hand portion of the assist bar.

      If there are different viewport sizes for a site the word/icon combination must be used for the tablet (portrait mode) and desktop versions. The linked "i" icon can only be reduced to a clearly visible size in the smartphone viewport.

      After clicking on the link or icon a notice will appear with links to statements regarding legal information, information about cookies and the data protection policy.

      3.0.Components      3.9.Header Design and Navigation      3.9.3.Header in Internal applications

      3.9.3.Header in Internal applications

      The word "Daimler" and the application name must be placed in the same position in the left-hand side of each page header for an application ("site identifier"). In the case of business units, the business unit name and the name of the application should be indicated.

      Internal applications only use typography in the header i.e., the Daimler logo is not used. Either a graphical element in Daimler CS or a pure text or image text solution can be used.

      The assist bar should be placed in the upper right-hand section. It contains links such as help, contact and profile settings.

      Some Image
      Illustration

      Header area of an application

        For applications or pages with a horizontal navigation it must be ensured that the page header has sufficient space and that the minimum height is met (approx. 60 px).

        Some Image
        Illustration

        Header area of an application

           

          3.0.Components      3.9.Header Design and Navigation      3.9.4.Horizontal navigation of external sites and applications

          3.9.4.Horizontal navigation of external sites and applications

          As with the corporate website, external sites use a horizontal navigation. Here, up to three levels can be displayed, as is necessary for sites with complex content, such as the corporate website. Less comprehensive sites can easily make do with one or two levels of navigation.

          On the homepage, the level 1 navigation items are visible between the menu and search buttons. After clicking on one of these items, level 1 is reduced to a button to the right of the menu button and the level 2 menu items appear (sub-items of the active category), replacing the level 1 elements.

          If only one or two levels of navigation are required, it is sufficient if level 1 is displayed between menu and search button and, if required, level 2 is placed on a white background below it, as shown below it. It is not necessary to hide navigation level 1 if the site has a less complex structure.

          Some Image
          Illustration

          The structure and features of the horizontal navigation of an external application or website

            If the level 2 elements contain additional menu items, level 3 is displayed centered in a separate line below the header.

            Some Image
            Illustration

            The structure and features of the horizontal navigation of an external application or website.

              Level 4 and 5 menu items can be placed as explained in the section "Vertical navigation" below.

              In addition, there is a flyout menu to help orient users. It is displayed by clicking on the menu button.

              Some Image
              Illustration

              The structure of the flyout menu of a website.

                3.0.Components      3.9.Header Design and Navigation      3.9.5.Horizontal navigation of internal sites and applications

                3.9.5.Horizontal navigation of internal sites and applications

                Complex applications or sites can use a one- or two-line horizontal navigation to structure functional areas or content.

                In general, a horizontal navigation in particular, the two-line version – is limited to the employee portal or similar central portals.

                The one-line horizontal navigation can, however, also be used for standard applications, blogs or specials. Purely informational intranet pages that are integrated in the portal do not have a horizontal navigation.

                3.0.Components      3.9.Header Design and Navigation      3.9.6.Vertical navigation

                3.9.6.Vertical navigation

                • The main navigation that should be used on the intranet and for applications is a vertical navigation, placed in the left-hand content area.
                • Users of an application should never be unsure of which page they are on; for this reason, the current menu item should always be highlighted.
                • For more deeply-nested structures, ideally the user will also be informed as to which main section he/she is currently in.
                Some Image
                Illustration

                Structure and features of the vertical navigation.

                  • A navigation structure should not be deeper than three or four levels.
                  • Different functions should not be combined. For example, the filter and navigate functions should not be included in the same navigation structure or components.
                  • Every page must have a page heading that reflects the name of the selected navigation item.