Comment créer de meilleurs wireframes

Maquettes sont une partie nécessaire du processus de conception Web. Agissant comme des plans pour les projets Web et d'application, ils vous aident à découvrir tôt ce qui fonctionne et ce qui ne fonctionne pas, et vous permettent de définir le contenu et de vous concentrer sans la distraction d'un design flashy.

Lorsqu'elles sont bien faites, les wireframes peuvent clarifier votre réflexion. Mais ils peuvent aussi faire dérailler un projet s'il n'est pas fait correctement. Dans cet esprit, vous découvrirez ci-dessous 10 façons simples d'améliorer vos compétences en wireframing, ainsi que comment utiliser certains des meilleurs outils filaires .

Suivre ces conseils vous aidera à rester concentré sur ce qui est important: assurer la fonctionnalité et la convivialité de votre produit.



01. Commencez votre wireframing avec un croquis

Bien que cela puisse sembler une bonne idée de passer directement à votre outil de conception préféré, esquisser vos wireframes - avec un crayon et du papier - peut donner de meilleurs résultats. Le processus ne devrait pas prendre trop de temps et vous donnera une meilleure idée de votre plan global.

02. Passer la couleur

Le but d'un wireframe est de mettre en page le contenu, la page et les éléments d'affichage, et de décrire les fonctionnalités de l'application. L'ajout d'éléments de conception, tels que la couleur, nuit à son objectif principal. Alors laissez la couleur de la maquette et gardez-la hors des wireframes.

est-il acceptable d'utiliser des références lors du dessin

03. Gardez les wireframes simples

Ne compliquez pas trop vos wireframes. Rester simple vous permettra de vous concentrer sur une vue d'ensemble et d'éviter les distractions. Les wireframes doivent clairement décrire la convivialité et les fonctionnalités de votre application. Vous n'avez pas besoin d'entrer dans les moindres détails ou l'aspect final du design.

04. Utilisez de meilleurs exemples de données

Des échantillons de données mal sélectionnés peuvent tuer un wireframe. Bien que vous n'ayez pas besoin de passer beaucoup de temps à remplir vos wireframes avec des données, vous devez au moins vous assurer que les données que vous ajoutez sont pertinentes.

05. Annoter si nécessaire

À la base, les wireframes sont des plans; ils sont le guide du concepteur et du développeur pour créer l'application ou le site Web. Si vous voulez qu'ils soient plus faciles à lire et à comprendre, ajoutez des annotations si nécessaire et le cas échéant.

06. Utiliser un système de grille et disposer les boîtes

Une technique intéressante pour réaliser des wireframes consiste à utiliser un système de grille et des boîtes de disposition. Grâce à cette approche, vous pouvez rapidement regrouper et disposer les différents composants de manière simple et structurée.

07. Créer des styles et des symboles réutilisables

La plupart des logiciels utilisés pour le wireframing ont la capacité de créer et de réutiliser des styles et des symboles. Non seulement cela aidera à accélérer le processus, mais cela aidera à garder vos wireframes cohérents.

08. Utilisez le bon outil pour le travail

En parlant de logiciel, il existe de nombreux outils disponibles pour créer des wireframes. Certains d’entre eux sont spécialement conçus pour le wireframing et d’autres ne le sont pas. Voici quelques favoris:

  • Esquisser est l'un des meilleurs outils disponibles. Utilisé en conjonction avec d'autres solutions, comme InVision, Sketch offre aux concepteurs les outils nécessaires dont vous aurez besoin pour faire le travail
  • Concepteur d'affinité est un outil de conception de vecteur léger qui contient tout ce dont vous avez besoin pour créer de superbes structures filaires
  • Projet de crayon est un outil gratuit et open source avec des formes et des gabarits intégrés pour Android, iOS, Dojo, etc. Vous pouvez également l'utiliser pour créer des sites Web et des applications de bureau en filaire

Pour quelques idées supplémentaires, jetez un œil à notre sélection de Les 20 meilleurs outils filaires .

09. Connaissez vos types de wireframe

Si vous n'êtes pas familier avec le terme «fidélité», cela signifie le niveau de détail. Dans le monde des wireframes, vos options sont la basse fidélité et la haute fidélité. Les deux sont nécessaires, mais chacun a sa propre fonction et son objectif.

Un wireframe basse fidélité est l'endroit où tout commence. C'est la base sans fioritures, rapide à créer, filaire. Son objectif principal est de vous aider à démarrer. Alors que les wireframes haute fidélité fournissent beaucoup plus de détails, bien que ce ne soient pas des maquettes en couleur. Il s'agit souvent de wireframes en niveaux de gris ou d'une seule couleur, qui fournissent une représentation plus proche de la conception réelle.

10. Obtenez des commentaires tôt et souvent

L'un des avantages de l'utilisation des wireframes est qu'ils prennent très peu de temps à créer. En tant que tels, ils peuvent être partagés avec l'équipe plus tôt dans le processus de conception. Cela facilite la détection précoce des problèmes et les aborde en conséquence. Cela dit, obtenez des commentaires sur vos fils tôt et souvent.

Les wireframes ne devraient pas vous ralentir. Ils ne sont qu'une étape dans le processus de création de meilleures conceptions UX / UI pour vos utilisateurs.