Proximus Media Guides

NBO box

NBO visuals for the MyProximus app.

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

Overview

The NBO visuals are displayed in a box on the MyProximus app.

NBO visuals are also displayed for MyProximus web. To have all the correct information go to MyProximus web > NBO box.

Anatomy

Here is a quick overview of what the NBO banner contains to better understand this documentation:

  1. Ribbon (HTML content, optional)
    HTML component always on the top of the panel.
  2. Promo patch / Enjoy! logo (optional)
    Not HTML components in the app and must be added in the visual. Enjoy! logo usually in the upper left corner. Patch/price could be placed on top or below the visual.
  3. Title (HTML content)
  4. Copy (HTML content, optional)
  5. Button (HTML content, optional)
    Primary, secondary or tertiary.
  6. Close button (HTML content)
    Always on the top right of the panel.

Compositions

NBO banners are on MyProximus app but also on MyProximus web. All these compositions are on the same photoshop template. You should produce the visuals for both platforms. For MyProximus web, you can find the information here.

Web (desktop & mobile)
Mobile app

Accessibility

In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.

Accessibility - Contrast is the most important consideration

Our websites and applications have to be accessible, meaning perceptible, operable, understandable and robust for users with disabilities. Discover here our accessibility guidance.

The visual presentation of text has a contrast ratio of at least 4.5:1. Success criterion 1.4.3 Contrast

Negative
Positive
Enjoy!

Enjoy! NBO banners exist both in positive and negative version. They must contain the Enjoy! logo in the visual as it is not added in HTM. It is usually placed in the upper left corner of the visual. The logo should also be in positive or negative.

Negative
Positive
last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Produce visuals for MyProximus app and MyProximus web.
  2. Respect the safe areas in the template.
  3. Add patch + patch info in the visual if needed.
  4. Add Enjoy! Logo in the visual for app in the upper left corner. Make sure you use the positive or negative version of the logo. (For web mobile & desktop the logo is added in magnolia).
  5. Stay consistent, if an NBO is in positive or negative in the app, it should be the same on the web (and vice versa). It should also either be in positive or negative whether it's in FR, NL or EN.
  6. Placeholder text in the template is the longest possible. If the text isn't as long on prod, please adapt the main visual so it takes as much space as possible in the box.
  7. Hide the "DO NOT EXPORT" folder before exporting.
  8. Make sure your visual is 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:

App
Breakpoints Size Max weight Format
1x 670*768px 80KB .jpg
Web
Breakpoints Size Max weight Format
Mobile (-s) 640x850px 80KB .jpg
Desktop (-m) 1180x500px 150KB .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. Name
    Short explanation of the visual, campaign,...
  2. Date
    yymm = year month (2108 = August 2021)
  3. myproximus
    If it's a visual for iOS or Android
  4. app
    As it's a visual for the app