Comment configurer le style de votre app ?

Le style de l'app

« App style » règle le design général de votre app depuis un seul endroit : couleurs, polices, boutons, champs de formulaire, etc.

Dans le menu « My App », cliquez sur « App style ».

Les réglages sont en deux parties : l'essentiel, puis des options supplémentaires. Tout s'applique à chaque section de l'app et remplace le design défini par section.

Couleurs

Commencez par les couleurs.

Un thème de couleurs réunit des couleurs qui s'accordent. Choisissez-en un dans la bibliothèque… et l'aperçu montre l'app avec ce thème.

« Magic palette » propose un autre thème… à chaque clic.

Réglez ensuite chaque couleur en détail : le header, les couleurs principales, les fonds, le menu et les boutons.

Cliquez sur une couleur, tapez un code ou choisissez-la, et cliquez sur Choose.

Le header prend la nouvelle couleur.

Cliquez sur Apply pour utiliser ces couleurs dans toute l'app, ou sur Cancel pour garder les actuelles. Ici, nous les gardons.

Polices

Ensuite, les polices.

Un thème de polices associe trois polices qui s'accordent. Vous pouvez en choisir un dans la liste.

Le curseur règle la taille de tous les textes à la fois et garde leur hiérarchie.

Tous les textes grandissent ensemble.

Votre app utilise huit niveaux de texte, du titre principal au texte normal. Pour changer la police d'un niveau, ouvrez-le… et choisissez une police. Toutes les Google Fonts sont disponibles, et le bouton + ajoute votre propre police, si sa licence le permet.

Le titre principal change de police.

Réglez aussi l'épaisseur, l'interligne et l'espacement des lettres de chaque niveau.

De même, cliquez sur Apply pour utiliser ces polices, ou sur Cancel pour garder les vôtres.

Boutons et champs de formulaire

Viennent ensuite les boutons.

Votre app a trois niveaux de boutons, choisis par GoodBarber selon l'action : le niveau 1 est plein, le 2 a un contour et le 3 est un simple lien texte. Leurs couleurs viennent de votre thème.

Choisissez leur forme : carrée, arrondie ou ronde… et tous vos boutons l'adoptent.

Même principe pour « Form fields » : choisissez la forme des champs, leur taille et la place du titre, au-dessus ou dedans.

Vignettes et cellules

« Thumbnails and cells » règle la forme des images et des cartes de vos listes : carrée, arrondie ou ronde.

Ici, les coins deviennent carrés.

Dans la web app sur ordinateur, vous pouvez aussi ajouter un effet au survol d'une image.

Espacement

Spacing règle les marges autour de votre contenu, en pixels.

Avec des marges plus larges, le contenu a plus d'espace autour de lui.

Animations et retour haptique

Sur les apps natives iOS et Android, vous pouvez aussi choisir comment une page s'ouvre depuis une liste, ajouter une légère vibration au toucher et révéler les éléments au défilement.

Icônes

Dans Icons, vous choisissez les icônes par défaut de votre app. Cliquez par exemple sur l'icône de favori… et choisissez-en une autre dans la bibliothèque.

Chaque article affiche la nouvelle icône.

Fond et séparateurs

Enfin, le fond de votre app : une couleur ou une image, et la couleur des séparateurs.

Le fond change sur toutes les pages.

Publier

Pour que vos utilisateurs voient ces changements, publiez la mise à jour de votre app depuis le menu Publish.