Quelle est la différence entre des wireframes et des maquettes?

44

Je voudrais savoir la différence entre Wireframes et Mockups. J'espère acquérir une compréhension simple de la différence ou savoir définitivement que les deux sont identiques.

Je l'ai googlé mais je ne comprenais pas exactement la différence. J'apprécierais que quelqu'un me l'explique de manière concise.

Rachuru
la source

Réponses:

51

Un fil de fer concerne la fonctionnalité. Il peut s'agir d'une simple esquisse montrant ce que vous pouvez faire dans votre conception. Par exemple, une structure filaire d’un site Web affichera la navigation, les boutons principaux, les colonnes, l’emplacement des différents éléments. Vous pouvez penser à cela comme un plan pour un site Web.

Une maquette est une représentation réaliste de ce à quoi le produit ressemblera, dans ce cas: un site Web. Le résultat final peut ressembler exactement à la maquette ou en être une variante après les révisions de version. Si certaines personnes préfèrent dessiner les maquettes à l'aide d'un logiciel graphique, d'autres le font directement en HTML / CSS.

J'utilise Balsamiq pour les structures filaires et Photoshop / Illustrator ou HTML + CSS (selon la complexité) pour les maquettes.

Un exemple de fil de fer:

Exemple filaire

Yisela
la source
3
À titre de comparaison, voici un exemple de maquette préliminaire pour la conception de ce site, par exemple, ici, après discussion , la plupart des choses sont restées inchangées, à l'exception du logo et de la nuance de vert.
user56reinstatemonica8
Intéressant. Je n'ai jamais entendu parler d'une structure filaire avant de tomber sur cette question. On m'a dit qu'une maquette est ce que vous décrivez comme une structure filaire. Soit mes professeurs ont eu tort, soit c'est un problème de localisation (je viens d'Allemagne).
André Stannek
17

Les structures filaires sont des formes ou des lignes rudimentaires utilisées pour désigner uniquement la position et / ou la taille. Le but de toute structure filaire est d '"adapter" les éléments à une présentation, et non d'indiquer comment les éléments peuvent réellement apparaître dans une conception finale, uniquement à l'endroit où ils seront situés.

Les maquettes sont construites au-dessus des structures filaires et vont plus loin pour montrer les aspects généraux de l'apparence d'un dessin, y compris les choix de type, les choix de couleur, etc.

Scott
la source
11

Je soutiens la réponse détaillée de @Yisela, également pour ajouter cette vision exposée dans la présentation suivante étapes de la conception du produit

Shershen
la source
6
J'aime la réponse visuelle, mais la taille des balles représente-t-elle quelque chose? Je penserais que ce prototype a une portée plus grande que celle du fil de fer et de la maquette
vendredi
8

Voici un court résumé d'un article de Marcin Treder :

Fil de fer

Une structure filaire est une représentation basse définition d'un dessin. Il devrait clairement montrer:

  1. • Les principaux groupes de contenu (quoi?)
  2. • La structure de l'information (où?)

  3. • Description et visualisation de base de l’interaction utilisateur-interface (comment?)

  4. Considérez-les comme l’épine dorsale de votre conception et rappelez-vous que les structures filaires doivent contenir une représentation de chaque élément important du produit final.

Maquette

  1. Une maquette est une représentation de conception statique, de fidélité moyenne à élevée. Très souvent, une maquette est un brouillon visuel
  2. Représente la structure de l'information, visualise le contenu et montre les fonctionnalités de base de manière statique
  3. Encourage les gens à réellement examiner le côté visuel du projet
Rachuru
la source
4

Les structures filaires permettent de définir le cadre, la hiérarchie des informations, de démontrer le déroulement du travail, de fournir des détails sur ce qui est affiché à l'écran, ainsi qu'une description du fonctionnement d'un composant (annotation). Selon la complexité de l'application ou du site, les structures filaires doivent être basées sur un autre produit livrable; modèles de processus. Les structures filaires peuvent être utilisées pour déterminer les exigences d'un client et, éventuellement, pour confirmer les exigences avec un client. Les structures filaires sont un modèle visuel de la structure d'un site ou d'une application. Ils ne définissent pas la police qui sera utilisée, le rembourrage, la couleur, le style, etc. Ils ne sont pas à l'échelle et ils n'ont pas de tons ni de dégradés. Tout cela doit être communiqué au client afin qu'il comprenne le processus et le contexte du produit livrable en mode filaire, ainsi que d'autres produits à livrer.

Une maquette est généralement créée dans Photoshop. Bien qu'elle soit basée sur la structure ou la structure du produit livrable en mode filaire confirmé, il s'agit d'un produit livrable distinct, avec un calendrier et un processus d'approbation distincts. Des maquettes ou des compositions, définissent le style visuel ou le ton de l'interface. Une fois acceptées, les maquettes se traduisent par un certain nombre d'exigences ou de produits de travail supplémentaires, tels que du code CSS, des guides de style, des éléments graphiques, etc.

Les structures filaires ne doivent jamais être des maquettes. Les maquettes peuvent être utilisées comme structures filaires, mais cela aurait des conséquences sur les éventuelles révisions et sur votre budget.

Source: 15 ans en tant que concepteur en communication, responsable UX, analyste commercial dans un environnement d'entreprise développant des sites Web et des applications. Et le bien-aimé BABOK

utilisateur52529
la source
Bonjour et bienvenue sur GD.SE! Si vous avez des questions sur le fonctionnement du site, consultez le centre d'aide ou n'hésitez pas à contacter l'un de nous en discussion avec Graphic Design Chat dès que votre réputation aura atteint 20. Continuez de contribuer et profitez du site!
Vicki
3

Je n'ai pas encore la réputation de commenter la réponse de Dave Kaye, j'ai donc dû répondre directement. Il convient de noter sa réponse par rapport à la réponse brillante de Rachuru.

Dans une interprétation de phrases modernes, l'explication du profane pourrait / devrait être;

  1. Les wireframes sont "le design"
  2. Les maquettes sont des "démos rendues"

La terminologie actuelle date des années 80. À l'époque, vous ne disposiez pas de la puissance de calcul nécessaire pour produire des images en temps réel, mais vous pouviez regarder des "images filaires" de graphismes flottant à l'écran en temps réel. Une véritable "démo" doit être rendue du jour au lendemain, etc.

À cette époque, une "structure filaire" représente une "conception" squelette et, avec un bon processus de conception itérative, les utilisateurs devraient générer des maquettes à partir de la structure filaire, obtenir des commentaires et les renvoyer pour améliorer la conception de la structure filaire.

Malheureusement, de nos jours, de nombreux logiciels sont à la disposition des clients pour leur permettre de concevoir des maquettes qui n'utilisent rien de ce qui est directement utilisable par les programmeurs. Souvent, leurs conceptions sont élaborées par d'autres personnes, de sorte que la maquette est enrichie en privé plutôt que d'être transmise aux programmeurs pour en faire une grande idée.

Je pense que c'est effectivement ce que Dave était un peu plus poli de mentionner :-)

Keith

utilisateur23381
la source
2

Pour le dire simplement:

Wireframes : squelette / structure

Maquettes : aspect peau / visuel

Comme certains l’ont remarqué, les structures filaires gagnent en importance alors que les maquettes se fondent dans des prototypes.

FA Design
la source
1

Il faut ajouter un point que les gens n’ont pas dit. Ces réponses donnent toutes une description technique correcte, mais dans un environnement de travail, les différences ne sont pas toujours aussi claires. Certaines entreprises peuvent ajouter des fonctionnalités à une maquette, d'autres imposer des exigences de conception de haut niveau à une structure filaire. Je ferais attention à ne pas trop m'engager dans une réponse sur ce que "devrait" être, car la toute première entreprise dans laquelle vous allez peut-être faire quelque chose qui n'en fait pas partie!

Dave Kanter
la source
1

Selon mes connaissances, les écrans de maquette sont la représentation finale de l'interface utilisateur. Quel sera le flux normal et quel sera le flux alternatif. Je pense que cela peut être une sorte de prototype Web principalement créé en HTML et CSS. Nous faisons ensuite principalement pendant la phase HLD pour montrer et avoir l'acceptation du client.

Les structures filaires en tant que comparaison se concentrent davantage comme un organigramme où se trouve une description générale. Si ne représente pas quelques détails, des descriptions telles que ce qui se passe lorsque l'utilisateur clique sur un événement, le modifie, etc. Elles sont principalement réalisées par SA / BA et les maquettes par des concepteurs / développeurs. De plus, certaines personnes attachent des spécifications techniques à des structures filaires telles que DB impliquée dans cette interface utilisateur particulière.

Mais encore une fois, cela dépend du projet à projeter. Dans notre cas, les structures filaires constituent la source de la vérité.

C'est ce que je comprends comme une différence en eux

Rahul Goel
la source
1

Un fil de fer peut être une maquette. Une maquette peut être considérée comme une structure filaire. Bien qu’il s’agisse parfois de choses séparées (comme d’autres l’ont dit), elles ne le sont tout simplement pas.

À un moment donné, on pourrait envisager des structures filaires que Visio créerait. Et Mockups serait ce que PhotoShop créerait.

Mais aujourd'hui, avec la gamme d'outils dont nous disposons, il s'agit souvent du même document. Au début, ils peuvent commencer sous forme de structures filaires (uniquement pour la présentation et la fonction), mais avec le temps, ils deviennent de plus en plus détaillés au point de pouvoir être considérés comme une maquette. Et si vous utilisez un outil interactif tel que Axure, vous pouvez le considérer à un moment donné comme un prototype.

C'est donc un spectre avec beaucoup de chevauchement.

DA01
la source
0

Wireframes

Lorsque vous avez l’intention de concevoir une application mobile ou une application Web, vous devez d’abord avoir un aperçu de la structure de chaque page. Un concepteur peut définir le flux de l’application et un premier projet de conception uniquement en se basant sur des concepts d’entreprise. destiné à.

Maquettes

Les maquettes sont des images plus vivantes. Ils sont visuellement plus attrayants: couleurs, polices, thèmes, boutons, logo, etc. À ce stade, les libellés des champs, notes, types de police, menu de navigation, etc. sont spécifiés dans le dessin. Il s'agit d'une représentation exacte de l'apparence de l'application mobile ou des pages Web.

Vous pouvez trouver une comparaison détaillée entre Wireframes et Mockups dans cet article informatif: La différence entre wireframe, maquette et prototype

Steven Parker
la source