Elementos de lógica visual, teoría del color y tipografía para realizar una Presentación Electrónica

1. Presentación con Lógica
UNACAR
Campus Sabancuy
Por: Carlos Santisbón Montes de Oca
Guía
Básica
[Entrar]
Febrero 2013

2. Guía Básica
Color
Lógica Visual
Tipografía

3. Color
Lógica Visual
Teoría
1 de 8
Es de gran importancia
Es de gran importancia
conocer la fisiología del
conocer la fisiología del
ojo humano.
ojo humano.
El ojo es nuestra ventana
El ojo es nuestra ventana
aala luz.
la luz.
Tipografía
Significado
Sensación

4. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
2 de 8
Nuestros ojos tienen tres grupos de fotorreceptores
Nuestros ojos tienen tres grupos de fotorreceptores
(Conos) sensibles al color, con sensibilidad al rojo
(Conos) sensibles al color, con sensibilidad al rojo
(580 nm.), verde (540 nm.) yyazul (450 nm.).
(580 nm.), verde (540 nm.) azul (450 nm.).

5. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
3 de 8
El ojo únicamente, es sensible
El ojo únicamente, es sensible
aala luz en el ancho de banda
la luz en el ancho de banda
de 400 nm aa700nm del
de 400 nm 700nm del
espectro electromagnético
espectro electromagnético

6. Color
Color
Lógica Visual
Teoría
4 de 8
Modelo Ocular en
Modelo Ocular en
función individual
función individual
de la sensibilidad de
de la sensibilidad de
los conos, yynuestra
los conos, nuestra
percepción
percepción
(sensación)
(sensación)
Tipografía
Significado
Sensación

7. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
5 de 8
Los 8 (ocho) colores elementales en el Sistema Cromático Humano
Primarios
Primarios
Aditivos
Aditivos
Primarios
Primarios
Substractivos
Substractivos
Colores
Colores
Acromáticos
Acromáticos

8. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
6 de 8
Síntesis Aditiva
Síntesis Aditiva
Síntesis Substractiva
Síntesis Substractiva
+
=
+
=
+
=
+
=
+
=
+
=
Ausencia de estimulación
Estimulación plena

9. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
7 de 8
Síntesis Aditiva
Síntesis Aditiva
Síntesis Substractiva
Síntesis Substractiva

10. Color
Color
Lógica Visual
Teoría
8 de 8
Círculo Cromático
Círculo Cromático
en base al color
en base al color
pigmento. (artes
pigmento. (artes
plásticas)
plásticas)
Tipografía
Significado
Sensación

11. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
1 de 4
Colores Cálidos
Colores Cálidos
Colores Fríos
Colores Fríos

12. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
2 de 4
Colores Cálidos
Colores Cálidos
Peligro, sobresalto, alarma, fuego, sangre, violencia
Acción, precaución, fuego, oro
Precaución, atención, sol, oro, pureza

13. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
3 de 4
Colores Fríos
Colores Fríos
Calma, Reposo, silencio, tranquilidad, sueño
Disponiblilidad, libertad, protección, plantas, humedad
Duelo, espiritualidad, melancolía, color de la vida

14. Color
Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
4 de 4
Otros Colores
Otros Colores
Neutralidad, objetividad, luz, espiritual
Oscuridad, muerte, profundidad
Neutralidad, indiferencia, tibieza

15. Color
Color
Lógica Visual
Teoría
Significado
Tipografía
Sensación
1 de 4
Efectos visuales:
Efectos visuales:
Nuestra percepción
Nuestra percepción
hacia los colores es
hacia los colores es
relativa.
relativa.
Un color claro parecerá más claro sobre un fondo oscuro que sobre un
fondo claro

16. Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
2 de 4
Cada color muestra
más claramente sus
características si se
coloca cercano a su
complementario

17. Color
Lógica Visual
Teoría
Tipografía
Significado
Sensación
3 de 4
Los colores pueden
Los colores pueden
influir en la
influir en la
sensasión de
sensasión de
dimensiones
dimensiones

18. Color Visual
Lógica
Teoría del color
Jerarquía
La relación de la
información selectiva
que un sujeto acepta
de su entorno.
Tipografía
Coherencia
Organización

19. Color Visual
Lógica
Teoría del color
Jerarquía
1 de 6
La atención selectiva
del sujeto está de
acuerdo a valores
jerárquicos.
Tipografía
Coherencia
Organización

20. Lógica Visual
Teoría del color
Jerarquía
2 de 6
Arriba //abajo
Arriba abajo
La prioridad de lo
superior en un plano o
espacio.
Tipografía
Coherencia
Organización

21. Lógica Visual
Teoría del color
Jerarquía
3 de 6
Grande/pequeño
Grande/pequeño
El valor de las cosas es
proporcional a su
tamaño.
Tipografía
Coherencia
Organización

22. Lógica Visual
Teoría del color
Jerarquía
4 de 6
Separado/ grupal
Separado/ grupal
Nuestra atención le da
prioridad a lo separado
del grupo.
Tipografía
Coherencia
Organización

23. Lógica Visual
Teoría del color
Jerarquía
5 de 6
Brillante
Brillante
Todo lo que brilla es
oro, celestial, fuerza.
Tipografía
Coherencia
Organización

24. Lógica Visual
Teoría del color
Jerarquía
6 de 6
Anomalía perceptiva
Anomalía perceptiva
Imagen o suceso que
rompe con un estado
normal de nuestro
entorno
Tipografía
Coherencia
Organización

25. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
1 de 3
Como el mundo se
presenta a nuestros
sentidos, creación de
imágenes para nuestra
interpretación.

26. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
2 de 3
Principio de analogía
Principio de analogía
EL pilar básico de
nuestras construcciones
visuales.

27. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
3 de 3
Ley de las espectativas
Ley de las espectativas
satisfechas
satisfechas
Coherencia formal y
funcional. Diseño
interactivo
Pulse aquí

28. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
1 de 5
El orden es una
herramienta esencial
en el diseño gráfico,
pero con presencia
creativa.

29. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
2 de 5
Proximidad
Proximidad
Relación de elementos
que por lógica deben ser
dependientes.

30. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
3 de 5
Semejanza
Semejanza
Relaciones entre
elementos, aunque estén
distantes.

31. Lógica Visual
Teoría del color
Jerarquía
Tipografía
Coherencia
Organización
4 de 5
Inclusión
Inclusión
Relaciones de formas
heterogéneas que deben
estar en un mismo
perímetro.

32. Tipografía
Teoría del color
Legibilidad
Legibilidad
La tipografía existe para
enaltecer los contenidos1
La tipografía juega un papel
doble en la comunicación:
verbal y visual
Robert Bringhurst, The elements of typographic style
1
Lógica visual
Tipos
Tipos
Atributos
Atributos

33. Tipografía
Teoría del color
Legibilidad
Legibilidad
1 de 4
Alineaciones
La márgenes definen las zonas
de lecturas y pueden aportar
una comodidad visual
Lógica visual
Tipos
Tipos
Atributos
Atributos

34. Tipografía
Teoría del color
Lógica visual
Tipos
Tipos
Atributos
Atributos
Legibilidad
Legibilidad
2 de 4
Alineaciones
Centrada
Derecha
Tipografía
Tipografía
Justificada
Izquierda
Tipografía
Tipografía
La buena tipografía
depende del contraste
visual entre los distintos
tipos de letras y entre
los bloques de texto,
títulos y espacio en
blanco circundante.
La buena tipografía
depende del contraste
visual entre los distintos
tipos de letras y entre
los bloques de texto,
títulos y espacio en
blanco circundante.
La buena tipografía
depende del contraste
visual entre los distintos
tipos de letras y entre
los bloques de texto,
títulos y espacio en
blanco circundante.
La buena tipografía
depende del contraste
visual entre los distintos
tipos de letras y entre
los bloques de texto,
títulos y espacio en
blanco circundante.
El buen uso de la
tipografía establece una
jerarquía visual que
facilita la lectura del
texto: proporcionando
interrupciones visuales
como énfasis gráficos
para entender
relaciones
El buen uso de la
tipografía establece una
jerarquía visual que
facilita la lectura del
texto: proporcionando
interrupciones visuales
como énfasis gráficos
para entender
relaciones
El buen uso de la
tipografía establece una
jerarquía visual que
facilita la lectura del
texto:
proporcionando
interrupciones visuales
como énfasis gráficos
para
entender
relaciones
El buen uso de la
tipografía establece una
jerarquía visual que
facilita la lectura del
texto: proporcionando
interrupciones visuales
como énfasis gráficos
para entender
relaciones
Margen izquierdo irregular

35. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
3 de 4
Longitud de línea
Tipografía
La buena tipografía depende del contraste visual entre los distintos tipos de letras y entre
los bloques de texto, títulos y espacio en blanco circundante.
El buen uso de la tipografía establece una jerarquía visual que facilita la lectura del texto:
proporcionando interrupciones visuales como énfasis gráficos para entender relaciones

36. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
4 de 4
Longitud de línea
Tipografía
La buena tipografía depende del contraste visual entre los distintos
tipos de letras y entre los bloques de texto, títulos y espacio en
blanco circundante.
El buen uso de la tipografía establece una jerarquía visual que
facilita la lectura del texto: proporcionando interrupciones visuales
como énfasis gráficos para entender relaciones

37. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
1 de 7
Cada tipografía aporta un
carácter propio, que debe
propiciar una armonía verbal
y visual al contenido.

38. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
2 de 7
Medios impresos
Tipografía diseñada para una
alta densidad en un espacio.
Por ejemplo, times news
roman.

39. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
3 de 7
Medios digitales
Tipografía diseñada para
evitar la fatiga visual,
cuando leemos en un
monitor.

40. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
4 de 7
Verdana
Diseñada por Matthew Carter, y
optimizada para pantalla por Thomas
Rickner.
No es sólo un «revival» de la elegancia
de las sans serif clásicas, sino un
alfabeto diseñado para un medio
específico: la pantalla.

41. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
5 de 7
Tahoma
Diseñada por Matthew Carter, y
optimizada por Tom Rickner.
Tahoma es una excelente opción en
tipografías standard para interfases,
ideal para cualquier situación donde
haya que presentar información en
pantalla

42. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
6 de 7
Georgia
Diseñada en 1996 por Matthew Carter, y
optimizada para pantalla por Thomas
Rickner.
Fue pensada para ser utilizada en
pantallas, por lo que se ajusta a la grilla de
pixeles, y tanto las formas de cada
caracter, como los distintos pesos y el
interletrado, están optimizados para tener
una correcta legibilidad.

43. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
7 de 7
Trebuchet
Diseñada por Vincent Connare en 1996,
es una sans serif humanista, optimizada
para la legibilidad en pantalla. Toma su
inspiración de las sans serif de la
década del 30 que tenían una altura de x
generosa y rasgos redondeados.

44. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
1 de 6
Los atributos se utilizan para
realizar énfasis, ayudando al
lector orientarse en el texto,
haciendo más fácil el acceso
al contenido.

45. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
2 de 6
Cursiva
Atrae por el contraste, se
utiliza para citas,
expresiones forzadas,
palabras en otro idioma.
Tipografía
La buena tipografía depende del
contraste visual entre los
distintos tipos de letras y entre
los bloques de texto, títulos y
espacio en blanco circundante.
El buen uso de la tipografía
establece una jerarquía visual
que facilita la lectura del texto:
proporcionando interrupciones
visuales como énfasis gráficos
para entender relaciones

46. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
3 de 6
Negrita
Contrasta con lo normal por
su color, aportando el énfasis
necesario para destacar.
Tipografía
La buena tipografía depende del
contraste visual entre los
distintos tipos de letras y entre
los bloques de texto, títulos y
espacio en blanco circundante.
El buen uso de la tipografía
establece una jerarquía visual
que facilita la lectura del texto:
proporcionando interrupciones
visuales como énfasis gráficos
para entender relaciones

47. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
4 de 6
Subrayado
Herencia de la máquina de
escribir, en pantalla se
puede percibir como
hipervínculo.
Tipografía
La buena tipografía depende del
contraste visual entre los
distintos tipos de letras y entre
los bloques de texto, títulos y
espacio en blanco circundante.
El buen uso de la tipografía
establece una jerarquía visual
que facilita la lectura del texto:
proporcionando interrupciones
visuales como énfasis gráficos
para entender relaciones

48. Tipografía
Teoría del color
Legibilidad
Legibilidad
Lógica visual
Tipos
Tipos
Atributos
Atributos
5 de 6
Tipografía
Mayúsculas
Es uno de los textos más
usados y menos efectivo para
poner énfasis en un texto.
LA BUENA TIPOGRAFÍA
DEPENDE DEL CONTRASTE
VISUAL ENTRE LOS
DISTINTOS TIPOS DE LETRAS
Y ENTRE LOS BLOQUES DE
TEXTO, TÍTULOS Y ESPACIO
EN BLANCO CIRCUNDANTE.
El buen uso de la tipografía
establece una jerarquía visual
que facilita la lectura del texto:
proporcionando interrupciones
visuales como énfasis gráficos
para entender relaciones

49. Bibliografía
LYNCH PATRICK, HORTON SARAH; “Manual de estilo web””, Editorial Gustavo Gili, 2ª. Edición,España 2004
HARALD KÜPPERS, “Teoría del Color” [en línea] 2001 Harald Küppers, ultima modificatión: 12/2005
[Consultada: 20 octubre 2006]. Disponible en Internet
< http://www.ipsi.fraunhofer.de/Kueppersfarbe/es/index.html>
CONNEN ANNIE, ADAM STARK PEGGIE; “Color, Contrast, and Dimension in New Design” [En línea ].
[Consultada: 26 agosto 2006] Disponible en Internet <
>
DIGITAL.COM “Legibilidad y Comprensión en la WEB: Encuentro internacional, tipografía para la vida real”.
Copyright © (bi)gital» 2001 | http://bigital.com/ [Consultada: 14 de octubre 2005]. Disponible en Internet:
<http://tpgbuenosaires.tipografica.com/workshops/apuntes/tipografia_para_pantalla.html>
Bruce MacEvoy “Modern Color: Color Vision” [en línea] Last revised 08.01.2005 • © 2005 Bruce MacEvoy
[Consultada: 16 de febrero del 2006]. Disponible en Internet en
< http://www.handprint.com/HP/WCL/color7.html#evolution>
REGIL VARGAS, Laura“Hipermadia: Medio, lenguaje herramienta del arte digital”. Revista Digital Universitaria
[en línea]. 10 de octubre de 2005, Vol. 6, No. 10. [Consultada: 11 de octubre de 2005]. Disponible en Internet:
<http://www.revista.unam.mx/vol.6/num10/art97/int97.htm>
ISSN: 1607-6079.
MARTÍNEZ - VAL PEÑALOSA, JUAN; “Introducción a la Lógica Visual” ´[en línea] Juan Val www.juanval.net
[Consultada 11 de octubre 2005] Disponible en Internet:
< http://www.imageandart.com/tutoriales/morfologia/logica_visual/>
KANDINSKY, VASSILY, “Sobre lo Espiritual del Arte” [en línea] 2000-2007 Enfocarte.com /fvp. [Consultada 17
de octubre 2005] Disponible en Internet:
< http://www.enfocarte.com/3.20/ensayo.html>

50. Presentación con Lógica
Por: Carlos Santisbón Montes de Oca
E-mail: csantisbon@pampano.unacar.mx
Gracias
UNACAR
Campus Sabancuy