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
Como veis hay varias posibilidades, aunque la mayoría son de pago.
Muy recomendables son las siguientes:
La primera opción Moqups super intuitiva.
Otra muy buena es: Balsamiq, pero igual que la anterior de pago.
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
-
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.
Aceptalo y termina con el registro.
Una vez registrado, la herramienta te dá unos consejos para comenzar.
-
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
Y luego voy a ir añadiendo cosas que veo que necesito para mi proyecto.
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.
Una vez terminada, guarda tu diagrama en el menu izquierdo File>Save diagram
-
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.
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.
-
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.
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.
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)
hello.cookyourweb