Création de Wireframes Figma

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 8e lecture en min

Après la découverte de notre projet d’agence de voyage, Bienvenue dans notre guide complet sur la création de wireframes avec Figma. Nous allons explorer ensemble les bases de la conception d’une interface utilisateur, en vous montrant comment Figma peut être utilisé pour visualiser efficacement vos idées.

Introduction à la Création de Wireframes

Je m’adresse ici plus particulièrement à ceux qui débutent et qui n’ont forcément pas encore entendu ce terme. La définition la plus simple qu’on pourrait donner serait la suivante :

Un wireframe est tout simplement une présentation visuelle simplifiée d’une interface utilisateur qui est fait par un UX (user experience) designer.

Bien, maintenant je vous propose de voir quelques exemples pour illustrer à quoi devrait ressembler un wireframe :

Créer un Wireframe Simplifié avec Figma

Illustration d'un wireframe simple réalisé sur Figma.

Dans cette première création wireframe Figma, vous pourriez remarquez que chaque élément a été placé convenablement mais sans le contenu final et sans couleur. Les textes des paragraphes ne sont que pour la prévisualisation mais on peut tout de même voir les indications pour les titres, la barre de navigation, le bouton de recherche etc….

Développer un Wireframe Détaillé dans Figma

Dans ce deuxième exemple, on a toujours l’image du wireframe sans couleur mais avec plus de précision avec les icônes, cela donne une meilleure compréhension du contenu qui sera designé après.

Détail d'un wireframe complexe conçu avec Figma.

Techniques de Wireframe Manuel dans Figma

Wireframe simple fait à la main avec crayon et papier.

Les deux premiers que nous avons vus jusqu’à présent sont des wireframes qui ont été créés avec des applications comme Figma, Miro ou bien des logiciels comme Adobe XD, Photoshop, Illustrator etc….

Mais ici, nous avons un simple wireframe avec tout simplement du papier et du crayon.

Astuce Pratique : Opter pour la création de wireframe sur papier au début de chaque projet. Cela vous aidera beaucoup que si vous commenciez directement sur un logiciel.

Maintenant que vous connaissez ce qu’est un wireframe et à quoi ça sert, nous allons pouvoir commencer à construire notre propre wireframe pour notre projet.

Utilisation de Grilles dans la Création de Wireframes

Dans cette partie nous allons parler de l’utilisation des grilles dans la création de wireframes  Figma. Ces derniers vous permettent de vous repérer sur votre frame pour avoir un rendu plus organisé.

Guide pour Créer une Grille

Premièrement, dans notre projet Figma, créer un frame au format Desktop et assurez-vous d’avoir cocher Layout grids pour utiliser les grilles.

Manière d'afficher la section layout dans Figma pour un wireframe.

Maintenant référez-vous à la figure suivante pour créer une grille :

Étapes pour créer une grille dans Figma pour un wireframe.

Voilà, votre première grille est en place. Pour pouvoir le modifier à votre guise, intéressons-nous à l’image suivante :

Différentes propriétés d'une grille dans Figma pour wireframing.

Application d'une Grille à un Projet

Caractéristiques des colonnes pour un projet sur Figma.
Caractéristiques des colonnes pour un projet sur Figma.
Propriétés des lignes pour un projet de wireframe dans Figma.

Au final vous devriez obtenir ceci :

À quoi devrait ressembler le résultat final d'un wireframe sur Figma.

Noter le fait qu’on a surtout besoin des lignes pour mettre en place l’entête de notre page d’accueil.

Conception d'un Wireframe pour l'Entête avec Figma

En premier lieu nous allons nous concentrer sur le design de notre entête pour faire une conception de wireframe Figma. Donc nous allons d’abord définir la zone pour notre entête avec un rectangle selon la taille des grilles que nous avons posées.

 

Où placer l'entête de la page d'accueil dans un wireframe sur Figma.

Puis pour représenter le logo on va utiliser un autre rectangle comme ceci :

Emplacement du logo délimité par un rectangle dans un wireframe Figma.

Enfin de l’autre côté, à droite, on va y ajouter un bouton pour le profil, le numéro de téléphone et un autre bouton pour le choix de langue.

Divers composants de l'entête illustrés dans un wireframe Figma.

Faites attention de grouper (Ctrl + G) chaque texte avec la figure correspondant pour les boutons

Techniques de groupement d'éléments dans Figma.

Voici le résultat attendu à la fin

Apparence finale de l'entête dans un projet Figma.

Création de la Barre de Recherche

Passons maintenant à la barre de recherche de notre wireframe Figma. Comme pour l’entête, nous allons d’abord mettre en place la zone où nous allons poser la barre de recherche puis un autre rectangle pour le champ de saisie.

Indication de l'emplacement pour la barre de recherche dans Figma.

Bien, maintenant on va faire quelques modifications sur ce dernier rectangle comme suit :

  • Premièrement :
Mise en évidence du champ de saisie pour les recherches sur Figma.
  • Puis :
Différents filtres ajoutés à une barre de recherche dans Figma.

 

  • Ensuite :
Catégories pour structurer les recherches dans un wireframe Figma.
  • Pour terminer :
Flèches indiquant un carrousel dans la barre de recherche Figma.

Le visuel final devrait ressembler à ceci

Design final de la barre de recherche conçu sur Figma.

Intégration d'un Carrousel dans le Wireframe avec Figma

Attaquons sans plus attendre au wireframe de notre carrousel pour illustrer les ventes flash et spéciales. La première étape consiste à créer un rectangle pour décrire la zone de notre carrousel.

Puis, nous allons faire la série de modification suivante :

  • Diviser cette zone en trois avec le plugin Split Shape
Méthode pour diviser une forme en plusieurs parties dans Figma.
  • ajouter un titre et un sous-titre
Localisation du carrousel dans le wireframe sur Figma.
Ajout d'un titre et d'un sous-titre à un carrousel dans Figma.
  • ajouter une forme rectangle pour mettre nos comptes à rebours
Formes représentant les comptes à rebours dans un carrousel Figma.
  • Ajouter du texte avec le plugin lorem ipsum
Ajout de textes descriptifs pour chaque carrousel dans Figma.
  • Créer un bouton réserver maintenant
Visuel du bouton de réservation immédiate pour un carrousel sur Figma.
  • Ajouter les petites touches finales pour chaque cadre
Démonstration des touches finales à intégrer dans un carrousel sur Figma.

Voilà vous avez votre carrousel qui sera prêt à être designer dans le prochain chapitre.

Apparence finale du carrousel après design et intégration sur Figma.

Design d'un Tableau dans un Wireframe Figma

Il est maintenant temps de créer notre wireframe figma pour le tableau qui illustrera les départs de dernières minutes.

Bien évidemment nous allons commencer à mettre en place la zone pour notre tableau.

Indication de l'emplacement du tableau dans le projet Figma.

Puis nous allons ajouter un titre pour cette section

Attribution d'un titre à un tableau dans Figma.

Rajouter les informations sur le tableau comme suit :

Mise en place du contenu textuel pour un tableau sur Figma.

Et ajouter un lien pour voir toutes les offres de dernières minutes

Ajout d'un lien en bas du tableau pour rediriger vers toutes les offres sur Figma.

Pour le visuel final du tableau, vous devriez aboutir à ceci :

Apparence finale du tableau dans un projet Figma.

Incorporation d'une Vidéo de Présentation

Pour notre vidéo de présentation de wireframe Figma  nous allons faire le wireframe en deux étapes. Tout d’abord la vidéo lui-même.

Conception d'un wireframe pour représenter une vidéo sur Figma.

Ensuite nous allons ajouter quelques retouchent pour rassurer le client sur le service de l’agence.

Intégration de statistiques pour rassurer les clients dans un wireframe.

Et voilà, notre vidéo de présentation est bien mis en place.

Pour terminer cette partie en beauté, nous allons maintenant designer un wireframe Figma pour  le footer (ou pied de page) de notre page d’accueil :

  • Dessinons d’abord la zone pour notre footer
Indication de l'emplacement du footer dans le wireframe Figma.
  • nous allons ajouter les différents textes
Mise en place du contenu textuel du footer sur Figma.
  • En dernier, nous allons placer les icônes pour les réseaux sociaux et les moyens de paiement
Illustration des icônes de réseaux sociaux avec des cercles sur Figma.

Nous arrivons déjà à la fin de cette partie où nous avons créé un wireframe Figma, comprendre son utilité et faire un peu de pratique sur notre projet. Dans le prochain article nous allons donner vie à notre wireframe, lui donner un peu plus de couleur et le raffiner.

 

Vous cherchez à approfondir vos connaissances dans la création wireframe figma, nous vous recommandons de suivre notre formation : Formation Figma

Visuel du wireframe finalisé sur Figma, incluant tous les composants.

Conclusion

Nous avons parcouru les étapes essentielles pour créer un wireframe efficace avec Figma. Continuez à expérimenter et à utiliser ces techniques pour améliorer vos compétences en UX/UI et produire des designs qui captent l’attention et facilitent la navigation. Pour aller encore plus loin, consultez notre prochain article sur comment designer efficacement avec Figma, où nous explorerons des astuces et techniques avancées pour optimiser vos projets de design.

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.
Laisser un commentaire