Comunidad de diseño web y desarrollo en internet online

Prototipos, bocetos y wireframes con Balsamiq Mockups

Balsamiq Mockups es la herramientas más orgásmicamente útil que he usado para mejorar mi productividad. No recuerdo cómo la descubrí, pero sé que ha cambiado por completo la forma en la que planeo proyectos web, aplicaciones, secciones y básicamente todo lo que haga que tenga una interfaz.

Wireframing de websites


Es normal que, antes de crear un proyecto, hagamos sketchs, bocetos y dibujos rápidos en papel de cómo será la interfaz. A medida que vamos avanzando en el proyecto hacemos cambios, tenemos mejores ideas y esos sketchs se convierten en prototipos para la versión definitiva. Mockups.


A ese proceso se le llama wireframing. Crear los wireframes o "estructura" de una interfaz. Ignorando por completo el diseño gráfico y poniendo máxima atención a la interacción del usuario. Con esto logramos que los diseñadores puedan desplegar su creatividad sin ser limitados por nuestras ideas, los programadores pueden trabajar sobre una idea de interfaz real y todo el equipo respete y comparta una filosofía común de usabilidad. Es la herramienta clave de los directores de proyecto.

Balsamiq Mockups



Balsamiq Mockups es un programa de escritorio, programado en Flex y AIR, que crea muy rápido estos wireframes. Su interfaz es bastante fácil de usar, su colección de controles es bastante grande y puedes crear casi cualquier programa. Al ser creada en AIR, es instalable en Windows, Linux y Mac OS X. Funciona como cualquier aplicación normal. Puedes arrastrar, soltar, guardar mockups en un archivo, exportar a PNG, copiar y pegar, deshacer, etc. También incluye ayudas de diseño similares al Flex Builder 3. El creador de Balsamiq Mockups fue desarrollador de Adobe Acrobat Connect (Antes Macromedia Breeze)

Ejemplos de prototipos


Digamos que eres un ingeniero del equipo de iTunes. Tu primer labor es imaginar cómo será la interfaz para poder desarrollar sus características alrededor de ella. Con Mockups puedes lograr esto:

En minutos.

En un ejemplo más especifico, cree para este artículo el wireframe de la portada de Cristalab. Tardé aproximadamente 3 minutos. Podrías pensar que hacer esto en lápiz y papel es más rápido que en un programa, pero con Mockups no es así.


Software, websites, aplicaciones web, juegos (en cierta medida) o cualquier cosa que tenga una interfaz puede ser prototipeada en Balsamiq Mockups.

Descargalo y compralo


Para instalarlo, sólo debes ir al sitio web de Balsamiq Mockups para escritorio, vas a donde dice "Download and Install" y das click en el cuadro donde dice "Install Now". Si no tienes el runtime de Adobe AIR, ese botón se encargará de instalarlo, junto con Mockups. Al instalarlo, podrás crear lo que quieras y usar todas las opciones, pero no podrás guardar un mockup. Si quieres poder guardarlos, tendrás que comprarlo.

El software vale US$79, que si trabajas en una empresa, será un precio corto para lo que hace este programa. Sin embargo, puedes obtenerlo gratis. Si haces cosas por la comunidad, contribuyes a proyectos open source o en general usarás Mockups para hacer el bien, puedes tener una licencia gratuita. (Con eso es evidente que nosotros no la merecíamos).

En realidad es un programa que me ha impactado. Muy fácil de usar, muy rápido e increíblemente útil. Si te dedicas a esto de las interwebs, no dudes en descargarlo y manipular a tu jefe para comprarlo. Tu productividad, tus clientes al iniciar un proyecto y tu estabilidad mental te lo agradecerán.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate