Bocetos y prototipos de diseño web con Balsamiq MockUps

Escrito el 12 June 2009 por Sebastián Thüer

Bocetos y prototipos de diseño web con Balsamiq MockUpsPara que la idea sobre un sitio web se materialice en un diseño hay un paso imprescindible: bocetar. El boceto, layout, o mock up es una representación visual simplificada de los elementos visuales que contendrá la página o sistema web y tiene dos objetivos bien definidos:

  • Ser el punto de partida para discutir ideas en proyectos grupales.
  • Mostrarle al cliente de forma aproximada qué elementos verá en la página web.

Tradicionalmente el primer boceto de una página suele hacerse a mano, pero con clientes y colaboradores distribuidos en todo el mundo la manera más efectiva de llevar adelante un proceso de diseño es digitalizar la maqueta y crear un prototipo de lo que contendrán las páginas web. Algo más o menos como esto:

mockup-01

Un prototipo de una página web muestra de forma organizada todos los elementos que posibilitan la interacción del usuario con la aplicación y su distribución. Como dice Dan Harrelson de Adaptative Path, el prototipo nos permite articular la funcionalidad con las sensaciones que trasmite un diseño. Debe reunir tres características:

  • Ser rápido, para plasmar las ideas tan pronto como sea posible.
  • Ser desechable, porque será discutido, revisado y rehecho varias veces.
  • Ser específico, para solucionar aquellos aspectos complejos de la interacción.

Balsamiq MockUps: Herramienta para crear prototipos

Para la realización de prototipos podemos utilizar varias herramientas: desde algo muy simple como PowerPoint hasta el propio Dreaweaver, Flash o Fireworks. Sin embargo, hay una opción específica muy recomendable por su utilidad y sencillez: Balsamiq Mockups.

mockup-03Este software funciona sobre Adobe AIR y cumple con los tres criterios que establece Harrelson: permite crear un boceto de manera realmente rápida a través de una librería de elementos; podemos modificarlo fácilmente e incluye elementos específicos que aparecen en una interfaz web como elementos de formularios, botones, distintas barras y menús de navegación, entre otros. Además, a través de la página web MockUpsToGo.net se pueden descargar más controles creados por diferentes usuarios.

Una vez descargado e instalado el programa es asombrosa la facilidad y rapidez con la que se puede desarrollar un primer prototipo gracias a 75 controles integrados en su biblioteca. Otra ventaja interesante es su simpleza: cualquier persona sin conocimientos de diseño puede emplear el programa para mostrar rápidamente cómo le gustaría que fuese una pantalla. Así un director de proyecto, programador o marketer es capaz de comunicar rápidamente sus ideas y someterlas a la discusión.

El tour de su página web nos muestra de un vistazo lo que podemos hacer con este programa: agregar controles con un clic, personalizarlos, generar un documento XML con la información e integrarlo con otras herramientas de bug tracking como Atlassian JIRA o XWiki. También podemos probarlo online o descargar una versión de prueba.

Después de una probarlo por un par de semanas la conclusión es clara: Blasmiq Mockup se vuelve casi imprescindible. Facilita el proceso de desarrollo, mejora la productividad y permite cerrar diseños con clientes sin necesidad de que vean un boceto terminado en Photoshop. No es de extrañar, entonces, que en apenas tres semanas el proyecto haya resultado rentable. Y cobrando sólo una licenciaque comienza en los 79 dólares.

Compartir:

  • Twitter
  • Facebook
  • LinkedIn
  • del.icio.us
  • Google Buzz
  • Bitacoras.com

¿Te gustó? Sé el primero en dejar tu opinión

Muy MaloMediocreNormalBastante BuenoExcelente
Tu valoración es:
Loading ... Loading ...

3 Comentarios Sobre Este Post — Agregar tu comentario

  1. Marcos (3 comments)

    # 1 June 17th, 2009

    Uh, ya me dieron ganas de probar el progamita. Salute!

  2. Javier Rincon (2 comments)

    # 2 June 26th, 2009

    Hola,

    Tiene muy buena pinta. Lo pruebo esta tarde! Gracias por el post!

    Un saludo

  3. Sebastián Thüer (153 comments)

    # 3 June 26th, 2009

    @Javier: Sí, funciona muy bien. Gracias por comentar y suerte con el programa.


2 Referencias A Este Post

  1. Bitacoras.com

    June 12th, 2009

    Información Bitacoras.com…

    Valora en Bitacoras.com: No hay resumen disponible para esta anotación…

  2. [...] Bocetos y prototipos de diseño web con Balsamiq MockUps [...]


Dejar una Respuesta