La conception d’un site web peut être complexe sans un plan clair.
Sans un wireframe bien défini, le risque d’incohérences et de mauvaises expériences utilisateur augmente.
Cet article vous guide à travers les étapes essentielles pour créer un wireframe efficace, en utilisant Figma et des techniques de design éprouvées.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
On démarre donc la partie design de notre projet et c’est plus exactement dans cette partie que nous allons commencer à mettre en place le wireframe de notre projet pour la version web. Là, vous allez me dire : « Pourquoi créer plusieurs versions du wireframe ? » Souvenez-vous, on a dans la présentation du projet que nous allons créer une version web, c’est-à-dire desktop de notre site ainsi que d’une application mobile.
Pour bien commencer cette partie, nous allons d’abord choisir un frame convenable pour le site et créer la grille pour nous repérer.
Grille pour wireframe site web
Donc, avant toute chose, il faut déjà qu’on crée un nouveau projet, que je nommerai ADIDAS pour ma part, puis nous allons créer un frame.
De mon côté, j’ai utilisé le modèle du Macbook Pro 16 préconfiguré dans Figma, mais vous avez le choix de choisir le modèle de frame que vous voulez, mais il faudra juste savoir adapter la taille des éléments par rapport à ceux qui sont dans cet article.
Maintenant, il faut poser les repères sur notre frame en créant des grilles. Pour cela, souvenez-vous, Sélectionner le frame > Layout grid > Ajouter deux colonnes sur les côtés comme ceci :
On a placé ces colonnes sur les côtés pour montrer que les éléments du design, les textes et les animations ne devront en aucun cas dépasser la partie blanche pour garder une uniformité sur le résultat final.
Design wireframe page d’accueil
Pour le concept que j’ai imaginé, on va avoir plusieurs pages que nous allons designer l’une après l’autre, mais on aura la possibilité de scroller d’une page à une autre comme sur un site one page (un site web avec une seule page). C’est un peu fou, mais ne vous inquiétez pas suivez juste le guide et vous comprendrez à la fin.
Pour notre page d’accueil, selon le concept qu’on a vu récemment, nous allons tout simplement mettre en avant une paire de baskets chez un revendeur qui ici ça sera la basket Superstar chez le revendeur Zalando .
Quand un client visitera la page de Adidas et qu’il clique sur la paire Superstar , il sera tout simplement redirigé vers cette page où il verra toutes les informations concernant l’ Adidas Gold Stripe Edition , le système de vote et j’en passe. C’est pour ça que nous allons placer un rectangle sur le wireframe pour représenter la paire de chaussures mise en avant.
Maintenant on va ajouter un peu de texte, pour donner plus d’informations aux clients sur le côté droit de la page.
Puis on va incorporer le logo de Adidas et Zalando sur le côté gauche en bas, comme ceci :
Sans oublier de laisser un petit rectangle qui fera office de bouton par la suite :
Pour le background, on utilisera un GIF pour l’animation, d’où la création d’un rectangle de la taille du frame pour représenter le GIF :
Ajuster la place de se dernier dans le calque, et changer sa couleur ainsi que les autres éléments pour pouvoir les distinguer :
Enfin, pour illustrer que notre arrière-plan est un GIF, on va placer trois bandes (pour représenter Adidas) dans le fond avec des rectangles.
Voilà pour le wireframe de notre page d’accueil, on passe maintenant à celui de notre page concept juste après.
Création wireframe page concept
Une fois le client sur la page d’accueil en voyant le basket, il va se demander : « Mais c’est quoi exactement ? Est-ce que c’est une promotion ? » C’est pour cela qu’on va ajouter cette page appelée page concept pour pouvoir expliquer le programme Adidas Gold Stripe Edition .
Pour son wireframe, commencer par un premier temps de dupliquer le wireframe de la page d’accueil et supprimer tout le contenu sauf pour l’arrière-plan et le bouton à côté que vous allez centrer.
Puis rajouter un rectangle avec du texte pour illustrer le concept du programme sur le côté gauche, comme ceci :
Puis rechercher dans les plugins un générateur de texte lorem ipsum pour ajouter la description de cette édition Adidas.
Mais avant toute chose, créer d’abord une zone de texte de la taille que vous voulez :
Ouvrir ensuite le plugin, et ajouter trois paragraphes dans la zone de texte :
Ajuster enfin le tout pour obtenir le rendu souhaité :
La dernière modification que l’on va ajouter sur la page, c’est juste un petit texte pour une souscription aux newsletters de la Gold Stripe Edition . Ajouter un petit mot juste au-dessus du bouton que nous avons centré et modifier le texte et l’emplacement du bouton par la même occasion.
Wireframe Figma pour la page vote
Comme avec la page concept, on va dupliquer cette dernière pour pouvoir créer le wireframe de notre page vote. Cette page contiendra, les photos des personnes que les internautes vont voter chaque mois comme on a expliqué dans l’étude du marché et on va tout de suite commencer en ajoutant un gros titre sur la page.
Ensuite les 12 mois pour pouvoir trouver chaque vote du mois.
On y ajoute par la suite les cadres pour les photos des candidats avec des rectangles :
Sur le bas de la page, ajouter un texte indiquant la date limite pour passer les votes :
Maintenant pour enrichir un peu notre wireframe, on va ajouter des icônes pour marquer les votes des internautes. Pour cela, aller dans les plugins et rechercher Font awesome icons.
Ouvrir le plugin puis rechercher une icône sous forme de cœur comme pour les likes Instagram.
Ajouter le ensuite dans votre wireframe pour obtenir ceci :
Un petit détail que j’ai oublié de dire, c’est de rendre en gras le mois actuel pour les votes afin de pouvoir mieux se repérer rapidement.
Wireframe site Gold Stripe Edition
On passe maintenant à une nouvelle page, qui est celle de la Gold Stripe Edition pour expliquer aux consommateurs comment accéder aux avantages de la Gold Stripe Edition de Adidas. Pour s’y faire, dupliquer la page vote récemment pour ne garder que l’arrière-plan dans celui-ci puis ajouter un titre :
Copiez ensuite le rectangle pour les photos qu’on a créé dans la page vote et collez-le dans ce dernier :
Ajouter aussi le texte lorem ipsum qu’on a généré récemment et ajuster la taille de la zone de texte pour obtenir ce rendu :
Enfin pour le bas de la page, ajouter trois bandes, et oui c’est ça Adidas, pour apporter un peu du design sur notre page.
Wireframe Adiclub avec Figma
On s’attaque maintenant à une nouvelle page qui se nommera la page Adiclub, qui permettra aux visiteurs d’adhérer à ce système de fidélisation créée par Adidas et de voir les avantages que les participants à la Gold Stripe Edition pourront gagner. Comme toujours commencer par dupliquer la page Gold Stripe Edition puis changer le titre de la page.
Puis supprimer les trois bandes et réajuster le texte lorem ipsum pour avoir une petite description de l’Adiclub juste au-dessous du titre :
Copier ensuite le bouton qu’on a créé dans la page d’accueil et la page concept dans la page Adiclub pour laisser la possibilité aux visiteurs de rejoindre le club.
Ajouter ensuite les différents rectangles pour les différents niveaux d’avantages dans l’Adiclub :
Pour terminer, personnaliser la dernière section qui contiendra les avantages des gagnants de la Gold Stripe Edition.
Mise en page web : Le footer
Pour terminer cette partie sur le wireframe du site web, nous allons designer le wireframe du footer qui contiendra les logos des différents revendeurs ainsi des mentions légales et les autres paperasses de notre site.
Commencer par dupliquer le wireframe de la page précédente, puis supprimer tous les éléments sauf l’arrière-plan. Ajouter ensuite le titre de la page footer comme ceci avec une description au-dessous de celui-ci :
Ajouter ensuite une partie pour insérer une photo ainsi que les différents logos des revendeurs :
Pour finir, ajouter les paperasses sur le bas de page.
C’est tout pour la partie wireframe de la version web de notre projet, nous avons défini dans l’ensemble les différents emplacements des éléments que nous allons intégrer dans la suite. Dans le prochain chapitre, ça sera la version application mobile qui aura son propre wireframe.
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.
FAQ
Comment créer un wireframe pour un site web ?
Pourquoi utiliser des grilles dans un wireframe ?
Comment intégrer des éléments interactifs dans un wireframe ?
Quelle est l'importance de la hiérarchie visuelle dans un wireframe ?
Comment adapter un wireframe pour mobile et desktop ?
Conclusion
En maîtrisant l’art du wireframe, vous posez les bases d’un site web efficace et attrayant. Quel sera le prochain projet que vous allez conceptualiser ?
