Bandeau promotionnel de l’accueil

Dernière mise à jour : 21 juillet 2025

Le bandeau promotionnel de l’accueil met de l’avant une promotion ou un message de l’entreprise d'importance et d'actualité.

Guide d’utilisation
Design

Bandeau promotionnel de l’accueil

Uniquement utilisé sur la page d’accueil du site Web d’Hydro-Québec, ce bandeau promotionnel occupe la pleine largeur de la page et est positionné directement sous l’en-tête, qui contient les éléments de navigation.

Image représentant l utilisation du bandeau promo

Principales règles d'utilisation

Le visuel doit respecter les dimensions minimales fournies.
Le sujet principal du visuel doit se trouver dans la zone de focus.
Trois styles de visuel peuvent être utilisés, mais ceux-ci ne doivent contenir aucun caractère, à l’exception d’un logo, de quelques mots-clés ou de chiffres essentiels à la compréhension du message.
Le titre et l'appel à l’action sont positionnés dans un encadré et respectent des limites de caractères.

Il y a trois styles de visuel possibles pour le bandeau promotionnel de l’accueil, soit la photographie, l’illustration ou le montage promotionnel.

1. Photo avec ou sans sujet

Consulter les spécifications techniques du visuel à fournir.

Image représentant une photo avec ou sans sujet dans les styles visuels possibles

2. Illustration

Consulter les spécifications techniques du visuel à fournir.

Image représentant une illustration dans les styles visuels possibles

3. Montage promotionnelle

Pour un montage promotionnel conçu par un designer numérique, les dimensions précises sont indiquées dans la section Exportation des fichiers finaux.

Image représentant un montage promotionnel dans les styles visuels possibles

La zone de focus est l'emplacement exact où doit se trouver le sujet principal pour être bien visible sur toutes les tailles d'écran. Toute portion du visuel située à l’extérieur de cette zone sécurisée risque de ne pas toujours être visible.

Positionnement de la zone de focus par taille d’écran

Image représentant le focus par taille — En rose : la zone de focus dans laquelle doit se trouver le sujet principal du visuel. 

En gris foncé : l'emplacement occupé par l’encadré qui masque une partie du visuel.

Pour que les designers numériques puissent produire les visuels finaux, ils doivent d'abord recevoir un visuel conforme respectant les spécifications techniques détaillées ci-dessous.

Deux options sont possibles, soit fournir un grand visuel ou encore deux visuels de plus petite taille.

Ce visuel de haute résolution sera adapté par les designers numériques pour chaque résolution d'écran, soit ordinateur, tablette et mobile.

Format minimum : 5920 px sur 3680 px

Image représentant un grand visuel — Le sujet principal du visuel doit se situer dans la zone de focus, illustrée en rose dans l’exemple ci-dessus.

Les deux visuels de haute résolution doivent être fournis dans les formats minimum suivants :

Ordinateur : 3840 px sur 1560 px
Tablette et mobile : 2548 px sur 1892 px

Chacun de ces formats a sa propre zone de focus. Il est important de s'assurer que le sujet principal du visuel y est bien positionné.

Image représentant le mobile et la tablette — L'emplacement de la zone de focus varie en fonction de la taille de l'écran (illustrée en rose dans les exemples ci-dessus).

Le bandeau promotionnel fait partie de la zone promotionnelle de l’accueil du site Web d’Hydro‑Québec. Cette zone contient également une section intitulée À la une, comprenant trois tuiles.

Image représentant la rédaction UC pour le bandeau promo — Le bandeau promotionnel affiche un visuel, alors que les tuiles ne contiennent que des éléments textuels. Bien que leur aspect visuel diffère, le bandeau promotionnel et les tuiles doivent suivre des règles rédactionnelles communes.

Contenu

Les éléments textuels du message doivent se compléter. On évite donc de répéter les mots ou les idées dans le titre et dans l’appel à l’action.
Par souci de cohérence visuelle, les éléments textuels du bandeau et des tuiles de la zone promotionnelle doivent avoir des textes de longueur similaire, basés sur le maximum de caractères permis.

1. Titre

Nombre de caractères maximal : 80, espaces incluses.
Le titre est rédigé de façon à ce que l’utilisateur ou l’utilisatrice se sente concerné et interpellé par le message.

Par exemple, avoir recours au pronom « vous ».
Il n’a pas de ponctuation finale.

Si le contexte s’y prête, le point d’interrogation peut être utilisé.
Au besoin, l’utilisation du deux-points ou du tiret peut aider à réduire le nombre de mots ou à structurer un long titre.
L’emploi de mots tout en majuscules est interdit.

2. Appel à l’action

Nombre de caractères maximal : 25, espaces incluses.
L'appel à l'action doit suivre les règles de rédaction du bouton principal.
De plus, dans le contexte de la zone promotionnelle de l'accueil du site Web :

Chaque appel à l'action doit être unique.
Le verbe qu'il utilise doit être différent de celui des autres appels à l’action.

Voir des exemples de libellés pour le bouton
Bouton à utiliser :

Bandeau promotionnel : bouton primaire
Tuile : bouton texte

3. Étiquette

Élément textuel réservé à la tuile.
Elle permet de catégoriser le message avec une information courte et complémentaire comme un nom de programme ou une thématique.
Elle est composée d’un à trois mots.
Elle ne contient pas de signe de ponctuation.

Le bandeau promotionnel de l’accueil est composé d’un visuel qui occupe la pleine largeur de la page et d’un encadré superposé à ce visuel qui contient un titre et un bouton primaire.

Le visuel du bandeau promotionnel de l’accueil et ses couleurs prédominantes vont influencer le choix des couleurs pour le fond de l’encadré et le bouton primaire

Image représentant l anatomie du bandeau promo

Options de couleurs de fond

Cinq couleurs de fond sont proposées pour l’encadré du bandeau promotionnel de l’accueil, soit trois options claires et deux foncées.

Blanc

#FFFFFF

Gris-bleu-10

#F1F5F8

Bleu-10

#E7F1FC

Bleu-80

#0F096C

Bleu-90

#0A0952

Combinaisons de couleurs possibles

La couleur de fond choisie pour l’encadré doit contraster avec celles du visuel.

Lorsque les couleurs du visuel sont foncées

Privilégier un fond de couleur claire afin que l'encadré ressorte bien sur le visuel foncé.

Image représentant l'utilisation conforme des couleurs visuelles foncés

Image représentant l'utilisation non conforme des couleurs visuelles foncés

Lorsque les couleurs du visuel sont claires

Créer un contraste avec la couleur claire qui prédomine le visuel en optant pour un encadré de couleur foncée.

Image représentant l'utilisation conforme des couleurs visuelles claires

Image représentant l'utilisation non conforme des couleurs visuelles claires

Options de couleurs

Le bouton primaire du bandeau promotionnel de l’accueil se décline en deux couleurs.

Bleu-60

#1224B8

Orange-70

#FF9B00

Combinaisons de couleurs possibles

Avec le bouton primaire bleu

Image représentant une combinaison de couleurs conforme — **À faire :** Opter pour un fond de couleur claire : blanc, gris-bleu-10 et bleu-10.

Image représentant une combinaison de couleurs non conformes — **À ne pas faire :** Utiliser une couleur de fond qui ne contraste pas avec celle du bouton : bleu-80 et bleu-90.

Avec le bouton primaire orange

Image représentant une combinaison de couleurs non conforme — **À ne pas faire :** Combiner avec une couleur de fond claire : blanc, gris-bleu-10 et bleu-10.

Recadrage selon la zone de focus

La zone de focus est établie selon les points de rupture (breakpoints) de chaque taille d’écran afin de garantir la visibilité du sujet principal du visuel, peu importe le type d’appareil utilisé. En dehors de cette zone, le sujet principal risque d’être coupé.

Le ou les deux visuels fournis selon les spécifications techniques à respecter sont ensuite recadrés par les designers, en fonction de la zone de focus, aux dimensions requises pour les différentes tailles d'écran.

Exportables en format PNG pour chaque taille d’écran (ordinateur, tablette et mobile), les modèles se superposent au visuel afin de bien positionner le sujet principal dans la zone de focus.

Qu'il y ait un seul grand visuel ou deux visuels de plus petite taille, la même manipulation doit être faite : on positionne le modèle de recadrage directement sur le visuel pour bien cadrer le sujet principal dans la zone de focus des trois tailles d’écran.

Modèle avec un seul grand visuel — Avec un seul grand visuel

Modèle de recadrage avec deux visuels — Avec deux visuels : 1er visuel – Ordinateur

Lorsque le cadrage souhaité est obtenu, le visuel peut être rogné dans ses dimensions finales qui correspondent au format x2.

Image représentant le cadrage sur un ordinateur — Ordinateur

Image représentant le cadrage sur une tablette — Tablette

Image représentant le cadrage sur mobile — Mobile

Tous les visuels finaux doivent être exportés en formats x1, x2 et WebP, quel que soit le style de visuel utilisé. Les formats d'image en x1 et x2 répondent aux besoins des écrans Retina. Quant au format WebP, il réduit considérablement la taille des fichiers et prend en charge leur compression sans perte. 

Image représentant une dimension grander d'exportation des fichiers finaux — X-large et large (ordinateur)

x1 : **1920 px sur 780 px**
x2 : **3840 px sur 1560 px**

Image représentant une dimension moyenne d'exportation des fichiers finaux — Moyenne (tablette)

x1 : **1024 px sur 760 px**
x2 : **2048 px sur 1520 px**

Image représentant une dimension petite d'exportation des fichiers finaux — Petite (mobile)

x1 : **640 px sur 480 px**
x2 : **1280 px sur 960 px**

Bandeau promotionnel de l’accueil