DISEÑO DE INTERFACES UTILIZANDO

HERRAMIENTA WEB BALSAMIQ MOCKUPS

MANUAL DE LABORATORIO Nº 9 - Diseño de Interfaces

Actividad de Proyecto: Determinar la estructura lógica del sistema.

 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Primero ingresar al siguiente sitio de internet: http://www.balsamiq.com,

para que descargue e instale la herramienta Desktop Mockups.

Cuando se instala se crea un icono en el escritorio con el nombre de

Balsamiq Moczkups. Dar clic en este icono para iniciar. Debe aparecer la
siguiente ventana:

Como ejercicio vamos a crear la siguiente interfaz:

2
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Damos clic en la pestaña llamada forms como lo indica la siguiente imagen:

Al dar clic en forms en la parte inferior aparecen muchos elementos que

podemos utilizar para crear nuestra interfaz. Debajo de esos botones hay
una barra de desplazamiento para mirar todos los elementos de la pestaña
forms.

Ahora damos clic en la Pestaña All y aparecen todos los elementos posibles
a utilizar para el diseño de la Interfaz:

Para iniciar vamos a buscar el elemento llamado Window / Dialog, para

ello utilicemos la barra de desplazamiento. Este elemento es el último.

3
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Damos clic sostenido y lo soltamos en el área de trabajo.

Al agregarse el elemento, nos aparece la opción habilitada para cambiar

el texto, como ejercicio vamos a colocar Sistema Centro Odontológico
como se encuentra en la interfaz a realizar. Al hacer los cambios ya la
interfaz se encuentra así:

4
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Ahora vamos agregar un texto para agregar el Titulo CENTRO

ODONTOLOGICO ADSI. Para ello buscamos el elemento llamado A Subtitle
así:

Damos clic sostenido y lo agregamos dentro del objeto anterior.

5
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Al agregar el elemento A subtitle modificamos el texto y colocamos

CENTRO ODONTOLOGICO ADSI.

Al cambiar y aceptar el texto nos muestra otras opciones de configuración

del subtitulo así:

Por ahora no vamos a modificar nada.

Al agregar el texto la interfaz va quedando así:

6
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Ahora vamos agregar el elemento llamado Rectangle / Canvas dentro del

elemento ventana de la interfaz, debajo del título Centro Odontológico
ADSI.

Al agregar le modificamos el tamaño, dando clic sostenido en las esquinas,

para que la interfaz quede así:

7
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Ahora vamos agregar el texto INGRESO AL SISTEMA, para ello agregamos

el elemento llamado some text dentro del rectángulo agregado
anteriormente.

Al agregar el elemento y actualizar el texto, nos salen las propiedades,

cambiemos el tamaño del texto a 20.

Después de los cambios la interfaz va quedando así:

8
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Ahora vamos agregar los textos login y password utilizando el emento

some text, cambiando el tamaño a 16 y la interfaz debe quedar así:

Para continuar con el diseño vamos agregar un elemento llamado Text/

Input al frente de login y password.

9
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Al agregar los text-input podemos ajustarles el tamaño al deseado.

Después de agregar estos elementos la interfaz va quedando así:

Para continuar ahora vamos agregar un botón y le colocamos el texto

INGRESAR. Para ello busque el elemento llamado button y agréguelo al
área de trabajo y cambie el texto.

Al agregar el botón la interfaz ha quedado así:

10
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Si deseamos cambiar las propiedades de la ventana completa de la interfaz,

damos clic en el objeto y aparecen las opciones de propiedades así:

Como ejercicio vamos a dar clic en los 3 elementos que me señala la

flecha roja para que mi interfaz también quede con esos elementos de la
ventana window de la interfaz que estamos creando.

11
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

Después la interfaz queda así:

Para terminar puede guardarlo en el formato propio de la herramienta y

exportarlo a diferentes formatos como lo muestra las opciones del menú
file de la herramienta.

12
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseño de interfaces utilizando
herramienta web balsamiq mockups

13
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje