Comment configurer le design global de votre app de vente en ligne ?

Bonjour et Bienvenue dans votre backoffice 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 ça ressemble.

Je vais dans le menu Contenu & Design > 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 plutôt 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 résultat en cliquant ici.

Il existe plusieurs niveaux de hiérarchie 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 hiérarchie:

- 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 éléments additionnels comme l'icône retour qui apparaît dans le header pendant la navigation dans la boutique.

Voilà j'applique mes modifications.

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

Je suis très contente du look de ma boutique !

A bientôt pour un nouveau tutoriel !