UF 6.1 Diseño de interfaz de usuario Elementos de la interfaz Diseño gráfico de interfaces

Transcripción

1 UF 6.1 Diseño de interfaz de usuario Elementos de la interfaz Diseño gráfico de interfaces Módulo 6

2 grados de interacción UF 6.1 Diseño de interfaz de usuario

3

4 grados de interacción Estilos de interacción. Agrupa las diferentes maneras en que los usuarios se comunican con el ordenador. UF 6.1 Diseño de interfaz de usuario

5 elementos de la interfaz elementos de la interfaz que ofrecen interacción - menús - barras de progreso - cuadros de diálogo - botones - listas desplegables UF 6.1 Diseño de interfaz de usuario

6 elementos de la interfaz UF 6.1 Diseño de interfaz de usuario

7 elementos de la interfaz barras de progreso UF 6.1 Diseño de interfaz de usuario

8 elementos de la interfaz UF 6.1 Diseño de interfaz de usuario

9 elementos de la interfaz botones de opción (radio button) UF 6.1 Diseño de interfaz de usuario

10 elementos de la interfaz botones UF 6.1 Diseño de interfaz de usuario

11 elementos de la interfaz menus desplegables UF 6.1 Diseño de interfaz de usuario

12 elementos de la interfaz campos de texto UF 6.1 Diseño de interfaz de usuario

13 elementos de la interfaz casillas de verificación UF 6.1 Diseño de interfaz de usuario

14 elementos de la interfaz ventanas de información UF 6.1 Diseño de interfaz de usuario

15 elementos de la interfaz sliders UF 6.1 Diseño de interfaz de usuario

16 elementos de la interfaz pestañas UF 6.1 Diseño de interfaz de usuario

17 elementos de la interfaz agenda o calendario UF 6.1 Diseño de interfaz de usuario

18 elementos de la interfaz listas seleccionables UF 6.1 Diseño de interfaz de usuario

19 elementos de la interfaz j- query.com UF 6.1 Diseño de interfaz de usuario

20 Objetivos de la interfaz: 1. Presenta los contenidos de modo eficaz 2. Facilita la navegación del usuario

21 elementos de la interfaz Requisitos Transparencia Simplicidad Identidad Equilibrio Unidad Coherencia Contraste Ayudas a la navegación

22 Los elementos de navegación sirven para: - que el usuario visite los apartados - se oriente en cada momento sabiendo donde está y no se sienta perdido Factores que permiten al usuario que se mantenga orientado: - Coherencia visual. - Jerarquia visual. - Rutas de navegación (breadcrumbs). - Enlaces visitados - Redundancia - Mapa de la aplicación. UF 6.1 Diseño de interfaz de usuario

23 Coherencia visual la consistencia del diseño es fundamental para que el usuario sepa que está en nuestra web. La consistencia se consigue con: - estructura de las páginas - gama cromática - tipografía - logotipo: ha de aparecer en todas las páginas UF 6.1 Diseño de interfaz de usuario

24 Jerarquía visual - los elementos de la esquina superior tiene un nivel jerárquico mayor - el resto de elementos son subniveles de los primeros - no debemos colocar dos menús de navegación en zonas de jerarquía equivalentes - la jerarquía visual se puede reforzar con el tamaño, el color.. UF 6.1 Diseño de interfaz de usuario

25 Rutas de navegación (breadcrumbs). - se utiliza en sistemas de contenidos con muchos niveles y mucha información. - permite al usuario saber donde se encuentra y de donde viene. Ejemplo: Inici > Llibres > Disseny > Disseny web UF 6.1 Diseño de interfaz de usuario

26 Enlaces visitados el color de los enlaces visitados es diferente de los enlaces activos UF 6.1 Diseño de interfaz de usuario

27 Mapa del sitio o Mapa Web - el mapa permite que el usuario pueda tener una visión general del contenido de la web - también le sirve para reorientarse si se ha perdido UF 6.1 Diseño de interfaz de usuario

28 Redundancia no deben haber dos opciones en una misma página que activen la misma función, porque esto desorienta al usuario UF 6.1 Diseño de interfaz de usuario

29 Elementos para el diseño Los elementos del diseño gráfico son tipografía e imagen y sus posibles relaciones organizativas. Toda estructura visible tiene forma, color y textura y está construida por puntos, líneas y superficies. Los elementos se organizan entorno a principios de composición. Los principios de la escuela Gestalt nos son muy útiles.

30 Propósitos del diseño gráfico de interfaces Crear una jerarquía visual para ver rápidamente qué es importante y qué es secundario Definir las regiones funcionales de la página Agrupar los elementos que estan relacionados, para que sea fácil reconocer la estructura del contenido

31

32 Consistencia Establecer un diseño de retícula y un estilo para ordenar texto y gráficos Aplicarlo en cada sección, para crear consistencia y reforzar la unidad del website Una parte del diseño debe ser siempre idéntica para crear consistencia

33 Ejemplo de retícula:

34

35

36 Los pasos para construir una retícula gráfica son los siguientes: 1. Establecer la reticula principal se ha de basar en el formato de la aplicación, según el dispositivo formato 3x4 para pantalla. La reticula permite establecer los módulos base o subdivisiones coherentes del espacio de la pantalla 2. Subdivisión de la pantalla. se generan los bloques diferenciados, por colores o imágenes 3 Determinación de los espacios assignados a cada elemento. Se determina la posición y el espacio ocupado por los elementos principales de pantalla (bloques de color, area de opciones, área de titulares, etc.), y posteriormente se detalla el tratamiento de los secundarios (area de texto, posición i tamaño de las imágenes, etc.)

37

38

39 Principios Gestalt Semejanza: se tiende agrupar / relacionar lo que muestra características similares o iguales y a separar lo que es diferente.

40 Contraste: Es una comparación que nos permite claramente identificar diferencias entre los elementos que tenemos en una composición. Tamaño de Color Formas

41 Mediante el contraste de elementos ordenamos los contenidos y jerarquizamos visualmente

42

43 Proximidad: se tiende agrupar / relacionar los elementos que se encuentran cerca, dentro del campo visual y apartar los que están distantes.

44

45 Cierre: se tiende agrupar / relacionar los elementos cuya posición genera una configuración simple en su conjunto.

46

47

48 Equilibrio equivalencia de pesos o fuerzas a ambos lados de un eje central imaginario.

49 Contenidos del diseño de interfaz: Códigos lingüísticos Códigos visuales tipografía iconos / esquemas imagen fija Códigos secuenciales imagen en movimiento hipertextualidad

50 Elementos 1. Imagen [ figurativa o abstracta] 2. Tipografía [texto, letras, caracteres]

51 Imagen. [persuadir, ilustrar, reforzar] Imagen. Grado de iconicidad Figurativas: se refiere a la apariencia visual de objetos reales. Abstractas: pueden ser ornamentales, explicatorias de procesos o relaciones, o simplemente expresivas.

52 Representación icónica. Uso de imágenes para facilitar la identificación y la recordación de conceptos, objetos, acciones Sirven para identificar (ej. un logosímbolo corporativo) para ahorrar espacio (ej: un menú, la señales de tránsito), para llamar la atención (señales de alerta, de error)

53 iconos similares. Imágenes visual/ análogas a la acción, objeto o concepto en cuestión. iconos como ejemplo. Imágenes que se asocian a una acción.

54 iconos simbólicos. Imágenes que representan una acción, concepto, u objeto con un nivel mayor de abstracción. iconos arbitrarios. Imágenes que poco o nada tienen que ver con la acción, el objeto o el concepto.

55 Sistema de iconos Los iconos deben mantener relación en cuanto a forma, tamaño, proporción, color Debemos reconocer la pertenencia al sistema de inmediato.

56 Tipografía Factores que hay que tener en cuenta: Tipo de letra o fuente Jerarquía Alineación Tamaño Espacio entre caracteres Interlineado Color

57 Tipografía. [legibilidad] Algunos términos: Serif remate en sus terminaciones. Sans serif letras sin remate o palo seco Altas y Bajas MAYÚSCULAS y minúsculas. Interlineado espacio entre los renglones de un texto Negrilla de trazo más grueso. Cursiva ó Itálica Inclinación del eje vertical. Alineación Colocación de los textos con respecto a un eje vertical

58

59 Tipo de letra o fuente Serif Creadas principal/ para el diseño editorial. Times New Roman Garamond Bodoni MT Baskerville Old Face Monotype Sans serif Creadas para verse en pantalla: Arial Tahoma Verdana Zurich Avant Gard

60 Reglas básicas en el uso de la tipografía Legibilidad y contraste Jerarquía de informaciones Coordinación gráfica o consistencia

61 Legibilidad y contraste Influyen factores como el interletrado, el interlineado Pero tambien el contraste texto/fondo

62

63 Jerarquía de informaciones

64 Convenciones Surgen de los medios impresos como el períodico.

65 Jerarquía Orden de lectura. *Leemos de izquierda a derecha y de arriba abajo

66

67 Coordinación gráfica o consistencia Los textos de un sistema web deben tener la misma apariencia si su nivel de jerarquía es similar (títulos, subtítulo,texto de lectura, destacado)

68

69 Alineación Aporta al orden y estabilidad del diseño

70 Alineación Aporta al orden y estabilidad del diseño

71

72 Interletrado o

73 interlineado

74 interlineado

75 Longitud de las líneas

76

77

78 Color. [significa] Amor, agresión, peligro Tranquilidad, limpieza, orden Vitalidad, dinero, naturaleza Energía, optimismo, riqueza

79 Modelos de color Cian / Magenta / Amarillo / Negro Basado en la síntesis sustractiva [la mezcla de c+m+y en su 100% da negro]. Utilizado para impresos Llamado también cuatricromía Rojo / Verde / Azul Basado en la síntesis aditiva [la mezcla de r+g+b en su 100% da blanco] Utilizado para pantalla, iluminación, video, monitores

80 Categorías del color

81

82

83 Relación entre los colores Discordantes Es la relación de choque entre los colores. Implica un alto contraste y puede ser irritante.

84 Complementarios. Aparecen como opuestos en el círculo cromático. Es el faltante en la mezcla de dos colores primarios. Esta relación produce movimiento, actividad.

85 Análogos. Tienden a estar cercanos en el círculo cromático. Esta relación entre los colores produce calma, tranquilidad.

86 Un mismo color puede percibirse de maneras distintas según la relación y la proporción que tenga con respecto a los demás.

87 Propiedades Matiz. Identidad única de cualquier color. Valor. Luminosidad del color, brillo. Saturación. Pureza o intensidad del color.

88

89 Recomendaciones para el buen uso del color Crear una paleta de colores específica. Evitar el uso de alto contraste en el tratamiento de textos, principalmente de párrafos o textos largos. No abusar del color Proporcionar el color con áreas limpias (blancas)

90 alto y ancho del diseño - diseño para pantalla - diseño multidispositivo UF 6.1 Diseño de interfaz de usuario

91

92

93 responsive design responsive design (diseño adaptativo o adaptable) técnica que consiste en adaptar la interfaz de una aplicación a los diferentes dispositivos (web, tablet, smart phone) se emplea siempre el mismo diseño, que se va adaptando al formato mediante la diagramación líquida o elementos flotantes que cambian su posición. técnicamente se lleva a cabo mediante HTML5 y las hojas de estilo CSS. UF 6.1 Diseño de interfaz de usuario

94 responsive design UF 6.1 Diseño de interfaz de usuario