INGRESO AL SISTEMA

Login:
Pasword:
Ingresar

Tutorial
DISEÑO DE INTERFACES
UTILIZANDO HERRAMIENTA WEB
BALSAMIQ MOCKUPS

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje.

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

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

para que sea descargado e instalado la herramienta Desktop Mockups.

Cuando se instala se crea un ícono en el escritorio con el nombre de

Balsamiq Mockups. Se debe hacer clic en este ícono para iniciar y debe
aparecer la siguiente ventana:

Como ejercicio se va a crear la siguiente interfaz:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 2

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Se debe realizar 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

se pueden utilizar para crear la interfaz. Debajo de esos botones hay una
barra de desplazamiento para mirar todos los elementos de la pestaña
Forms.

Ahora se da clic en la pestaña All y aparecen todos los elementos posibles

a utilizar para el diseño de la interfaz:

Para iniciar se busca el elemento llamado Window / Dialog, para ello

utilizar la barra de desplazamiento. Este elemento es el último.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 3

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Se da clic sostenido y luego se suelta en el área de trabajo.

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

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

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 4

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Ahora se agrega un texto para agregar el Título CENTRO ODONTOLÓGICO

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

Se da clic sostenido y se agrega dentro del objeto anterior.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 5

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Al agregar el elemento A subtitle se modifica el texto y se coloca CENTRO

ODONTOLÓGICO ADSI.

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

subtítulo así:

Por ahora no se modifica nada.

Al agregar el texto la interfaz va quedando así:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 6

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Ahora se agrega el elemento llamado Rectangle / Canvas dentro del

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

Al agregar se modifica el tamaño, dando clic sostenido en las esquinas,

para que la interfaz quede así:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 7

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Ahora se agrega el texto INGRESO AL SISTEMA, para ello se dar clic el

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

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

el tamaño del texto a 20.

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

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 8

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Ahora se agrega los textos login y password utilizando elemento some

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

Para continuar con el diseño se agrega un elemento llamado Text/Input al

frente de login y password.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 9

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Al agregar los text-input se puede ajustar el tamaño al deseado.

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

Para continuar ahora se agrega un botón y se coloca el texto INGRESAR.

Para ello buscar el elemento llamado button y agrégarlo al área de trabajo
y cambiar el texto.

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

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 10

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Si se desea cambiar las propiedades de la ventana completa de la interfaz,

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

Como ejercicio se da clic en los 3 elementos que señala la flecha roja para
que la interfaz también quede con esos elementos de la ventana window
de la interfaz que se está creando.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 11

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Después la interfaz queda así:

Para terminar se puede guardar en el formato propio de la herramienta y

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

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 12

Laboratorio - Diseño de interfaces utilizando herramienta web Balsamiq Mockups

Control de documentos

LABORATORIO. DISEÑO DE INTERFACES

HERRAMIENTA BALSAMIQ MOCKUPS
Centro Industrial de Mantenimiento Integral - CIMI
Regional Santander
Líder línea de producción: Santiago Lozada Garcés

Rosa Elvia Quintero Guasca

Asesores pedagógicos:
Claudia Milena Hernández N.

Líder expertos temáticos: Rita Rubiela Rincón Badillo

César Marino Cuéllar Chacón (V1)

Experto temático:
Rita Rubiela Rincón Badillo (V2)

Diseño multimedia: Luis Gabriel Urueta Alvarez

Programador: Francisco José Lizcano Reyes

Producción de audio: Víctor Hugo Tabares Carreño

Este material puede ser distribuido, copiado y exhibido por terceros si se

muestra en los créditos. No se puede obtener ningún beneficio comercial
y las obras derivadas tienen que estar bajo los mismos términos de la
licencia que el trabajo original.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 13