DISEÑO DE INTERFACES UTILIZANDO HERRAMIENTA WEB BALSAMIQ … · FAVA - Formación en Ambientes Virtuales de Aprendizaje Diseño de interfaces utilizando herramienta web balsamiq

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.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

Diseño de interfaces utilizandoherramienta web balsamiq mockups

SENA - Servicio Nacional de Aprendizaje

2

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:


Diseño de interfaces utilizando herramienta web balsamiq mockups


3

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.




4

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í:




5

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.




6

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í:




7

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í:




8

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í:




9

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.




10

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í:




11

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.




12

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.




13

Documents

DISEÑO DE INTERFACES UTILIZANDO HERRAMIENTA WEB BALSAMIQ … · FAVA - Formación en Ambientes Virtuales de Aprendizaje Diseño de interfaces utilizando herramienta web balsamiq