Creación de Storyboards para IOS con Balsamiq Mockups

Hace poco, en un post anterior, mencionaba la importancia del  diseño como actividad destacada en el desarrollo de software antes de empezar la codificación, parte del diseño incluye la creación de prototipos gráficos conocidos como Storyboards, los cuales permiten mostrar de manera eficaz  las interfaces graficas previas del sistema, de tal forma que el cliente/usuario puede apreciar de manera temprana la funcionalidad con que contara, muy útil en estos tiempos donde las metodologías de desarrollo requieren tiempos cortos con entregables precisos. Una de estas aplicaciones es Balsamiq Mockups (BM), la cual usaremos para la creación de un sencillo Storyboard para un desarrollo en IOS.

Diseño con Balsamiq Mockups

Diseño con Balsamiq Mockups

 

Si bien BM puede utilizarse para realizar diseños enfocados a cualquier sistema operativo o plataforma  de desarrollo, sin embargo, para nuestro caso específico, nos enfocaremos en un desarrollo para iphone/ipad.

Descargar BM

Ingresar al sitio oficial, descarga la versión que mejor se adapte a nuestro equipo.  La instalación es simple, con una serie de ventanas  para su configuración.

 

Pantalla Inicial

Al ejecutar BM, se muestra una pantalla donde aparecen:

  • Una barra de aplicación (Application Bar) que incluye iconos para edición (copiar, pegar, deshacer, etc.)
  • Una biblioteca de Interfaces (UI Library) que incluye controles agrupados por categorías
  • Un lienzo para arrastrar y soltar controles (Mockup Canvas) a fin de diseñar interfaces graficas
  • Un navegador de archivos (File Browser) desde el cual podemos crear nuevos lienzos y navegar entre ellos
Pantalla inicial

Pantalla inicial

 

 Creación de Interfaces

Al echar un vistazo a la biblioteca de controles (mockups), podremos notar que existe una gran variedad para casi cualquier control utilizado en la programación real, de manera que con esta herramienta es posible realizar todo tipo de diseños: desde un navegador, una pantalla de inicio de iOS, pasando por cuadros combinados, listas desplegables, tablas, hasta ventanas emergentes, mensajes, botones y mapas de geolocalización; sin duda los limites los define uno mismo.

Interfaces creadas con Balsamiq Mockups

Interfaces creadas con Balsamiq Mockups

 Diseño a detalle

Cada control que arrastremos es modificable, es decir, tiene propiedades que pueden editarse para una mejor personalización, como ejemplo, vamos a utilizar algunos controles  partiendo de la pestaña IOS:

Pantalla IPAD

  • Arrastrar el control desde la pestaña iOS
  • Seleccionar la pantalla, a la derecha aparecerá una ventana con las propiedades de la pantalla del IPAD
  • Cambiamos la orientación de la pantalla a modo apaisado
Insertando la pantalla de un IPAD

Insertando la pantalla de un IPAD

Navegador

  • Arrastrar el control desde la pestaña Containers
  • Seleccionar el navegador, a la derecha aparecerá una ventana con las propiedades
  • Cambiamos el color de fondo
Navegador

Navegador

Para modificar el título y la dirección:

  • Doble clic sobre el navegador. Aparece una ventana con el texto A Web  Page http://
  • Cambiar el texto por Monitoreo de Sucursales http://sucursalesMX.com.
Modifiación de titulo y dirección

Modifiación de titulo y dirección

Data Grid /Table

  • Arrastrar el control desde la pestaña Text
  • Seleccionar el Data Grid, a la derecha aparecerá una ventana con las propiedades
  • Cambiamos el color del renglón y el renglón alterno
  • Seleccionamos el segundo renglón como renglón seleccionado
  • Activamos el scroll bar
  • Para modificar el contenido de la rejilla:

1.Doble clic sobre el Data Grid

2. Escribimos los nombres de las columnas separadas por una coma, donde los simbolos ^v implican opciones de ordenamiento (ascendente y descendente)

 Nombre ^, Ubicacion ^v, Seccion, Estado v

3. Escribimos los valores para cada columna separados por una coma (,), donde [x] simboliza que el estado es en línea mientras que [-] implica que el estado es fuera de línea

Sucursal 1,Ubicacion 1,Norte, [x]
Sucursal 2, Ubicacion 2, Sur, [x]
Sucursal 3, Ubicacion 3,Norte, [-]
Sucursal 4, Ubicacion 4,Oriente, [x]

Data Grid

Data Grid

datos

Edición del Data Grid

Licenciamiento

Al descargar BM, contamos con un periodo de 7 días de prueba, después de los cuales es necesario  pagar $79 USD por una licencia personal. El costo disminuye al adquirir licencias por  volumen.

Licenciamiento por volumen

Licenciamiento por volumen

Conclusiones

Como hemos podido notar, BM posee una gran cantidad de controles,  la inserción y edición de controles permite un gran nivel de personalización, permitiendo un diseño rápido de prototipos como vistas previas, aunque claro, por lo bueno, generalmente hay pagar.

 

  • Ejercicios de estimación de software