Retour

GoodBarber 4.5 - Gérez le design de votre app

le 

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, il garantit un résultat réussi, 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. En tant que développeur d'app, les possibilités qui s'offrent à vous en terme de personnalisation sont énormes !

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, pour un résultat garanti !

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, en tant que développeur 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é, en tant qu'éditeur, 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 en tant qu'éditeur d'apps, 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 . Les possibilités qui s'offrent à vous sont infinies !

POUR ALLER PLUS LOIN :

 

  • En fonction de vos besoins et de votre stratégie, donner vie à votre travail sous la forme d'une app iOS ou Android peut être une super idée ! Sans plus attendre, découvrez comment élaborer une application mobile, de l'idée au développement en ligne  pour vous démarquer de vos concurrents.
  • Une fois toutes les étapes du développement de votre appli terminées, et celle-ci mise en ligne sur iOS ou Android, votre travail ne s'arrête pas là ! En plus de diffuser votre outil à travers des publicités, vous devez régulièrement mettre à jour votre application mobile GoodBarber , en fonction des modifications que vous y apportez. Vos utilisateurs retrouverez ainsi una application optimisée sur leur écran de mobile.
  • Afin d'améliorer et de réussir toutes les étapes de votre développement d'app, nous vous proposons notre aide et nos conseils, mais nous mettons également régulièrement notre système de création à jour ! Grâce à GoodBarber 3.5 , vous pourrez désormais mettre en ligne sur iOS ou Android une application mobile plus développée et optimisée pour chaque écran de mobile et de tablette.
  • Nul besoin de formules magiques pour retrouver tout votre travail à un même endroit. Grâce à notre application en ligne, vous aurez accès à différentes fonctionnalités, vous pourrez notamment développer vos publicités à travers les notifications push, et en fonction de vos besoins, vous pourrez nous contacter directement sur votre écran de mobile. Découvrez ainsi la nouvelle version de l'application My GoodBarber  disponible sur votre iPhone iOS et sur Android.
  • Le développement de notre système permet de faciliter toutes les étapes de votre travail. Ainsi, nous avons mis en ligne une nouvelle mise à jour qui a pour but de retrouver tous les éléments essentiels sur un même écran. Découvrez sans plus attendre comment gérer le contenu de votre application mobile d'une nouvelle façon grâce à GoodBarber 4.5 . En fonction de vos besoins, vous pourrez ainsi donner vie à une Beautiful App réussie et à votre image, disponible sur iOS et Android ! Les publicités ne parleront que de vous !
  • Vous souhaitez connaître les différentes formules proposées par GoodBarber ou encore savoir comment utiliser une nouvelle fonctionnalité ? Vous pouvez suivre l'actualité GoodBarber grâce à nos articles de Blog  et ainsi retrouver tous nos conseils et infos importantes ! Le développement de votre travail sera ainsi plus poussé, et vous pourrez donner vie à une application mobile iOS ou Android optimisée. En fonction des nouveautés que nous développons ou encore des évènements à ne pas manquer, nous mettons en ligne des articles pour vous aider à tout comprendre. 
  • Vous aussi donnez vie à votre travail en quelques étapes, en découvrant comment créer une application mobile en ligne  !
Conseils pour créer une app