You are on page 1of 13

DISEO DE INTERFACES UTILIZANDO

HERRAMIENTA WEB BALSAMIQ MOCKUPS

MANUAL DE LABORATORIO N 9 - Diseo de Interfaces


Actividad de Proyecto: Determinar la estructura lgica del sistema.

Diseo 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 - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo de interfaces utilizando


herramienta web balsamiq mockups

Damos clic en la pestaa 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 pestaa
forms.

Ahora damos clic en la Pestaa All y aparecen todos los elementos posibles
a utilizar para el diseo 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 - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo 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 opcin habilitada para cambiar


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

4
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo 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 - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo 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 configuracin
del subtitulo as:

Por ahora no vamos a modificar nada.


Al agregar el texto la interfaz va quedando as:

6
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo de interfaces utilizando


herramienta web balsamiq mockups

Ahora vamos agregar el elemento llamado Rectangle / Canvas dentro del


elemento ventana de la interfaz, debajo del ttulo Centro Odontolgico
ADSI.

Al agregar le modificamos el tamao, dando clic sostenido en las esquinas,


para que la interfaz quede as:

7
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo 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 rectngulo agregado
anteriormente.

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


cambiemos el tamao del texto a 20.

Despus de los cambios la interfaz va quedando as:

8
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo de interfaces utilizando


herramienta web balsamiq mockups

Ahora vamos agregar los textos login y password utilizando el emento


some text, cambiando el tamao a 16 y la interfaz debe quedar as:

Para continuar con el diseo vamos agregar un elemento llamado Text/


Input al frente de login y password.

9
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo de interfaces utilizando


herramienta web balsamiq mockups

Al agregar los text-input podemos ajustarles el tamao al deseado.


Despus de agregar estos elementos la interfaz va quedando as:

Para continuar ahora vamos agregar un botn y le colocamos el texto


INGRESAR. Para ello busque el elemento llamado button y agrguelo al
rea de trabajo y cambie el texto.

Al agregar el botn la interfaz ha quedado as:

10
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo 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 seala la


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

11
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo de interfaces utilizando


herramienta web balsamiq mockups

Despus 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 - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

Diseo de interfaces utilizando


herramienta web balsamiq mockups

13
FAVA - Formacin en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje