Las mayoria de las personas piensan que Wireframe, prototype y mockup son la misma cosa, con este post quiero mostrar las diferencias entre cada uno de ellos.
¿ Que es un wireframe ?
Es la mas simple representación de un diseño web, piensa en el como la estructura básica de la pagina web. Wireframe deberia de contener la representación de cada pieza importante del producto final.
Cuando decimos "representación" quiere decir que no tenemos que entrar en detalles exactos, pero debemos crear una solida idea de lo que seria el producto final. Con esto estamos creando un mapa, una idea de como seria el diseño final web.
Crear un wireframe debería de ser una tarea rápida y la mayoría del tiempo debe de emplearse en generar ideas y discutir con el equipo de diseño. Un buen wireframe comunica la idea general a tu equipo de trabajo de que camino se esta tomando en el diseño.
Algunos ejemplos de wireframe :
¿ Que es un prototype ?
Prototype a veces es confundido con un wireframe, pero un prototype es una representación media del diseño que simula la interacción del usuario con la interfaz y el contenido del producto final. Principalmente permite testear como el usuario interactua con la interfaz de una manera similar al producto final, por lo que Prototype tiene que tener interacciones y enlaces que funcionen, pero su contenido sigue siendo estático. Un prototype es una simulacion final de la interaccion entre el usuario y la interfaz de calidad media del producto final.
Puede no lucir exactamente igual al producto final pero lo suficientemente similar para demostrar la interacción del usuario. Esto nos demuestra que prototype se usa principalmente para pruebas completas de interfaz, antes de que la programación final del producto comience.
Hay que tener cuidado en usar un prototype por que para crear las interacciones de la interfaz habria que trabajar con el html , css y Javascript para crearlas. Aunque existen herramientas de pago que permiten crearlas por ti, como por ejemplo : http://proto.io/. En el siguiente vídeo pueden ver como agregan interacción a un prototype de una App móvil.
Resumen : "Prototipo: Representación navegable del producto final web. De calidad media"
¿ Ques un mockup ?
Mock-up: Representación estática de un producto web en calidad alta.
Con el podemos vender la idea final de nuestro producto e instar a nuestros clientes a darnos feedback sobre el diseño, es lo mas cercano al diseño final que podemos mostrar a nuestros clientes. La diferencia con protoype es que un mockup no necesariamente tiene que tener html programado, pueden ser imágenes del diseño final, mientras que prototype si.Y un mockup generalemente no tiene interactividad
Para terminar les dejo un vídeo de mejorando.la donde explican la diferencia de cada uno.
Para terminar he encontrado una App muy util para hacer rapidos prototipos con solo dibujos en papel, visita el siguiente link : https://popapp.in/
Y si quieres un poco de inspiración para hacer tus prototipos puede visitar esta comunidad: https://spaces.proto.io/
Algunos libros gratuitos sobre diseño de prototype y mockup:
link : http://designmodo.com/wireframing-prototyping-mockuping/
