El humano y su forma de percibir las cosas es tan complejo que se hace difícil diseñar de forma adecuada según es necesario para cada perfíl. En esta presentación nos apoyamos del libro Susan Weinsche. 100 Things Every Designer Needs to Know about People, que recopila muy buenas guías-

1. ¿Cómo ve la gente?
La vista supera a los sentidos.

2. Del libro
100 Things Every
Designer Needs to
Know about People
Susan Weinschenk, 2011

3. Las cosas juntas ¿Tienen relación?
Susan Weinsche. 100 Things Every Designer Needs to Know about People, p. 34.
Tomado de version Kindle.

4. Las cosas juntas ¿Tienen
relación?
¿A qué texto esta asociada
la imagen?
Susan Weinsche. 100 Things Every Designer Needs to Know about People, p. 34.
Tomado de version Kindle.

5. Las cosas juntas ¿Tienen
relación?
¿A qué texto esta asociada
la imagen?
Susan Weinsche. 100 Things Every Designer Needs to Know about People, p. 34.
Tomado de version Kindle.

6. Guías para el
Diseño
Interactivo 1
Si quieres que objetos (cuadros, fotos, títulos o texto) sean
percibidos como relacionados entonces hay que ponerlos
en proximidad cercana.
Antes de utilizar líneas o cajas para
separar elementos o agruparlos,
tratar de experimentar con la
cantidad de espacio entre ellos
primero. (Patrones)
A veces cambiar el
espaciado basta, y vas
reduciendo el ruido
visual de la página.
Poner más espacio entre los
elementos que no van de la mano y
menos espacio entre los elementos
que lo hacen.
Esto suena como
sentido común, pero
muchos diseños de
página Web ignoran
esta idea.

7. El rojo y el azul juntos
son difíciles para los ojos
• Falsa impresión de profundidad. Una aro
alrededor de las letras que no existe.
• El efecto es el más fuerte de rojo-azul Igual
ocurre con rojo-verde, rojo-gris, azul-gris.
• Estos colores combinados hacer difícil y
agotador la lectura.
Evitar poner:
Azul y rojo - verde y rojo cerca unos de
otros en una página o pantalla.
Evite el texto azul o verde sobre un fondo
rojo y el texto en rojo o verde sobre fondo
azul.

8. Ceguera al
color
Hay diferentes tipos de daltonismo, pero lo más
común es la dificultad de distinguir entre rojos,
amarillos y verdes. Otro problema es distinguir el
blues de los amarillos, o donde todo lo ven de
color gris, son muy raros.
El termino daltonismo es en realidad un nombre inapropiado.
La mayoría de las personas que son daltónicas no son
ciegos a todos los colores, pero en realidad tienen una
deficiencia de color que hace que sea difícil para ellos ver las
diferencias entre algunos colores. El daltonismo es
hereditario, aunque algunos pueden ser adquiridos a través
de las enfermedades o lesiones.
La mayoría de los genes de identificación de color están en el
cromosoma X.
9 % hombres es ciego al color
1.5% mujeres lo son

9. Ceguera al
color
• El termino daltonismo es en realidad un
nombre inapropiado. La mayoría de las personas
que son daltónicas no son ciegos a todos los
colores, pero en realidad tienen una deficiencia de
color que hace que sea difícil para ellos ver las
diferencias entre algunos colores. El daltonismo es
hereditario, aunque algunos pueden ser
adquiridos a través de las enfermedades o
lesiones.
• La mayoría de los genes de identificación de
color están en el
cromosoma X.
• 9 % hombres es ciego al color
• 1.5% mujeres lo son

10. ¿Qué ven?

11. Trata de
encontrar el
cuadrado,circulo
y estrella
Ceguera al color solo vemos
cuadrado, y algunos un circulo
café borroso
Recuperado de
http://colorvisiontesting.com/images/card6.gif

12. Trata de
encontrar el
cuadrado,circulo
y estrella
Normales solo vemos
cuadrado borroso, y el circulo
amarillo

13. ¿Qué hay aquí?
Recuperado de
http://colorvisiontesting.com/images/boat.gif
¿Qué hay aquí?
Recuperado de
http://colorvisiontesting.com/images/boat.gif

14. ¿Qué hay aquí?
Recuperado de
http://colorvisiontesting.com/images/boat.gif
¿Qué hay aquí?
Recuperado de
http://colorvisiontesting.com/images/boat.gif

15. Lo que ve alguien con ceguera rojo-verde
Susan Weinsche. 100 Things Every Designer Needs to Know about People, pp. 36-37.
Tomado de version Kindle.

16. Lo que ve alguien con ceguera rojo-verde
Susan Weinsche. 100 Things Every Designer Needs to Know about People, pp. 36-37.
Tomado de version Kindle.

17. ¿Qué hacer?
• Dar señales redundantes
• Color + Textura
• Escoger códigos de colores que sirvan para varios
tipos de ceguera al color.
Susan Weinsche. 100 Things Every Designer Needs to Know
about People, pp. 25. Tomado de versión Kindle.

18. Guías para el
Diseño
Interactivo 2
Revisa como ven tu sitio
personas con ceguera al
color
http://www.vischeck.c
om/
http://colorfilter.wickli
ne.org/
Si usamos el color para
indicar cosas con un
esquema redundante
Señales de alterna
Cuando seleccionemos el
código de colores,
considera colores que
sirvan para todo mundo
Variaciones de café y
amarillo
Evita rojo, verde y azul

19. Significado
de los
colores varia
por cultura
• Seleccionar colores cuidadosamente tomando
en cuenta el significado que un usuario le
pueda dar.
• Elija algunas culturas o países principales que
se pondrán en contacto con su diseño y
comprobar que está evitando asociaciones no
deseadas.
http://www.informationisbeautiful.net/

20. La psicología
del color
• La gente responde a los colores de forma
diferente
• Producen emociones
• ¿Por qué se ignora en el diseño?

21. La
psicología
del color
• Blanco
• Luz, reverencia, pureza, verdad, la
nieve, la paz, la inocencia, la
limpieza, la sencillez, la humildad,
invierno, frialdad, la entrega, el
miedo, la falta de imaginación, el
aire, la muerte (en las culturas
orientales), la vida, el matrimonio
(en el oeste de culturas), la
esperanza y blandos

22. La
psicología
del color
• Negro
• La ausencia, la modernidad, el
poder, la sofisticación, la
formalidad, la elegancia, la riqueza,
el misterio, el estilo, mal, la muerte
(en las culturas), el miedo, la
seriedad, el convencionalismo,
rebelión, anarquismo, la unidad, la
tristeza, la profesionalidad

23. La
psicología
del color
• Gris
• La elegancia, la humildad, el respeto, la
reverencia, la estabilidad, la sutileza, la
sabiduría, la vejez, el pesimismo, el
aburrimiento, la decadencia, la
decrepitud, apatía, la contaminación, la
expansión urbana, las emociones
fuertes, el equilibrio, la neutralidad, el
duelo, la formalidad

24. La
psicología
del color
• Amarillo
• La luz del sol, la alegría, la felicidad,
la tierra, el optimismo, la
inteligencia, el idealismo, la riqueza
(oro), el verano, la esperanza, el
aire, el liberalismo, la cobardía,
enfermedad (cuarentena), el
miedo, las amenazas, la
deshonestidad, la avaricia, la
debilidad, la codicia, el deterioro o
envejecimiento, la feminidad,
alegría, sociabilidad, amistad

25. La
psicología
del color
• Verde
• La inteligencia, la naturaleza, la
primavera, la fertilidad, la juventud, el
medio ambiente, la riqueza, el dinero
(EE.UU.), la buena suerte, vigor,
generosidad, hierba, la agresión, la
frialdad, los celos, la vergüenza (China),
la enfermedad, la codicia, la cultura de
las drogas, la corrupción (África del
Norte), la vida, eterno, el aire, la tierra
(elemento clásico), la sinceridad, la
renovación, la abundancia natural,
crecimiento

26. La
psicología
del color
• Azul
• Mares, hombres, productividad,
interiores, cielos, la paz, la unidad, la
armonía, la tranquilidad, la calma, la
confianza, serenidad, confianza,
conservadurismo, el agua, el hielo, la
lealtad, la confianza, la limpieza, la
tecnología, el invierno, la depresión, la
frialdad, el idealismo, el aire, la
sabiduría, la realeza, la nobleza, la
Tierra (planeta), la fuerza, la constancia,
la luz, la amistad, la paz, la sinceridad,
el amor, el liberalismo (Política de los
EE.UU.), y el conservadurismo (Reino
Unido, Canadá, y la política europea)

27. La
psicología
del color
• Violeta
• La nobleza, la envidia, la sensualidad,
la espiritualidad, la creatividad, la
riqueza, la realeza, la ceremonia, el
misterio, la sabiduría, la iluminación,
la arrogancia, extravagancia,
vulgaridad, el duelo, la exageración, la
blasfemia, la bisexualidad, la
confusión, el orgullo

28. La
psicología
del color
• Rojo
• La pasión, la fuerza, la energía, el fuego,
el sexo, el amor, el romance, la
emoción, la velocidad, el calor, la
soberbia, la ambición, el liderazgo, la
masculinidad, potencia, peligro,
vulgaridad, la sangre, la guerra, la ira, la
revolución, el radicalismo, la agresión,
el respeto, los mártires, el
conservadurismo (Política de los
EE.UU.), el liberalismo (la política
canadiense), la riqueza (China), y el
matrimonio (India)

29. La
psicología
del color
• Naranja
• Energía, entusiasmo, equilibrio,
felicidad, calor, fuego, extravagancia,
la alegría, la agresividad, la arrogancia
vulgaridad, emoción exaltada,
advertencia, peligro, otoño, deseo

30. La
psicología
del color
• Rosa
• Primavera, gratitud, aprecio,
admiración, simpatía, el socialismo,
la feminidad, la salud, el amor, el
romance, el matrimonio, la alegría,
coquetería, la inocencia y la
infancia como cualidades

31. La
psicología
del color
• Café
• La calma, la audacia, la
profundidad, la naturaleza, la
riqueza, las cosas rústicas, la
estabilidad, la tradición,
anacronismo, grosería, suciedad,
falta de brillo, pesadez, la pobreza,
la aspereza, la tierra

32. Colores,
contrastes
• Color : maximizar los contrastes
• Evitar el azul dado que disminuye la
velocidad de lectura y se confunde con una
liga.
• Los códigos de colores importantes deben
de tomar en cuenta que el 10% de la
población tiene discapacidad visual asociada
a los colores

33. Evaluador de Color y armonizador
http://colorschemedesigner.com/

34. Fondos de pantalla uniformes
• Evitar los fondos de pantalla con imágenes o texto
Colores claros, pálidos
Probar los resultados
Paginas construidas con malos fondos

35. Probar los colores en diferentes monitores
• Probar con herramientas las versiones de color
• http://gmazzocato.altervista.org/colorwheel/wheel.php

36. Colores
• Síntesis aditiva y sustractiva
• Usar Colores contrastantes
Amarillo fondo azul Amarillo fondo rojo Azul fondo blanco
Rojo fondo magenta Cyan fondo verde Azul fondo negro

37. Síntesis
Aditiva
(Modelo
RGB)
• Se refiere a la formación de los colores a
través de la suma de diferentes luces en
sus distintas longitudes de onda.
• La síntesis aditiva hace referencia a la
adición de color, considerando el blanco
como la suma de toda luz en máxima
proporción del espectro visible.
• La síntesis aditiva es la que se usa para la
separación del color y gracias a ella
podemos ser capaces de ver y
reproducir los colores de las diferentes
pantallas.

38. Hay cinco premisas fundamentales:
1.Los colores primarios aditivos
son: Rojo, Verde y Azul (RGB)
2.La suma de dos colores primarios a partes iguales origina un
color secundario:
Rojo + Verde = Amarillo
Verde + Azul = Cian
Rojo + Azul = Magenta
3.El blanco teórico se forma por la unión de los tres colores a
partes iguales con la máxima saturación posible (255), porque
con la adición (suma) de todas las luces en partes iguales se
obtiene la luz blanca (la luz blanca contiene a todos los
colores aditivos)
Rojo + Verde + Azul = Blanco Teórico
4.La ausencia de colores primarios de síntesis aditiva origina
el negro. El negro es la ausencia de luz, sin luz el ojo no
percibe color.
5.El color complementario o inverso de cada primario aditivo
se puede definir como el color que le falta a ese primario para
ser blanco:
•Rojo: su complementario es el Cian.
Verde: su complementario es el Magenta.
Azul: su complementario es el Amarillo.

39. Síntesis
Sustractiva
(Modelo
CMY)
• Se refiere a la obtención de colores por
mezclas de pigmentos. De hecho, se llama
sustractiva porque al ir añadiendo colores
pigmento, sustrae el color.
• Los colores primarios de la síntesis
sustractiva serán los colores
complementarios de la síntesis aditiva.
• Los colores sustractivos primarios (cian,
magenta y amarillo) son los que se crean
mediante la absorción de ciertas
longitudes de ondas. Cuando la luz blanca
toca un material o una superficie, los
pigmentos de colores de esa
superficie absorben todas las ondas de la
luz excepto las de sus colores, que son
reflejados y percibidos por el órgano de la
visión.

40. Existen cinco premisas básicas:
1.Los colores primarios sustractivos
son: Cyan, Magenta y Amarillo (CMY)
2.La suma de dos primarios a partes iguales origina un
color secundario:
Magenta + Cian = Azul
Amarillo + Cian = Verde
Magenta + Amarillo = Rojo
3.La suma de los tres primarios sustractivos origina el
negro. El negro (suma de los tres colores) es la ausencia de
color.
Cyan + Magenta + Amarillo = Negro
4.La ausencia de los tres primarios sustractivos origina el
blanco. El blanco (luz) contiene todos los colores aditivos,
no sustractivos.
5.El color complementario o inverso de cada
primario puede definirse como el opuesto a ese color,
como el color que le falta para ser negro.
Cian: su complementario es el Rojo.
Magenta: su complementario es el Verde.
Amarillo: su complementario es el Azul.

41. Colores
• Las mejores combinaciones de colores
Fondo
Blanco
Negro
Rojo
Verde
azul
Cyan
Magenta
amarillo
Manejo fino y texto
Azul (94%) Negro(63%) Rojo (25%)
Blanco (75%) Amarillo (63%)
Amarillo (75%) Blanco(56%) Negro (44%)
Negro (100%) Azul (56%) Rojo (25%)
Blanco (75%) Amarillo (63%) Cyan (25%)
Azul (69%) Negro (56%) Rojo (37%)
Negro (63%) Blanco(56%) Azul (44%)
Rojo (63%) Azul (63%) Negro (56%)

42. Actividad
Decidan y justifiquen la decisión del color
que van a usar para su aplicación.
Documenta en tu reporte de Proyecto.

43. ¿Cómo lee la
gente?Con las tasas de alfabetización de adultos, ya más de 80 por ciento en todo el mundo,
la lectura es una forma primaria de comunicación para la mayoría de la gente. Pero,
¿Cómo leemos? Y ¿Qué debemos saber como diseñadores sobre la lectura?
Susan Weinsche. 100 Things Every Designer Needs to Know about People, p. 34.
Tomado de version Kindle.

44. ES UN MITO QUE LAS LETRAS MAYÚSCULAS SON
POR SU NATURALEZA DIFÍCILES DE LEER
vMuchos estudios revelan que:
vLas mayúsculas son más difíciles de leer
comparado con aquellas palabras en
minúsculas o mezcladas (Mayúsculas y
minúsculas)
v14% a 20% más difícil
v¿Qué opinas?
Susan Weinsche. 100 Things Every Designer Needs to Know about People, p. 30.
Tomado de versión Kindle.

45. ES UN MITO QUE LAS LETRAS
MAYÚSCULAS SON POR SU
NATURALEZA DIFÍCILES DE LEER
• Los estudios dicen:
• Leemos por reconocimiento de formas , ya
sea de palabras y grupos de palabras.
• Una palabra en minúsculas o mezclada
tiene formas única y gracias a eso las
reconocemos más rápido.
Susan Weinsche. 100 Things Every Designer Needs to Know
about People, p. 30.
Tomado de versión Kindle.

46. ES UN MITO QUE LAS LETRAS MAYÚSCULAS
SON POR SU NATURALEZA DIFÍCILES DE LEER
• Los estudios dicen:
• Leemos por reconocimiento de formas , ya sea
de palabras y grupos de palabras.
• Una palabra en minúsculas o mezclada tiene
formas única y gracias a eso las reconocemos
más rápido.
• Las palabras en letras mayúsculas tienen la
misma forma un rectángulo de cierto tamaño.
(Son mas difíciles de distinguir)
La teoría de la forma de la palabra. James
Cattell llego con aquella idea en 1886.
Susan Weinsche. 100 Things Every Designer Needs to Know
about People, p. 30. Tomado de versión Kindle.

47. ES UN MITO QUE LAS
LETRAS MAYÚSCULAS SON
POR SU NATURALEZA
DIFÍCILES DE LEER
• Trabajos recientes de
Kenneth Paap (1984) y Keith
Rayner (1998) han revelado
que lo que nosotros estamos
haciendo cuando leemos es
reconocer y anticipar letras y
después basados en las letras
reconocemos las palabras.
Susan Weinsche. 100 Things Every Designer Needs to Know about People,
Tomado de version Kindle.

48. Leer no es tan fluido
como parece
• Tenemos la impresión que nuestros
ojos se están moviendo suavemente a
través de la página.
• Movimientos Sacadicos: movimientos
fundamentalmente voluntarios y los
utilizamos para dirigir la mirada a un
objeto que nos llama la atención. (nos
llevan de una palabra a otra).
• Fijación: los ojos permanecen
relativamente quietos durante periodos
de tiempo muy breves. (se perciben
las letras).
Susan Weinsche. 100 Things Every Designer Needs to Know
about People, p. 31. Tomado de versión Kindle.

49. Entonces, ¿Son todas las letras mayúsculas difíciles de leer?
§ Hechos:
§ Nosotros actualmente leemos las letras mayúsculas más lentamente,
pero solo porque nosotros no las vemos tan a menudo.
§ La gente percibe las letras mayúsculas como un grito.
Susan Weinsche. 100 Things Every Designer Needs to Know about People,
Tomado de version Kindle.

50. Guías para el
Diseño
Interactivo 3
La gente percibe las mayúsculas como GRITO, y no están
habituados a leerla, así que usen las mayúscula de forma
esporádica.
Nosotros usamos las letras mayúsculas para encabezados y
cuando tú necesitas llamar la atención de alguien.
Mas datos en la ciencia del reconocimiento de palabras
http://www.microsoft.com/typography/ctfonts/WordReco
gnition.aspx

51. La lectura y comprensión de
lectura son cosas muy diferentes
• ¿Entiendes lo siguiente?
El metabolismo oxidativo
de glúcidos, grasas y proteínas frecuentemente
se divide en tres etapas, de las cuales el ciclo de
Krebs supone la segunda. En la primera etapa,
los carbonos de estas macromoléculas dan
lugar a moléculas de acetil-CoA de dos
carbonos, e incluye las vías catabólicas de
aminoácidos (p. ej. desaminación oxidativa),
la beta oxidación de ácidos grasos y la
glucólisis. La tercera etapa es la fosforilación
oxidativa, en la cual el poder reductor
(NADH y FADH2) generado se emplea para la
síntesis de ATP según la teoría del
acomplamiento quimiosmótico.
Susan Weinsche. 100 Things Every Designer Needs to Know about People,
Tomado de version Kindle.

52. La lectura y
comprensión
de lectura son
cosas muy
diferentes
Si no eres químico normalmente te
cuesta trabajo entender el párrafo.
Pero no tuviste problemas para
leerlo.
La información nueva se asimila de
mejor manera cuando es
conectada a estructuras cognitivas
existentes.

53. La lectura y comprensión
de lectura son cosas muy
diferentes

54. ¿Puedes leer este párrafo?
§ Cuando tu lees tu no captas
exactamente las letras y las palabras
para luego interpretarlas. Tu anticipas
que vendrá después. Mientras más
conocimientos previos tengas más
fácil será anticipar e interpretar texto.

55. La títulos y
encabezados
son
importantes
§ Lee este párrafo
§ El Uso del color para la clasificación
es común, pero también puedes
utilizar otras características, tales
como la textura o el tipo de manejo
recomendado. Una vez que hayas
ordenado los artículos, estás listo
para utilizar el equipo. Quizás
deseas procesar cada categoría de tu
clasificación por separado. Colocar
una categoría de tu clasificación en
la máquina a la vez.

56. ¿De qué trata?

57. La títulos y
encabezados
son
importantes
§ Usa tu nueva máquina de lavado
§ El Uso del color para la clasificación es
común, pero también puedes utilizar
otras características, tales como la textura
o el tipo de manejo recomendado. Una
vez que hayas ordenado los artículos,
estás listo para utilizar el equipo. Quizás
deseas procesar cada categoría de tu
clasificación por separado. Colocar una
categoría de tu clasificación en la
máquina a la vez.

58. Lo que
recordamos
depende de tu
punto de vista
de quien escribe
• Hechos: En un estudio donde se contaba
una historia acerca de una casa y lo que se
encuentra dentro de la casa. Fue leída desde
dos perspectivas (vendedor de casas y ladrón)
por dos grupos de personas diferentes.
• La información que ellos recordaron
después de leer la historia difería
dependiendo de la perspectiva que
leyeron

59. Guías para el
Diseño
Interactivo 4
La gente es lectora activa. Lo que ellos entienden y
recuerdan de lo que ellos leen depende de su experiencia
previa, de su punto de vista mientras lee y las instrucciones
que se les da antes de leer.
No asumir que la gente recordará datos específicos de la
información que lee.
Proveer un titulo o un encabezado significativo. Es una de
las cosas importantes de las que puedes hacer.
Adaptar el nivel de lectura de su texto para tu público. Usa
palabras sencillas y menos sílabas para que tu material sea
accesible a un público más amplio.

60. Reconocimiento de formas de ayuda a personas
para identificar las letras en diferentes fuentes
• El debate constante ¿Qué
tipo de fuente es mejor con
bordes o sin bordes?

61. Reconocimiento de formas de ayuda a personas
para identificar las letras en diferentes fuentes
• El debate constante ¿Qué
tipo de fuente es mejor con
bordes o sin bordes?
Fácil de leer
por simple
Fácil de leer pues sus
bordes atraen la mirada

62. Reconocimiento de formas
de ayuda a personas para
identificar las letras en
diferentes fuentes
• Los diseñadores a usan por
diferentes propósitos:
• Estado de animo
• Diferenciar marcas
• Asociaciones
• Modernas vs Antigua
• Seriedad y formalismo
• Diversión

63. Reconocimiento de
formas de ayuda a
personas para
identificar las letras en
diferentes fuentes
• En realidad la fuente no es
factor crítico para la lectura,
nuestro cerebro puede
reconocer las letras sin
problemas gracias al
reconocimiento de
patrones.
• La A es un patrón conocido
aunque la presentemos en
formas no conocidas la
reconocemos

64. Si una fuente es difícil
de leer, el significado
del texto se va a perder
• Hechos:
• Las instrucciones pata hacer
un trabajo entregadas en
texto en formato “fácil de
leer” son consideradas más
fáciles y rápidas de hacer
comparadas con aquellas
entregadas en usando una
letra muy elaborada.

65. Guías para el
Diseño
Interactivo 5
Serif y Sans serif son iguales en términos de
acceso a la lectura, se pueden leer.
Las fuentes inusuales o muy decorativas pueden
interferir con el reconocimiento de patrones y
alentar la lectura.
La dificultad que tenemos de leer una fuente es
transmitida a la persona por lo que podemos
afectar el rendimiento de las personas.
Mas datos disponibles en
http://alexpoole.info/blog/which-are-more-
legible-serif-or-sans-serif-typefaces/