Bueno antes de nada, explicaros que es esto del Mockup. Herramienta indispensable para el desarrollo Web.

Este tipo de herramientas vienen a sustituir a las típicos esquemas o bosquejos que hacíamos los diseñadores cuando íbamos a visitar a los clientes, y nos explicaban más o menos como querían la estructura de su Web en función de su negocio.

Ahora tenemos multitud de programas que vienen preparados con todo lo necesario para hacer el esquema online, pudiendo compartirlo entre todo el equipo de desarrollo, con la finalidad de que ningún punto se quede en el tintero. Son herramientas muy faciles de utilizar y el resultado queda muy claro, con lo que tanto el cliente como el equipo de desarrollo cierran muchos temas importantes, antes de empezar con el diseño y la programación de la página.

Como siempre os he buscado la herramienta gratuita. Para ello haz la búsqueda en tu navegador de: free mockup online

Búsqueda en google Free mockup online

Como veis hay varias posibilidades, aunque la mayoría son de pago.

Muy recomendables son las siguientes:

La primera opción Moqups super intuitiva.

Moqup de pago

Otra muy buena es: Balsamiq, pero igual que la anterior de pago.

Balsamiq Mockup

Realmente no son muy caras y te hacen el trabajo muy facil, pero aún así nosotros vamos a probar una gratuita llamada Cacoo

Pasos para instalar el Cacoo. Mockup gratuito

1. Nos registramos en su Web.

   Para empezar debes registrarte en su web https://cacoo.com/, una vez registrado te mandarán un mensaje de confirmación a tu correo.

   

   Date de alta en Cacoo

   Aceptalo y termina con el registro.

   Una vez registrado, la herramienta te dá unos consejos para comenzar.

   

   Cacoo Primeros Pasos

2. Creamos un nuevo diagrama.

   Para ello dale al botón superior, +Crear un nuevo diagrama.

   A continuación te abre una pantalla donde tienes la posibilidad de elegir entre el tipo de diagrama que deseas. En mi caso voy a elegir el Wire frame para el desarrollo de una web

   

   Wire frame plantillas varias

   Y luego voy a ir añadiendo cosas que veo que necesito para mi proyecto.

   

   Edita la plantilla a tu conveniencia

   Tienes bastantes plantillas ya creadas, pero si lo prefieres selecciona la plantilla en blanco. Para editar una plantilla en blanco, selecciónala de las plantillas y arrastra los elementos que pieza a crear tu mismo tu bosquejo personalizado.

   

   Editando proyecto desde una plantilla en blanco

   Una vez terminada, guarda tu diagrama en el menu izquierdo File>Save diagram

   

   Menu izquierdo File>Save Diagram

3. Copiamos los bocetos para crear el proyecto final

   Una vez creado tu boceto. Quizas quieras copiar y pegar el mismo para trabajar sobre él con otras páginas, por lo que lo mejor será crear una carpeta desde la pagina de inicio.

   

   Creando carpeta

   Para ello solo tienes que posicionarte en los puntos supensivos y te sale un menú emergente donde te dá la posibilidad de copiar los diagramas.

   

   Copia el diagrama y edita sobre el mismo

4. Añade usuarios para aportar su trabajo en tus diagramas

   Edita una de las plantillas recién creadas y en el menú derecho haz clic sobre privacidad para habilitar un link a tu plantilla y añade usuarios a tu trabajo.

   

   Edita para compartir

   Te dá la posiblidad de compartir y ademas que ese contenido sea editable. Por otro lado puedes invitar a los participantes en el link inferior.

   

   Invita a participar

Como veis éste programa es bastante completito, y si os fijáis en las plantillas no solo hace Mockups-prototyping sino que también podéis hacer Mind Mapping ( herramienta para hacer un brainstorming online)