Ciclo 4b:

Desarrollo de
aplicaciones móviles
DISEÑO DE INTERFACES
UTILIZANDO BALSAMIQ
 Contenido

• Introducción.
• Herramientas disponibles
• Instalación de Balsamiq.
• Práctica.
• Aplicaciones
• Referencias.
Introducción
 Bocetos y prototipos

El objetivo principal para materializar el diseño es bocetar. El boceto, layout,

o mockup es una representación visual simplificada de los elementos
visuales 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
interfaz.
 Bocetos y prototipos

Un Mockup 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 transmite un
diseño.
 Bocetos y prototipos

El boceto 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.
Herramientas
disponibles
 Herramientas para
crear prototipos

Para la realización de prototipos podemos utilizar varias

herramientas; desde algo muy simple como PowerPoint
hasta el propio Dreamweaver, Flash o Fireworks. Sin
embargo, hay una opción específica muy recomendada por
su utilidad y sencillez: Balsamiq Mockups
 Balsamiq

Este software funciona sobre Adobe AIR y cumple con los tres
criterios mencionados previamente: 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 como elementos de formularios,
botones, distintas barras y menús de navegación, entre otros.
Instalación Balsamiq
 Instalación

Primero ingrese al
siguiente sitio de internet:
http://www.balsamiq.com,
para que descargue e
instale la herramienta
Desktop Mockups.
 Instalación

Una vez descargado e instalado el programa, es asombrosa la

facilidad y rapidez con la que se puede desarrollar un primer
prototipo.

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.
 Ventajas

Rápido y fácil de aprender a usar

● Haga clic y arrastre elementos prefabricados

● Elementos de diseño necesarios para una maqueta rápida
● Herramientas de edición fáciles
● Atajos fáciles para una edición más rápida
● Importar imágenes reales
● Guías automáticas
● Comentarios, flechas y otras herramientas de etiquetado
● Guardar en PNG / XML
 Contras

● La interfaz no es muy amigable.

● Faltan algunos elementos de diseño
importantes.
● Carece de herramientas para colorear.
Práctica
 Reconociendo el aplicativo

En la primera pantalla de Balsamiq,

aparece una barra con todos los
elementos gráficos disponibles:
botones, cajas de texto, paneles,
contenedores etc. El aspecto de
estos elementos es de un dibujo a
mano alzada lo que da como
resultado final del prototipo un look
muy característico como si fuera una
copia directa de un diseño en papel.
 Interfaz de prueba

Como ejercicio práctico para

lograr el reconocimiento del
software, se puede optar por la
creación de una ventana de
autenticación.
 Exploración de elementos de
ventana

En primera instancia, se
exploran los diferentes
elementos disponibles del
menú. Para el ejercicio
propuesto se selecciona la
ventana.
 Disposición de textos

Ahora se procede a
colocar un texto
como título central de
la ventana. En el
menú aparecerá
como Subtitle.
 Organización de paneles
o regiones de la ventana

Ahora de acuerdo a los

bocetos realizados se
procede a marcar las
divisiones internas de la
ventana y poner texto
donde corresponda.
 Elementos de entrada de texto

Es importante resaltar
que cada elemento de
ventana tiene diferentes
propiedades a modificar.
Ahora se añaden los
campos de usuario y
contraseña.
 Elementos de acción

Finalmente, al agregar el
elemento Button y configurar
algunas características de la
ventana, se obtiene este
resultado.
Aplicaciones
 Características adicionales
de Balsamiq
● Esbozar rápidamente un diseño básico de un sitio
web o diseño de pantalla.
● Predispone una comunicación rápida de los planes
de diseño a su equipo y clientes.
● Permite una rápida visualización de sus ideas y
compartirlas con diseñadores y técnicos.
● Facilidad de interacción, arrastrar y soltar.
 Prototipos y mockups

El propósito de esta práctica es estudiar las etapas del

diseño de una web o una aplicación informática y
analizar cuál es el modo de proceder en un proyecto.

Además, se realizará una introducción a las principales

herramientas que un diseñador puede utilizar para
mejorar la calidad de su trabajo y de su productividad.
 Consideraciones

Al momento de desarrollar un sitio web o aplicación hay que tener en cuenta

que los elementos incluidos en esta contribuirán a la percepción que sus
potenciales usuarios tendrán de la aplicación.

Una de las primeras impresiones que causará la interfaz de usuario será

visual y por tanto resultan relevantes las características de: color, tipografía,
tamaño, entre otras que se le asignan a los elementos de la interfaz pues
esto influirá en el usuario visitante.
Referencias
[1] SENA, “Diseño de interfaces utilizando herramienta web balsamiq mockups,”
2015.

[2] José Eduardo Córcoles Tendero, Diseño de interfaces web, 2012

Webgrafia

https://thuer.com.ar/blog/2009/bocetos-diseno-web-balsamiq-mockups