Comment + pourquoi utiliser un modèle de site Web filaire
Le wireframing est l'un de ces processus de conception qui se produit de manière organique et intentionnelle. Combien de fois avez-vous esquissé une idée lors d'une réunion? Combien de fois avez-vous créé un filaire présentable pour une réunion client?
Les deux types de wireframes sont des parties tout aussi importantes du processus de conception et d'itération.
Ce dernier nécessite un peu plus d'efforts pour créer, et c'est là qu'intervient un modèle filaire. Voici tout ce que vous devez savoir sur leur utilisation efficace, et comment ils peuvent vous aider à gagner du temps, améliorer la qualité de vos wireframes et vous aider Obtenez vos idées dans un format physique.
Explorez les maquettes de sites Web
Qu'est-ce qu'un modèle filaire de site Web?
Un filaire est une illustration de base d'un concept de conception de site Web. Chaque type de page peut avoir son propre filaire. Ces conceptions commencent souvent sous forme de croquis et peuvent éventuellement évoluer en maquettes ou prototypes.
Un modèle de site Web filaire est un kit de pseudo-interface utilisateur avec des éléments filaires plutôt que des composants d'interface utilisateur. De nombreux modèles utilisent «kit d'interface utilisateur filaire» dans le nom, bien que ce ne soit pas exactement ce qu'ils sont. (Mais vous avez l'idée.)
Un modèle filaire peut être utilisé pour Sketch, Adobe XD ou Photoshop. Le modèle que vous choisissez doit correspondre à vos outils et à votre flux de travail.
Un bon modèle filaire a des éléments pour différents types de pages, des éléments et n'est pas trop sophistiqué. Les blocs d'images, les blocs de texte, les blocs de boutons et les éléments sur la toile (bureau, mobile) dont vous avez besoin sont des pièces courantes.
Ce dont vous n'avez pas besoin, c'est de quelque chose qui ressemble à un design fini. Optez pour une structure filaire en noir et blanc. Tout ce qui est trop haute fidélité ou inclut des couleurs et des images peut dérouter les clients, leur faisant penser qu'ils regardent un concept de design réel. (Et vous ne voulez pas cela au stade de la filaire d'un projet.)
5 raisons d'utiliser un modèle filaire
Si vous n'êtes pas déjà vendu sur le wireframing, cela peut être un excellent outil dans le processus de conception. Les modèles accélèrent simplement tout.
- Les modèles filaires permettent de gagner du temps, vous aidant à créer rapidement une présentation.
- Les wireframes vous aident à repérer rapidement les défauts de conception et les problèmes d'utilisation.
- Les modèles filaires vous aident à réfléchir à différents types de pages et d'éléments de page afin de ne rien laisser de côté.
- Les wireframes créent une base de conception solide.
- Les modèles filaires peuvent vous faire économiser de l'argent à long terme pour aider les clients à comprendre une conception sans investir dans une maquette complète.
Comment utiliser un modèle filaire
La plupart des modèles filaires fonctionnent comme des kits d'interface utilisateur avec des éléments que vous pouvez déplacer dans le logiciel de votre choix.
L'utilisation exacte dépend de votre outil.
La plupart des modèles filaires sont livrés avec des pages qui sont généralement bien construites de sorte que vous n'avez qu'à apporter des modifications simples à la disposition générale de votre projet.
J'ai tendance à aimer une option de glisser-déposer. Les fichiers de calques Photoshop sont également agréables. Mais, encore une fois, beaucoup dépend des préférences personnelles et du flux de travail.
La clé pour utiliser efficacement un modèle filaire est de choisir quelque chose qui reflète votre flux de travail, prend en charge le logiciel que vous souhaitez utiliser et peut vous accompagner tout au long du processus. De nombreux outils vous permettent de développer et de faire évoluer les wireframes en maquettes de haute qualité. Si cela fait partie de votre flux de travail prévu, choisissez un modèle en conséquence.
Comment obtenir un modèle filaire
Lorsqu'il s'agit d'utiliser un modèle filaire de site Web, vous avez deux choix:
- Construit le tien
- Téléchargez un modèle premade
Le premier peut vous donner la solution la plus personnalisée, mais elle peut prendre du temps.
Ce dernier propose une large gamme de différents types de modèles, avec des options gratuites et premium disponibles au choix.
L'option que vous choisirez dépendra probablement du temps et de la rapidité avec laquelle vous aurez besoin d'un modèle pour travailler. L'utilisation d'un modèle prédéfini est souvent la voie de démarrage rapide. La partie la plus difficile pourrait être de rechercher dans tout ce qui est disponible pour trouver le bon choix.
5 modèles filaires à essayer
Prêt à commencer avec un modèle filaire de site Web? Voici cinq modèles différents que vous pouvez tester pour voir comment vous vous sentez à les utiliser pour vos projets.
Kit d'interface utilisateur propre pour l'esquisse grossière
Ce modèle filaire minimal est rempli de pièces interchangeables qui ont un style presque esquissé pour des conceptions rapides.
Kit filaire Flow iOS
Ce modèle filaire Sketch est un excellent débutant pour les concepts d'applications ou de sites Web mobiles. Les éléments filaires sont simples et pratiques.
Kit filaire filaire
Wirey comprend des modèles Photoshop et Sketch, vous offrant une certaine flexibilité de wireframing. Le modèle comprend plus de 200 composants et 1 000 éléments, donc tout ce dont vous avez besoin est ici.
Kit filaire réactif
Ce modèle filaire pour Figma et Sketch est conçu pour vous aider à passer du filaire initial au prototypage. Il comprend des tonnes de blocs et de modèles pour les tailles de bureau, de mobile et de tablette pour vous aider à concentrer votre processus de réflexion réactif.
UX Workflow Wireframe and Sitemap Creator
Ce modèle filaire est rempli d'options avec des pages et des plans de site prêts à l'emploi. Un modèle comme celui-ci peut vous aider à planifier des projets si vous avez besoin d'un peu d'aide pour démarrer.
Conclusion
Les modèles de filaire de site Web sont l'un de ces raccourcis qui peuvent faciliter la conception.
Je suis un wireframer sketch-it-on-paper, mais ce n'est tout simplement pas prêt pour le client. Donc, j'utilise des modèles pour convertir mon désordre de crayon en quelque chose qui semble présentable. Les modèles rendent cela beaucoup plus rapide et plus facile et rendent une tâche dont je ne suis pas fan beaucoup plus facile à gérer.
Si vous n'avez pas essayé d'utiliser un modèle filaire, je le recommande vivement pour cette raison. Prenez l'un des exemples ci-dessus ou même envisagez de créer le vôtre que vous pouvez utiliser et réutiliser.
