Catégories
Astuces et Design

Qu'est-ce qu'un filaire et comment les concevoir: Guide du débutant

Chaque structure, chaque bâtiment, chaque conception commence par un filaire. C'est une partie importante du flux de travail de conception qui détermine le succès de l'ensemble du projet.

Que vous travailliez avec des conceptions d'interface utilisateur numérique ou des conceptions de bannières, les wireframes devraient faire partie de votre processus de conception. Dans ce guide, nous vous aiderons à comprendre ce qu'est un filaire et pourquoi ils sont importants.

Nous avons conçu ce guide pour les débutants et les concepteurs avancés afin de transmettre l'importance du wireframing. Vous apprendrez tout, de la conception de wireframes aux meilleurs outils de wireframing, des conseils pour éviter les erreurs courantes, etc.

Commençons.

Qu'est-ce qu'un filaire?

qu'est-ce que le wireframing

Imaginez que vous construisez une maison. Allez-vous directement à la construction du bâtiment sans aucune préparation? Non! Vous commencez par aller sur les planches à dessin et concevoir un plan de maison. En créant une disposition qui définit la construction du bâtiment.

On peut en dire autant d'un filaire. Il vous aide à rester à la terre et à créer vos mises en page et votre conception selon un plan correctement défini.

Il existe de nombreux types différents de wireframes. Dans la conception de l'interface utilisateur, les wireframes sont utilisés pour créer des dispositions pour les sites Web, les applications Web, les applications mobiles, etc. Les wireframes sont même utilisés dans des conceptions imprimées telles que des affiches et des infographies pour aider à améliorer l'expérience utilisateur.

Pourquoi les wireframes sont importants

En matière de conception d'interface utilisateur, la plupart des concepteurs négligent souvent l'importance du wireframing. Ils passent directement au processus de construction car ils connaissent déjà la structure habituelle d'une conception.

Lorsque vous avez vu suffisamment de conceptions de sites Web et d'applications pour savoir où se trouvent l'en-tête, le menu et les boutons, vous pouvez passer directement à la conception sans filaire. Et c'est ce qui donne naissance à des sites Web et à des applications désastreuses qui génèrent des interactions utilisateur très faibles en ruinant l'expérience utilisateur.

Les wireframes aident à éviter cela en vous permettant de comprendre le contour ou le cadre du dessin au préalable.

procédé de design

En plus de créer des conceptions conviviales et efficaces, le wireframing présente plusieurs autres avantages.

  • Commencez avec une mise en page claire: Les wireframes vous aident à accéder à la phase de prototype avec une disposition claire à l'esprit. Cela vous aide à rester concentré et à créer des conceptions plus efficaces et structurées.
  • Obtenez une rétroaction précoce: Avec un filaire, vous pouvez obtenir des commentaires précoces de vos clients. Cela vous évitera d'avoir à passer par de nombreuses révisions de vos conceptions à un stade ultérieur.
  • Meilleure structure: Vous pouvez utiliser le filaire pour planifier la structure de base de la conception afin de communiquer efficacement avec les utilisateurs finaux.
  • De meilleures collaborations: Les wireframes vous aident également lorsque vous collaborez avec une équipe. Surtout lorsque vous obtenez des commentaires des développeurs.

Éléments principaux d'un filaire

Que devez-vous inclure dans un filaire? Cela dépend généralement du type de conception sur laquelle vous travaillez. Il n'y a pas de règles ou de normes pour la conception de wireframes. Cependant, il existe quelques concepts que vous pouvez suivre pour créer de meilleurs wireframes.

Suivez le concept K.I.S.S

Keep It Stupid Simple, c'est un concept populaire que vous pouvez utiliser dans de nombreux types de projets et en particulier dans les projets de conception.

Le but principal d'un filaire est de concevoir la structure de l'interface utilisateur. Il n'est pas nécessaire de créer des conceptions approfondies. Restez simple et propre avec un minimum d'éléments.

La structure de base

La plupart des structures filaires ont une structure de base sur laquelle vous pouvez vous baser. Par exemple, une structure filaire de site Web doit inclure une section d'en-tête, un logo, un menu, etc.

Il est important de commencer une structure filaire avec cette structure de base à l’esprit. Il crée le contour principal pour le reste du contenu dans le filaire.

Contenu du corps

Le corps de la structure filaire est l'endroit où le contenu est présenté. Pour les structures filaires de sites Web, c'est là que vous incluez les fonctionnalités, le portefeuille, les tableaux de prix et d'autres sections importantes.

Cependant, lors de la création du filaire, vous n'avez pas à vous soucier des détails. Vous n'avez pas besoin d'ajouter de descriptions textuelles, de nommer chaque bouton ou icône, ni même de vous soucier des titres. L'objectif principal est de créer des espaces réservés pour tout le contenu et de les cartographier.

Faible fidélité vs haute fidélité

Il existe également un type de wireframes appelé wireframes haute fidélité. Contrairement aux wireframes basse fidélité qui présentent une quantité minimale de contenu, ces wireframes présentent des structures plus détaillées. Vous verrez la différence dans la section des exemples du guide.

Quoi qu'il en soit, c'est à vous de choisir le type de filaire que vous concevez. Cela dépend généralement de la taille d'un projet sur lequel vous travaillez et du temps dont vous disposez dans le calendrier.

Différents exemples filaires

Pour vous aider à vous faire une idée de l'apparence des wireframes, voici quelques exemples de modèles que vous pouvez étudier.

Filaires du tableau de bord de l'application Web

Filaires du tableau de bord de l'application Web

Ce filaire de tableau de bord Web conçu par l'utilisateur Dribbble Ivon Stoilov montre ce qu'il faut inclure et ce qu'il ne faut pas inclure dans un filaire haute fidélité.

Site Web filaire

Site Web filaire

Ceci est un excellent exemple d'un simple filaire de site Web conçu par l'utilisateur Dribbble Michał Roszyk.

Filaire d'application mobile

Filaire d'application mobile

Une application filaire complète conçue par l'utilisateur mono de Dribbble. Il propose plusieurs conceptions d'écran pour l'interface utilisateur de l'application.

Filaire du site Web Low Fidelity

Filaire du site Web Low Fidelity

Il s'agit d'un filaire basse fidélité conçu par l'utilisateur Dribbble Corey Haggard. Comme vous pouvez le voir, ils sont plus que suffisants pour créer un filaire efficace.

Éléments à éviter lors de la conception de wireframes

Il y a également quelques erreurs courantes que vous devez éviter à tout moment lors de la conception de wireframes.

N'incluez pas d'images

Ne confondez pas les wireframes avec des maquettes ou des prototypes. Les wireframes consistent à planifier et à décrire la structure. Il n'est pas nécessaire d'inclure des images ou des graphiques dans le filaire.

En fait, l'ajout de graphiques dans un filaire n'interfère qu'avec l'objectif principal de créer un filaire en premier lieu – obtenir une vue claire du contour de la conception.

Évitez d'utiliser des couleurs

Certains concepteurs préfèrent utiliser différentes couleurs dans les wireframes pour mettre en évidence des parties importantes de la conception. Mais c'est inutile. Stick aux couleurs grises et noires pour les conceptions filaires.

Gardez les détails au minimum

Porter trop d'attention à perfectionner les petits détails dans un filaire n'est qu'une perte de temps. Même lors de la conception d'un filaire haute fidélité, essayez de limiter les détails pour conserver l'aspect minimal de la conception globale.

Utiliser des modèles ou des outils

L'une des plus grandes erreurs commises par les concepteurs lors de la création de wireframes est d'essayer de les dessiner avec un stylo et du papier ou d'utiliser un logiciel comme Photoshop pour les dessiner à partir de zéro.

Il existe de nombreux excellents outils et modèles que vous pouvez utiliser pour concevoir des wireframes sans effort. Ils comprennent des composants préfabriqués pour planifier des structures entières. Vous pouvez les utiliser pour concevoir des wireframes sans effort.

Il existe de nombreux excellents outils que vous pouvez utiliser pour créer des wireframes. Nous avons couvert certains des meilleurs outils dans un article précédent. Voici un bref aperçu des meilleurs outils.

Utiliser des modèles

Modèles filaires

L'un des moyens les plus simples et les plus abordables de concevoir des filaires est d'utiliser des kits de modèles filaires. Ces kits de modèles sont fournis avec des dizaines d'éléments dont vous aurez besoin pour créer des wireframes. Et ils fonctionnent bien avec des applications comme Sketch, Figma et Photoshop.

Vous pouvez trouver plus de modèles dans nos meilleures collections de modèles filaires d'applications mobiles et de sites Web filaires.

UXPin

uxpin "width =" 1100 "height =" 643 "data-srcset =" https://designshack.net/wp-content/uploads/uxpin.jpg 1100w, https://designshack.net/wp-content/uploads/ uxpin-368x215.jpg 368w, https://designshack.net/wp-content/uploads/uxpin-1024x599.jpg 1024w, https://designshack.net/wp-content/uploads/uxpin-768x449.jpg 768w "tailles = "(largeur max: 1100px) 100vw, 1100px" /></div>
<p>UXPin est un outil très flexible que vous pouvez utiliser pour concevoir des wireframes. Il vous permet également de passer facilement des structures filaires aux maquettes et aux prototypes fonctionnels. Le prix commence à 19 $ par mois.</p>
<h3>Figma</h3>
<div class=figma-app "width =" 1100 "height =" 521 "data-srcset =" https://designshack.net/wp-content/uploads/figma-app.jpg 1100w, https://designshack.net/wp- content / uploads / figma-app-368x174.jpg 368w, https://designshack.net/wp-content/uploads/figma-app-1024x485.jpg 1024w, https://designshack.net/wp-content/uploads/ figma-app-768x364.jpg 768w "tailles =" (largeur max: 1100px) 100vw, 1100px "/></div>
<p>Figma est un éditeur gratuit basé sur le cloud qui peut être utilisé pour tout concevoir, des wireframes aux maquettes et plus encore. Cet outil, cependant, fonctionne mieux lorsque vous l'utilisez avec un kit de modèles filaires.</p>
<h3>MockFlow</h3>
<div class=mockflow "width =" 1100 "height =" 529 "data-srcset =" https://designshack.net/wp-content/uploads/mockflow.jpg 1100w, https://designshack.net/wp-content/uploads/ mockflow-368x177.jpg 368w, https://designshack.net/wp-content/uploads/mockflow-1024x492.jpg 1024w, https://designshack.net/wp-content/uploads/mockflow-768x369.jpg 768w "tailles = "(largeur max: 1100px) 100vw, 1100px" /></div>
<p>MockFlow est parfait pour les pigistes. Il dispose d'une interface très facile à utiliser où vous pouvez facilement concevoir des wireframes et des maquettes. L'outil propose également un plan gratuit.</p>
<h2 id=Comment commencer

La création de la structure filaire est la partie la plus simple du processus.

Si vous avez téléchargé un kit de modèles de wireframing, c'est aussi simple que d'ouvrir les fichiers de modèle dans l'application d'édition graphique de votre choix. Comme Photoshop ou Sketch. Et puis vous pouvez commencer à personnaliser la mise en page.

filaire figma

Par exemple, le wireframing dans Figma est assez facile. Il propose des mises en page et des composants prédéfinis dont vous avez besoin pour commencer. Ou vous pouvez charger des kits de modèles. Tout ce que vous avez à faire est de glisser-déposer les éléments sur le canevas et de commencer à les réorganiser pour concevoir le filaire. C'est si simple!

Cela peut sembler écrasant au premier abord. Mais, avec un peu de pratique, vous pourrez créer des wireframes sans effort. N'oubliez pas de suivre les astuces et les conseils que nous avons décrits tout au long de ce guide.

Les prochaines étapes du processus

Le wireframing n'est qu'une des nombreuses étapes du processus de conception. Vous pouvez maintenant utiliser le filaire pour obtenir des commentaires du client. Revenez à la planche à dessin pour améliorer le filaire. Obtenez l'approbation du client. Et travaillez sur la prochaine phase du processus: concevoir la maquette ou le prototype. Et puis enfin, travailler sur le design.

Inutile de dire que l'intégration de la filaire dans votre flux de travail peut améliorer vos conceptions et votre travail de manière incroyable. Passer ce temps supplémentaire sur la scène de wireframing vous récompensera bien à long terme.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *