Guide du débutant pour la conception d'un fil de fer de site Web

Qu'est-ce qu'un wireframe pour un site web ?

Un wireframe est une présentation très basique d'un site web ou d'une application mobile. Un wireframe peut être aussi simple qu'une esquisse très grossière ou une conception plus aboutie, mais ils sont tous considérés comme étant de basse ou moyenne fidélité, ce qui signifie qu'ils ne ressemblent pas beaucoup à la conception finale.

Pensez à une image filaire comme à la charpente d'une maison. Lors de la construction d'une maison, vous pouvez voir la structure de base sur des planches, mais vous n'avez aucune idée de l'aspect final de la maison, car les parties esthétiques - les murs, les fenêtres, les portes, les porches et d'autres éléments - sont ajoutées plus tard.

Les wireframes n'ont pas besoin d'être jolis ni même de ressembler à un vrai site web ou à une vraie application. En fait, il est préférable qu'ils restent simples. Cela permet une itération rapide. Vous pouvez créer une vingtaine d'esquisses rapides dans le temps qu'il vous faudrait pour créer une jolie maquette. Plus votre schéma est simple, moins vous y serez attaché et plus il sera facile d'y apporter des modifications.

Quel est l'objectif des wireframes de sites web ?

Les wireframes servent de structure de base pour un site web ou une application. Tout comme un artiste peut créer un story-board de croquis pour un film ou un dessin animé afin de faire savoir aux gens comment les scènes se dérouleront, un wireframe aide quelqu'un qui construit un site web ou une application à en créer la structure. Les wireframes permettent une itération rapide, car il est facile et rapide de modifier la mise en page, la navigation et l'apparence.

Il existe trois grands types de wireframes :

1. Faible fidélité (lo-fi) : Une image fil de fer de basse qualité ressemble très peu à la conception finale. Il s'agit d'une simple esquisse ou d'un simple dessin graphique en noir et blanc. Il y a généralement peu de détails et il se peut même qu'il n'y ait pas de texte proprement dit, mais seulement des lignes ou des cases esquissées à l'endroit où les éléments devraient être placés.
2. Moyenne fidélité (mid-fi) : Un wireframe de moyenne fidélité est un peu plus détaillé et un peu plus proche d'une conception soignée. Elles sont généralement en noir et blanc et ne contiennent pas d'images réelles, tout comme une image filaire de base, mais elles peuvent être un peu plus détaillées, notamment en ce qui concerne les représentations d'éléments graphiques tels que les boutons ou les espaces réservés pour les images.
3. Haute fidélité (hi-fi) : Un wireframe haute-fidélité va au-delà des espaces réservés aux images et du texte lorem ipsum. Un wireframe hi-fi fait souvent partie de l'étape du prototype, incluant le contenu, la typographie, les couleurs et d'autres éléments de la marque qui seront incorporés dans le site web ou l'application final(e).

Wireframe vs mockup vs prototype

De nombreuses personnes utilisent indifféremment les termes "wireframe", "mockup" et "prototype", mais chacun de ces termes est un produit livrable différent. Un wireframe est une esquisse ou une présentation graphique rapide d'un site web ou d'une application. Bien que chacune de ces étapes de la conception d'un site web ait de nombreux points communs, il est important de noter les différences lorsqu'il s'agit de créer son propre site web ou sa propre application.

Une maquette est beaucoup plus détaillée qu'un wireframe et peut ressembler à la conception finale, mais elle n'est toujours pas fonctionnelle. Il sert uniquement d'élément visuel pour montrer à quoi ressemblera le produit. Pour reprendre l'analogie avec la construction d'une maison, une maquette est plutôt une peinture ou un modèle en 3D qui montre à quoi ressemblera le produit final. On ne peut pas en faire grand-chose, mais il donne une belle image de ce qu'il sera une fois terminé.

Un prototype a été ajouté. Par exemple, une image filaire basse fidélité sur papier (esquissée) peut être transformée en prototype en créant plusieurs écrans à travers lesquels les utilisateurs peuvent simuler une navigation, ou une image filaire haute fidélité peut être transformée en prototype dans Figma, Sketch, Adobe XD ou un autre logiciel de prototypage en connectant des éléments ensemble pour simuler la fonctionnalité du produit final. Dans notre analogie avec la construction d'une maison, le prototype serait un modèle de la taille d'une maison de poupée de la maison réelle, ou une simulation de visite complète en 3D. Vous pouvez voir exactement à quoi cela ressemble, comment les pièces sont distribuées, etc., mais vous ne pouvez toujours pas y vivre.

Que faut-il inclure dans une maquette de site web ?

Les éléments qui doivent figurer dans un wireframe varient en fonction du type de site web ou d'application que vous créez, de l'objectif qu'il poursuit, de la population cible et d'autres facteurs. D'une manière générale, presque tous les wireframes doivent contenir des éléments majeurs.

1. Navigation : À moins que vous ne créiez un document d'une seule page, vous devrez inclure des éléments permettant aux utilisateurs de passer d'une page à l'autre, y compris un bouton ou un lien permettant de revenir à la page d'accueil.
2. Logo : La plupart des sites web ou des applications ont un logo ou un nom de site, généralement situé en haut à gauche ou en haut au centre de la page. Dans un wireframe, le logo n'est souvent qu'une forme utilisée comme espace réservé, ou peut-être le nom du site web ou de l'entreprise sous forme de texte.
3. Disposition : Un wireframe présente une disposition générale qui inclut l'emplacement des images, du texte, de la navigation et d'autres éléments. Il s'agit en quelque sorte d'un plan à suivre lors de la construction du produit fini.
4. Appel à l'action : Un appel à l'action, ou CTA, facilite une action que vous souhaitez que l'utilisateur entreprenne. Par exemple, vous pourriez vouloir que l'utilisateur s'inscrive à votre liste d'adresses électroniques ou achète quelque chose. Le CTA est souvent un bouton ou un lien textuel, éventuellement accompagné d'une fonctionnalité supplémentaire telle qu'un formulaire. Il peut y avoir plusieurs appels à l'action, mais il convient de prévoir des espaces réservés à cet effet.

Tous ces éléments peuvent être (et doivent généralement être) de simples espaces réservés. Il n'est pas nécessaire qu'ils soient spécifiques au stade de la maquette. Par exemple, les liens de navigation en haut de la page peuvent n'être que des lignes indiquant l'emplacement futur du menu. Le logo peut également se limiter à une boîte ou à un cercle indiquant un emplacement potentiel. N'oubliez pas que l'objectif d'un wireframe est de montrer la disposition de base, et non de choisir des polices ou des couleurs ou d'être représentatif de la conception finale.

Votre contenu doit-il être prêt pour la maquette ?

Non. Vous n'avez besoin d'aucun type de contenu prêt à l'emploi pour construire votre wireframe. Étant donné qu'un wireframe peut être aussi simple qu'une esquisse avec des boîtes et des lignes, il n'est même pas nécessaire de connaître des éléments tels que les options de navigation. Si vous souhaitez voir à quoi pourrait ressembler un dessin avec du contenu, vous pouvez utiliser un texte de remplacement appelé lorem ipsum.

De nombreux logiciels disposent de plugins lorem ipsum que vous pouvez utiliser pour générer du texte de remplacement, ou vous pouvez simplement inventer du charabia pour vous faire une idée de l'aspect du contenu sur la page et avec les polices que vous avez choisies. Vous pouvez même copier le texte d'un livre du domaine public ou d'un article de Wikipedia pour remplacer le contenu.

Comment créer une image de fil de fer ?

La création d'un wireframe est un processus relativement simple. Un wireframe commence souvent par une simple esquisse. Il n'est pas nécessaire de faire un joli croquis. Il n'est même pas nécessaire que les lignes soient droites. Il n'est pas nécessaire de savoir dessiner. Si vous pouvez tenir un stylo ou un crayon, vous pouvez faire une esquisse.

Si vous créez un site web complet ou une application mobile, vous devrez créer plusieurs wireframes. Pour l'instant, nous allons nous concentrer sur la création d'un seul d'entre eux. Vous pouvez répéter ce processus pour chaque fil de fer, si nécessaire.

1. Liste des éléments nécessaires

La première étape de la création d'un wireframe consiste à déterminer ce qui doit figurer sur la page. Vous aurez probablement besoin d'éléments tels qu'un logo, un menu de navigation, quelques images, un titre et du texte ou d'autres contenus. Vous pouvez toujours ajouter des éléments plus tard, mais essayez d'être aussi complet que possible.

2. Créer des croquis

Ensuite, vous devez esquisser au moins un schéma de base pour le fil de fer. Vous pouvez le faire numériquement si vous le souhaitez, mais il est généralement plus rapide et plus facile de faire des itérations de votre wireframe si vous faites des croquis avec un stylo ou un crayon. L'objectif de cette étape est d'essayer différentes mises en page pour parvenir à celle qui sera la plus facile à utiliser pour les utilisateurs. À ce stade, vous pouvez créer autant d'esquisses que vous le souhaitez.

3. Finaliser l'image fil de fer

Après avoir choisi une esquisse comme base, vous voudrez peut-être créer un schéma plus élaboré que vous pourrez montrer à vos interlocuteurs pour obtenir leurs commentaires. Ce n'est jamais une bonne idée de créer quelque chose sans le tester avec d'autres personnes qui pourraient fournir un retour d'information précieux et vous aider à l'améliorer. Vous pouvez utiliser un programme comme Figma pour créer une version plus soignée de l'esquisse finale.

4. Solliciter un premier retour d'information

Une fois que vous avez une ou deux maquettes qui vous plaisent vraiment, demandez l'avis des parties prenantes ou des utilisateurs potentiels. Les parties prenantes sont des personnes qui ont un intérêt direct dans le résultat final. Il peut s'agir de votre patron, d'un partenaire commercial, d'un client ou de personnes susceptibles d'utiliser le site web ou l'application finale. Essayez de ne pas faire appel à des amis ou à des membres de votre famille à ce stade, car leurs commentaires risquent d'être biaisés et ils ne font probablement pas partie de votre marché cible.

5. Itérer la conception

Une fois que vous aurez reçu des informations en retour, vous devrez probablement apporter des modifications à votre schéma de câblage. Une fois les changements apportés, sollicitez à nouveau un retour d'information. Il peut s'agir des mêmes personnes que précédemment ou d'un groupe différent, en fonction de vos besoins. Continuez à itérer et à recevoir des commentaires jusqu'à ce que vous soyez satisfait de la conception et que le consensus général des commentaires soit positif.

Les wireframes sont essentiels au processus de conception d'un site web

Il peut être tentant de sauter le processus de wireframing parce que vous pensez que cela prendra trop de temps, mais le wireframing vous fera en fait gagner du temps à long terme. Le wireframing permet de repérer les problèmes et de les modifier dès le début du processus, ce qui permet d'éviter d'énormes problèmes qui prendraient beaucoup plus de temps à résoudre par la suite. Une fois que vous aurez commencé à concevoir des sites web et des applications, il est peu probable que vous souhaitiez vous arrêter un jour.

Une fois que vous avez terminé votre wireframe, vous pouvez utiliser un constructeur de site web tel que celui fourni par Mailchimp pour créer votre site web. L'éditeur est simple et facile à utiliser tout en offrant une grande flexibilité et une grande variété d'options qui peuvent aider à donner vie à votre wireframe en très peu de temps. Mailchimp propose également des services supplémentaires pour tirer le meilleur parti de votre site web, notamment un progiciel complet de gestion des relations avec la clientèle et un service de liste d'adresses électroniques puissant et abordable. Commencez dès aujourd'hui avec le générateur de site web de Mailchimp.