Passer au contenu
Français
Plus de support
  • Il n'y a aucune suggestion car le champ de recherche est vide.

Personnaliser l'identité visuelle de votre application

Configurez les couleurs, les éléments graphiques et les icônes de votre application mobile afin de l’adapter à l’identité visuelle de votre événement.

La section Identité visuelle vous permet de personnaliser l’apparence de votre application mobile.

Elle se compose de quatre onglets à parcourir dans l’ordre :

  1. Général : définissez les bases de votre identité visuelle 
  2. Schéma de couleurs : appliquez vos couleurs à l'ensemble de l'application 
  3. Modules : personnalisez certains éléments plus précisément 
  4. Icônes : choisissez les icônes utilisées dans l'application.

1. Configurer les paramètres généraux

L’onglet Général permet de définir les principaux éléments visuels de votre application.

Trois blocs sont à renseigner : 

Logo / bannière de l'application

Commencez par choisir le type d’image que vous souhaitez utiliser :

  • Image intégrée : sélectionnez un logo déjà disponible dans votre espace. Un second menu déroulant vous permet de choisir le logo souhaité.
  • Image externe : utilisez une autre image en cliquant sur Parcourir la galerie, puis sélectionnez votre fichier.

Palette de couleurs

La palette rassemble les couleurs que vous souhaitez utiliser dans votre application.

Pour ajouter une couleur, cliquez sur Nouvelle couleur à la suite de la liste. Pour supprimer une couleur, cliquez sur la croix située à côté de celle-ci.

Les couleurs enregistrées à cette étape ne sont pas automatiquement appliquées à l'application. Elles seront ensuite proposées lors de la configuration du Schéma de couleurs et des Modules.

➡️ Vous préparez donc votre palette ici, et vous décidez ensuite où chaque couleur s'applique.

 

Élévation

L’élévation permet de définir le relief des différents éléments de l'application, à l'écran.

Saisissez un chiffre dans le champ prévu à cet effet :

  • une valeur de 0 correspond à un rendu totalement plat 
  • plus la valeur est élevée, plus l’ombre sous les cartes et les blocs est marquée.

Par exemple, imaginez des feuilles de papier posées sur une table : une feuille à plat se confond avec le fond, tandis qu'une feuille surélevée projette une ombre et se détache du reste.

Ce réglage permet notamment de mieux distinguer certains contenus du fond de l'application.

Enregistrer et publier

Une fois vos réglages terminés :

  1. cliquez sur Enregistrer en haut à droite pour sauvegarder vos modifications et les visualiser en preview
  2. lorsque le résultat vous convient, cliquez sur Publier en haut à gauche afin de les rendre visibles dans l'application en production.

 

2. Définir le schéma de couleurs

L’onglet Schéma de couleurs vous permet d’appliquer des couleurs de manière globale dans l'application, en une seule fois. 

Les couleurs définies ici s'appliquent par défaut partout dans l'application. Vous ne configurez pas chaque écran individuellement : vous attribuez une couleur à différents rôles — couleur primaire, couleur des surfaces, couleur des bordures, etc. — puis l'application les utilise automatiquement aux endroits concernés.

Pour modifier un écran ou un élément particulier, utilisez ensuite l’onglet Modules.

Appliquer une couleur

Pour modifier une couleur :

  1. repérez la ligne correspondant au rôle souhaité 
  2. cliquez sur le rond de la colonne Fond (couleur d'arrière-plan) ou Texte, icônes (pour la couleur du texte et des icônes qui se posent dessus.)

     

  3. sélectionnez la couleur à appliquer.

Les couleurs définies précédemment dans votre palette vous sont proposées par défaut.

Répétez l’opération pour chacun des rôles que vous souhaitez personnaliser.

Comprendre les différentes colonnes

Chaque ligne du tableau se lit degauche à droite et indique :

  • Couleur : le nom du rôle, avec son intitulé technique en dessous  

     (primary, surface…).

  • Fond : la couleur d'arrière-plan pour ce rôle
  • Texte, icônes : la couleur des textes et icônes affichés sur ce fond 
  • Où ça s'applique : les différents éléments de l'application concernés.

Certaines couleurs, comme celles utilisées pour les ombres ou les bordures, ne proposent pas de réglage pour le texte ou les icônes.

Les couleurs principales

Commencez par configurer les couleurs qui constituent l'identité principale de votre application : 

  • Couleur primaire : c'est la couleur la plus visible de votre application. Les boutons et actions principales, éléments sélectionnés, navigation, titres mis en avant ou encore bulles de vos propres messages. C'est ici que vous choisissez votre couleur de marque. 
  • Conteneur couleur primaire : fonds teintés, notamment dans les cartes de messagerie ou certains éléments d'agenda.
  • Couleur secondaire : pour les accents secondaires, localisation, bannières, étiquettes, tags ou messages reçus.
  • Couleur tertiaire : réservée aux alertes, notifications : pastille denon-lu, réaction "j'aime", compteurs de statistiques.  
     

Les couleurs de fond

Ce second tableau concerne la structure de l'aplication plustôt que son identité. Des couleus neutres y conviennent géénralement mieux. 

  • Couleur d'ombre : la teinte des ombres portées, sous les cartes d'agenda et la barre supérieure. Elle fonctionne de pair avec le réglage d'élévation de l'onglet Général.
  • Couleur des bordures : les lignes, séparateurs et éléments atténués : contours des fenêtres, bordures des champs de saisie, textes secondaires
  • Couleur des bordures alternative : une variante plus douce, à l'usage limité (encarts de texte enrichi, cartes de résultats de recherche).
  • Couleur des surfaces : le fond des cartes, panneaux, menus déroulants, zones de saisie et calendriers. C'est le fond que vos utilisateurs voient le plus souvent : privilégiez une couleur claire et neutre.
  • Couleur des surfaces alternative : les fonds secondaires : barre de navigation, menu latéral, bulles des messages reçus, créneaux non sélectionnés.

Vérifier les contrastes

Veillez à conserver un contraste suffisant entre les couleurs de fond et les textes ou icônes qui apparaissent dessus.

Par exemple, un texte blanc sur un jaune clair ou un texte gris clair sur un fond blanc pourra être difficile à lire sur un téléphone, notamment en extérieur.

Quelques bonnes pratiques :

  • associez un texte clair à un fond suffisamment sombre, et inversement 
  • évitez d'associer deux couleurs ayant une luminosité trop proche 
  • en cas de doute, privilégiez le noir ou le blanc pour les textes 
  • vérifiez toujours le résultat en preview, idéalement sur un véritable téléphone. 

💡 Conseil : ne vous fiez pas uniquement au rendu visible depuis votre écran d'ordinateur. L'utilisation sur mobile peut faire apparaître des problèmes de contraste ou de lisibilité moins visibles depuis le back-office.

Enregistrer et publier

Une fois vos couleurs appliquées, cliquez sur Enregistrer en haut à droite : vos modifications sont sauvegardées et visibles en preview. Lorsque le rendu vous convient, cliquez sur Publier en haut à gauche pour les rendre visibles dans l'application en production.

3. Personnaliser les modules

Une fois votre schéma de couleurs défini, l’onglet Modules vous permet d’affiner l’apparence d’éléments précis de votre application. La logique ici est inversée par rapport aux onglets précédents : vous ne réglez plus une couleur pour toute l'application, vous ciblez un élément particulier — un bouton, une bulle de message, le menu du bas — pour en modifier l'apparence.

Choisir la vue à personnaliser

Les éléments sont répartis entre plusieurs vues :

  • Bottom sheet 
  • Boutons 
  • Centre de notifications 
  • Menu burger 
  • Onglets 
  • Page de chargement 
  • Page de chat 
  • Page de détails d'un élément 
  • Page de liste d'un élément 
  • Pages de l'application.

Sélectionnez la vue souhaitée depuis le menu déroulant situé en haut à gauche. L’aperçu se met ensuite automatiquement à jour.

Si vous ne savez pas où chercher, commencez par Pages de l'application : c'est le gabarit de base contenant la plupart des éléments courants. Les éléments de navigation (bandeau du haut, menu du bas) sont présents dans presque toutes les vues : vous pouvez les modifier depuis n'importe laquelle. 

Sélectionner l'élément à modifier

Cliquez directement sur l'élément souhaité dans l'aperçu.

Un encadré en pointillés apparaît autour de celui-ci et ses paramètres sont affichés dans le panneau situé à droite.

Appliquer les réglages

Les options disponibles varient selon le type d'élément sélectionné.

Pour les cartes : vous pouvez appliquer un ou plusieurs thèmes regroupant différents réglages visuels.

Pour les autres éléments, deux onglets sont disponibles :

  • Mise en forme : couleur des icônes, couleur, taille (en chiffre) et épaisseur du texte 

    (menu déroulant ; plus la valeur est élevée, plus le texte est épais), ainsi que, selon les cas, l'apparence des états inactifs (éléments non sélectionnés)

  • Arrière-plan : couleur de fond de l'élément.

Un rond grisé et barré signifie qu’aucune couleur spécifique n’est définie. L’élément reprend alors la couleur définie dans le Schéma de couleurs.

Quelques points de vigilance

Certains réglages sont communs à plusieurs vues.

C'est notamment le cas :

  • du bandeau supérieur ;
  • du menu inférieur ;
  • du bouton central du menu ;
  • du menu burger.

Une modification effectuée depuis une vue peut donc également être appliquée aux autres écrans utilisant le même élément.

À l'inverse, les barres de recherche présentes dans les vues Bottom sheet et Page de liste disposent de réglages distincts, même si elles portent le même nom.

Enregistrer et publier

Une fois vos modules personnalisés, cliquez sur Enregistrer en haut à droite : vos modifications sont sauvegardées et visibles en preview. Lorsque le rendu vous convient, cliquez sur Publier en haut à gauche pour les rendre visibles dans l'application en production.

4. Personnaliser les icônes

Le dernier onglet vous permet de personnaliser certaines icônes utilisées dans l'application, notamment pour signaler certaines fonctions : mettre en favori, s'inscrire à une session, ouvrir le plan interactif, filtrer une liste.

Ces icônes apparaissent principalement sur les cartes et dans les écrans de liste. Les personnaliser vous permet de les accorder au style de votre événement. 

Repérer la fonction à personnaliser

  • Filtres (écrans de liste) — l'icône d'accès aux filtres dans les listes
  • Est en favori / N'est pas en favori — les deux états du bouton favori
  • Est inscrit / N'est pas inscrit — les deux états du bouton d'inscription à une session
  • Plan interactif — l'icône d'accès au plan
  • Itinéraire (plan interactif) — l'icône de calcul d'itinéraire
  • Téléchargement — l'icône de téléchargement d'un document

Choisir les icônes

Certaines fonctions disposent de deux états en fonctionnant par paire, par exemple :

  • Est en favori / N'est pas en favori 
  • Est inscrit / N'est pas inscrit.

Choisissez des icônes suffisamment différentes pour que l'utilisateur identifie immédiatement leur état. Vous pouvez par exemple utiliser un cœur plein et un cœur vide pour représenter les favoris.

Modifier une icône

Cliquez dans le champ correspondant à l'icône à modifier pour ouvrir la galerie.

Utilisez ensuite un mot-clé en anglais pour rechercher une icône, par exemple :

  • star pour une étoile 
  • download pour un téléchargement 
  • map pour un plan.

Sélectionnez ensuite l'icône souhaitée.

Pour revenir à l'icône par défaut, cliquez sur la croix située à droite du champ.

Vérifier le rendu

Les icônes sont affichées en petite taille dans l'application. Pensez donc à contrôler leur lisibilité en preview avant de publier vos modifications.

Une icône contenant trop de détails peut devenir difficile à identifier sur un écran de téléphone.

Enregistrer et publier vos modifications

Dans chacun des quatre onglets, pensez à :

  1. cliquer sur Enregistrer pour sauvegarder les modifications et les vérifier en preview ;
  2. tester le rendu de votre application, si possible sur mobile ;
  3. cliquer sur Publier lorsque la personnalisation est terminée.

Vos modifications seront alors visibles dans votre application en production.