¿Cuál es la diferencia entre wireframes y maquetas?

44

Me gustaría saber la diferencia entre Wireframes y Mockups. Espero obtener una comprensión simple de la diferencia o saber definitivamente que ambos son lo mismo.

Lo busqué en Google pero no podía entender cuál es exactamente la diferencia, agradecería que alguien me lo explicara de manera concisa.

Rachuru
fuente

Respuestas:

51

Una estructura alámbrica se trata de funcionalidad. Puede ser un boceto realmente simple que demuestre qué tipo de cosas puede hacer en su diseño. Por ejemplo, una estructura alámbrica de un sitio web mostrará la navegación, los botones principales, las columnas, la colocación de diferentes elementos. Puedes considerarlo como un plano para un sitio web.

Una maqueta es una representación realista de cómo se verá el producto, en este caso: un sitio web. El resultado final puede verse exactamente como la maqueta, o ser una variación después de las revisiones de la versión. Mientras que algunas personas prefieren dibujar las maquetas usando software de gráficos, otras lo hacen directamente en HTML / CSS.

Utilizo Balsamiq para wireframes, y Photoshop / Illustrator o HTML + CSS (dependiendo de la complejidad) para maquetas.

Un ejemplo de una estructura alámbrica:

Ejemplo de estructura alámbrica

Yisela
fuente
3
A modo de comparación, aquí hay un ejemplo de una maqueta temprana para el diseño de este mismo sitio, por ejemplo, aquí, después de la discusión , la mayoría de las cosas permanecieron igual excepto por el logotipo y el tono verde.
user56reinstatemonica8
Interesante. Nunca escuché de una estructura metálica antes de tropezar con esta pregunta. Me dijeron que una maqueta es lo que usted describe como una estructura metálica. O mis profesores estaban equivocados o este es un problema de localización (soy de Alemania).
André Stannek
17

Los wireframes son formas o líneas rudimentarias que se utilizan para designar solo la posición y / o el tamaño. El objetivo de cualquier estructura metálica es "ajustar" los elementos en un diseño, no indicar cómo los elementos pueden aparecer realmente en un diseño final, solo dónde se ubicarán.

Las maquetas se construyen sobre estructuras alámbricas y van más allá para mostrar los aspectos de apariencia general de un diseño, incluidas las opciones de tipo, las opciones de color, etc. El objetivo de una maqueta es mostrar, lo más cerca posible, cómo se mostrarán todas las apariencias finales.

Scott
fuente
11

Apoyo la respuesta detallada de @Yisela, también para agregar esta visión expuesta en la siguiente presentación etapas del diseño del producto

Shershen
fuente
66
Me gusta la respuesta visual, pero ¿representa algo el tamaño de las bolas? Me gustaría pensar que el prototipo es más grande que el alcance de alambre y maqueta
sivi
8

Aquí hay un breve resumen de un artículo de Marcin Treder :

Estructura metálica

Una estructura alámbrica es una representación de baja fidelidad de un diseño. Debe mostrar claramente:

  1. • Los principales grupos de contenido (¿qué?)
  2. • La estructura de la información (¿dónde?)

  3. • Una descripción y visualización básica de la interacción usuario - interfaz (¿cómo?)

  4. Considérelos como la columna vertebral de su diseño y recuerde que los wireframes deben contener una representación de cada pieza importante del producto final.

Bosquejo

  1. Una maqueta es una representación de diseño estática de fidelidad media a alta. Muy a menudo, una maqueta es un borrador de diseño visual
  2. Representa la estructura de la información, visualiza el contenido y demuestra las funcionalidades básicas de forma estática.
  3. Alienta a las personas a revisar el aspecto visual del proyecto.
Rachuru
fuente
4

Los wireframes se utilizan para definir el marco, la jerarquía de información, demostrar el flujo de trabajo, proporcionar detalles sobre lo que está en la pantalla y una descripción de cómo funciona un componente (anotación). Dependiendo de la complejidad de la aplicación o el sitio, los wireframes se deben construir sobre otro requisito entregable; Modelos de proceso. Wireframes se puede utilizar para obtener requisitos de un cliente y, finalmente, confirmar los requisitos con un cliente. Los wireframes son un modelo visual de la estructura de un sitio o aplicación. No definen la fuente que se utilizará, el relleno, el color, el estilo, etc. No están a escala y no tienen tonos ni degradados. Todo esto debe comunicarse con el cliente para que comprenda el proceso y el contexto de la entrega de la estructura alámbrica, junto con otras entregas de requisitos.

Por lo general, se crea una maqueta en Photoshop y, aunque se basa en la estructura o marco de la entrega confirmada de la estructura alámbrica, es una entrega distinta, con un calendario y un proceso de aprobación distintos. Maquetas o comps, definen el estilo visual o el tono de la interfaz. Una vez aceptadas, las maquetas se traducen en una serie de requisitos adicionales o productos de trabajo, como código CSS, guías de estilo, activos gráficos, etc.

Los wireframes nunca deben ser maquetas. Las maquetas podrían usarse como wireframes, pero esto tendría implicaciones para cualquier revisión que pueda ser necesaria e impactará significativamente su presupuesto.

Fuente: 15 años como Diseñador de Comunicaciones, UX Lead, Analista de Negocios en un entorno corporativo desarrollando sitios web y aplicaciones. Y el amado BABOK

usuario52529
fuente
Hola y bienvenidos a GD.SE! Si tiene alguna pregunta sobre cómo funciona el sitio, eche un vistazo al centro de ayuda o siéntase libre de hacer ping a uno de nosotros en Graphic Design Chat una vez que su reputación alcance 20. ¡Siga contribuyendo y disfrute del sitio!
Vicki
3

Todavía no tengo la reputación de comentar sobre la respuesta de Dave Kaye, así que tuve que responder directamente. Vale la pena señalar su respuesta en comparación con la brillante respuesta de Rachuru.

En una interpretación de frases modernas, la explicación del laico podría / debería ser;

  1. Wireframes son "el diseño"
  2. Las maquetas son "demos renderizadas"

La terminología real se origina en los años 80. En aquel entonces, no tenía la potencia informática para producir imágenes en tiempo real, pero podía ver "tramas" de gráficos flotando en la pantalla en tiempo real. Se necesitaba una "demostración" adecuada durante la noche, etc.

En estos tiempos, una "estructura alámbrica" ​​representa un "diseño" esquelético y, con un buen proceso de diseño iterativo, las personas deberían generar maquetas a partir de la estructura alámbrica, obtener retroalimentación y transmitirla para mejorar el diseño de la estructura alámbrica.

Desafortunadamente, hoy en día, hay una gran cantidad de software disponible para los clientes que les permite diseñar maquetas que no usan nada que los programadores puedan usar directamente. Con frecuencia, sus diseños se basan en otros para que la maqueta se aumente de forma privada en lugar de ser devuelta a los programadores para tener en cuenta los grandes diseños.

Creo que eso es efectivamente lo que Dave estaba siendo un poco más cortés al mencionar :-)

Keith

usuario23381
fuente
2

Para ponerlo simple:

Wireframes : esqueleto / estructura

Maquetas : aspecto de piel / visual

Como algunas personas han notado, hoy en día los wireframes cobran más importancia mientras las maquetas se fusionan en prototipos.

Diseño FA
fuente
1

Tengo que agregar un punto que la gente no ha hecho ... todas estas respuestas dan descripciones técnicas decentes, pero en un ambiente de trabajo las diferencias no siempre son tan claras. Algunas compañías pueden agregar funcionalidad a una maqueta y otras pueden poner requisitos de diseño de alto nivel en una estructura alámbrica. ¡Tendría cuidado de quedar demasiado encerrado en una respuesta de qué cosas "deberían" ser, ya que la primera compañía a la que vaya podría hacer algo que no sea ninguno de estos!

Dave Kanter
fuente
1

Según mi conocimiento, las pantallas de maquetas son la representación final de la interfaz de usuario, apariencia. Cuál será el flujo normal y cuál será el flujo alternativo. Creo que puede ser una especie de prototipo web creado principalmente en HTML y CSS. Lo hacemos principalmente durante la fase HLD para mostrar y tener la aceptación del cliente.

Wireframes como comparar concentrado más como diagrama de flujo donde hay una descripción general. Si no representa pocas descripciones de detalles como lo que sucede al hacer clic en el evento, cambiar el evento y cosas similares. En su mayoría son realizadas por SA / BA y la maqueta son realizadas por diseñadores / desarrolladores. Más aún, algunas personas adjuntan especificaciones técnicas con estructuras de alambre como DB involucradas con esa IU particular.

Pero de nuevo depende de proyecto a proyecto. En nuestro caso, los wireframes son la fuente de la verdad.

Esto es lo que entiendo como una diferencia en ellos.

Rahul Goel
fuente
1

Una estructura metálica puede ser una maqueta. Una maqueta puede considerarse una estructura metálica. Si bien a veces son cosas separadas (como han dicho otros), con la misma frecuencia no son cosas separadas.

En un momento, uno podría considerar los wireframes que crearía Visio. Y las maquetas serían lo que crearía PhotoShop.

Pero hoy, con la gama de herramientas que tenemos, a menudo son el mismo documento real. Al principio, pueden comenzar como wireframes (puramente diseño y función) pero con el tiempo se vuelven cada vez más detallados hasta el punto en que podrían considerarse una maqueta. Y si usa una herramienta interactiva como Axure, en cierto punto uno podría considerarlo el prototipo.

Entonces es un espectro con mucha superposición.

DA01
fuente
0

Wireframes

Cuando intente diseñar una aplicación móvil o una aplicación web, primero necesitará un boceto de cómo se verá cada página. Solo en base a conceptos comerciales, un diseñador puede definir el flujo de la aplicación y un primer borrador del diseño, que tiene un bosquejo de cómo se verá, qué botones estarán allí, qué campos estarán allí, etc. Eso es lo que es la estructura metálica hecho para.

Maquetas

Las maquetas son imágenes más vivas. Son visualmente más atractivos, tienen colores, fuentes, temas, botones, logotipos, etc. En esta etapa, las etiquetas de los campos, notas, tipos de fuente, menú de navegación, etc. se especifican en el diseño. Es una representación exacta de cómo se verá la aplicación móvil o las páginas web.

Puede encontrar una comparación detallada entre Wireframes y Mockups en este artículo informativo: La diferencia entre Wireframe, Mockup y Prototype

Steven Parker
fuente