Diseño de sitio web: Wireframe v. Mockup v. Prototype

Wireframe v. Mockup v. Prototipo

Si tiene un sitio web (o aplicación móvil) diseñado para su negocio, escuchará los términos estructura alámbrica, maqueta con seguridad y, para aplicaciones más avanzadas, prototipo. Es útil para definir su proceso de diseño comprender la diferencia básica entre estas herramientas que lo ayudarán a diseñar un sitio web que refleja su marca.

Nota: La mayoría de estos términos también se aplican al diseño de aplicaciones móviles, pero he optado por no convertirlo en un tema central de este artículo.

Arte conceptual de construcción de desarrollo web

wireframe

Una estructura alámbrica es como el plano de su sitio web. Describe los elementos más esenciales y el contenido sin el tema del sitio web, las fotos o el contenido específico. Un buen wireframe ayudará a delinear los elementos que desea incluir en su sitio web y revelará "el panorama general" del diseño del sitio web. Específicamente, el wireframe es una representación básica del diseño del sitio web y la ubicación del contenido. Los wireframes son relativamente fáciles de crear y se pueden usar para obtener comentarios sobre la estructura de su sitio de los miembros del equipo, clientes, etc. antes de invertir el tiempo en un diseño completo. El wireframe también crea un enfoque en la estructura del sitio web sin la distracción de gráficos, colores y fotos.

Hay demasiadas herramientas colaborativas y de estructura alámbrica para mencionar, pero Figma proporciona una solución completa para todas las tareas descritas aquí.

Mockup

Una maqueta es una forma visual de representar el diseño de un sitio web. Mientras que un wireframe representa principalmente la estructura del sitio web, una maqueta es un gráfico estático que muestra cómo se verá el sitio web.

Una maqueta muestra la combinación de colores, el estilo visual, la tipografía y las fotos de un sitio web. Con una maqueta, puede revisar y revisar la representación visual del producto para crear la mejor representación para su marca. Una herramienta de maqueta que es adecuada para la mayoría de las aplicaciones está disponible en Invisión.

Prototipo

Un prototipo es una versión del sitio web en la que se puede hacer clic y permite a quienes evalúan el nuevo diseño del sitio web experimentar el contenido y las interacciones en vivo. Un prototipo es muy parecido al producto final en sí, excepto que el front-end y el back-end del sitio web no están completamente unidos.

El prototipo es interactivo y permite a quienes están probando el sitio web experimentar la interfaz y ajustar la interfaz de usuario. 

Conclusión

No todos los sitios web tienen una estructura alámbrica, una maqueta y un prototipo. La mayoría de los sitios web definitivamente tienen una maqueta aprobada antes de construir el sitio, y los wireframes son herramientas comunes en el desarrollo del sitio, pero los prototipos rara vez se usan en proyectos de diseño de sitios web a menos que la funcionalidad del sitio sea fundamental para el rendimiento del sitio. El viejo dicho de "medir dos veces y cortar una vez" se aplica al diseño y desarrollo de sitios web. El uso de las herramientas correctas para comprender completamente la apariencia y la interfaz de usuario (interfaz de usuario) de un nuevo sitio web ayudará a garantizar que el resultado final del sitio represente su marca de manera precisa y efectiva.

Los comentarios están cerrados.

Translate »