We use cookies and similar technologies on this website ("Cookies"). In order to allow their use to analyze website usage and to enhance functionality, please click on “Accept”. To change the settings and select which specific Cookies we are allowed to use, or to obtain more detailed information, please click on “Details”.

Details

Deny

Accept

Below, you can activate/deactivate the individual technologies that are used on this website.
Consent to all
Required

These Cookies make a website usable by providing basic functions such as page navigation, language settings, and access to protected areas. As the website is unable to function properly without them, you cannot opt out of this kind of Cookies.

Functionality

These Cookies help us to improve the functionality and attractiveness of our websites, and your user experience by saving, for example, your settings, and selections as well as filters, and to recognize your device on subsequent visits.

Analysis

These Cookies allow us, and the service providers (e.g. Google via the Google Analytics service) to collect and analyze information and statistics about your interaction with our website. This helps to optimize our website using the findings obtained.

Web banners

Web banners offer the possibility to address interested parties directly and draw attention to trade fairs and products. They fulfill a teaser function for rerouting users to more in-depth content. Web banners can be static or animated. Despite their small size, they make a big impact.

Table of contents

Design principles

The following guidelines refer to trade fair announcements with special requirements for the conveying of trade fair information. In principle, a distinction can be made here between two design series: the web banners with image and the web banners with knockout. The layout of the web banners is fluid and can range between portrait and landscape format depending on requirements. At the same time, the basic components, proportions and design principles are retained.

Format examples

  1. 160 x 600 px
  2. 300 x 600 px
  3. 600 x 300 px
  4. 600 x 160 px

Format examples

  1. 160 x 600 px
  2. 300 x 600 px
  3. 600 x 300 px
  4. 600 x 160 px

Portrait

The web banner is essentially characterized by the interaction of image and short blocks of text. The indentation of text blocks creates white spaces and tension within the layout.

Elements of the portrait format with image Using the example format 300 x 600 px

  1. Logo
  2. Background color: 50% Light Gray
  3. Headline: DIN Pro Bold, 28 pt., LS 26 pt.
  4. Image
  5. Event details: DIN Pro Bold, 26 pt., LS 26 pt.
  6. Location digits: DIN Pro Bold, 26 pt.
  7. Location labeling: DIN Pro Bold, 14 pt.

Elements of the portrait format with knockout Using the example format 300 x 600 px

  1. Logo
  2. Background color: 50% Light Gray
  3. Headline: DIN Pro Bold, 28 pt., LS 26 pt.
  4. Event details: DIN Pro Bold, 26 pt., LS 26 pt.
  5. Location digits: DIN Pro Bold, 26 pt.
  6. Location labeling: DIN Pro Bold, 14 pt.
  7. Knockout picture
  8. Quick-Link

Image and text behavior in different formats

The layout is created so that it can hold different text quantities or image formats. Text and image lengths mutually influence each other. This avoids unwanted empty spaces. Intentional empty spaces create tension.

Areas – In each layout adjustment, the logo header (A) remains unchanged. The headline (B) is fixed at the top. If the number of lines of text decreases, more space is created for the image area (C). Conversely, if the image area shrinks, this gives more space for the headline (B) and the information block (D). In principle, the distances between blocks A - D must be kept even and constant.

Landscape

In the landscape format, the logo moves to the top-left corner, while the image orients itself to the bottom-right corner. Text elements and white spaces alternate with each other.

Elements of the landscape format with image – Using the example format 600 x 300 px

  1. Logo
  2. Headline: DIN Pro Bold, 28 pt., LS 26 pt.
  3. Background color: Light Gray 50%
  4. Image
  5. Location digits: DIN Pro Bold, 26 pt.
  6. Location labeling: DIN Pro Bold, 14 pt.
  7. Event details: DIN Pro Bold, 26 pt., LS 26 pt.

Elements of the landscape format with knockout – Using the example format 600 x 300 px

  1. Logo
  2. Quick-Link
  3. Headline: DIN Pro Bold, 28 pt., LS 26 pt.
  4. Background color: Light Gray 50%
  5. Knockout picture
  6. Location digits: DIN Pro Bold, 26 pt.
  7. Location labeling: DIN Pro Bold, 14 pt.
  8. Event details: DIN Pro Bold, 26 pt., LS 26 pt.

Image and text behavior in different formats

The layout of the landscape format is created so that it can hold different text quantities or image formats. Text quantity and image size mutually influence each other. This avoids unwanted empty spaces; intentionally used empty spaces, on the other hand, create tension.

Areas – In layout adjustments, the logo is left outside. The headline is fixed at the top. The entire headline area (A) can expand downward, which pushes the content area (B) downward, and vice versa. If the content area expands, this shortens the headline. The width of the image area (C) remains unchanged.