Estás en: Cristalab > Artículos > Prototipos, bocetos y wireframes con Balsamiq Mockups
Prototipos, bocetos y wireframes con Balsamiq Mockups
Por: Freddie +
25 de Septiembre del 2008
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.
Excelente herramienta F, no la he probado mucho porque estoy mas del lado del código que la interfaz en estos momentos, pero es realmente excelente Por:andresmaro-blog
que interesante... hay que peobarlo definitivamente, asi se facilitan las cosas Por:lagaba-blog
Yo si tengo una pregunta y es si con los 79 dolares lo puedo instalar varias veces, porque lo que quiero es poder usarlo con mi gente en el trabajo, hacemos muchos bosquejos de paginas web de clientes y con esto seguro podemos centralizar todo.
Otra cosa, ¿se puede sincronizar con subversion los archivos o es algun formato binario? Por:Daniel-blog
lo mejor de hacerlo en un cuaderno es que no necesitas nada mas que un lapiz y un papel.
ademas es mucho mas rapido q estar arrastrando componentes,
igual , lo probaré solo por curiosidad Por:eveevans
eveevans-blog :
ademas es mucho mas rapido q estar arrastrando componentes,
Es lo mismo que yo creía, pero en este caso no es así. Lo he probado con 3 proyectos ya y me resulta mucho más comodo un Mockup que un dibujo en papel. Poder copiar, pegar, escribir texto con el teclado, arrastrar cosas, etc, es genial. En un papel el maximo de reusabilidad que tienes es un borrador y redibujar encima. Por:Freddie
Parece interesante.. lo probaremos a ver que tal Por:Zguillez
anotate otro golazo viejo Freddie,
me sirve mucho la herramienta Por:aSnO
Ahh, pues esta padre, yo de hecho estaba buscando algo parecido, pero no encontre y entonces empece a crear mi propia aplicación, si a alguien le interesa la categoria esta en:
Se ve muy bien, pero esta lejos(para mí) de ser un Awesome app!. La idea es c00l, y útil, pero nada del otro mundo. Ya me daré un tiempo para probarla bien. Por:Dano
pero... Comic Sans? Comic Sans?! Dealbreaker, me rehuso a usarlo. Por:kemie-blog
Tiene muy buen aspecto, y resulta divertida.
Probandola... Por:MorphX
Dano :
Se ve muy bien, pero esta lejos(para mí) de ser un Awesome app!.
No es un AWESOME APP!!! pero si me parece bastante util, al menos como diseñador de interfaz mas que programador, ya que uno suele perder mucho tiempoo pensando en detalles de diseño antes de tener una estructura de datos armada, que siempre deberia ser primero.
Esta herramienta permite diagramar una estructura de datos en minutos, incluso la estoy orobando con el programador y con otro diseñador aqui para ver como nos ayuda a entendernos mejor en el proceso de desarrollo de las aplicaciones sencillas y complejas, para definir que hace cada parte, que lleva cada pantalla a nivel funcional (programacion) antes de pasar a diseño y al revés segun el caso, hasta el momento no hemos tenido mucho tiempo pero pinta muy bien. Por:Ramm
Descargado e instalado. Esta buenisima la aplicación.
Lapiz y papel tienen la ventaja de que puedes trazar y avanzar el proyecto cuando estes despegado del ordenador pero bueno; la verdad trabajar con mockups es mucho más limpio y facíl, sobre todo si trabajas en equipo. "no le entiendo a tu letra, ¿qué escribiste aquí?"
Pasé un proyecto que tenia en cuaderno hacia balsamiq pero ¡OH SORPRESA! no sabía que no podría guardarlo.. T.T
Screen-shot fué la única alternativa.
¡Gracias Freddie!.. exelente aplicación que formara parte de mis herramientas de trabajo. Por:hip hop mexicano
hip hop mexicano-blog :
Pasé un proyecto que tenia en cuaderno hacia balsamiq pero ¡OH SORPRESA! no sabía que no podría guardarlo.. T.T
Mantenlo abierto, compralo, insertale la licencia y listo, ya puedes guardar. Por:Freddie
ademas es mucho mas rapido q estar arrastrando componentes,
si se lo tenes que pasar a un compañero por internet vas a tener mas laburo: escanear, achicar, subir, enviar... etc etc
Interesante programita che, y rápida forma de hacerlo para varios SO Por:danyrik-blog
No la conocía, ya la descargué y la voy a probar, si me gusta la compraré de inmediato, puede ayudarme muchísimo en mi trabajo. Por:caravi
La verdad, no conocia de este programa, lo bajare e instalare, luego os dire que fueron los resultados, gracias por esta nota, superinteresante. Por:yanyan-blog
Para armar webs típicas esta bueno, pero a la hora de hacer algo loco es muy limitado...
Por ejemplo si tenes que armar una web en flash, que los botones hagan cierto efecto, conviene usar el paint antes que esto
prefiero lápiz y papel Por:lucasmoyano
Si no tienen dinero es fácil, pueden usar print-screen Por:Duilio
@Daniel-blog
No, los 79 dolares son para una licencia personal (e intransferible JOJO queria decirlo)
pero Balsamiq brinda licencias por "volumen" que te dan un descuento de hasta 45%
para mas informacion entra aqui http://www.balsamiq.com/products/mockups/desktop#buyvolume
ya habia visto la aplicacion y justo estoy haciendo mi review de ella, de verdad que es bien practica y facil de usar Por:tribak
Esta muy bueno el programa, y tengo una pregunta, ¿donde hay un manual de como hacer nuevos elementos? Por:daidalos
lo de la licencia "GRATIS" es puro cuento ya escribí como mil veces pidiendo que me dieran una con todo el rollo de software libre, freelances, etc pero nunca te responden . Ojo que lo hice en varios intervalos de tiempo desde hace año y medio y nadaaa Por:Julio -blog
Un amigo obtuvo la licencia gratis al usar el programa en una parte de su tesis de grado y mostrarlo a una audiencia de 25 personas durante la sustentación de la misma.
Solo por andar pidiendo y pidiendo yo no regalaría una licencia, y menos con el rollo del software libre, que para un desarrollador de software propietario significa: "nunca pagaría por ese programa, pero lo necesito ya".
Ahora... un aficionado al software libre debe estar dispuesto a clonar e implementar bajo una licencia libre cualquier software que le parezca necesario, tal como dije, no se trata solo de pedir y pedir sin dar nada a cambio. Por:Shorel
cual es un prototipo amores guapo y sensuales hombres Por:alejandra -blog
Lo probé y realmente está muy práctico sobre todo porque se ve que permite hacer los link y tener asi el borrador de como funciona la web Por:Nito
diseño
usabilidad
webmasters
2.0
