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:
- Emotional messaging, storytelling
- 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.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-formats_1x1.jpg?h=540&iar=0&mw=540&w=540&rev=f45fe8c5e6d149e9b4d21adaa0a6c184&sc_lang=en&hash=F4CF02C659A1DF94878D743812443849)
Messaging along the online journey
![An ad for HARTMANN MoliCare® shows a woman wearing sunglasses](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-formats-inspire_16x9.jpg?h=182&iar=0&mw=324&w=324&rev=3701d376a5424a1fb4be5adb913561b4&sc_lang=en&hash=8F1B8099553D0D160CCEFF2618C1C3EE)
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.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-formats-inform_16x9.jpg?h=182&iar=0&mw=324&w=324&rev=7bbb978dfe1344e48bf9f943f66cc3fe&sc_lang=en&hash=CCE52379ECC0773612984DF65BB114FF)
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.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-formats-reminde_16x9.jpg?h=182&iar=0&mw=324&w=324&rev=a3c2455994a94d618eb7e05be20c9bee&sc_lang=en&hash=46F90CA5FFD10743392C1438389AFEFA)
Be repetitive and sharp. Use retargeting as an amplifier impulse for people who have already been addressed.
Can be animated or static.
![Two positive examples and one negative example of the HARTMANN banner.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-regulations_1x1.jpg?h=540&iar=0&mw=540&w=540&rev=e31cb50cce974caca21033e79f8ed71e&sc_lang=en&hash=3120FCB40EAF78B09E32680ECAC6B914)
Regulations
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.
![Banner Example describing the use of color.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-designspecifications_16x9.jpg?h=304&iar=0&mw=540&w=540&rev=8007585879da4362a552fc78b6489686&sc_lang=en&hash=FA833CFF4766FF79DB8DEE907EB42F4F)
Design specifications for product banners
- 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.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-animatedemotionalbanners_1x1.jpg?h=324&iar=0&mw=324&w=324&rev=b5ba9c26c53a423dbd02a5bca7df1380&sc_lang=en&hash=7DA584FA397268D48ED0DB3AD123D35A)
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.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-animatedrationalbanners_1x1.jpg?h=324&iar=0&mw=324&w=324&rev=4ec73e72f6d548789645cbf339c1b54a&sc_lang=en&hash=1D64F1F7072A01A9C06047466B9B9AC4)
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.](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-staticrationalbanners_1x1.jpg?h=324&iar=0&mw=324&w=324&rev=dadb45979c774eda8dd8844978476592&sc_lang=en&hash=997AE024B99E45FE27BC9E5FDDB7BB74)
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](/-/media/country/bmp/design-in-use/digital-media/online-banner/dc-banner-legaltext_1x1.jpg?h=540&iar=0&mw=540&w=540&rev=3f20d3fdc14847019ffcb0ec150a6992&sc_lang=en&hash=A9F99EC422120ECC40C472D6A8E34083)
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
What you will find here soon
- Guidelines animation
- Best practices
See also
For further information get in touch
Please email us at branding.support@hartmann.info