Les concepteurs d’interfaces sont souvent confrontés à des difficultés lorsqu’ils essaient de créer des wireframes cohérents et fonctionnels. Sans une base solide, les projets peuvent manquer de clarté et de structure, entraînant des incohérences visuelles et des retards.
Ce manque de préparation peut rendre la phase de design chaotique, augmentant les coûts de développement et compromettant l’expérience utilisateur finale.
Découvrez comment utiliser Figma pour créer des wireframes précis et organisés, en exploitant des outils comme les grilles pour optimiser vos designs et améliorer la qualité de vos projets.
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
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.
Techniques de Wireframe Manuel dans Figma
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.
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.
Maintenant référez-vous à la figure suivante pour créer une grille :
Voilà, votre première grille est en place. Pour pouvoir le modifier à votre guise, intéressons-nous à l’image suivante :
Application d'une Grille à un Projet
Au final vous devriez obtenir ceci :
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.
Puis pour représenter le logo on va utiliser un autre rectangle comme ceci :
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.
Faites attention de grouper (Ctrl + G) chaque texte avec la figure correspondant pour les boutons
Voici le résultat attendu à la fin
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.
Bien, maintenant on va faire quelques modifications sur ce dernier rectangle comme suit :
- Premièrement :
- Puis :
- Ensuite :
- Pour terminer :
Le visuel final devrait ressembler à ceci
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
- ajouter un titre et un sous-titre
- ajouter une forme rectangle pour mettre nos comptes à rebours
- Ajouter du texte avec le plugin lorem ipsum
- Créer un bouton réserver maintenant
- Ajouter les petites touches finales pour chaque cadre
Voilà vous avez votre carrousel qui sera prêt à être designer dans le prochain chapitre.
Apprenez à concevoir des designs percutants et fonctionnels avec confiance !
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.
Puis nous allons ajouter un titre pour cette section
Rajouter les informations sur le tableau comme suit :
Et ajouter un lien pour voir toutes les offres de dernières minutes
Pour le visuel final du tableau, vous devriez aboutir à ceci :
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.
Ensuite nous allons ajouter quelques retouchent pour rassurer le client sur le service de l’agence.
Et voilà, notre vidéo de présentation est bien mis en place.
Maîtrisez l'Art du Design Collaboratif avec Figma : Parcours d'Apprentissage Complet pour Créer, Collaborer et Innover Ensemble
Finalisation du Wireframe avec le Footer dans Figma
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
- nous allons ajouter les différents textes
- En dernier, nous allons placer les icônes pour les réseaux sociaux et les moyens de paiement
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.
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 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.
