Programación de Interfaces

Gráficas
Clase No. 2: Wireframes
Docente: Ing. Edinson Jair Mosquera Angel
Correo: edinsonjma@cotecnova.edu.co
Tel: 211-18-04 Ext 103
 ELEMENTOS BÁSICOS DE UNA GUI
• Componentes GUI (WIDGETS)
• Disposición (layout)
• Eventos
• Usuario
• Creación de gráficos y texto

Pág. 2
 COMPONENTES DEL GUI
• Contenedores
• Lienzo (clase Canvas)
• Componentes de interfaz de usuario
• Componentes de construcción de ventanas

Pág. 3
JERARQUÍA DE COMPONENTES
DEL GUI

Pág. 4
Pág. 5
Pág. 6
ELEMENTOS DE UNA VENTANA

Pág. 7
Pág. 8
 ¿QUÉ SON LOS WIREFRAMES?
• Estructura simple
enfocadas a la distribución
del contenido dentro de
una pantalla.
• Esquematización de la
interfaz.
• Orientada a "qué hace la
pantalla, no cómo se ve".
• Prototipos no funcionales.

Pág. 9
 ENFOCADOS EN QUE…
• Los tipos de información que será mostrada
• La cantidad de las funciones disponibles
• Las prioridades relativas de la información y las
funciones
• Las reglas para mostrar ciertos tipos de
información
• El efecto de los distintos escenarios en la pantalla

Pág. 10
 UTILIDAD DE LOS WIREFRAMES
• Ofrecen perspectiva basada solamente en el
contenido, olvidando el diseño de alto nivel como
colores, tipografía, imágenes, textos, etc.
• Herramienta de comunicación entre los clientes,
programadores, diseñadores y demás personas
involucradas en el proceso.
• Reducir la barrera de qué hay que hacer cuando se
tiene que sentar a implementar.
• Aumenta la productividad del proyecto disminuyendo
tiempo en análisis.
Pág. 11
CARACTERÍSTICAS

Pág. 12
CARACTERÍSTICAS
• Se utilizan en la creación de todas las interfaces digitales
(web, móviles, ATM, etc.).

Pág. 13
 Dispositivos Dispositivos
muy pequeños Dispositivos Dispositivos
pequeños medianos grandes
Teléfonos
Tabletas (≥992px) Ordenadores
pequeños (≥768px) (≥1200px)
(<768px) (≥1200px)
Las columnas
Si se estrecha el navegador, las columnas se
se muestran
Comportamient muestran verticalmente. A medida que aumenta
Siempre
o su anchura, la rejilla muestra su aspecto
horizontalment
horizontal normal.
e
Anchura
máxima del Ninguna (auto) 728px 940px 1170px
contenedor
Prefijo de las Xs Sm Md Lg
clases CSS

Pág. 14
Simples sin distracciones visuales tales
como color o imágenes.

Pág. 15
Pueden ser dibujados a mano o creados con
alguna aplicación

Pág. 16
EJEMPLO

Pág. 17
Cada panta la de una interfaz es representada
por 1 Wireframe.

Pág. 18
 SIEMPRE van acompañados de una
explicación de las zonas e interacciones.

Pág. 19
VENTAJAS

Pág. 20
• Define que quiere el cliente y cuáles son sus
objetivos.
• Las correcciones son objetivas, basadas en
contenidos y funcionalidad, no en diseño.
• Se reducen los tiempos de trabajo y gastos
involucrados e proyecto.
• Permite la comunicación fluida entre el equipo de
trabajo y el cliente.
Pág. 21
• Permiten visualizar interacciones y flujos.
• Permiten identificar problemas que puedan
presentarse más adelante.

Pág. 22
 HERRAMIENTAS PARA DISEÑAR
WIREFRAMES
Aplicaciones de Escritorio Aplicaciones Online
• Omnigraffle • Prototyper
• Visio • Hotgloo
• Axure • iplotz
• Balsamiq • Balsamiq
• Fireworks • Cacoo
• Keynote

Pág. 23
Herramienta recomendada
https://balsamiq.com/wireframes/

Pág. 24
 Actividad
Diseñar los wireframes (mínimo 5) para el desarrollo
de las interfaces del proyecto del primer corte.

Pág. 25