Directives de conception pour la marque et l'apparence

Prev Next

Ajouter le logo, les images et les couleurs de votre marque dans les paramètres de votre Venue Manager est la meilleure façon de personnaliser des éléments tels que les modèles d'e-mail, les billets physiques et numériques, les pages de commande en ligne, et bien plus encore ! 

Dans cet article, nous vous présentons quelques directives pour ajouter des logos, des images et des couleurs aux paramètres de votre établissement afin de les aligner sur votre identité visuelle.

Pour savoir comment ajouter le logo et les couleurs de votre marque aux paramètres de votre établissement, consultez Ajouter vos logos et couleurs de marque.

Logo par défaut 

Nous utilisons le logo par défaut aux endroits suivants, sauf indication contraire :

Il est possible que le logo par défaut ne s'affiche pas correctement dans les applications ci-dessus en raison de la couleur d'arrière-plan ou de l'orientation.

Par exemple, un logo blanc sera peu visible sur un fond blanc, ou un logo en hauteur ne s'adaptera pas bien à un espace en format letterbox. Dans ce cas, nous vous recommandons de fournir un logo mieux adapté à ces applications.

Nous recommandons d'utiliser un PNG transparent et de recadrer le logo à une largeur maximale de 640 pixels. La hauteur du logo n'a pas d'importance, car elle sera déterminée par les dimensions du logo lui-même.

  • 640 pixels de large

  • Formats de fichier acceptés : WEBP, JPG et PNG

  • Doit être inférieur à 1 Mo

Image d’arrière-plan

L'image d'arrière-plan est utilisée pour les pages de commande classiques et progressives, les décharges en ligne et les formulaires personnalisés.

Lorsqu'elle est affichée sur un ordinateur de bureau, l'image que vous téléchargez s'étire pour remplir la fenêtre. Il est donc préférable d'utiliser une image dont le rapport hauteur/largeur correspond à celui d'un écran d'ordinateur.

La taille idéale est de 1920 x 1080 pixels.

Logo d'en-tête

Le logo d'en-tête n'est plus utilisé dans ROLLER.

Palette de couleurs

Les applications suivantes utiliseront les couleurs définies dans les paramètres de design, sauf indication contraire dans les paramètres de la fonctionnalité :

Vous pouvez appliquer deux couleurs aux produits ROLLER : une couleur principale et une couleur secondaire.

La couleur principale est utilisée principalement pour les titres et les accents, tandis que la couleur secondaire est réservée aux liens, aux boutons et aux autres éléments interactifs.

Si vous souhaitez n'utiliser qu'une seule couleur, saisissez simplement la même valeur dans les deux champs.

Les couleurs doivent être saisies sous forme de valeurs HEX. Si vous n'êtes pas sûr des valeurs HEX à utiliser, vous pouvez utiliser cette ressource pour générer un code HEX en téléchargeant une image.

En-tête de paiement

Cette image est utilisée pour les commandes legacy, les liens de paiement, les formulaires de décharge en ligne et les formulaires.

Assurez-vous que le logo n'est pas blanc, car il sera affiché sur un fond blanc.

  • 640 x 134 pixels

  • Formats de fichier acceptés : WEBP, JPG et PNG

  • Doit faire moins de 1 Mo

Logo de facture

Cette image est affichée sur toutes les factures PDF téléchargées qui sont envoyées via ROLLER.

Assurez-vous que le logo n'est pas blanc, car il sera affiché sur un fond blanc

  • Au moins 300 x 100 pixels (ratio d'aspect 3:1)

  • Formats de fichier acceptés : WEBP, JPG et PNG

  • Doit faire moins de 1 Mo

Préparer votre logo avec des outils d'IA

Préparer votre logo à la bonne taille et au bon format avant de le télécharger dans ROLLER peut demander un peu de travail — surtout si votre fichier contient des espaces blancs superflus, un arrière-plan opaque (non transparent) ou des dimensions qui ne correspondent pas tout à fait. Les outils IA pour les images permettent d'aller beaucoup plus vite.

Des outils comme ChatGPT, Claude, Google Gemini, Microsoft Copilot, Adobe Firefly et les fonctionnalités IA de Canva peuvent accepter une image importée et suivre des instructions en langage courant pour la redimensionner, la recadrer et la reformater — sans logiciel de conception requis.

Ce qu'il faut demander à l'outil

Importez votre fichier logo existant, puis envoyez les instructions suivantes une par une :

  1. « Supprime les marges transparentes ou blanches autour du design pour que le logo occupe tout le canevas de bord à bord. »

  2. « Redimensionne le design proportionnellement pour qu'il tienne dans [largeur] × [hauteur] pixels, en conservant les proportions sans distorsion. »

  3. « Centre le design sur un canevas transparent de [largeur] × [hauteur] pixels exactement. »

  4. « Enregistre-le en tant que fichier PNG avec un arrière-plan transparent. »

Remplace [largeur] × [hauteur] par les dimensions correspondant au type d'image que tu prépares :

Type d'image

Dimensions recommandées

Logo par défaut

640 px de large (hauteur flexible)

En-tête de paiement

640 × 134 px

Logo de facture

300 × 100 px minimum

Image d’arrière-plan

1920 × 1080 px

Voici un exemple de logo avant et après l'utilisation d'un outil IA pour les images.

Avant : Le fichier logo original a un arrière-plan blanc et un espace blanc inégal autour du design.

Après : Le même logo rogné, redimensionné et centré sur un canevas transparent à 640 × 213 px — prêt à être importé. Le damier gris indique un arrière-plan transparent, qui n'apparaîtra pas une fois importé dans ROLLER.

Pour des résultats plus nets, demandez le double des dimensions

Les outils IA génèrent des images à une taille de pixel fixe. Si votre logo semble flou ou pixélisé après l'importation — notamment sur les écrans haute résolution ou retina — demandez à l'outil de le produire au double des dimensions cibles :

« Redimensionne le design proportionnellement pour qu'il tienne dans [double largeur] × [double hauteur] pixels, puis centre-le sur un canevas transparent de [double largeur] × [double hauteur] pixels exactement. »

Par exemple, pour le logo de facture, utilisez 600 × 200 px au lieu de 300 × 100 px. ROLLER l'affichera à la bonne taille, mais les pixels supplémentaires lui permettent d'être rendu avec plus de netteté.

Cela s'applique à tous les types d'images :

Type d'image

Standard

Double (recommandé)

Logo par défaut

640 px de large

1280 px de large

En-tête de paiement

640 × 134 px

1280 × 268 px

Logo de facture

300 × 100 px

600 × 200 px

Conseils

  • Utilisez un PNG transparent dans la mesure du possible — c'est ce qui rend le rendu le plus propre sur les fonds clairs comme sombres dans ROLLER. Si l'outil IA renvoie un fond blanc au lieu d'un fond transparent, relancez-le avec : « Veuillez rendre le fond entièrement transparent, pas blanc. »

  • Vérifiez le résultat avant de le télécharger. Zoomez pour vérifier que les bords sont nets et qu'aucune partie du logo n'est rognée. Le motif de damier gris dans l'aperçu indique la transparence — il n'apparaîtra pas une fois votre logo téléchargé dans ROLLER.

  • Ne déformez pas votre logo. Si l'outil IA l'étire ou l'écrase, demandez-lui de réessayer : « Redimensionnez le design de façon proportionnelle, en conservant le ratio d'aspect — ne pas étirer ni déformer. »

  • Gardez votre fichier en dessous de 1 Mo. Si l'outil IA génère un fichier volumineux, demandez-lui de : « Compresser le fichier PNG en dessous de 1 Mo sans réduire les dimensions. »

  • Pour l'image d'arrière-plan, un PNG transparent ne fonctionnera pas — utilisez un JPG ou un PNG avec une couleur ou une image d'arrière-plan réelle, car il doit couvrir tout l'écran derrière votre page de commande ou votre formulaire de renonciation.