Un prototipo o *mockup* en inglés es una **maqueta o modelo** de un diseño o dispositivo para que **nos hagamos una idea** de cómo será el producto final. El prototipo puede ser muy útil para probar una funcionalidad concreta, para ver el aspecto de distintos diseños e incluso para realizar tests de usabilidad (UX) **sin invertir tanto tiempo, esfuerzo o dinero** como supondría de tratarse del producto final.

Aunque su origen está en el mundo físico, la creación de páginas web o de aplicaciones móviles también implica el uso de prototipos, ya que nos permite jugar con la colocación de los menús o elementos y con el diseño en general **sin malgastar tiempo picando código**.

De la misma manera que la [creación de aplicaciones](https://hipertextual.com/2016/12/crear-apps-windows-app-studio) ha evolucionado mucho con el tiempo, el mismo camino ha seguido el diseño y **elaboración de prototipos o mockups**, con soluciones de escritorio u online para usar directamente desde el navegador web.

Hace años ya vimos propuestas muy interesantes de [herramientas online de mockup](https://hipertextual.com/archivo/2013/10/hacer-prototipos-online/) como **Moqups** o **Balsamiq**.

Hoy veremos más propuestas web de este tipo con las que **diseñar un prototipo profesional y funcional** con poco tiempo y esfuerzo.

## InVision

Centrada especialmente en el diseño, [InVision](https://www.invisionapp.com/) sirve para crear mockups o prototipos tanto para páginas web como para aplicaciones iOS o Android.

Funciona desde cero o con nuestros diseños previos, que podemos subir a la herramienta. Con InVision podremos crear un prototipo con gestos, transiciones y animaciones, **prácticamente funcional** para probar cómo quedará finalmente.

Otra de sus ventajas es la posibilidad de **trabajar en solitario o en equipo** en el mismo diseño. Además, se lleva bien con otros servicios como Slack, Drive, Dropbox o Evernote para así **importar y exportar** información o parte del proyecto.

## Marvel

Con un nombre sugerente, [Marvel](https://marvelapp.com/) se ofrece para que crees prototipos web o de apps móviles. Como ocurre con InVision, podrás complementar el uso de Marvel **con otras herramientas** como Slack, Google Drive o Asana.

Además de trabajar en modo online, Marvel cuenta con [sus propias apps iOS y Android](https://marvelapp.com/apps/) para seguir diseñando desde tus dispositivos móviles.

Marvel te ayuda a crear el prototipo desde cero o a importar tus proyectos de Photoshop o Sketch. Luego podrás darle vida al mockup con **gestos y transiciones** de la librería de Marvel.

## Mockup Builder

Con **más de 800 plantillas** disponibles, [Mockup Builder](http://mockupbuilder.com/) es un gran aliado si necesitas crear con poco tiempo un prototipo para páginas web, herramientas de escritorio o apps móviles.

En cualquier caso, en el editor encontrarás todo lo necesario para **crear menús, añadir botones y elementos interactivos** y diseñar todas las pantallas o páginas del proyecto.

## Proto.io

Prototipos que parecen de verdad. Así se presenta [Proto.io](https://proto.io/), una herramienta online de creación de mockups y prototipos especialmente **pensado para aplicaciones móviles**.

Con la herramienta de creación de Proto.io podemos crear prototipos con animaciones y gestos que dan cuenta de **cómo será la app** definitiva. Además, cuenta con **elementos prediseñados** para ayudarnos y que el resultado sea atractivo con poco esfuerzo.

## NinjaMock

Para terminar, [NinjaMock](https://ninjamock.com/), que sirve tanto para diseño de páginas web como para aplicaciones Android, iOS o Windows Phone.

NinjaMock **trabaja básicamente con vectores**, de tu propiedad o importados de otras fuentes. Luego podrás exportar el resultado en PDF o compartirlo a partir de su enlace.

Por otro lado, admite comentarios, muy práctico si trabajas en equipo en el mismo prototipo.

También en Hipertextual