Qu'est-ce qu'un filaire?
D'accord. Je sais en quelque sorte ce qu'est un filaire, mais j'ai encore besoin de beaucoup d'aide. La question veut en fait demander comment commencer lors de la "conception" d'un filaire pour une boutique en ligne. Je fais un stage dans une entreprise de webdesign et ma tâche en ce moment est de concevoir un wireframe général pour une boutique en ligne qui vend des voitures. Connaissez-vous de bons exemples de tels sites Web? Quelles sont les "étapes" que je veux suivre lorsque je crée ce premier filaire?
Je vais faire le wireframe dans Photoshop, bien que je sache trop son chemin que ce dont j'ai besoin. J'ai fait quelques wireframes de base avec Balsamiq Mockups, qui est un excellent programme pour le wireframing seulement ce n'est pas si excellent quand vous voulez présenter le wireframe au client, ce n'est pas que le wireframe devrait avoir l'air bien ou quoi que ce soit mais l'apparence sommaire de Balsamiq est un peu à rugueux. Je ne pense pas avoir besoin de conseils pour Photoshop en ce qui concerne un simple filaire, car je vais simplement utiliser les outils de base et uniquement des nuances de gris, et peut-être que je penserai également à la taille de la police mais je ne pense pas. Quoi qu'il en soit, si vous pensez avoir des conseils pour créer des wireframes avec Photoshop, tous sont les bienvenus! Je vous remercie
Eh bien, pour commencer, s'il s'agit d'un stage, cette question devrait vraiment être adressée à vos mentors et collègues. Le but du stage est d'apprendre d'eux.
Cela dit, un filaire est un croquis pour communiquer l'idée/concept. Le terme vient de la modélisation 3D où le filaire est les primitives de base de l'objet pour donner une impression de forme et d'échelle sans s'engager dans un modèle entièrement rendu. (Qui, avant les ordinateurs, devait être fait manuellement avec des modèles physiques, qui commençaient souvent comme un `` cadre de fil '' sur lequel de l'argile ou un autre substrat de ce type était appliqué pour étoffer la forme).
Dans le contexte des sites Web, les wireframes servent à diverses fins selon le contexte du projet. Ceux-ci peuvent inclure:
- flux du site (généralement réalisé avec des organigrammes)
- interactions (pas toujours faciles à documenter dans un filaire, mais son commun)
- structure générale du contenu
- mise en page générale
Je n'utiliserais PAS du tout Photoshop pour les wireframes. Cela vous tentera d'ajouter un design visuel et ce n'est pas quelque chose que vous voulez dans vos wireframes. Restez avec Balsamiq ou, encore mieux (à mon humble avis, bien sûr) - restez avec un stylo et du papier.
Quant à un excellent site Web qui vend des voitures, je ne suis pas sûr d'en avoir encore vu un. ;)
Mais notez que bien que la recherche d'autres sites de voitures soit importante, votre structure filaire doit vraiment être construite autour des objectifs commerciaux du projet de votre client. Idéalement, vous auriez déjà des personnalités et des exigences de projet à travailler.
P.S. cette question devrait probablement être déplacée vers UX
Un filaire est un prototype ou un brouillon rapide de l'endroit où les choses seraient placées sur une page Web. Un filaire met l'accent sur le placement et la forme. Certains d'entre eux concernent l'étendue des fonctionnalités.
Son objectif global est de se concentrer sur la convivialité et l'expérience utilisateur.
Il existe différents outils qui peuvent y parvenir: Photoshop, illustrator, indesign. Il existe également des outils spécialement conçus à cet effet.
Quoi qu'il en soit, un filaire peut également être dessiné à la main.
Plus sur ce sujet: http://wireframes.linowski.ca/ - Wireframes magazine
Exemple de vrais wireframes montrés au client (page Verizon sans fil)
Il existe déjà quelques bonnes réponses à vos questions essentielles, je vais donc ajouter quelques mises en garde:
- Méfiez-vous des demandes comme "pouvez-vous ajouter de la couleur?" ou "soyons jolis". Ce n'est pas à ça que sert un filaire. Il se concentre sur l'utilisation de la page, le concept, pas l'apparence.
- Soyez prêt à répéter. Votre premier effort peut être très difficile - les efforts ultérieurs le resserrent. N'essayez pas de tout forcer dans la version filaire 0.1.
- Demandez des images filaires de projets précédents pour voir ce que les gens de l'entreprise ont fait dans le passé. Cela vous donnera une bonne idée de l'utilisation spécifique des wireframes par les entreprises (il n'y a pas de norme d'or - j'ai fait des wireframes pour plus d'entreprises que je ne m'en souviens et tout le monde avait des attentes légèrement différentes).
Voici comment j'essaie de faire le poids pour mes amis:
Prenez n'importe quel site Web que vous aimez, supprimez-le de tous ses collors, puis supprimez-le de tout son contenu et/ou de ses actifs numériques (imagerie, vidéo, etc.)
Continuez à répéter ce processus jusqu'à ce qu'il ne vous reste qu'une page en noir et blanc avec des formes qui semblent former une sorte de plan directeur qui, lorsqu'il est rempli d'éléments du n ° 1, constitue le site avec lequel vous avez commencé.
Il y a de fortes chances que les wireframes pour ce site particulier soient assez proches de ce que vous envisagez.
Il existe deux approches pour concevoir une boutique de commerce électronique:
- Commencez avec des wireframes/maquettes pleines de bêtises `` lorem ipsum '', puis faites un peu de cauchemar en essayant de faire fonctionner la fonctionnalité de `` signature '' avec votre solution de commerce électronique choisie et des informations réelles sur le produit.
- Commencez avec vos modèles par défaut de logiciel de commerce électronique où la fonctionnalité/l'utilisabilité sont toutes élaborées (bien que non thématiques à votre goût). Mettez des données réelles sur les produits à la place des déchets "lorem ipsum". Parcourez maintenant l'achat d'un parcours produit en économisant quelques captures d'écran en cours de route.
La deuxième approche, combinée à une feuille de style locale et à quelques modifications CSS de Firebug, vous donnera un fil de fer fonctionnel que vous pouvez fournir, vous n'oublierez pas non plus des choses comme les boîtes de message indiquant à votre client qu'il a ajouté à son panier, etc. Vous ne manquerez pas non plus des éléments tels que les boutons de la zone de compte.
Les dessins de style Balsamiq deviennent un peu fastidieux ces jours-ci - plus gai que Comic Sans. Pourquoi se moquer de la façon dont la roue doit être réinventée lorsque le logiciel de votre panier respecte les conventions pour savoir où le compte/recherche/navigation doit aller?
Il y a aussi ce concept d'utilisation des grilles. Vous pouvez passer toute la journée dans Photoshop à mettre des éléments dans vos dispositions de grille, ou vous pouvez le faire avec un stylo et du papier. Obtenez une feuille A4, pliez-la en deux fois et vous disposez d'une grille pour mettre en page votre en-tête, l'image du produit, la description, acheter maintenant et d'autres boutons. Implémentez cela avec un prototypage rapide avec Firebug/feuille de style locale.