Lors de la création d’une application mobile, définir une identité visuelle et une stratégie marketing sur figma solide peut s’avérer complexe, surtout sans expertise en design.
Une identité visuelle mal conçue risque de rendre l’application moins attrayante, incohérente et peu professionnelle, ce qui peut nuire à l’expérience utilisateur et à la perception globale du projet.
Grâce à des outils comme Figma, vous pouvez créer facilement un moodboard, un logo, et choisir les typographies et couleurs idéales pour donner une identité visuelle forte à votre application. Découvrez comment procéder dans cet article.F
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.Fmarke
Puis surfons sur le net pour trouver de l’inspiration.
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 :
On peut aussi ajouter quelques détails en rapport avec la vérification et la cuisine pour compléter le tout :
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.
Formation Figma UX/UI 3/4 : Maîtriser le design interactif
Transformez vos maquettes en expériences interactives captivantes et engageantes !
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.
Puis avec l’outil plume, je dessine une forme de checking :
J’arrondis ensuite les angles et peaufiner le tout avec l’outil courbure :
Par la suite, j’ajoute du texte et je mets la typographie sur Gotham-Bold :
On va colorer le checking en noir :
Et ajouter un rectangle tout en coupant une partie du rectangle avec l’outil ciseaux :
À la fin, on va modifier les extrémités du contour comme ceci :
Figma Masterclass : UX/UI du Concept au Prototypage
Maîtrisez l'Art du Design Collaboratif avec Figma : Parcours d'Apprentissage Complet pour Créer, Collaborer et Innover Ensemble
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.
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.
Et je vais l’appliquer sur le rectangle et le checking pour notre logo
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 :
Enfin, on va mettre différentes versions de couleur du logo comme suite :
Faites une capture d’écran où exporter le tout pour importer le tout dans notre Figjam.
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.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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
