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.
Respuestas:
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:
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.
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 metálica
Una estructura alámbrica es una representación de baja fidelidad de un diseño. Debe mostrar claramente:
• La estructura de la información (¿dónde?)
• Una descripción y visualización básica de la interacción usuario - interfaz (¿cómo?)
Bosquejo
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
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;
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
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!
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.
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.
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