PINGDOM_CANARY_STRING
Comment créer un wireframe

Comment créer un Wireframe dans Lucidchart

Temps de lecture : environ 7 min

Publié par : Lucid Content Team

Ce n’est pas votre métier, mais vous avez besoin d’un wireframe ? Quelque chose de simple pour illustrer vos idées au développeur Web. Cependant, vous ne maîtrisez pas suffisamment le dessin pour réaliser votre wireframe à la main et vous n’avez pas le temps d’apprendre à utiliser un logiciel compliqué.

Avec Lucidchart, vous pouvez créer et partager rapidement des maquettes en ligne, quelle que soit votre expérience préalable en matière de dessin. Les concepteurs UX auront sans doute besoin d’un outil de création de wireframe plus sophistiqué, mais Lucidchart est la solution idéale pour les utilisateurs lambda. Utilisez-le pour créer des wireframes et des maquettes soignés qui exprimeront avec précision vos idées aux développeurs Web et aux concepteurs UX.

Et le meilleur dans tout ça ? Il est entièrement gratuit !

Comment créer un wireframe dans Lucidchart

Avec Lucidchart, vous pouvez créer des wireframes et des maquettes pour vos sites Web et applications mobiles. Les maquettes sont des modèles visuels de ce que vous prévoyez de réaliser. Elles sont très proches du produit final mais ne possèdent pas les mêmes fonctionnalités. Les wireframes, quant à eux, se concentrent davantage sur la simulation de ces dernières et moins sur l’apparence.

Ces deux types de diagrammes sont efficaces pour réfléchir aux propriétés de l’UI/UX, utilisez-les conjointement. Ce guide vous apprend à créer des wireframes dans Lucidchart en commençant avec un modèle en partant de zéro.

Gagnez du temps avec nos modèles de wireframe

Que vous soyez novice en matière de wireframe ou que vous cherchiez simplement à gagner du temps, partir d’un exemple est une excellente solution. Avec leurs formes simples, les modèles sont déjà prêts à l’emploi et il ne vous reste plus qu’à ajouter du contenu. Lucidchart propose plusieurs modèles de wireframe, allant des pages d’accueil de site Web aux applications mobiles.

Pour ouvrir la bibliothèque de modèles de Lucidchart, accédez à vos documents et cliquez sur la flèche orientée vers le bas en regard de +Document. Faites défiler les catégories sur la gauche jusqu’à la section wireframe.

Cliquez sur un modèle pour lire sa description et, lorsque vous en avez trouvé un qui correspond à vos besoins, cliquez sur Créer un document. (Vous pouvez également double-cliquer sur un modèle pour ouvrir un nouveau document.) Une fois que vous avez sélectionné un modèle, passez à l’étape trois ci-dessous.

Pour plus d’informations sur les modèles de wireframe de Lucidchart, consultez notre tutoriel vidéo.

exemple de wireframe basique de page d’accueil
Modèle de wireframe de page d’accueil (cliquez sur l’image pour l’agrandir dans Lucidchart)

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.

Comment faire une maquette de site web, d'application ou de logiciel

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.

Exemple de wireflow pour une application bancaire
Modèle de wireflow d’application bancaire (cliquez sur l’image pour l’agrandir dans Lucidchart)

5. Publier, partager ou présenter

Les maquettes et les wireframes peuvent être chronophages. Lorsque vous aurez terminé, vous pourrez présenter votre dur labeur de plusieurs façons :

  • Utiliser le mode présentation de Lucidchart pour simuler un site Web en ligne : les zones cliquables et les liens ressemblent à des boutons et des fenêtres contextuelles.
  • Intégrez un diagramme dynamique à votre site Web : lorsque vous mettez à jour votre document Lucidchart, les modifications sont répercutées partout où votre document a été intégré.
  • Publiez votre wireframe au format PDF ou en tant que site Web : toute personne disposant de l’URL sera en mesure de consulter et d’interagir avec votre diagramme.
  • Partagez un lien vers votre document avec vos collaborateurs : vous pouvez solliciter leur avis sur votre modèle et leur laisser des questions à l’aide des commentaires.

Vous avez de l’expérience en matière de wireframes ? Partagez vos meilleurs conseils et astuces dans les commentaires ci-dessous !

Commencez à créer des diagrammes avec Lucidchart dès aujourd'hui – essayez notre solution gratuitement !

Inscription gratuite

À la une

what does HR do

Quel est le rôle des ressources humaines ? 11 responsabilités fondamentales

À propos de Lucidchart

Lucidchart est un éditeur de diagrammes intelligents qui permet aux équipes de simplifier la compréhension, de partager une vision commune et de construire l'avenir plus rapidement. Grâce à cette solution intuitive et basée sur le cloud, chacun peut travailler visuellement et collaborer en temps réel à la création de logigrammes, de maquettes, de diagrammes UML et bien plus encore.

Alternative à Visio la plus populaire, Lucidchart est une plateforme en ligne utilisée dans plus de 180 pays par plusieurs millions d'utilisateurs, des directeurs commerciaux chargés de cartographier leurs entreprises clientes aux responsables informatiques souhaitant visualiser leur infrastructure réseau.

Démarrer

  • Tarification
  • Individual
  • Équipe
  • Entreprise
  • Contact commercial
Français
ConfidentialitéMentions légales
Télécharger sur le Apple App StoreTélécharger sur le Google Play Store
© 2022 Lucid Software Inc.