Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos...

34
Principios de Diseño Gráfico para una comunicación efectiva Nancy Sarahí Cabriales Longoria [email protected] Adriana de la Garza [email protected] minicurso

Transcript of Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos...

Page 1: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Principios de Diseño Gráfico para una

comunicación efectiva

Nancy Sarahí Cabriales [email protected]

Adriana de la [email protected]

minicurso

Page 2: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Temario

→ Conceptos básicos

→ Tipografía

→ Color

→ Enriquecer el recurso gráfico

→ Identidad Visual del Tecnológico de Monterrey

→ Links

Page 3: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Conceptos básicos

Page 4: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Simplicidad y complejidad

Page 5: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Énfasis y puntos de enfoque

Page 6: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Balance y equilibrio

Page 7: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Proporción

Page 8: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Tipografía

Page 9: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Legibilidad

→ Utiliza tipografías sans serif (sin serif o de palo seco), son las más legibles en pantalla.

Page 10: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Recomendaciones

→ UTILIZA UNA FUENTE SIN SERIFCombinala con una fuente con Serif

→ UTILIZA UNA FUENTE CON SERIFCOMBINALA CON UNA FUENTE SIN SERIF

Page 11: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Recomendaciones

→ NO ES BUENA IDEACOMBINAR DOS FUENTES SIMILARES

→ EL CONTRASTEes importante

Page 12: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Recomendaciones

→ SIMPLE Y EFECTIVOJUEGA CON LOS DISTINTOS GROSORES DE LAS FUENTES

→ USA UN MÁXIMO DE DOS FUENTES

(PERO RECUERDA, MENOS ES MAS)

Page 13: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Recomendaciones

→ Y NUNCA, NUNCA, NUNCA ESCOJAS

→ ALGERIAN→ BAUHAUS→ COMIC SANS

SI NO QUIERES ARRUINAR TU TRABAJO

* Porque restan prestigio y seriedad a tu trabajo

Page 14: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Color

Page 15: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Visibilidad

→ Según cómo combinemos fondo y textoayudaremos o dificultaremos la lectura.

→ Fondo blanco y texto negro, es la combinaciónmás visible y legible.

Page 16: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Contraste

→ Lo anterior no significa que NO podamos usarfondos y textos de colores, simplemente hay que evitar algunas combinaciones que restanlegibilidad y visibilidad, como éstas:

IDEA IDEA IDEA

IDEAIDEAIDEA

IDEA

IDEA

Page 17: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Combinaciones

→ Hay otras combinaciones, que aunque visibles y legibles, pueden causar sensación de inestabilidad e irritabilidad. Se aconseja utilizarlas con prudencia:

IDEA IDEAIDEA

Page 18: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Ornamentos sobre texto

→ Aparte de esto, conviene NO usar fondos complejos como los tipo mosaico o fondos muy ornamentados.

IDEA

IDEA

IDEA

IDEA

Page 19: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Esquemas de colores→ Algunos ejemplos de combinaciones según la regla

cromática son:

→ Complementario

Page 20: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Esquemas de colores

→ Análogos

Page 21: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Esquemas de colores

→ Tríada

Page 22: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Enriquecer el recurso gráfico

Page 23: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Recursos audiovisuales

→ Utiliza recursos audiovisuales, enriquecerás tupresentación.

Aa

Page 24: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Calidad

→ Evita utilizar recursos de baja calidad e imágenes de marca de agua.

Page 25: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Calidad

→ Algunos de los sitios que se pueden utilizar como recurso para obtener imágenes y vectores (Gráficos hechos a base de líneas, los vectores tienen la ventaja sobre los pixeles de ser escalables, es decir, se puede aumentar su tamaño conservando su

calidad original) son los siguientes:

Page 26: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

→ Con costo

→ Sin costo

Calidad

Page 27: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Calidad

→ Vector→ Imagen

Page 28: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Identidad visual del Tecnológico de

Monterrey

Page 29: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Ruta

→ Para llegar al apartado de Identidad visual, hay que seguir la siguiente ruta:

→ Mi espacio / Servicios/ De Apoyo/ Mis documentos de trabajo/ Comunicación e imagen/ Identidad Visual/ Logotipo Institucional

Page 30: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico
Page 31: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Links

Page 32: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

Para más información y novedades, consulta los siguientes links

→ desiginspiration.net(Sitio de novedades y consulta sobre varias áreas de Diseño).

→ color.adobe.com/es/create/color-wheel/(Generador de paletas de colores en base a la Regla Cromática).

→ http://www.paredro.com/tendencias-2017-la-tipografia-elemento-protagonico-en-diseno/(Tendencias 2017 en Tipografías).

Page 33: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

¿Preguntas?

Page 34: Principios de Diseño Gráfico para una comunicación … · Temario →Conceptos básicos →Tipografía →Color →Enriquecer el recurso gráfico →Identidad Visual del Tecnológico

idea.itesm.mx#IDEASenAcción

¡Gracias!