EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
6.0.Components    6.15.Teaser

6.15.Teaser

Image/text teasers draw attention to select content. They provide the user with a quick overview of the topic and easy access to the desired location.

There may be a different number of teasers within the grid with a variety of positions. The position does not change if there are several teasers in one line. A decision must be made as to whether the teaser will be at the upper or lower edge. Within these parameters, all types of parameters may be combined.

A scale of up to 4:1 is possible within the grid. Smaller ratios should not be used, as the effect of the teaser will be diminished.

The use of multiple color schemes, if necessary – depending on the motif, colors, statement, effect and contrast with the image motif – must be implemented in line with the sections on colors and color hierarchy.

The entire image including the teaser text element or the entire box of the text teaser form one clickable unit and link to the corresponding subpage.

6.0.Components      6.15.Teaser      6.15.1Overview of teaser boxes

6.15.1Overview of teaser boxes

Teaser boxes are mainly used for external Daimler sites and quickly guide the user to the key topics on the site. They can be used to quickly create overview pages for the individual categories.

Teasers are placed within the grid of the site and can be arranged in various sizes. Thus, an overview of a number of different topics can be provided.

Typical examples of how teasers are used can be found on the Daimler website category pages.

Some Image
Illustration

Examples of the possible sizes of teaser boxes on external Daimler websites.

  • DownloadDownload overview of typical teaser boxes
6.0.Components      6.15.Teaser      6.15.2Colors of teaser boxes

6.15.2Colors of teaser boxes

The colors of the teaser boxes are based on the general CI guidelines for Daimler websites. The following illustration shows the possible colors of the boxes with the related mouseover effect (MOFX).

Colors should be selected on the basis of the topic and the available images, strengthening the overall impression of the page.

Hint: Deep red should be used to highlight one particularly important topic on each page. Ideally, it would never be used more than once.

Some Image
Illustration

The overview shows the possible color options for teaser boxes and the related MOFX.

  • DownloadDownload a complete overview of the permitted MOFX on Daimler websites

Usability hint

  • A certain number of teasers should not be exceeded, as this impedes clarity. In this case the recommendation is to work with sufficient white space.
  • In order to loosen up the page the recommendation is to use different teaser sizes.
  • Wherever possible the teaser image should correspond to the target image on the article page.
  • Teasers should be "expressive" i.e. clearly labeled.
  • The content should be short and succinct.

6.0.Components      6.15.Teaser      6.15.3.Preview of the relaunch of the new www.daimler.com

6.15.3.Preview of the relaunch of the new www.daimler.com

The following preview provides a taster of the new visual language of www.daimler.com. For the current date of revision (01.02.2018) certain sections of the website have already been implemented in this look, and other sections will follow and be replaced one by one.

Example variant #1

Some Image
Illustration

Example of the teaser layout in the new design

    Example variant #2

    Some Image
    Illustration

    Example of the teaser layout in the new design

      Example variant #3

      Some Image
      Illustration

      Example of the teaser layout in the new design