Diseo de Interfaces

Elliot Jay Stocks Eduardo Mercovich

Interfaz

Punto, rea o superficie en el que convergen dos cosas de naturaleza diferente.

Interfaz de usuario
La interfaz de usuario es el medio con que el usuario puede comunicarse con una mquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo.1

Importancia
Representa el primer punto de contacto de un usuario con la aplicacin Es el aspecto de la misma con el que estar en contacto todo el tiempo Son el punto medio entre el usuario y el objetivo

Interfaz

Funcionalidad

Interfaz

Funcionalidad Esttica Funcionalidad Esttica Usabilidad

Interfaz

Usabilidad

Medida de su utilidad, facilidad de uso, facilidad de aprendizaje y apreciacin para una tarea, un usuario y un contexto dado.

Usuario

Contexto

Tarea

Usabilidad

Proceso de Diseo
1. 2. 3. 4. Concepto Comportamiento Esttica Documentacin

1. Concepto
Investigacin
Estructura
AI Wireframe Tono y Atmsfera

Investigacin
Resolucin monitor Plugins

Desempeo

Objetivo Qu otro software usan

Experiencia Ancho de banda Conocimientos especficos

Estructura

Wireframe

Tono / Atmsfera

http://socialsnack.com/

http://www.keyhole.com.ar/

http://www.bristolarchiverecords.com/

2. Comportamiento

Navegacin Formularios Audio y video

Navegacin

http://estebanmunoz.com

Clsica - Linked

http://www.base6design.com/

Drop down

http://www.electricurrent.com/

Tabs

http://demo.yootheme.com/

Expandable - Collapsible

http://demo.yootheme.com/

Formularios
Coherentes con el diseo
Simples Previenen el error
Paso a paso Validacin de campos Ejemplos Instrucciones Marcar requeridos

You Tube

Vimeo

DailyMotion

Viddler

My Play

3. Esttica

Layout Tipografa Imgenes

Layout
Lay = disponer

Decorados Marcos Bullets Fondos Imgenes

Tipografa
Balancear arte y legibilidad La variedad no es la norma, pero no es necesariamente mala. Considerar fuentes instaladas por defecto

Fuentes instaladas por defecto en Windows

Arial Arial Black Comic Sans Courier New Georgia Impact Lucida Console Lucida Sans Unicode Palatino Tahoma Times New Roman Trebuchet Verdana MS Sans Serif

Tipografa

http://www.ff0000.com/

http://thebignoob.com/

http://www.getfinch.com/

http://www.jrvelasco.com/

http://www.fl-2.com

http://www.grafik.rs/

Imgenes
Fotografas Ilustraciones Infogrficos Iconografa

3. Entregables

Fuentes (Design Comp) Manual de Estilo

Manual de estilo
Consideraciones Generales Paleta de colores Tipografas y estilos Fotografas