GoodBarber 4.5 - Gérez le design de votre app

Ecrit par le Mercredi 18 Juillet 2018

GoodBarber 4.5 - Gérez le design de votre app
Il y a quelques semaine nous vous expliquions comment gérer le contenu de votre app . Vous le savez déjà, le design est notre fer de lance, c'est pourquoi nous n'avons pas ménagé nos efforts pour vous proposer un tout nouveau menu, spécialement dédié au design et à partir duquel vous avez la possibilité de gérer l'intégralité de l'aspect de votre application et de ses pages. 

Voici en détails quelques unes des options de design que vous pouvez gérer à partir de ce nouveau menu:

Personnalisez le Titre ou le Logo de votre app

Ce menu est entièrement dédié au header de votre application. Ce dernier contient des boutons d'actions, et surtout le titre de votre application. 

La première partie du menu concerne l'icône Menu, présente dans le header pour permettre à l'utilisateur d'ouvrir le mode de navigation principal de l'application. Ici vous pouvez personnaliser cette icône et en choisir la couleur.

Vient ensuite le moment d'afficher le titre de votre application. Celui-ci peut être matérialisé par un texte simple, duquel vous pourrez choisir la police, la taille ainsi que la couleur. 
Sinon, vous pouvez opter pour un logo, et importer simplement l'image de votre choix au format  600 x 148 px. Une fois votre titre ajouté, il ne vous reste plus qu'à choisir son alignement centré ou aligné à gauche.

Vous trouverez également ici la possibilité de personnaliser l'arrière plan de votre header, et plusieurs choix s'offrent à vous:
- utiliser une couleur unie
- utiliser un dégradé de couleurs
- utiliser des images de votre choix, en respectant les tailles indiquées afin que celles-ci soient parfaites sur n'importe quel type d'écran

Pour aller plus loin dans la personnalisation de votre header, et réfléchir dans les moindres détails l'expérience utilisateur procurée par votre app, la partie suivante du menu vous permet d'ajouter des liens à votre header qui seront affichés à la droite de ce dernier. Selectionnez la destination du lien, l'icône et la couleur et le tour est joué ! Dans l'exemple ci-dessous nous avons décidé d'ajouter un lien vers le profil utilisateur et la page de contact de l'application. C'est vous qui choisissez en fonction de votre concept ! N'oubliez pas que vous pouvez si vous le souhaitez activer l'option "Afficher le titre du lien", qui permettra le titre du lien a côté de son icône sur les version tablette et desktop de votre application

Enfin, tout comme pour l'icône Menu, vous pouvez personnaliser l'icône Retour en Arrière qui la remplacera dans la pages profondes de l'application.

Créez l'Icône et l'Ecran de lancement de votre app

C'est ici que vous allez créer les premiers éléments qui seront vus par vos utilisateurs.
Que ce soit pour l'icône ou l'écran de lancement, deux options s'offrent à vous:

- Utiliser le wizard de création
- Importer vos propres images


Dans l'exemple ci-dessous, nous avons créé l'icône de l'application grâce au wizard, et vous allez voir que ce process vous permet de créer vos éléments sans aucune difficultés. 
Pour commencer rendez-vous directement sur la preview de l'icône et modifier le texte contenu dans l'icône, ainsi que le titre de l'app, juste en dessous qui s'affichera sur l'écran d'accueil des appareils de vos utilisateurs. 

Ensuite, dans le panel de droite, vous aurez la possibilité de modifier le design de l'icône en choisissant la police de caractère, la couleur et les effets à appliquer sur le texte de l'icône. Enfin, il ne vous reste plus qu'a personnaliser l'arrière plan de votre icône en y appliquant au choix:
- une couleur unie
- un dégradé de couleur
- une image de votre choix à importer au format indiqué.

Pour l'écran de lancement en revanche, nous avons choisi de vous montrer l'option Custom, c'est à dire l'ajout direct d'image. Pour importer votre image rien de plus simple: le panel de droite vous indique toutes les tailles d'images nécessaires pour un affichage optimal de votre écran de lancement sur n'importe quel type d'écran.

Gérez le design de vos pages

Ici, nous allons entrer dans la partie équivalente au menu Contenu que nous vous présentions. Vous retrouverez la liste de toutes les pages de votre application à l'intérieur desquelles vous pourrez entrer afin de paramétrer chaque option de design.

Dans l'exemple si dessous, nous avons choisi de vous montrer la mise en place du design d'une section article. Il est possible de designer plusieurs parties des pages Article:


1/ La liste des articles:
Vous pouvez ici choisir le template de présentation de votre liste d'articles. Définissez les couleurs et polices utilisées ainsi que les informations apparaissant dans la liste (vignette, date de publication, résumé de l'article, auteur, etc.).
Enfin, choisissez la vignette à utiliser par défaut pour vos articles, son format et son alignement.
 
2/ Les articles:
Tout comme pour la liste des articles, vous pouvez choisir le template d'affichage, les couleurs et polices utilisées.
Personnalisez également la barre d'outil en affichant ou non les fonctionnalités suivantes: 
- Commentaires
- Partage
- Taille de la police
- Favoris
- Passage à l'article suivant

Vous avez également la possibilité d'éditer le code HTML structurant le template de la page en utilisant les balises [TITLE], [DATE], [AUTHOR] et [CONTENT].


3/ Les catégories & les commentaires:
Si vous avez activé la catégorisation de vos items, vous pourrez personnaliser ici la façon dont vos utilisateurs verront ces catégories. Il vous suffit de sélectionner le modèles de menu que vous souhaitez utiliser, et de choisir les couleurs à utiliser. Aussi simple que ça !

De la même façon, vous pouvez personnaliser l'apparence de la page de commentaires depuis ce menu.

Organisez votre Home, gérez le design global de votre app et choisissez votre mode de navigation



C'est également depuis ce nouveau menu Design que vous pourrez créer votre Home, et organiser ainsi un niveau de navigation supplémentaire. Tous les détails concernant la création de la Home se trouvent ici.

Nous vous en parlions il y a quelques semaines, le menu Design contient également le menu Style Global  qui vous permet de gérer le design général de votre app mais aussi de créer de sauvegarder vos propres thèmes.

Enfin, ne manquez pas l'occasion de paramétrer le mode de navigation de votre app que nous vous présentions ici.



Entrez votre adresse email