Balsamiq Mockups, creando Prototipos o diseños de Interfaces gráficas

Siempre que empiezo un nuevo proyecto o desarrollo me gusta diseñar en papel el aspecto de las pantallas, para poder presentarlas al cliente y decidir si se ajusta a sus requerimiento o simplemente para exponerle mis ideas.

Estos diseños de interfaces gráficas se podrían hacer con Visio (pero evidentemente usando Linux es complejo utilizar esta aplicación a menos que utilices una maquina virtual), asi que preferi buscar otras alternativas y al final me resultan incluso mejores.  Hasta ahora usaba Pencil, una extensión libre para Firefox. Pero recientemente descubri Balsamiq Mockups y me parece una excelente solución para crear muy rapidamente los prototipos. Es una aplicación de Adobe Air, por lo que requerira que lo tengas instalado en el equipo. (La instalacion de Adobe Air no es compleja, basta con descargar el fichero .bin correspondiente, darle permisos de ejecución y ejecutarlo).

Cuando arrancas la aplicación de Mockups, aparece una barra con todos los elementos gráficos que puedes usar: botones, cajas de texto, paneles, contenedores y un largo etcetera. El aspecto de estos controles es de un dibujo a mano alzada lo que da al aspecto final del prototipo un look muy caracteristico como si fuera una copia directa de tu diseño en papel.

Su uso es muy simple, seleccionas el control a usar, lo arrastras a la ventana principal y con un doble click, te permite editar sus propiedades.

Otra cosa que me gusto, es que el último boton del menu te permite entrar en “modo presentación”. En este modo, a pantalla completa se muestra el diseño que actualmente estas creando y un enorme cursor azul te permite moverte por las diferentes secciones del diseño, lo cual es útil para presentar la idea en una reunión o ir comentandosela al resto del equipo.


La aplicación no es gratuita, tiene un coste de 79$ (lo cual para alguien que se dedique a esto, no es que sea excesivamente cara). Podeis sin embargo descargar una demo para que comprobeis su funcionalidad (esta demo tiene capadas algunas funcionalidades como son la de guardar o exportar a imagen los diseños realizados) o probarla de manera online.

Alternativamente Starman nos habla de GomockingBird, otro servicio online para crear nuestros propios mockups.

Enlace | Ejemplos de Mockups | Demo Online

12 Responses to “Balsamiq Mockups, creando Prototipos o diseños de Interfaces gráficas”


  1. 1 Dafero enero 31, 2010 en 12:30 pm

    ¡¡Gracias por la entrada!!

    Justo lo que necesitaba :) Aunque creo que voy a usar GomockingBird!

    Gracias!!

  2. 2 alesete enero 31, 2010 en 1:00 pm

    Yo uso directamente el Qt Designer… y si me gusta incluso ya puedo empezar a implementar sobre él. Si lo que tengo que programar no es Qt pues me sirve sólo de mockup.

    Lo bueno del Qt Designer es que tiene una opción de “Preview” que te permite ver la ventana e incluso interactuar un poco con ella como si ya la hubieses compilado (incluso cambiarle el estilo a cleanlooks, plastik, oxygen, human, windows, mac os, para ver como quedaría en las distintas plataformas).

  3. 3 Christopher enero 31, 2010 en 5:35 pm

    Necesitaba algo así, no sabía que existia :O.

    Hacia mis dibujos con OpenOffice Dibujos

    ^^

  4. 4 Patrick enero 31, 2010 en 8:43 pm

    Muy bueno.
    Gracias.

    Patrick

  5. 5 Daniel Añez Scott enero 31, 2010 en 10:51 pm

    ese es el que usan para los mockups de ubuntu? se parece a los que he visto del software center y el area de notificacion nueva^^

  6. 6 Gen X febrero 1, 2010 en 1:33 am

    Yo uso inkscape cuando me piden el diseño de una pagina web. inkscape me permite brindar un prototipo casi identico al resultado final. hago uso de las capas para separar el proyecto, por ejemplo fuentes, fondo, colores, logos, etc. en verdad es una gran herramiente, ah! se me olvidaba otra herramienta indispensable para darle presicion al trabajo es kruler, es una regla que esta en los repositorios y en verdad es de mucha ayuda :)

  7. 7 Nerf febrero 1, 2010 en 10:29 am

    y es necesario el uso de COMIC SANS?? :S

  8. 9 cheicallachei febrero 2, 2010 en 2:53 pm

    Esto es extraordinario. :) Vamos a probarlo para preparar prototipos de productos. Gracias.-


  1. 1 Diseñar borrador de interfaces « Bitciosos! Trackback en enero 31, 2010 en 1:19 pm
  2. 2 Evoluspencil: (Genial) GUI para crear prototipos « Ubuntu Life Trackback en junio 20, 2010 en 2:03 pm
  3. 3 Evoluspencil: (Genial) GUI para crear prototipos « alcordances Trackback en junio 22, 2010 en 12:19 am

Deja un comentario

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





The next version of Ubuntu is coming soon


¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map
enero 2010
L M X J V S D
« dic   feb »
 123
45678910
11121314151617
18192021222324
25262728293031

Blog Stats

  • 26,611,693 hits

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.034 seguidores

%d personas les gusta esto: