Définir l’aspect graphique d’une application

Vous n’avez pas toujours un graphiste sous la main pour créer l’aspect visuel de vos applications. Voici les précieux conseils de nos designers pour que votre application soit la plus belle !

Une fois l’architecture de votre application définie, il est temps de réfléchir au style et à l’ambiance que vous souhaitez lui donner. Lorsque vous définissez le style graphique, n’oubliez pas qui est votre cible et ce que vous voulez lui transmettre. Par exemple, si votre cible est le jeune public, privilégiez les illustrations, les couleurs vives etc.

 

1 – Choisir les couleurs de votre application

Attention : les couleurs possèdent une symbolique qui influence notre imaginaire (le vert pour l’écologie, la permission, l’espoir; le rouge pour le sang, la passion, le danger…). Choisissez vos couleurs en ayant conscience de ces symboliques. Attention également aux significations qui diffèrent selon les cultures (ex : le blanc est la couleur du deuil en Asie).

Ensuite, veillez à ce que vos couleurs s’associent bien. Privilégiez les couleurs complémentaires à la place des nuances. Tous les éléments de votre interface seront ainsi plus visibles. Si votre institution dispose d’une charte graphique* vous pouvez vous appuyer sur cette dernière pour créer votre application.

*Une charte graphique regroupe et traduit graphiquement tout l’univers et toutes les valeurs d’une institution. Cette charte graphique est souvent constituée d’un logo, d’une typographie et d’un univers coloré adapté aux différents supports de communication.

Voici des outils pour trouver des associations de couleurs harmonieuses :

  • Coolors : pour récupérer les couleurs d’une image qui vous plaît.

couleurs image

 

  • ColorSpace : pour trouver des associations de couleurs à partir d’une couleur.

couleurs graphisme

 

  • Adobe Color : pour devenir incollable sur les règles d’harmonie chromatique

couleurs

 

Une fois votre ambiance colorée définie, personnalisez la couleur des boutons et des outils interactifs de votre application sur biinlabstudio (onglet “application”)

 

2 – Choisir la police de caractère de vos textes

Tout comme les couleurs, chaque police de caractère renvoie à une époque, un imaginaire. Ainsi, la Futura, de la famille des linéales est encore associée à l’idée de la modernité. La Bodoni, de la famille des didones est quant à elle associée à l’image du beau et du raffinement. Afin de vous éviter un faux pas typographique nous avons sélectionné pour vous un ensemble de polices de caractère sur biinlabstudio qui saura répondre à tous vos usages.

 

 

3 – Choisir les images de votre application

Avant de vous lancer dans la création de votre application, veillez à ce que les images que vous avez prévues soient à la bonne taille. En effet, une mauvaise résolution fera apparaître les pixels de l’image. À l’inverse, une trop haute résolution risque d’allonger le temps de chargement de l’application. Gardez en tête que la résolution d’une image dépend du dispositif tactile utilisé (définition de l’écran) et du ratio de l’image (4:3, 16:9 etc.)
Ces chiffres vous semblent un peu barbares ? Pas de panique ! Nous avons préparé un tableau pour vous aider dans votre quête :

 

format taille image

 

Si vous ne disposez pas d’image pour votre arrière-plan vous pouvez utiliser les différentes ressources ci-dessous :

  • Trianglify : pour choisir les couleurs et la texture de vos fonds d’écran
  • Cool backgroundpour télécharger des fonds d’écran (dégradé de couleur, texture etc)
  • Nova Pattern : pour télécharger des fonds à motifs

Si vous recherchez plutôt des ressources photographiques pour vos fonds d’écrans utilisez des images libres de droits sur ces sites :

  • Unsplash : pour  télécharger des photographies sur différentes thématiques

photographie

 

  • Pexels : pour télécharger des photographies, des illustrations ou encore des vidéos

Une fois votre image d’arrière-plan sélectionnée rangez-la dans la “médiathèque” de biinlabstudio. Vous pourrez  ajouter votre image depuis l’onglet “personnalisation” de l’écran.

 

 

4 – Personnaliser les points d’intérêt de votre application

Il est désormais possible de personnaliser l’apparence des points d’intérêt des modèles planisphère et explorateur. Pour ce faire, vous pouvez utiliser les outils suivants :

Une fois que vous avez toutes vos icônes vous pouvez vous rendre sur biinlabstudio et sélectionner le type de point appelé “image”. Maintenant il ne reste plus qu’à placer vos points !

Et voilà ! Vous êtes devenu le directeur artistique de votre application et le garant de son aspect esthétique. Suivez ces quelques règles de base et vous ne ferez aucun faux pas graphique.