Mockup gratuito. Cacoo

Mockup gratuito. Cacoo

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

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

Moqup de pago

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

Balsamiq Mockup

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

    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

    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

    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

    Editando proyecto desde una plantilla en blanco

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

    Guardando tu plantilla

    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

    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

    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

    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)

Eso es todo, espero que os haya gustado. ¿Y tu qué programa de Mockup utilizas?

hello.cookyourweb

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *