RSS

Balsamiq Mockups, diseño interfaz de usuario

13 Ago

balsamiq-logo

En este post vamos a hablar acerca de Balsamiq Mockups. Balsamiq Mockups es una herramienta elaborada por la gente de Balsamiq que permite crear borradores de la interfaz de usuario de nuestra aplicación .

Tenemos disponible Balsamiq Mockups tanto como herramienta a través de web o podemos bajarnosla e instalarla como aplicación de escritorio. Balsamiq Mockups es una herramienta de pago, 79$ para una licencia de usuario. Sin embargo, podemos evaluar una versión completamente funcional durante 7 días.

Además existen una serie de productos en forma de plug-ins que permiten integran Balsamiq Mockups con otras herramientas como Confluence, JIRA ó XWiki.

Podemos probar la herramienta desde la web pinchando en Try Web Demo. La pantalla que se nos muestra es la siguiente.

En esta pantalla podemos ver en la parte superior una serie de componentes a partir de los cuales podemos crear nuestra borrador de interfaz de usuario. Hay un gran número de componentes, desde los más comunues como pueden ser un campo de texto ó una ventana de navegador web hasta alguno más complejo cómo gráficas. Balsamiq Mockups tiene una sección de componentes de interfaz para dispositivos móviles (iPhone). En la siguiente imagen vemos añadidos de manera aleatoria una serie de componentes.

BalsamiqMockupsAllTogether

Además del componentes estandar podemos encontrar ciertos componentes realizados por algunos usuarios de la comunidad en http://mockupstogo.net/ . Para probar un poco más esta herramienta vamos a crear un borrador de cómo quedaría este blog con una configuración similar a la actual. Una cosa interesante de los componentes de interfaz es que podemos editar su contenido y aspecto. Así pues podemos dar determinados valores en nuestras tablas para que el borrador generado sea lo más parecido a cómo podría quedar nuestra interfaz finalmente. Igualmente podemos editar enlaces de unas componentes a otros.

editingBalsamiqComponent

finishedBalsamiqWithMenu

addLinkBalsamiq

En la versión de prueba cada cierto tiempo saldrá una ventana agradeciendonos que usemos Balsamiq Mockups.

DismissWindowBalsamiq

Después de cacharrear un poco con la herramienta nos ha quedado el siguiente borrador con un aspecto bastante conseguido.

fullScreenBalsamiq

La imagen puede ser puesta a pantalla completa. Aparece una flecha que puede resultarnos muy útil si queremos presentar nuestro borrador a nuestro equipo de trabajo.

fullScreenBalsamiqArrowTop

Los formatos a los que pueden ser guardados nuestro borrador son PNG, PDF ó XML. En nuestro caso el resultado final lo hemos guardado en PNG.

BalsamiqMockupsImageExported

Comentar que tenemos accesible bastante documentación, así como un foro de ayuda. Balsamiq Mockups tiene una frecuencia de actualización de su producto muy buena. La gente de Balsamiq incluso pone a dispoción de ‘buena gente’ una licencia totalmente gratuita. Si quieres ver las condiciones mira aquí.

En definitiva creo que Balsamiq Mockups es una gran herramienta que puede ser utilizada para generar borradores de manera rápida a la vez que bastante profesional de nuestra aplicaciones web. Otras herramientas similares pueden ser encontradas aquí.

 
Deja un comentario

Publicado por en 13 agosto, 2011 en UI Design

 

Etiquetas: , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: