llops blog

El título bien podría corresponder a una película de Disney, pero no. Balsamiq es el nombre de la empresa creada por Giamoco Peldi, y Mockups uno de sus productos. Dicha aplicación (que he descubierto a través de este artículo) sirve básicamente para crear wireframes.

Tras contactar con Peldi, me facilitó una licencia gratuita del programa, y después de probarlo durante un buen rato, lo menos que puedo hacer es escribir una review. Aunque antes de entrar en detalles sobre la aplicación, para aquellos que no estén familiarizados, voy a dedicar un apartado a explicar algunos conceptos relacionados con el mundillo de la “arquitectura web”.

Nota: Para los más puristas, me gustaría aclarar que éste no es un artículo exhaustivo sobre el tema. Los términos utilizados suelen ser muchos (wireframe, mockup, prototype, arquitectura web, blueprint, layouts… más las correspondientes traducciones al castellano) y en algún caso, el significado entre ellos es muy sutil. Así pues, para este post, daré por buenas mis definiciones “caseras”.

De wireframes y similares

En general, llamamos wireframe a un boceto que define el contenido y la funcionalidad de una web, alejándose completamente del diseño de la misma. En castellano, solemos hablar de “arquitectura web” o simplemente “arquitectura”.

Ejemplo de wireframe para una comunidad de Ikea®

Un wireframe entra (o debería entrar) en la fase inicial de cualquier proyecto web, y ayuda a que la gente implicada (programadores, diseñadores, etc) trabaje sobre un elemento común: la estructura. Al trabajar únicamente en la arquitectura, es fácil centrarse en puntos clave como la disposición de los elementos, la navegación o la funcionalidad, y nos ayudan a hacernos preguntas que si salieran en la fase gráfica o de implementación seguramente supondrían rehacer parte del trabajo. Además, al ser aprobados por el cliente, los siguientes cambios se focalizan en aspectos como gráficos o copys, pero no ya en la estructura (aunque con el cliente, donde dije digo…).
Resumiendo: un buen wireframe puede salvar muchas horas de cambios posteriores, tanto en la programación como en el diseño.

A partir de aquí, hay gente que distingue entre los wireframes estáticos y los wireframes funcionales, aquellos que permiten una navegación. A estos últimos, se les suele conocer como prototypes, mientras que el estático se aproxima más al concepto de mockup, que vendría a ser un boceto o bosquejo, sin interactividad.

Si te preguntas porqué una arquitectura debería ser navegable, has de tener en cuenta que un proyecto medio puede contar fácilmente con 30 o 40 wireframes. Al dotar de interactividad, puedes hacer un circuito lógico que facilita enormente la compresión al cliente, a colaboradores, etc.

Microsoft Visio es uno de los softwares históricos para llevar a cabo este tipo de tareas, aunque en los últimos años ha ganado muchísima fuerza Adobe Fireworks. Entre medio están los que no abandonarán jamás el lápiz y el papel, los que lo hacen todo en Photoshop… y mejor lo dejo en este punto porque el tema da para mucho :)

El programa

Balsamiq Mockups es una aplicación AIR pensada para ayudarnos a crear de manera fácil y rápida nuestros wireframes. Lo consigue a través de un sistema de drag-and-drop de componentes predefinidos. Todo es tan fácil como buscar el elemento que necesitamos (un botón, un scroll, una imagen) y arrastrarlo a nuestro canvas. En pocos minutos podemos tener nuestras pantallas definidas.

Arquitectura de un un post interior de LLops Blog hecho con Mockups.

El set de componentes es bastante amplio y, en general, podemos construir cualquier tipo de interfaz.

Una muestra de la librería.

Una vez elegido un tipo de control, podemos editar su texto, cambiar tamaño, posición… y además contamos con un panel flotante que nos da opciones específicas para cada uno:

Opciones de un ComboBox.

Una vez terminado el boceto, podemos exportar un png.

Obviamente, podemos guardar nuestro archivo original para volver a editarlo. Para ello se guarda un archivo de configuración en formato bmml, que en realidad es un xml que describe todo lo que hemos realizado.

En cuanto a la interfaz del programa, es sencilla, intuitiva y todo responde bastante bien. Se necesitan pocos minutos para sacarle todo el provecho al programa.

Ventajas de Balsamiq Mockups

Desde mi punto de vista, la principal ventaja es la productividad, o dicho de otra manera, lo rápido que se puede hacer cualquier cosa. El hecho que cuente con tantos componentes ahorra mucho tiempo “de pintar”, asemejándose más a colocar piezas de un puzzle.

Hay algunos componentes que están muy bien resueltos, y una vez que te metes a editarlos te dan un buen número de opciones.

Como manejo general, permite algunas opciones sobre los controles como agruparlos, bloquearlos o posicionarlos en función de otros componentes.

También se agradecen “detallitos” de la aplicación como su sistema de tabs para los archivos, hacer/deshacer ilimitado o búsqueda rápida de componentes.

Desventajas de Balsamiq Mockups

Curiosamente, muchos de sus puntos fuertes se pueden ver también como débiles.

Por ejemplo, la librería de componentes: el número, a pesar de ser amplio, es limitado, y no tiene porqué ceñirse a lo que buscamos. Un caso claro lo encontramos en el componente cowerflow (el famoso pase de imagenes que utiliza iTunes). Está añadido porque está de moda, pero seguramente hace un año no lo hubiera incluido. Lo mismo puede pasar con cualquier otro caso específico de nuestro proyecto. Seguramente esto se hubiera paliado con una herramienta de dibujo, pero no existe ninguna, y esto limita muchísimo.

Algunos componentes se quedan cortos en opciones.

Aunque el ajuste automático se agradece al principio, cuando trabajas con muchos controles se echa en falta un sistema más preciso de ajuste (entrar coordenadas, reglas, etc).

El canvas es dinámico, en función de lo que vas añadiendo utiliza scroll horizontal y vertical, pero no puedes fijar de entrada el tamaño del documento.

El look and feel es cachondo y cumple con el cometido de evitar que nos centremos en el diseño, pero para algunos clientes puede resultar demasiado infantil o poco profesional, y no hay (por ahora) más alternativas.

Por el mismo camino, sólo se puede elegir entre una fuente de sistema o la odiada Comic Sans.

Es imposible hacer una navegación mínima ya que no permite ningún tipo de interactividad.

Una cuestión de enfoque

Balsamiq Mockup es un muy buen programa, pero en función de tú nivel de exigencia a la hora de hacer wireframes puede quedarse corto.

Si se enfoca únicamente (que ademas ya lo indica el nombre) para hacer bocetos estáticos, para una gran mayoría de interfaces, de forma rápida y ágil, y estás contento con la estética que te proporciona, no te lo pienses dos veces.

Por contra, si hay uno o más puntos de las desventajas comentadas que consideras vitales, seguramente hay otras opciones mejores (yo estoy bastante enamorado de Fireworks)

Para acabar

Personalmente voy a utilizar Mockups. Para la gran mayoría de arquitecturas creo que me funcionará. Lo único que realmente echo en falta, y aún sabiendo que no es el enfoque de la aplicación, es que no funcione para hacer prototypes. Esperemos que Peldi siga adelante con el programa y le vaya añadiendo nuevas opciones, componentes, estilos, etc.

Si quiere probarlo, cuenta con una versión demo (que no deja guardar documentos ni exportar la imagen), pero échale a un ojo al sistema de licencias, que gracias a una estrategia bastante inteligente de Balsamiq, quizá puedas conseguir una copia completa gratuitamente.

>> Descargar Balsamiq Mockups