Vous préférez partir de zéro ? Suivez ce guide étape par étape pour créer votre propre wireframe à l’aide de Lucidchart.
1. Sélectionner vos bibliothèques de formes
Avant de commencer à créer votre wireframe, vous devez préparer l’espace de travail en plaçant les bibliothèques de formes dont vous aurez besoin dans votre barre d’outils. Ouvrez un document vierge dans l’éditeur Lucidchart et appuyez sur la touche M pour accéder aux bibliothèques de formes. Sélectionnez celles que vous souhaitez utiliser, puis cliquez sur Enregistrer.
Selon les besoins de votre projet, vous souhaiterez peut-être exploiter plusieurs bibliothèques différentes. En voici quelques-unes à retenir :
- Formes de logigramme : ces formes géométriques standard sont épinglées par défaut dans votre barre d’outils, et il peut être utile de les garder à portée de main. Utilisez des rectangles pour séparer un site Web en sections ou ajoutez des flèches pour représenter le flux d’un élément de l’interface utilisateur à un autre.
- Maquettes UI : cette bibliothèque de formes contient la palette standard de conteneurs et de widgets d’interface utilisateur. Vous trouverez des formes de sites Web vierges ainsi que des emplacements pour des vidéos, des cartes, des graphiques, des images et des calendriers.
- Maquettes Android : si vous créez une application ou une page pour un appareil Android, vous trouverez ici des patrons pour les téléphones et tablettes qui utilisent ce système d’exploitation, ainsi que les boîtes de dialogue et les icônes qui lui sont spécifiques.
- Maquettes iOS : si votre projet est destiné aux appareils iPhone et iPad, vous les trouverez dans la bibliothèque de formes iOS ainsi que dans les composants d’interface utilisateur spécifiques à iOS.
- Images : n’oubliez pas la galerie d’images. Que vous ayez besoin d’un arrière-plan élégant ou d’un logo spécifique, vous pouvez le rechercher et l’ajouter directement à partir de Lucidchart.
La maquette ci-dessous a été réalisée à l’aide d’une combinaison de formes de logigramme basiques, d’images et de la bibliothèque de formes de maquettes UI.
Essayez dans Lucidchart
2. Ajouter des formes à votre wireframe
Commencez votre wireframe par la forme la plus basique : le conteneur qui accueillera tous les autres éléments. Selon la nature de votre projet, il s’agira probablement de la silhouette d’un appareil mobile ou d’une fenêtre de navigateur. Vous trouverez ces premières dans les bibliothèques de formes Appareils iOS et Appareils Android. Pour les fenêtres de navigateur, accédez à la bibliothèque Conteneurs UI.
Lorsque vous ajoutez des éléments supplémentaires, procédez du plus général au plus spécifique, en plaçant les éléments importants en premier avant de passer aux petits détails. Utilisez des conteneurs pour créer des sections dans votre diagramme, par exemple des barres d’outils, des menus latéraux, etc.
Une fois que vous avez placé les éléments principaux, vous pouvez ajouter des boutons individuels et des blocs de texte. Pour finir, personnalisez les derniers détails de votre modèle, tels que les polices, les couleurs, les photos et les logos.
3. Utiliser des liens, des calques et des zones cliquables pour ajouter des fonctionnalités
Une fois que vous avez terminé de dessiner votre wireframe, simulez les fonctionnalités du site Web à l’aide de liens, de calques et de zones cliquables. Ces trois éléments vous permettent de créer des boutons opérationnels, des fenêtres pop-up et des liens vers du contenu externe, ainsi que de naviguer entre les différentes pages de votre maquette. Faites-en l’essai avec le diagramme interactif ci-dessous !
En savoir plus sur les liens, les calques et les zones cliquables.
4. Cartographier le flux d’utilisateurs à l’aide de maquettes
Les flux de parcours utilisateur représentent la progression d’un utilisateur au fil de ses interactions avec une application. Ceux-ci peuvent se concentrer sur l’interface utilisateur ou sur l’infrastructure back-end construite par le développeur. Plutôt que d’esquisser un flux d’utilisateurs en vous appuyant uniquement sur des formes de logigramme, essayez d’inclure des maquettes pour donner à votre équipe un aperçu visuel de l’application.
