In Blog

Bocetos y prototipos de diseño web con Balsamiq MockUps

Escrito el 12.06.2009 por Sebastián Thüer 9 Comments

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.

9 Responses

  1. Bitacoras.com

    12.06.2009 at 4:26 pm

    Información Bitacoras.com…

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

  2. Marcos

    17.06.2009 at 6:11 pm

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

  3. Javier Rincon

    26.06.2009 at 1:31 pm

    Hola,

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

    Un saludo

    • Sebastián Thüer

      26.06.2009 at 2:16 pm

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

  4. Balsamiq Mockups, una herramienta efectiva para la creación de prototipos (mockups) de Componentes de Software | Kudos Ltda. - Blog

    01.09.2009 at 2:53 am

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

  5. Diseño web cádiz

    07.02.2011 at 4:50 pm

    Me parece una información muy importante y muy valiosa ya que nos permite conocer más sobre este tema.

  6. Diseñador Web Cádiz

    26.09.2011 at 7:26 pm

    Gracias por compartir esta clase de información, esperamos ver más

  7. Programador web Cádiz

    26.09.2011 at 7:26 pm

    Tema de Interés, gracias por la Información Sigan publicando.