Guia para la elaboracion de un crucigrama unidad arquitectura y diseno grafico
Diseno grafico dojo_v1
51
Transcript of Diseno grafico dojo_v1
Diseño Grafico de Interfaces de Usuario
Tres puntos de vista:
§ Usuario: visión personal del sistema, diferente y compleja de gestionar
§ Programador: necesidad de encajar “piezas”
§ Diseñador: mezcla necesidades à Deseos del usuario & Recursos del programador
Intermediario entre usuario y programador
Diseño Grafico de Interfaces de Usuario
Calidad de interfaz à éxito
o fracaso
Se diseña para los usuarios
UI bien diseñada:
capacidad de seducir al usuario
comodidad en la
navegación usuario
encuentra lo que busca
UI mal diseñada
incómoda a la vista
compleja en el uso
no se encuentra información
usuario se siente responsable!!!
El diseñador se encarga de
§ Presentación: captar la atención inicial del usuario prevalece la interacción (facilidad de uso) del producto abuso de presentación (colores, tipografías) contraproducente
§ Interacción: necesidad de conocer dispositivos y características enorme diferencia entre dispositivos (PC, tablet, móviles…)
§ Metáfora: que significa cada elemento y sus implicaciones ejemplo: escritorios, agendas…
Modelo del diseñador : look-‐and-‐fell – IBM 1992
El porcentaje es acorde a la realidad del mercado???
principios
Principios para el diseño de UI
Anticipación: a las necesidades del usuario
cómo va a buscar la información cómo invoca las funciones cómo interactúa con el sistema
Percepción del color: el color comunica
cuidado con el abuso problemas con el contraste diferencias entre monitores y dispositivos máximo 3 a 5 colores
+ 5 colores à distracción, poco profesional
Estructurar la información
Pruebas preliminares
Principios para el diseño de UI
Valores por defecto
usar convenciones estándares en función del dispositivo formularios, ventanas, ayudas…
Consistencia gráfica
usuario se familiariza rápidamente interpretación rápida del significado de los elementos inconsistencia à pérdida de referencias visuales
Distintas versiones
Principios para el diseño de UI
Productividad del usuario delante de productividad maquina
más importante facilidad de uso que “eficiencia implementación”
usuario desubicado à pérdida de tiempo inestimable
Ley de Fitt
“modelo del movimiento humano que predice el tiempo necesario para moverse rápidamente desde una posición inicial hasta una zona destino final como una función de la distancia hasta el objetivo y el tamaño de éste”
elementos grandes para funciones importantes
Principios para el diseño de UI
Interfaces explorables
seguimiento fácil de interfaz breadcrumbs à migas de pan
Uso de metáforas
constituyen figuras mentales fáciles de recordar asociaciones modelo mental a concepto visual
Colores en el diseño
Es un elementos subjetivo
Colores en el diseño
Son del mismo color las celdas A y B?
Colores en el diseño
Son del mismo color las celdas A y B?
Colores en el diseño
Difícil de representar
§ En papel, según tipo: brillo, mate, mantel…
§ En pantalla: CRT, Marcas, Configuración
§ Luz externa
Como representas el color fluorescente???
Colores en el diseño
Modelos de color
§ RGB (Red, Green, Blue) 0.0.0: Negro 255.255.255: Blanco 255.0.0: Rojo 0.255.0: Verde 0.0.255: Azul
§ CMYK (Cyan, Magenta, Yellow, Key)
Colores en el diseño
RGB & CMYK
blue
red green
Colores en el diseño
Logotipos e imagen de marca como referencia
Las marcas registran colores à hacer uso de RGB, CMYK. Elegir el color adecuado à aumenta el reconocimiento de marca Hacer uso del significado à en función de lo que se desee vender Hacer uso de combinaciones adecuadas
1. Definir la gama de colores 2. Escoger color de fondo à ante la duda blanco 3. Seleccionar colores texto à contraste con fondo 4. Logotipo y títulos debe contrastar con el resto del
contenido
Uso de tipografías
conbinaciones serif y sans serif para obtener contraste textos largos: serif textos cortos, títulos: sans serif (más margen de uso) no más 3 tipos diferentes
Tendencia a tipografias grandes
Legibilidad no es una opción, es una NECESIDAD
Posibles combinaciones
Helvetica / Garamond Caslon / Univers Frutiger / Minion Futura / Bodoni Garamond / Futura Gill Sans / Caslon Minion / Gill Sans Univers / Caslon Bodoni / Futura Myriad / Minion Avenir / Warnock Caslon / Franklin Gothic FF Din / Baskerville Trade Gothic / Clarendon Baskerville / Univers Akzidenz Grotesk / Garamond Clarendon / Trade Gothic Franklin Gothic / Baskerville Warnock / Univers
Formatos gráficos
Vectoriales SVG, EPS, PSD, AI, CDR, FH11, TIFF, WMF, PNG…
Mapas de bits BMP, JPG, GIF, PNG…
JPG con perdida (60%): 22 KB Sin pérdida: JPG: 133 KB
PNG: 162 KB BMP: 549 KB
Formatos
proceso
Proceso
herramientas
Wireframe and Mockup
Gliffy Pidoco ProtoShare HotGloo
Wireframe and Mockup
ProtoShare Tour -‐ http://www.protoshare.com/tour/ (video)
Diseño gráfico
evolución
Evolución diseño web
Evolución diseño web
Donde ha quedado flash ???
Evolución diseño web
