Online banners

Online banners are used to advertise products, services or the HARTMANN brand on the Internet. They are often placed to attract the attention of website visitors and drive traffic to a specific website or landing page.

Banner formats: Which formats to choose from?

Depending on the target group and their position in the customer journey, the banners need to be equipped with the right messages and visuals. Broadly speaking, there are two types of messages:

  1. Emotional messaging, storytelling
  2. Rational messaging, technical benefits, product driven

For emotional messages larger animated formats such as halfpage ads, billboards etc. work well. That way it’s possible to include pictures and more emotional content.

Rational messages suit a smaller format, either static or animated. The focus should be on simple communication and clear wording, esp. relating to product benefits.

A graphic showing different types of ads including halfpage ad, billboard, medium rectangle and wide skyscraper.

Messaging along the online journey

An ad for HARTMANN MoliCare® shows a woman wearing sunglasses
1. Inspire

Be interesting. How can we improve the lives of our customers? Address their gut feeling.

Best animated.

Three blue banners with large headlines, benefit communcitaion, visual in plus and yellow buttons.
2. Inform

Be product driven and rational. How does it work? Why is it better than the competition?

Can be animated or static.

An advertisement for HARTMANN sterillium foam extra care.
3. Remind

Be repetitive and sharp. Use retargeting as an amplifier impulse for people who have already been addressed.

Can be animated or static.

Regulations

Two positive examples and one negative example of the HARTMANN banner.

Banners have a very limited space for information. The content must be broken down to the crucial topics.

  • Use short and easy-to-understand messages.
  • Avoid unnecessary wordings.
  • Only show one single product if you are working with static formats. Exceptions can be bigger formats like billboards and halfpage ads.
  • If you are working with animated formats, you might be able to show a small range with up to 3 products. In this case, they need enough room to be placed correctly with very reduced additional information.

Standard banners

HARTMANN products and services are presented in the standard banner. The design is based on the specifications defined for the Plus.

The Plus – our endorsing emblem

Design specifications for product banners

Banner Example describing the use of color.
  • Text: Panton Bold / Regular, letter spacing 2%, 130% line height, Fontsize depending on text volume and optimal display of text
  • Benefits: Roboto Regular, 100-130% line height, Fontsize depending on optimal display of text
  • Footnote: Roboto Regular, 10 px, 130% line height
  • Button: Roboto Medium, 16 px, 130% line height
  • Background Color: HARTMANN Cyan (HEX 00BEFF)
Example status for a banner animation of the emotional banners.
Animated Emotional Banners

Animated Banners give room for emotional storytelling but also important benefits that lead consumers into the right direction.

  • B2C or selected B2B journeys
  • Big pictures/keyvisuals
  • Emotional language
  • Emotional benefits
  • Storytelling throughout the banner
  • Product shot
Example status for a banner animation of the rational banners.
Animated Rational Banners

Rational Banners can be both animated or static. If animated, it can hold more information such as benefits.

  • B2C or B2B
  • Rational Keyvisual
  • Technical benefits
  • RTB
  • Product shot
A set of static banners in various sizes.
Static Rational Banners

Static Banners have very limited space, so they need to communicate a clear and reduced message.

  • B2B or B2C
  • Simple and short benefits
  • Product shot if possible, or only copy

Fonts and banner size

We recommend to limit the number of different font sizes in a single banner to three. When additional emphasis is needed try introducing different weights of the same font.

To keep the size of the banners small, we recommend using a maximum of four different fonts (including font styles).

Legal text

A set of static banners in various sizes

If legal text must be provided (e.g. showing Biocides), make sure that the following rules are respected.

  • Needs to be always legible in 10px size
  • Keep text length to a minimum
  • Vertical formats: always place below the CTA at the bottom of the banner
  • Animated banners: only needed in one state
  • This are examples for German markets and regulations may vary across markets. Please make sure your design gets approved for each market individually.

Banners for corporate related functions

If the communicated content is neither product nor service-related, the Plus Design is not used. The topics shown here follow the general design guidelines defined in the Design Center.

Exemplary topics are:

  • Human resources
  • Finance
  • Sustainability

Templates and design specifications

The following Figma file gives you an overview of the available layout options for designing banners for corporate related functions for various banner formats.

What you will find here soon

  • Guidelines animation
  • Best practices

See also

For further information, get in touch

HARTMANN Branding Support

Please email us at branding.support@hartmann.info