Diseño gráfico □ Objetivos del diseño gráfico:

Presentación del tema: "Diseño gráfico □ Objetivos del diseño gráfico:"— Transcripción de la presentación:

1 Diseño gráfico □ Objetivos del diseño gráfico:
•  Mostrar la información de forma atractiva y legible. □ La interfaz debe aportar relaciones y significado a cada elemento. •  No debe diseñarse siguiendo criterios de vistosidad o gustos personales. □ Elementos fundamentales: •  Organización perceptual de los objetos. •  Tipografía y texto utilizado. •  Color. •  Imágenes.

2 Organización perceptual de los objetos
□  ¿Cómo distribuir los objetos de una interfaz? •  Acudir a los principios psicológicos de la percepción de escenas. □  Leyes de agrupación. •  Indican cómo varios elementos se perciben conjuntamente. □ Proximidad. • Dos objetos que están juntos y alejados del resto se perciben conjuntamente. □ Similitud. • Dos objetos que comparten alguna característica perceptual tienden a ser percibidos conjuntamente.

3 Organización perceptual de los objetos (II)
□  Destino común. •   Los elementos que se mueven en la misma dirección se perciben agrupados. □  Buena continuación. •   Elementos puedan ser vistos como buenas continuaciones de otro tienden a ser percibidos conjuntamente. □  Cierre. •   Elementos que forma una figura cerrada tienden a ser percibidos como agrupados.

4 Organización perceptual de los objetos (III)
□  Región común. •   Los elementos colocados dentro de una misma región cerrada se percibirán como agrupados. □  Conexión entre elementos. •   Los objetos conectados por otros elementos tienen a verse de forma agrupada. □  Cuantos más principios de agrupación se apliquen coherentemente, más facilidad habrá para que el usuario la perciba.

5 Organización perceptual de los objetos (IV)

6 Organización perceptual de los objetos (V)
□ Además la organización perceptual debe estar supeditada a la forma en la que el usuario lleve a cabo la tarea sobre la misma.

7 Organización perceptual de los objetos (VI)

8 Texto □ Es necesario cuidar: Tipo de fuente tipográfica
•  El lenguaje utilizado. •  La legibilidad del texto. Tipo de fuente tipográfica Tamaño de la fuente (cuerpo). Color de la fuente.

9 Fuente tipográfica y cuerpo
□  La fuente determina el carácter del documento. □  Dos grandes grupos: •  Sin serifa (SansSerif). Familas tipo helvética, arial, etc. •  Con serifa (Serif). Familias tipo Times.

10 Fuente tipográfica y cuerpo (II)
Letras con serifa y sin serifa El último valor seleccionado de fuente debe ser siempre 'serif' o 'sans-serif'. Estas dos son las familias principales de fuentes que existen. La familia 'serif' hace referencia a las fuentes de imprenta, que tienen un pequeño adorno o 'serifa' en los extremos. Times, Georgia y Times New Roman son ejemplos de este estilo de letra que tiene unas connotaciones más clásicas y formales. La familia 'sans-serif' está formada por todas las letras llamadas 'de palo', con un trazo más limpio y sin adornos. Por ejemplo, Arial, Helvetica y Verdana. Parece ser que los usuarios prefieren en formato papel las fuentes 'serif' porque facilitan la lectura de los textos largos. Sin embargo, la mayoría de sitios web están optando últimamente por las fuentes 'sans-serif' porque son más agradables de leer en pantalla y admiten mejor una reducción de tamaño hasta 8 o incluso 7 puntos. Después existe una tercera familia principal de fuentes que son las llamadas 'informales' o 'de fantasía'. Su uso entraña riesgos ya que no se puede asegurar que se vayan a encontrar en el ordenador de los visitantes de las páginas web. Para crear una página con una tipografía informal la opción más segura es usar la fuente Comic Sans.

11 Fuente tipográfica y cuerpo (II)
□  El número de fuentes no debería pasar de tres o cuatro. •  La inclusión de un nuevo tipo de fuente debe estar justificada. * Titulares, resaltar alguna característica de la interfaz. □  Es necesario seleccionar una fuente como principal (para el texto común) y mantenerla a lo largo de la interfaz. •  En la elección de la fuente principal primará la legibilidad y el público a quien está dirigida la apliación. □  Evitar los estilos de fuente (negrita, cursiva) a no ser que se desee algún efecto concreto. •  Descartar el subrayado para destacar algo (está muy asociado a los enlaces). •  Evitar los tipos de letra en relieve.

12 Fuente tipográfica y cuerpo (III)
□ Relación anchura de la letra y grosor del trazo. □ Espaciado entre líneas: •  Mayor que el espacio entre palabras. □ Justificación del texto. •  A la izquierda, mejor que justificado y, sobre todo, que centrada (salvo para titulares de una línea).

13 Fuente tipográfica y cuerpo (IV)
□  En aplicaciones Windows (especificaciones de la guía de estilo The Windows User Experience. •  Para Windows 98, NT 4.0. * Fuente predeterminada Ms SansSerif de 8 puntos. •  Para Windows 2000. *Tahoma de 8 puntos. Es la que utiliza la mayor parte de los elementos de la interfaz. * Proporciona mayor legibilidad y capacidades de internacionalización. □  En Windows XP: •  Franklin Gothic Médium para titulares con un tamaño mayor de 14 puntos. •  Tahoma de 8, 9 u 11 puntos como fuente del sistema. •  Verdana de 8, puntos en negrita para barras de títulos de paletas flotantes. •   Trebuchet MSde 10 puntos en negrita para los títulos de las ventanas.

14 Fuente tipográfica y cuerpo (V)
□ Tipografía en Windows XP.

15 Color de la fuente □ También determina la legibilidad de la información. □ Se debe utilizar un buen contraste entre el color de fondo y el de primer plano. •  Contraste no demasiado elevado y de colores complementarios: negro sobre gris, blanco sobre azul. •  No utilizar colores opuestos: rojo sobre verde, azul sobre amarillo. •  El contraste elevado puede servir para destacar la información, pero no para el texto principal. □ Colores de los enlaces. •  Diferenciar los enlaces no usados, los enlaces activos, los enlaces visitados.

16 Estilo de escritura □ Usar un estilo escueto, claro, directo y evitar redundancias o ambigüedades. □ Cuidar la cantidad de texto en pantalla. •  La lectura de texto electrónico es un 25% más lenta que la lectura en papel. •  El lector de texto electrónico ojean más que leen. •  Evitar los textos de mucho más de una pantalla: los usuarios rechazan el scroll. □ Textos largos bien estructurados. •  Importancia de los titulares.

17 Estilo de escritura (II)
□ Uso de mayúsculas. •  Las letras mayúsculas tienen peor legibilidad de que las minúsculas. •  Evitarlas sobre todo en tipografías decorativas. Utilizar las normas de capitalización habituales. Si "Actualizar controlador de impresión" o "Actualizar controlador Postcript". No "Actualizar Controlador de Impresión" o "Actualizar Controlador Poscript".

18 Estilo de escritura (III)
□ Signos de puntuación: •   Utilizar puntuación normal en textos largos introductorios. •   Las opciones de menú, elementos de listas, casillas de verificación no llevan puntuación final. •   Los titulares (títulos de ventanas, paneles), no llevan puntuación final. •   Los puntos suspensivos se utilizan en opciones de menú o botones que no conlleven una acción directa.

19 Color □  Componente clave en los elementos que constituyen una interfaz. □  Permite resaltar información relevante. •   Es necesario emplearlos con criterios de comunicación. s Su elección debe corresponderse con el deseo de destacar algún elemento (error, opción inaccesible, opción activa, etc…). * Recurrir siempre al mismo sistema de colores para destacar el mismo aspecto. □  Hay que tener en cuenta los problemas físicos en la percepción de colores. □  Elegir colores de contraste adecuado. Postefectos del color. •  Cuando se mira fijamente y durante algún tiempo el color rojo, se producen imágenes en verde. •  Cuando se utilizan letras de color azul sobre fondo amarillo se capta la atención del usuario, pero es posible que las letras no se vean.

20 Color (II) □ Guía de estilo para la elección de colores:
•   Elegir combinaciones de colores compatibles. Evitar rojo-verde, azul-amarillo, verde-azul, rojo-azul. •   Usar contrastes altos de color entre la letra y el fondo. •   Limitar el número de colores a 4 para los novatos y a 7 para los expertos. •   Usar azul claro sólo para las áreas de fondo. •   Usar el blanco para la información periférica. •   Usar códigos redundantes (formas además de colores); de 6 a 10 por ciento de los varones tienen algún problema de visión del color. □   Para la pantallas de visualización de datos •   La luminosidad disminuye en este orden: blanco, amarillo, cian, verde, magenta, rojo y azul. •   Usar blanco, cian o verde sobre fondos oscuros. •   Para vídeos inversos usar negro, rojo, azul o magenta. •   Evitar colores muy saturados.