ELEMENTOS GRÁFICOS Filete - Diagrama - Glifo - Tabla

Eva Fortuño / Núria Viñas

FILETE

Elemento gráfico que asimila la trayectoria de una línea (suce-sión contínua de puntos trazados). Su presencia crea tensión y afecta al resto de elementos junto a él.

Uso:- Funcional. - Ornamental.

Útiles para:- Dotar al diseño de atractivo.- Aligerar o reforzar la estructura de la maqueta.

Pueden cumplir la función:- Diferentes tipos de línea.- Encuadres.- Diferentes elementos geométricos.

* Estos elementos deben ser utilizados con sentido para reforzar la estructura del contenido y cumplir nuestro objetivo de diseño.

Podremos utilizar una gama amplia de distin-tos grosores, estilos o colores.

FILETE

1. Los filetes deben establecer una relación con la tipografía utilizada en la página así como con el diseño general.

2. Buscar elementos que se unifiquen o apoyen en la utilización de características comunes (p.ej: utilización de similares grosores de línea), y posteriormente romper con otras pautas visuales, de forma que el interés visual se vea acrecentado por esa creación de un esquema rígido y posteriormente el rompimiento del mismo.

3. Limitación del uso de diferentes grosores. Exceso de variedad > Resultado nefasto y caótico.

4. Crear contrastes evidentes cuando utilizamos diferentes tipos de líneas y grosores > Eliminar ambigüedades que pueden denotar incoherencias del diseño.

CONSEJOS PRÁCTICOS

"We Are The Friction"Various. Designers:Jez Burrows and Lizzy Stewart.

Buen uso del filete en la estructuración de los múltiples elementos que aparecen en la cubierta.

"The Mealings"Samuel Mealing & Leesa Mealing.Web developer and digital designer.

Uso de distintos grosores en el filete que ayudan a diferenciar partes distintas del contenido de la web.Utilización del mismo grosor para dis-tinguir elementos dentro de un mismo apartado

Identidad corporativa: Menú y tarjetas

Uso de un mismo grosor de filete para enmarcar el contenido y reforzar la es-tructura de la maqueta.

Artículo "Remember That Duck"

Uso de filete con la intención de separar los gráficos explicativos del texto princi-pal. Contraste marcado en la utilización de distintos grosores.

Utilización sutil de un mismo grosor de filete para diferenciar distintos elemen-tos que conforman la página.

Póster Native Resorts

Uso sutil de filete para destacar el título de un poster en relación a todo el conte-nido. También apreciamos el filete como separador del pie de póster, el cual sepa-ra la información adicional.

Uso del filete como elemento que refuerza una identidad o logo.

Uso del filete como elemento de unión en-tre elementos relacionados entre sí. De este modo se crea una diferenciación clara en relación a toda la información que en-contramos alrededor.

DIAGRAMA

Dibujo o representación gráfica que relaciona conceptos, pa-labras clave o imágenes mediante distintos elementos gráficos con la finalidad de explicar un suceso o proceso por sí mismo.

Uso:- Funcional.

Útiles para:- Resolver un problema.- Mostrar la disposición interior de un objeto.- Mostrar los cambios de un determinado fenómeno.- Mostrar las relaciones entre las diferentes partes de un conjunto o sistema.

DIAGRAMA

1. Utilizar distintas variantes y tamaños de las tipografías para poder crear jerarquías.

2. El uso de distintos colores también ayuda a tener un resultado más entendible y atractivo para nuestro usuario.

3. Es importante la utilización de diferentes elementos gráficos para reforzar las relaciones que se establecen dentro de un diagrama.

4. Si un diagrama va acompañado de textos, es importante que éstos se integren y adapten con el diagrama consiguiedo un equilibrio.

5. Mantener un orden y coherencia en los distintos elementos que conforman el diagrama.

6. Evitar las flechas y relaciones excesivas que crean relaciones confusas y que se superponen las unas con las otras.

CONSEJOS PRÁCTICOS

Uso óptimo del color como ayuda para crear distintos niveles de lectura y je-rarquía. Los distintos usos tipográficos (tamaños, bold, etc.) refuerzan el enten-dimiento del diagrama.Los distintos elementos gráficos que crean las relaciones están mu bien em-pleados: líneas más gruesas para las re-laciones directas y líneas discontínuas o más sutiles para las relaciones comple-mentarias.

Óptima integración y adaptación entre la tipografía y los distintos elementos grá-ficos. El uso de colores facilita la com-prensión y distribución del diagrama aludiendo a sus diferentes apartados o secciones.

Óptima integración y adaptación entre la tipografía, los distintos elementos gráficos y ilustracio-nes esquemáticas.Composición interesante debido a la inclinación de algunos ele-mentos y la perfecta combina-ción con los todos los elementos.

Diagrama con un uso mínimo de la tipo-grafía. Relaciones simples y directas en-tre los distintos elementos.

Diagrama de flujo complejo pero claro gracias al buen uso de un código gráfico concreto, creando así distintas relacio-nes jerárquicas.

Combinación del diagrama e integración con una ilustración. Simple y entenedor.

Relaciones muy complejas, pero buena resolución gracias al uso variado del color.

GLIFO

En tipografía, un glifo es cualquiera de las formas concretas que se da a los símbolos individuales que componen una fuente. En ese sentido, un glifo es una realización concreta de un carácter, de un número, de un símbolo decorativo o matemático, etc..

CONSEJO

Uilizar tipografias con el mayor número de glifos posible para una mejor estética de la composición tipográfica.

GLIFO

A B C Ç D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z

a b c ç d e f g h i j k l m n ñ o p q r s t u v w x z

1 2 3 4 5 6 7 8 9

. : , ; ´ ` ¨ - ^ + * } [

GLIFOSAdobe Garamond Pro

a à

a àa a aa a a

1 carácter

1 carácter

3 glifos

1 carácter

2 glifos

1 glifo

CARÁCTERS

GLIFOS

En una misma fuente, un mismo carácter puede tener asignado más de un glifo, siendo cada uno de ellos una variante de dicho caracter. Esa es la diferencia entre carácter (entendido como cual-quier símbolo de la comunicación escrita) y glifo.

DIFERENCIA ENTRE CARACTER Y GLIFO

fi fl fj

f i f l f j 2 glifos

1 glifo 1 glifo 1 glifo

2 glifos 2 glifos

Un glifo también puede integrar varios caracteres, como ocurre en las ligaduras ornamentales. Es una unidad gráfica.

CONSEJOS

Utilizar tipografias dotadas de ligaduras y con el mayor ç número de glifos posibles para textos para facilitar y hacer más fluida la lectura de textos largos.

Crear un nuevo glifo cuando dos carácteres tipográficos se pueden unir para obtener una mejor legibilidad. (ligadura)

GLIFOS/ LIGADURAS

TABLAS

Las tablas permiten acomodar una gran cantidad de datos en un espacio reducido, lo que facilita su visualización; muestran valores numéricos exactos y los datos se presentan de una manera ordenada por medio de columnas y filas.

Por lo general las tablas exponen datos cuantitativos, pero en algunas ocasiones, se emplea un tipo de tabla compuesta por palabras que exponen comparaciones cualitativas.

TABLA

Combinación entre gráficosy tablas.

Mostrar entre 3 y alrededor de 20 datos.

CONSEJOS

Los valores redondeados pue-den mostrar patrones y excep-ciones de manera más clara que los valores precisos.

EncabezadoEl encabezado debe ser breve y no tener una tamaño mayor al ancho de la columna que abarca.Se pueden utilizar abreviaturas, símbolos es-tándar para términos no técnicos (% para por ciento) y para estadísticos (DE y X2).

CONSEJOS

El lector puede comparar con mayor facilidad los números a lo largo de una columna que transversalmente en una fila.

CONSEJOS

Los totales de columna y fila pueden propor-cionar una ayuda visual que permita que el lector revise los datos con facilidad.ç

CONSEJOS

Distinguir claramente cuando el valor de una celda es cero (0). Y si una celda debe de que-dar vacía, se inserta un guión o raya en esa celda.