Comment configurer le style global de votre app ?

Bonjour et Bienvenue dans votre back office GoodBarber !

Aujourd'hui nous allons parler d'un outil ultra puissant pour le design de votre app, le menu Global Style.

Le Global Style permet de gérer le design général de votre application à partir d'un seul menu.

Les couleurs, les polices et les effets choisis dans ce menu sont appliqués à chacune des sections de l'application.

Par contre, attention ! Chaque modification faite à partir de ce menu sera appliquée à TOUTES les sections de votre app.

Allons voir à quoi ca ressemble.

Je vais dans le menu My app > Design > Design général

Je clique sur Global Style.

La première chose à faire est de choisir un thème couleurs.

Un thème de couleurs est une combinaison de couleurs qui s'accordent harmonieusement. Le Style Global propose une bibliothèque de thèmes de couleurs. 

Pour choisir dans la bibliothèque, je clique sur "Changer le thème de couleur".

vous le voyez, j'ai le choix.

Si je veux plutot modifier mon thème actuel, je clique sur Edit, puis en bas de la page, je clique sur Créer un nouveau thème.

Je n'ai plus qu'à sélectionner mes couleurs;

La partie typographie maintenant.

Il existe une hiérarchie pour l'affichage du texte dans l'application.

8 niveaux sont utilisés pour afficher les titres, les sous-titres et le texte des paragraphes.

Je définis la taille de la police.

La police de caractère pour chaque niveau.

Selon les polices choisies, je peux aussi en choisir l'option.

Passons aux boutons.

Pour les sections de votre app qui invitent les utilisateurs à effectuer des actions, je vais sélectionner la forme des boutons que je veux appliquer.

Je peux prévisualiser le resultat en cliquant ici.

Il existe plusieurs niveaux de hierarchie concernant les boutons de votre app. Le design des bouton est fonction du thème de couleur de l'app, afin de respecter l'harmonie, plusieurs déclinaisons sont proposées pour chaque thème.

Voici les différents type de design pour chaque niveau de hierarchie:

- Niveau 1: fond du bouton coloré, pas de contour.

- Niveau 2: fond du bouton transparent, contour et texte en couleur.

- Niveau 3: fond du bouton transparent, pas de contour.

Ensuite, les effets de survol sur les images (uniquement présents sur PWA desktop)

Et enfin les élements additionnels comme l'icône retour qui apparait dans le header pendant la navigation dans l'app. Vous pouvez aussi paramétrer cet icone au moment de designer votre header.

Voilà j'applique mes modifications.

N'oubliez pas que ces modifications vont ecraser tout le design actuel de votre boutique, y compris vos sections décrochées !

Je trouve mon app parfaite comme ca! Et vous?

A bientot pour un nouveau tutoriel !