Proximus Media Guides

Hero banner

Banner at the top of the Pickx homepage/VOD.

last modified: 01/01/1601 01:00:00

Overview

The hero banner allows you to promote a product or service at the top of a page. This banner is used at the top of the homepage and Proximus VOD:

Anatomy

Here is a quick overview of what an hero banner contains and what it is surrounded by, to better understand this documentation:

  1. Header
    This is not a part of the banner but always comes before at the top of the page. It does not overlap.
  2. HTML content
    This HTML content is used to promote the product/service. It contains a title, a subtitle and/or a button.
  3. Visual
    Always comes at the right (desktop) or at the top (mobile) of the content.
  4. HTML gradient
    A black HTML gradient comes on top at the left of the visual to avoid a hard cut.
  5. Category Swimlane
    This is not a part of the hero banner but always comes right below it in the page. It does not overlap.
  6. Arrows
    Navigation arrows to navigate between the hero banners. They do not overlap with the fully displayed hero banner.

Compositions

The visual is separated from the text and comes at the right (in desktop) or at the top (in mobile) in a dedicated space.

The hero banner has a fixed height of 440px whatever the HTML content is even in desktop and mobile. The same visual will be used for both mobile and desktop.

440px with smaller content
Still 440px with more content

Best practices

Respect the margins and safe areas in the template and make sure the channel logo or the copyright isn’t placed behind the gradient on the left part. Avoid aligning the main content too much on the left or right.

Don't

Do

last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Select the correct production template: hero-banner-name-yymm.psd
  2. Respect the margins and safe areas in the template
  3. Avoid aligning the main content too much on the left or right, as this could result in an unbalanced composition.
  4. If your design project involves incorporating a logo and copyright notice, it’s crucial to ensure that they are visible, easily identifiable, and readable within the composition. Avoid putting the logo/copyright on the left as it could be hidden behind the HTML gradient.
  5. If needed adapt to the good channel logo. The copyright can be displayed in both vertical or horizontal orientations.
  6. Test your visuals using the testing photoshop template: test-your-hero-banner.psd. And/or test online and adapt if needed.
  7. Make sure your visuals are not too heavy and compress if needed.
Template download

You're part of Proximus organization? Go to the template - If not, request it

Technical specifications

Please respect the following specifications when you export the images:

Hero banner
Breakpoints Size Max weight Format
1 image for all breakpoints 1600*700px 200KB .jpg
How to compress images

To ensure good UI quality and website performances, it's very important to respect the maximum weight indicated while keeping a correct image quality.
Discover here our images compression recommendations.

Naming convention

When exporting your visuals, make sure you use the correct naming. Do not use caps, spaces, accents or symbols (except a dash - )
Please respect the following naming convention:

  1. Prefix
    hero-banner
  2. Name
    Use the name of the product, service, campaign,...
  3. Date
    yymm = year month (2304 = April 2023)
  4. Language (optional)
    French (-fr), Dutch (-nl). If the visual is the same for both language, it isn’t mandatory to specify.
  5. Version (optional)
    If an update is needed, the version can be indicated.

Images testing

Testing your image(s) is an important step of the images creation. It allows you to test the behavior in all breakpoint and to ensure the quality of the end results.

Discover here our images testing recommendations