1 Interacción persona-ordenador El diseño gráfico
2 Objetivos Valorar la importancia del diseño en la interfazConocer los principios, métodos y herramientas del diseño
3 Interfaz gráfica de usuarioConjunto de formas y métodos que posibilitan la interacción de un sistema con los usuarios utilizando formas gráficas e imágenes. Con formas gráficas se refiere a botones, íconos, ventanas, fuentes, etc. los cuales representan funciones, acciones e información. En inglés se conoce como Graphic User Interface (GUI).
4 Contenido Objetivos de un buen diseño de la interfazElementos morfológicos de la imagen Uso del color Técnicas de diseño gráfico Iconos Ejemplos
5 Objetivos del diseño Crear una interfaz transparenteNo obstruye el acceso El usuario tiene una buena experiencia interaccionando con el sistema La interfaz casi no es detectada
6 Objetivos del diseño ¿Cómo conseguirlos?Considerar cada aspecto con un sentido del conjunto Conjuntar el diseño funcional y el visual Los controles deben tener un aspecto acorde a su función y funcionar de acuerdo con su aspecto Cuando el diseño visual clarifica sus funciones, la interfaz resulta intuitiva
7 Elementos de la imagen Para representar algo utilizamos unos elementos que constituyen un alfabeto gráfico. Estos elementos son: El punto La línea La forma La luz El color El tiempo El tamaño El formato La composición
8 Elementos de la imagen El puntoEl elemento más simple Posee una gran fuerza atractiva como marca Su situación puede establecer los ejes básicos de la estructura Varios puntos juntos se perciben agrupados creando formas Una secuencia de puntos imprime ritmo a la imagen, creando una dirección de movimiento Ayuda a dirigir la visión del observador
9 Elementos de la imagen La líneaOrganizan el espacio Determinan ejes que delimitan zonas de atracción Pueden crear texturas, profundidad y movimiento Su dirección y grosor les da una expresividad
10 Elementos de la imagen La formaDefine una superficie con unas dimensiones dadas Formas básicas Cuadrado, triángulo y círculo Función: definir y organizar el espacio Pueden simular tridimensionalidad cuando se representan en perspectiva
11 Elementos de la imagen La luzContribuye a la composición de la escena Puede sugerir profundidad y tridimensionalidad Puede modelar formas, superficies y volúmenes Una característica importante es la tonalidad, que incide en la captación de las formas: Un tono claro parece más claro cerca de un tono oscuro y vic. Un tono claro se expande rodeado de uno oscuro Un tono oscuro se comprime rodeado de uno claro
12 Elementos de la imagen El colorCaracterísticas: Tonalidad o matiz: longitud de onda Saturación o intensidad: cantidad de blanco Luminosidad o claridad: cantidad de luz Sistemas de color: Aditivo: combina radiaciones de distinta longitud de onda Utilizado en las pantallas electrónicas Sustractivo: combina pigmentos cian, magenta y amarillo Utilizado en el papel
13 Elementos de la imagen El colorPapel del color en la imagen: Contribuye a la recreación del espacio Ayuda a simular la profundidad (sombreado) Sugiere distancia (difuminación progresiva del tono) Ayuda a dinamizar la composición por la interacción de colores Los colores claros son excéntricos y los oscuros concéntricos Los colores saturados producen un fuerte impacto y se relacionan con sensaciones dinámicas y alegres. Los colores no saturados transmiten sensaciones débiles y más sutiles Transmite “sentimientos” Hay colores cálidos y fríos, ligeros y pesados, tristes y alegres La percepción del color es subjetiva y depende de factores culturales
14 Elementos de la imagen El colorFormas de relación dinámica entre los colores: Armonía: crea una composición con variaciones cromáticas suaves y graduales relacionando colores afines Contraste: yuxtapone colores diferentes entre sí, fundamentalmente colores complementarios: Rojo-verde, amarillo-violeta, azul-naranja La composición llama fuertemente la atención Si es muy acentuado puede reducir la legibilidad al producirse vibración Es necesario conocer las relaciones cromáticas para combinar correctamente los colores
15 Elementos de la imagen El tiempoSe puede simular el paso del tiempo en imágenes fijas, organizando adecuadamente el espacio: Usando diferentes intensidades lumínicas, contrastes cromáticos, de textura, de escala... Jerarquizando los elementos representados, ordenándolos según una cierta secuencia
16 Elementos de la imagen El tamañoEl tamaño establece un peso visual y una jerarquización en cuanto al espacio ocupado por el elemento Ayuda a crear sensación de profundidad mediante la perspectiva
17 Elementos de la imagen El formatoEs la proporción del cuadro donde se muestra la imagen Debe favorecer la adaptación al campo visual humano, buscando una armonía entre las dimensiones Influye decisivamente en la composición general y le da un significado Los formatos horizontales son más estáticos Los formatos verticales y circulares son más dinámicos
18 Elementos de la imagen La composiciónEs la forma de organizar los elementos morfológicos de la imagen en el espacio que ofrece el formato Principios: unidad y claridad Se puede crear diversidad y contraste para añadir dinamismo, aunque complica la composición Hay que delimitar claramente el centro de interés, que atraerá la mirada del usuario, y que depende de la composición
19 Elementos de la imagen La composiciónAlgunas reglas de composición: La zona inferior suele ser más estática y sólida y la superior más dinámica y llamativa La zona izquierda es más estable y permite colocar pesos mayores sin desequilibrar A mayor tamaño, mayor peso compositivo
20 Uso del color El color es un aspecto muy importante de la interfazPartes de la interfaz relacionadas con el color: Persona: sistema humano visual Ordenador: presentación de información
21 Uso del color MotivaciónEl color tiene un gran impacto en la presentación de información Si se usa adecuadamente mejora la presentación Su uso inapropiado puede reducir su funcionalidad Es un componente principal de las GUI El uso de colores apropiados puede ayudar a la memoria del usuario y facilitar la formación de modelos mentales efectivos