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.
Réponses:
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:
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.
Je soutiens la réponse détaillée de @Yisela, également pour ajouter cette vision exposée dans la présentation suivante
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:
• La structure de l'information (où?)
• Description et visualisation de base de l’interaction utilisateur-interface (comment?)
Maquette
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
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;
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
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!
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
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.
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