Style de l'app : Essentiels du design

Le menu Style de l'app vous permet de gérer le design global de votre application depuis un seul endroit.

Toutes les options définies dans ce menu s'appliquent globalement à toutes les sections de votre application.

⚠️ Important

Si vous modifiez une option du menu Style de l'application, tous les paramètres de design précédemment personnalisés au niveau de la section seront écrasés.

Les nouveaux paramètres de Style de l'application remplaceront ces designs spécifiques à chaque section et s'appliqueront à toutes les sections de votre application.

Pour configurer le design de votre application :
1. Accédez au menu de gauche « Mon app ».
2. Cliquez sur « Style de l'app  » dans la colonne de droite.

Pour une personnalisation plus poussée d'une section spécifique, veuillez consulter l'aide en ligne  dédiée aux paramètres de design au niveau de la section.

1. Définissez votre thème de couleurs
Un thème de couleurs est un ensemble de couleurs complémentaires appliquées à l'ensemble de votre application.
GoodBarber vous propose plusieurs options : vous pouvez choisir parmi les palettes de couleurs intégrées, utiliser la Palette Magique pour générer automatiquement un thème, ou créer votre propre thème à partir de zéro ou en modifiant une palette existante.

2. Personnalisez les couleurs plus en détail

Une fois votre thème défini, vous pouvez ajuster avec précision l'utilisation des couleurs pour chaque élément de votre application.
Par exemple :
- Header : couleur du titre, couleur des icônes et couleur d'arrière-plan
- Couleurs principales utilisées dans toute l'application
- Couleur d'arrière-plan de l'application
- Couleurs des boutons
- Et plus encore

Vous pouvez ainsi contrôler précisément l'identité visuelle de votre application.

3. Appliquez le thème à votre application

Après avoir défini et personnalisé vos couleurs, appliquez le thème à votre application.
Ces paramètres seront automatiquement appliqués à toutes les sections, ce qui vous permettra de gagner du temps et de conserver une apparence cohérente dans toute l'application.

Le texte de votre application suit une hiérarchie claire pour garantir la lisibilité et la cohérence visuelle.
Huit niveaux de texte sont utilisés pour afficher les titres, les sous-titres et le contenu des paragraphes.

1. Sélectionnez un thème de police
Le menu Style de l'app vous permet de choisir un thème de police composé de trois polices complémentaires.
Cette combinaison de polices est appliquée globalement à votre application pour une harmonie visuelle optimale.

2. Définissez la taille du texte à l'aide du curseur
Le style de l'application calcule automatiquement la taille de police pour chaque niveau de texte afin de respecter la hiérarchie.
Le curseur permet d'ajuster la taille de tous les niveaux proportionnellement tout en préservant la lisibilité.

3. Personnalisez les polices à chaque niveau
Vous pouvez ajuster les polices individuellement pour chaque niveau de texte.
Toutes les polices de la bibliothèque Google Fonts sont disponibles, ainsi que les polices natives installées par défaut sur les appareils de vos utilisateurs.

Pour une meilleure cohérence visuelle, nous vous recommandons de ne pas utiliser plus de trois polices dans votre application.

Vous pouvez également ajouter une police personnalisée* en cliquant sur l'icône + dans la liste déroulante. La police sera alors ajoutée à votre liste de polices.
*Important : Les polices peuvent être soumises à des droits d’auteur et à des restrictions de licence, que ce soit pour un usage personnel ou commercial.

Veuillez vous assurer de disposer des droits d’utilisation et de distribution de chaque police dans le cadre de votre application en consultant son contrat de licence.

4. Ajuster les propriétés des polices
Pour chaque police, vous pouvez définir son épaisseur, son interligne et l’espacement des lettres.

5. Appliquer vos paramètres de police
Une fois vos polices définies et personnalisées, appliquez les modifications à votre application.
Ces paramètres sont automatiquement appliqués à toutes les sections, ce qui vous permet de gagner du temps et de garantir une apparence cohérente dans toute votre application.

Dans votre application, des boutons sont utilisés sur les pages pour inciter les utilisateurs à effectuer une action.
Il existe trois niveaux de boutons, chacun conçu pour un type d'action et un contexte spécifiques au sein des sections et des widgets de la page d'accueil.

GoodBarber attribue automatiquement le niveau de bouton approprié en fonction de l'action et de l'emplacement du bouton dans l'application.

- Niveau 1 : Bouton d'action principal, toujours affiché comme un bouton plein.
- Niveau 2 : Bouton d'action secondaire, toujours affiché comme un bouton avec contour.
- Niveau 3 : Action tertiaire, affiché uniquement comme un lien texte.

1. Définir la forme du bouton

Dans le menu Style de l'app, vous pouvez choisir la forme appliquée à tous les boutons de votre application :
- Carré
- Arrondi
- Rond

Ce paramètre s'applique globalement à tous les niveaux de boutons.

Important
- Les couleurs des boutons sont basées sur le thème de couleurs de votre application. Vous pouvez modifier la couleur d'un bouton spécifique depuis le menu de design de la section  ou les paramètres du widget .
- Le niveau du bouton est défini par GoodBarber et ne peut pas être modifié manuellement.