principios de diseño gráfico para una comunicación … · temario →conceptos básicos...
TRANSCRIPT
![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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/5.jpg)
É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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/26.jpg)
→ 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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/28.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/29.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/30.jpg)
![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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/31.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/32.jpg)
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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/33.jpg)
¿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](https://reader035.vdocuments.mx/reader035/viewer/2022070613/5ba7f0d509d3f20c5f8bc1fe/html5/thumbnails/34.jpg)
idea.itesm.mx#IDEASenAcción
¡Gracias!