Guide de marque
Ce guide contient des lignes directrices qui permettront d’assurer à la marque Hilo qu’elle apparaîtra de manière cohérente, uniforme et claire à travers toutes les plateformes de marque et les communications.
Afin de faciliter votre travail, ce guide vous présente les principaux éléments de la marque Hilo et comment les utiliser. Lorsque vous appliquerez ces lignes directrices, nous comptons sur vous pour faire preuve de la même bienveillance sans compromis qui caractérise nos efforts. C’est ainsi que nous maintiendrons une marque distinctive et unie aux valeurs inspirantes, doublée d’une vision durable.
Bien que ce guide soit accessible sur un appareil mobile, il est optimisé pour l’affichage sur un ordinateur de bureau.
Table des matières
01 Identité
Logo
Le logo est la base du système d’identité de la marque. Le point du «i» d’Hilo rappelle la lumière d’un phare ou d’une étoile, que l’on peut voir de très loin et dont la raison d’être est de nous guider et de veiller sur nous. Pouvant grossir, rapetisser, se multiplier ou se diviser à volonté pour nous faire voir toute l’étendue du champ d’application d’Hilo, le point lumineux orangé est toujours là pour nous accompagner. Un effet de bienveillance et de sécurité émane naturellement de cette signature visuelle.
Versions du logo
Le logo existe en deux versions : sans descripteur, présentée ci-dessous, et avec descripteur, présentée dans les sections «Avec endosseur» et «Avec signature».
Important
Le logo forme un tout indivisible, modifiable d’aucune façon : la forme, la couleur et la typographie ne doivent en aucun cas être modifiées. On ne doit pas chercher à le reproduire et on doit toujours utiliser les versions électroniques fournies.
Logo : Zone de protection
Afin d’en maximiser l’impact, le logo est toujours entouré d’un espace de protection, qui est à la fois une zone vierge de tout élément et la distance minimale à respecter en bordure du support sur lequel il apparaît.
L’espace de protection, sur toutes les faces, est défini par deux fois la hauteur du point du «i».
Logo CMJN : Pour utilisation imprimée
Logo RVB : Pour utilisation numérique
Logo : Taille minimale
Pour assurer une bonne visibilité au logo sans descripteur, sa taille ne doit pas être inférieure à la taille indiquée ici.
Imprimé
X : 0,3 po / 0,762 cm
Numérique
X : 22 px
À noter
Cette taille minimale peut ne pas convenir dans certains contextes, que ce soit en imprimé ou en production électronique. Il appartient alors à l’équipe de production de choisir une taille qui permettra au logo de bien ressortir.
Logo : Combinaisons de couleurs
Le logo existe en quatre couleurs, soit bleu clair, bleu moyen, bleu foncé et blanc, toujours accompagné du point orangé. Il existe également en renversé ou en noir pour les applications où la couleur est déconseillée, voire impossible compte tenu du support. Un contraste marqué par rapport à l’environnement est à privilégier en tout temps. Référez-vous à la section Couleurs pour plus d’informations.
Les associations ci-dessous ne sont pas des exemples absolus. Il faut toujours s’assurer que le contraste est à son plein potentiel selon la taille du logo, le média et/ou la technique d’impression utilisée. Les versions en bleu clair et en bleu foncé sont à privilégier.
Logo : Avec endosseur
Afin de crédibiliser la marque Hilo, on priorisera le logo avec descripteur «par Hydro-Québec» sur tous les documents d’entreprise (papeterie, carte professionnelle, signature courriel) ainsi que dans nos campagnes de communications.
Si la taille du logo n’est pas optimale pour la lisibilité du descripteur, ce dernier apparaîtra plutôt comme mention, placé de façon discrète et appropriée sur la communication. Par exemple, sur le site Internet, la mention «par Hydro-Québec» se retrouve en bas de page.
Le logo avec descripteur existe en version française et anglaise.
Il existe dans les mêmes déclinaisons de couleurs que celle du logo sans descripteur. Le descripteur doit toujours être de la même couleur que le nom.
Zone de protection
Afin d’en maximiser l’impact, le logo descripteur est toujours entouré d’un espace de protection, qui est à la fois une zone vierge de tout élément et la distance minimale à respecter en bordure.
L’espace de protection, sur toutes les faces, est défini par deux fois la hauteur du point du «i».
Taille minimale
Pour assurer une bonne visibilité au logo avec descripteur, sa taille ne doit pas être inférieure à la taille indiquée ici.
Imprimé
X : 0,55 po / 1,4 cm
Numérique
X : 40 px
À noter
Cette taille minimale peut ne pas convenir dans certains contextes, que ce soit en imprimé ou en production électronique. Il appartient alors à l’équipe de production de choisir une taille qui permettra au logo de bien ressortir.
Logo CMJN : Pour utilisation imprimée
Logo RVB : Pour utilisation numérique
Logo : Utilisation pour partenariats
On priorisera également le logo avec descripteur dans un contexte de partenariat ou de commandite. Toutefois, si la taille du logo s’avère être trop petite pour assurer une bonne lisibilité, on utilisera le logo sans descripteur.
Mise en place du logo
Le logo est centré verticalement et horizontalement dans l’espace qui lui est réservé, tout en respectant sa zone de protection de deux fois la hauteur du point du «i» et celles des logos partenaires.
Sa taille est calibrée optiquement par rapport aux autres logos.
Dans la mesure du possible, le logo d’Hilo est positionné en haut ou à gauche lorsqu’il est juxtaposé à d’autres logos.
Couleurs
On utilisera le logo bleu foncé sur fond blanc et le logo bleu clair sur fond foncé. Si le fond est d’une autre couleur que blanc, on pourra opter pour le logo noir ou renversé afin d’obtenir le meilleur contraste.
Logo : Avec signature
Le logo avec signature peut être utilisé en version française et anglaise. Il existe en deux déclinaisons de couleurs.
Son orientation (verticale ou horizontale) sera déterminée selon le format.
Zone de protection
Afin d’en maximiser l’impact, le logo descripteur est toujours entouré d’un espace de protection, qui est à la fois une zone vierge de tout élément et la distance minimale à respecter en bordure.
L’espace de protection, sur toutes les faces, est défini par deux fois la hauteur du point du «i».
Taille minimale
Pour assurer une bonne visibilité au logo avec descripteur, sa taille ne doit pas être inférieure à la taille indiquée ici.
Imprimé
X : 0,55 po / 1,4 cm
Numérique
X : 40 px
À noter
Cette taille minimale peut ne pas convenir dans certains contextes, que ce soit en imprimé ou en production électronique. Il appartient alors à l’équipe de production de choisir une taille qui permettra au logo de bien ressortir.
Logo CMJN : Pour utilisation imprimée
Logo RVB : Pour utilisation numérique
02 Couleurs
Charte des couleurs primaires
Couleurs primaires
Les couleurs primaires de la plateforme de communication sont le bleu foncé et le bleu clair. Le bleu clair et le rose peuvent être utilisés à des pourcentages réduits pour bonifier la lisibilité et le contraste lorsque nécessaire.
Couleurs complémentaires
L’orange Hydro-Québec est essentiel à la reconnaissance de la marque et est principalement utilisé pour le point, ainsi que pour divers éléments graphiques. Le blanc et le bleu moyen sont des couleurs complémentaires, mais demeurent somme toute importantes dans la plateforme.
Le rose est principalement utilisé pour parler des défis Hilo.
Accessibilité numérique
Pour une visibilité optimale sur le web, il est recommandé de suivre les directives qui suivent.
Sur le bleu foncé et le bleu moyen, la typographie et les icônes doivent être en renversé. Sur le bleu clair et ses dégradés, ainsi que sur le orange et le rose, les éléments doivent être en bleu foncé. Cette section contient plusieurs exemples indiquant les bonnes pratiques à suivre et quelques combinaisonsde couleurs à éviter.
Utilisation des couleurs
Afin de dynamiser et diversifier les différentes communications Hilo, voici quelques applications utilisant les palettes de couleurs primaires et complémentaires. À noter que le rose est associé aux défis.
Charte des couleurs secondaires
Couleurs secondaires
Une palette de couleurs plus large a été développée pour la création des illustrations et les médias sociaux UNIQUEMENT.
À noter que les couleurs primaires doivent être priorisées en tout temps. Elles doivent être prédominantes afin de créer une marque reconnaissable et ne pas diluer son impact.
Utilisation des couleurs secondaires sur les médias sociaux
03 Typographie
Police de caractères
La police de caractères de la marque est Hydro-Québec, disponible en plusieurs graisses. Elle a été conçue spécifiquement pour Hydro-Québec. Tous les droits lui appartiennent.
Interlignage
Lorsque la typographie est utilisée en titre, soit très grosse, l’interlignage est modifié. On diminue du tiers l’espace entre les lignes. Pour le texte courant, l’interlignage automatique convient.
Typographie vs logo
Comme le logo Hilo est inspiré de la typographie Hydro-Québec Gras, certaines règles doivent être respectées pour ne pas créer de confusion lorsqu’il est à l’écrit.
04 La grille
Publicité imprimée
Voici un exemple de grille illustrant les marges à respecter ainsi que lepositionnement du logo. Le format ci-dessous est 8,5 po x 11 po.
Les marges
Dans le cas de publications de format 8,5 po x 11 po (ou de formats proportionnels à ce dernier), les marges correspondent au 1/15 de la largeur totale. Pour les formats atypiques (horizontaux, carrés, petits...), cette règle peut varier pour un résultat plus harmonieux.
05 Imagerie
Direction photo générale
La maison Hilo est à l’image de la marque : accessible, sympathique, moderne et épurée. Elle est résolument actuelle et de bon goût, sans être ultramoderne ni minimaliste. On sent qu’il fait bon y vivre et que l’espace est habité, pour vrai. Avec ses imperfections et ses «traîneries». Les photos montrent des gens dans leur quotidien, dans des situations courantes et qui font des gestes naturels. La coloration d’ensemble est inspirée des couleurs de la marque. Les appareils technologiques (tablette, assistant vocal, thermostat, etc.) font partie de l’environnement, mais les personnes n’interagissent pas nécessairement avec eux.
Les photos présentées sont pour référence seulement.
Exemple de modification d’une photo provenant d’une banque d’images
Direction photo :
Service ou appareil
Exemples de messages avec photos sur les médias sociaux
Illustrations
Des illustrations ont été créées spécifiquement pour Hilo, où les formes arrondies et les couleurs font écho à l’identité de la marque.
Des couleurs complémentaires et secondaires ont été ajoutées aux couleurs de la marque pour donner une plus grande richesse et de la flexibilité au tout. Référez-vous à la sous-section Charte des couleurs secondaires pour plus d’informations.
Iconographie
Des icônes ont été construites spécifiquement pour la marque Hilo. Leur style, l’épaisseur du trait et leur taille s’inspirent directement du logo et de la typographie de la marque.
Les icônes sont
• Fonctionnelles : pour illustrer des sections et des appareils sur l’application et le site Hilo.
• Informatives : pour accompagner une notion comme l’écologie ou l’économie d’énergie.
Les icônes ne sont pas
• Décoratives ni illustratives : si on souhaite présenter un concept ou un objet, on doit utiliser les illustrations créées à cet effet.
Les icônes ont été conçues pour être utilisées en petit format.
Comme illustré ci-contre, le trait de l’icône doit avoir une épaisseur de 2 points pour une grille de 24 points.
Pointes (1)
La fin du tracé est en angle droit pour faire un rappel de la typographie.
Courbes (2)
Les formes, inspirées de la typographie et des illustrations, sont géométriques et arrondies.
États numériques (3)
Lorsque utilisées sur l’application Hilo, les icônes ont deux états : en filet lorsque désactivées, et en renversé lorsque activées.
Exemples d’utilisations des icônes
Illustration du téléphone
Hilo est un service visible principalement via une application. Il est donc incontournable de promouvoir celle-ci via une image de téléphone. Les deux images démontrées à droite sont à utiliser afin de créer une uniformité dans les différentes communications.
À noter
Les designs de téléphones recommandés ici ne s’appliquent pas aux illustrations.
Il est possible de modifier l’angle du téléphone selon le format. Ex. : Pour un format très horizontal, on peut incliner l’appareil.
Couleurs possibles
du téléphone
Écran seul
Disponible de face seulement.
Illustratif
La couleur du filet s’adapte à son arrière-plan pour maximiser la lisibilité.
06 Le point
Les trois fonctions du point Hilo
Le point Hilo est toujours utilisé de manière réfléchie. Il ne sera jamais que décoratif. Son application varie selon le contexte et ses utilisations ont été divisées en trois fonctions.
Pointeur
Il se place derrière un élément de l’image afin de faire ressortir son importance. Il le met en évidence. Il le marque.
Bienveillant
Il s’intègre dans un élément rond présent dans l’environnement visuel. Il se trouve souvent au-dessus des personnes. Il englobe et éclaire. Il veille et accompagne.
Connecteur
Il établit une connexion entre deux ou plusieurs éléments pour représenter le lien qui les unit. Il peut indiquer de l’énergie qui circule ou de l’information qui s’échange par exemple.
Utilisation du point
Hilo : Pointeur
Exemples
Utilisation du point
Hilo : Bienveillant
Exemples
Utilisation du point
Hilo : Connecteur
Exemples
Utilisation du point
Hilo : À éviter
Exemples
Utilisation du point
Hilo : Autres
Exemples
07 Disposition
des promotions
Boutons (Web)
Les boutons sont arrondis et de la couleur orange Hydro-Québec. Une hauteur fixe de 32 px est recommandée.
Le texte des boutons est en bleu Hydro-Québec, en minuscules et débute par une majuscule. Le texte est centré et la police de caractères est le Hydro-Québec Gras.
Pour le texte, une zone correspondant à deux demi-cercles doit être respectée à chaque extrémité du bouton.
Prix, pourcentages et autres ponctuations
Pour les prix, on utilise la police de caractères Hydro-Québec Gras. Quand l’espace le permet, on évite de mettre en exposant les sous, les symboles de dollars ($) ou de pourcentage (%).
08 Médias sociaux
La création de contenu numérique doit respecter les mêmes normes que toute autre communication.
Il est possible que l’utilisation des couleurs diffère des communications imprimées. Cependant, les règles de base demeurent identiques afin d’assurer une cohérence de la marque sur tous les points de contact. Référez-vous à la section Utilisation des couleurs secondaires sur les médias sociaux pour plus de détails.
Certains réseaux sociaux ont leurs propres particularités et contraintes. Voici quelques bonnes pratiques pour certains d’entre eux.
Pour maintenir une cohérence lors des repartages de stories sur Instagram, s’assurer de respecter les points suivants :
• Choisir le fond noir ou gris très pâle
• Utiliser la première police de caractères suggérée (qui rappelle la typographie officielle de la marque)
Des stickers et des gifs animés seront développés prochainement. Leur utilisation permettra un meilleur rappel de la marque lors des repartages.
À noter que l’utilisation d’un curseur ou d’un doigt qui pointe quelque chose dans les visuels peut faire en sorte qu’une publication soit bloquée par Facebook. Il est donc important d’éviter ce genre d’image.
09 Applications
graphiques
Voici plusieurs exemples d’applications graphiques
respectant les différentes normes présentées dans ce guide.
Outils promotionnels
Outils
communicationnels
