Muchas veces en el desarrollo de productos y/o aplicaciones se cae en el error de unificar o tratar como igual el concepto de Sketchs, Mockups, Wireframes y Prototipos o de usarlos como sinónimos.
La definición y uso de estos son ampliamente diferenciados dentro de la etapa de diseño de un proyecto y por esto es que hoy queremos explicar un poco mas algunas diferencias y conceptos clave entre los mencionados elementos.
No sólo evidencian diferencias conceptuales, sino que también de presupuesto, ya que construir uno o el otro influye en cantidad de horas de desarrollo/diseño y por consiguiente costos asociados .
Aunque en teoría suenan y a simple vista parecen lo mismo hay diferencias importantes basados en las diferentes etapas en que estos deben aplicarse para el desarrollo de un proyecto.
Sketch (Boceto)
Es un bosquejo estático en baja calidad de un diseño.
Un sketch en teoría es un dibujo rápido o bosquejo de guía general que no tiene porque tener muchos detalles y que reproduce un concepto, idea, o generalidad de un proyecto de una manera muy sencilla. Por generalidad se realiza a mano con lápiz y borrador por su facilidad en el momento de plasmar una base o punto de partida.
Método de presentación: imagen digital, o en papel.
Wireframe (Boceto estructural)
Es una representación estática en baja calidad de un diseño.
En esta representación se definen para una fácil comprensión:
– ¿qué? Los principales grupos de contenido
– ¿dónde? La estructura de la información
– ¿cómo? La descripción y visualización básica del usuario – interacción de la interfaz
Los Wireframes no son solo un conjunto de cuadros grises, aunque puedan verse exactamente así. Considere a los Wireframes como la columna vertebral de su diseño donde tendrá una representación de cada parte importante del producto final.
Método de presentación: imagen digital.
Mockup (Maqueta ó Modelo)
Representación estática de un diseño en calidad media o alta
– Representa la estructura de la información, visualiza el contenido y demuestra las funcionalidades básicas de una manera estática
– Permite revisar la parte visual real del proyecto
Método de presentación: imagen digital.
Prototipo
Representación navegable del producto final. La calidad pueda variar entre media y alta.
Simula la interacción interfaz de usuario y debe permitir que el usuario:
– Experimente interactuando con la interfaz y contenido del proyecto.
– Pruebe las principales interacciones de una manera similar al producto final.