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

Un wireframe tiene que ver con la funcionalidad. Puede ser un boceto realmente simple que demuestre qué tipo de cosas puede hacer en su diseño. Por ejemplo, un wireframe de un sitio web mostrará la navegación, los botones principales, las columnas, la colocación de diferentes elementos. Puede pensar en ello como un modelo 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 con 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 estructura alámbrica:

Los wireframes son formas o líneas rudimentarias que se utilizan únicamente para designar la posición y/o el tamaño. El objetivo de cualquier estructura alámbrica es "ajustar" los elementos en un diseño, no indicar cómo pueden aparecer realmente los elementos 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 la 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 representarán todas las apariencias finales.

Apoyo la respuesta detallada de @Yisela, también para agregar esta visión expuesta en la siguiente presentación

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

Estructura alámbrica

Un wireframe 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éralos como la columna vertebral de tu diseño y recuerda 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 realmente el lado visual del proyecto.

Los wireframes se utilizan para definir el marco, la jerarquía de la información, demostrar el flujo de trabajo, proporcionar detalles sobre lo que hay en la pantalla y una descripción sobre cómo funciona un componente (anotación). Dependiendo de la complejidad de la aplicación o el sitio, los wireframes deben construirse sobre otro entregable de requisitos; modelos de proceso. Los wireframes se pueden 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 del entregable de la estructura alámbrica, junto con otros entregables de requisitos.

Por lo general, una maqueta se crea en Photoshop y, si bien se basa en la estructura o el marco del entregable de estructura alámbrica confirmado, es un entregable distinto, con un cronograma y un proceso de aprobación distintos. Las maquetas o composiciones definen el estilo visual o el tono de la interfaz. Una vez aceptadas, las maquetas se traducen en una serie de requisitos o productos de trabajo adicionales, como código CSS, guías de estilo, recursos gráficos, etc.

Los wireframes nunca deben ser maquetas. Las maquetas se pueden usar como esquemas, pero esto tendría implicaciones para cualquier revisión que pueda ser necesaria y afectaría significativamente su presupuesto.

Fuente: 15 años como Communications Designer, UX Lead, Business Analyst en un entorno corporativo desarrollando sitios web y aplicaciones. Y el amado BABOK

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

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

1. Los wireframes son "el diseño"
2. Las maquetas son "demostraciones renderizadas"

La terminología actual se origina en los años 80. En ese entonces, no tenía el poder de cómputo para producir imágenes en tiempo real, pero podía ver "estructuras alámbricas" de gráficos flotando en la pantalla en tiempo real. Una "demostración" adecuada necesitaba renderizado 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 comentarios y devolverlos para mejorar el diseño de la estructura alámbrica.

Desafortunadamente, hoy en día, hay mucho 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 son construidos por otros, por lo que la maqueta se aumenta de forma privada en lugar de devolverla a los programadores para que la tengan en cuenta en los grandes diseños.

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

keith

Para ponerlo simple:

Wireframes : esqueleto/estructura

Mockups : piel/aspecto visual

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

Tengo que agregar un punto que la gente no ha hecho... todas estas respuestas brindan descripciones técnicas decentes, pero en un entorno de trabajo las diferencias no siempre son tan claras. Algunas empresas 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 quedarme demasiado encerrado en una respuesta de lo que "deberían" ser las cosas, ya que la primera empresa a la que vaya podría hacer algo que no sea ninguno de estos.

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

Los wireframes en comparación se concentran más como un diagrama de flujo donde hay una descripción general. Si no representa algunas descripciones detalladas como lo que sucede al hacer clic en el evento, cambiar el evento y cosas similares. En su mayoría, los realiza SA/BA y las maquetas las realizan diseñadores/desarrolladores. Más aún, algunas personas adjuntan especificaciones técnicas con estructuras alámbricas como DB involucradas con esa interfaz de usuario en particular.

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

Esto es lo que yo entiendo como una diferencia en ellos.

Una estructura alámbrica puede ser una maqueta. Una maqueta puede considerarse una estructura alámbrica. Si bien a veces son cosas separadas (como otros han dicho), a menudo no son cosas separadas.

En un momento, uno podría considerar los wireframes que crearía Visio. Y Mockups sería 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 estructuras alámbricas (simplemente diseño y función), pero con el tiempo se vuelven más y más detallados hasta el punto en que podrían considerarse una maqueta. Y si se utiliza una herramienta interactiva como Axure, en un momento dado se podría considerar el prototipo.

Así que es un espectro con mucha superposición.

Estructuras alámbricas

Cuando tenga la intención de 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 de diseño, que tiene un boceto de cómo se verá, qué botones estarán allí, qué campos estarán allí, etc. Eso es wireframe hecho para.

maquetas

Las maquetas son imágenes más vivas. Son visualmente más atractivos, tiene colores, fuentes, temas, botones, logo, etc. En esta etapa se especifican en el diseño las etiquetas de los campos, notas, tipos de fuentes, menú de navegación, etc. Es una representación exacta de cómo se verá la aplicación móvil o cómo se verán 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