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
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 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
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 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
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 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
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 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
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je