Créer des wireframes efficaces dans Figma peut s’avérer complexe, surtout lorsqu’il s’agit de gérer plusieurs pages et maintenir une cohérence visuelle.
Des wireframes mal conçus ralentissent le processus de conception, entraînent des interfaces confuses et augmentent les risques d’erreurs dans le développement. Cela peut aussi impacter l’expérience utilisateur finale.
Dans cet article, découvrez comment structurer chaque page de votre application grâce à des astuces pratiques pour maximiser la clarté, l’efficacité et la productivité dans Figma.
Utiliser la grille pour le wireframe dans Figma
Premièrement, nous devons créer un fichier design car on a toujours travaillé dans Figjam.
Puis créer un frame avec les dimensions d’un appareil mobile. Dans mon cas, j’ai pris celui de l’iphone 13 mini mais vous pouvez très bien utiliser un autre modèle.
Si vous avez oublié comment créer des grilles dans Figma, jetez un coup d’œil à la figure suivante.
Maintenant vous allez mettre en place deux grille avec les propriétés ci-dessous :
Vous devriez obtenir ce résultat à la fin :
Créer le wireframe de la page d’accueil avec Figma
Place maintenant au design de notre wireframe en commençant par notre page d’accueil. Tout d’abord, il faut définir la partie où nous allons placer notre logo comme ceci.
Puis ajouter un petit texte en Gotham Bold pour accueillir les visiteurs comme suit :
Puis mettre les formes pour le lien vers les autres pages de l’application grâce à des rectangles
Il suffit de bien ajuster les éléments entre eux, ajouter les textes pour chaque forme le tour est joué.
Bien sûr, il ne faut pas oublier de renommer notre frame.
Concevoir le wireframe du footer
Continuons à présent le design de notre page d’accueil mais cette fois-ci nous allons nous intéresser au footer (pied de page).
Pour cela nous allons d’abord placer un rectangle en signe de bande de séparation au pied de la page.
Puis prenons l’outil ellipse et plaçons 5 cercles comme ceci avec un bon alignement :
Terminons le tout avec les textes correspondants à chaque lien renferment les ellipses.
Wireframe de la page Alertes
Pour le wireframe de cette page, c’est simple nous allons dupliquer la page d’Accueil et faire quelques changements.
Les éléments principaux de notre page sera représenté comme ceci :
Et on duplique cela pour finaliser le tout.
Wireframe de la page Historique avec Figma
Comme tout à l’heure, il nous suffira de dupliquer la page Alertes et procéder à des modifications élémentaires.
Pour le contenu principal on va juste supprimer les ellipses de la page Alertes et modifier le texte.
On va garder le rectangle pour mettre des logos, par exemple, pour le relevé de température on va mettre un logo indiquant cela.
Wireframe de la page Réglage dans Figma
Comme toujours, on va dupliquer la page Historique et changer le titre ainsi que le footer.
Après il nous suffira juste d’effacer les icônes pour chaque élément du contenu principal et de changer les textes par rapport aux différents réglages qui seront présents dans l’application.
Wireframe du Chatbot avec Figma
Peut-être que vous allez me demander : pourquoi a-t-on besoin d’un chatbot dans notre application ? C’est une très bonne question, les utilisateurs peuvent parfois rencontrer des problèmes avec les fonctionnalités se trouvant dans l’application. Au lieu de contacter le support technique, on a mis en place le chatbot pour répondre à des questions basiques et fréquemment utilisées (FAQ).
Créons un nouveau frame avec un titre Chatbot comme pour les autres pages mais sans le logo.
Puis on va designer le champ de saisie comme ceci :
On va, par la suite, placer quelques formes pour illustrer une conversation dans le chatbot.
Et enfin mettre une croix sur l’entête à l’aide de l’outil line pour montrer que l’on peut fermer ce chat.
Vous devriez obtenir ceci à la fin :
Wireframe de la page Livraison avec Figma
Nous avons terminé toutes les pages en relation avec le footer. Passons maintenant à ceux reliés à la page d’accueil en commençant par la page Livraison.
Pour cela nous allons dupliquer la page d’accueil et changer l’entête comme ceci :
Après cela, il faut changer le contenu principal par un tableau pour marquer un calendrier. Pour y arriver, utiliser des rectangles ainsi que des lignes.
Il ne faut pas oublier d’ajouter les dates pour que notre calendrier soit convaincant.
Enfin, on va finir par mettre des éléments pour marquer les dernières livraisons récemment faites.
Wireframe de la page Réception
Pour cette page-là, nous allons tout simplement dupliquer la page Livraison et changer le texte dans la partie qui contiendra le logo pour la livraison.
Pour le contenu de la page, nous allons le modifier pour qu’on obtient à chaque colis reçus une partie qui est dédiée à celle-ci.
Vous pouvez trouver l’icône sous forme de flèche dans le plugin Font Awesome Icônes.
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
Wireframe de la page Étiqueteuse
C’est maintenant le tour de la page Étiqueteuse d’avoir son propre wireframe. Pour y parvenir, on va commencer par dupliquer la page Réception et changer le texte pour le logo.
Ensuite, on ajoute un élément pour indiquer la date limite de consommation ainsi que le nom du produit correspondant comme suit :
Pour terminer, ajouter un bouton qui permettra d’imprimer l’étiquette.
Wireframe de la page Stock
Nous voici à présent sur le design de la page Stock qu’on va créer à partir de la page Réception car les deux sont à peu près pareil.
Il nous suffit juste de modifier le titre du logo et chaque élément du contenu principal par les marchandises dans le stock.
Finaliser le tout en ajoutant une icône dans Font Awesome Icons pour ajouter d’autres tache à faire.
Wireframe de la page Ménage avec Figma
On est arrivé à l’avant dernière page qu’il faut designer dans la partie de la page d’accueil de notre projet. Dupliquons premièrement la page Stock et modifions le titre dans le logo.
Et modifions le texte dans chaque élément de tel sorte qu’on obtient les appareils dont il faut faire le ménage.
Wireframe de la page Température avec Figma
Pour terminer cette partie sur les wireframes, nous allons designer la page dédiée à la température. Comme toujours on va dupliquer la page Ménage, changer le titre du logo.
Modifier le texte inscrit dans chaque bloc pour obtenir ceci.
Voilà voilà, on a terminé ce chapitre à propos des wireframes de notre projet où nous avons fait le wireframe de notre page d’accueil, du footer et de chaque page liée à la page d’accueil. Dans le chapitre suivant, nous allons commencer à utiliser les composants dans un design dans Figma.
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
Nous espérons que ce guide sur la création de wireframes avec Figma pour les débutants vous a été utile. En suivant ces étapes, vous serez en mesure de concevoir des wireframes clairs et fonctionnels pour vos projets. Figma offre de nombreuses fonctionnalités pour simplifier le processus de design, et maîtriser cet outil peut grandement améliorer votre efficacité et la qualité de vos créations.
