Identité Visuelle Figma : Application Mobile

L'Équipe Alphorm
L'Équipe Alphorm 5e lecture en min

Dans ce nouveau article et après le traitement de benchmark marketing Figma que nous avons fait , nous allons nous attaquer à l’identité visuelle Figma de notre application mobile. C’est-à-dire qu’on va créer les chartes graphiques qu’on souhaite voir dans notre projet et qui seront en harmonie avec les typographies et la palette de couleur.

Faire un Moodboard pour l'Identité Visuelle Figma d'une Application

Pour commencer l’identité visuelle Figma d’une application, nous devons d’abord créer notre moodboard. Je vous la fais courte, un moodboard est juste une planche ou une feuille d’inspiration pour mettre en place le côté esthétique d’un projet. Cela permet de visualiser l’identité visuelle Figma que vous voulez donner à votre projet.

Donc pour notre projet Verif’eat, nous allons ouvrir le fichier FigJam récemment créé pour notre moodboard.

Interface de Figjam montrant un moodboard pour identité visuelle application

Puis surfons sur le net pour trouver de l’inspiration.

Mots-clés entrés dans le moniteur de recherche de Google pour SEO identité visuelle application

Vous avez différents sites ici comme Dribbble , Pinterest ou encore Behance qui sont les plus populaires.

Pour ma part, j’ai trouvé quelques images dans Pinterest qui semblent intéressantes et qu’on va importer dans le moodboard en faisant un glisser-déposer :

Importation d'images trouvées sur le net dans Figjam pour créer un moodboard

Recherchons aussi une palette de couleur sur des sites comme Palettedecouleur par exemple et intégrons une simple capture d’écran de la palette dans FigJam :

 

Palette de couleurs sélectionnée sur internet pour identité visuelle application

On peut aussi ajouter quelques détails en rapport avec la vérification et la cuisine pour compléter le tout :

Images et icônes ajoutées pour compléter le moodboard pour identité visuelle application

Donc pour le moment, notre moodboard est représenté par la capture du dessus, mais vous pouvez ajouter d’autres images ou illustrations de votre côté pour trouver de l’inspiration et faire quelque chose de beau par la suite.

Vue finale du moodboard pour identité visuelle application

Créer un Logo pour l'Identité Visuelle Figma

Une fois le moodboard posé, intéressons-nous à la création de notre logo. Vous pouvez très bien trouver un logo qui vous va sur la toile, mais pour ma part je vais opter pour la création d’un logo pour que notre marque soit unique grâce à des logiciels comme Adobe Illustrator ou encore Inkscape.

Je vais donc commencer par ouvrir Illustrator et créer un nouveau fichier pour notre logo.

Espace de travail dans Adobe Illustrator configuré pour créer un logo pour identité visuelle application

Puis avec l’outil plume, je dessine une forme de checking :

Création d'un symbole de checking avec l'outil plume dans Illustrator pour identité visuelle application

J’arrondis ensuite les angles et peaufiner le tout avec l’outil courbure :

Ajout de courbures au symbole de checking dans Illustrator pour identité visuelle application

Par la suite, j’ajoute du texte et je mets la typographie sur Gotham-Bold :

Texte verif'eat intégré dans le logo pour identité visuelle application

On va colorer le checking en noir :

Symbole de checking rempli de noir pour identité visuelle application

Et ajouter un rectangle tout en coupant une partie du rectangle avec l’outil ciseaux :

Rectangle tracé et partiellement découpé dans Illustrator pour identité visuelle application

À la fin, on va modifier les extrémités du contour comme ceci :

Bords arrondis de la découpe dans Illustrator pour identité visuelle application

Vous avez cette curiosité de découvrir plus de dimensions sur Figma , nous vous recommandons notre formation vidéo : Cliquez ici

Sélection des Typographies pour Application Mobile

Pour le choix de la typographie de notre identité visuelle Figma , vous pouvez tous aussi choisir une combinaison qui vous plaît mais pour moi je vais reprendre celui du logo dans Adobe Illustrator.

Donc on va reprendre Gotham-Bold de tout à l’heure pour les titres et ajouter Gotham-Medium pour les simples textes.

 

Typographies sélectionnées pour le projet d'identité visuelle application

Voilà, ça sera tout pour nos typographies.

Trouver les Couleurs pour l'Identité Visuelle Figma

On va d’abord par commencer à colorer notre logo. J’ai opté pour l’utilisation du vert #009245.

Couleur verte utilisée pour l'identité visuelle application

Et je vais l’appliquer sur le rectangle et le checking pour notre logo

Logo coloré en vert pour l'identité visuelle application

Maintenant, il nous faut des variances de couleur pour notre logo.

Créons une première ellipse avec la même couleur que le vert utilisé récemment puis deux autres pour le noir et le blanc :

Différentes variances de couleur pour le logo d'identité visuelle application

Enfin, on va mettre différentes versions de couleur du logo comme suite :

Aspect des différentes couleurs du logo pour identité visuelle application

Faites une capture d’écran où exporter le tout pour importer le tout dans notre Figjam.

Style du logo intégré dans Figjam sur le moodboard pour identité visuelle application

C’est sur cela que se termine cet article sur l’identité visuelle Figma de notre projet, on a passé par la création du moodboard, du logo, trouver les bonnes typographies ainsi que la palette de couleur. Dans le chapitre suivant, il est temps de passer à l’action avec les wireframes de notre application.

Conclusion

Grâce à Figma, créer une identité visuelle professionnelle pour votre application devient accessible. Une identité visuelle bien conçue attire les utilisateurs et renforce la reconnaissance de votre application. Consultez notre prochain article qui est consacré pour la création des wireframes Figma

 
 
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.