DISEÑO UX/UI

Clase 21
Color en el diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 20
Illustrator y Moodboard
● Repaso de mapa de bits
● Illustrator
● Trabajo con vectores
● Moodboard
● Armado de moodboard
● Tarea para el Proyecto
Final
Clase 21 Clase 22
Color en el diseño Tipografía
● Principios básicos ● Tipos de tipografía
● Psicología del color ● Familias tipográficas
● Esquemas y paletas de ● Jerarquías tipográficas
colores ● Legibilidad
● Herramientas ● Tarea para el Proyecto
● Tarea para el Proyecto Final
Final
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Mi-Fi Visual y Contenido

Hi-Fi Visual y Contenido

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

Wireframe Digital

Atomic + Guidelines + Grillas

Color
¿Qué es el color?
El color es la impresión producida por un tono de luz en los órganos visuales, o más
exactamente, es una percepción visual que se genera en el cerebro de los humanos y
otros animales al interpretar las señales nerviosas que le envían los fotorreceptores
en la retina del ojo, que a su vez interpretan y distinguen las distintas longitudes de
onda que captan de la parte visible del espectro electromagnético.

Todo cuerpo iluminado absorbe una parte de las ondas electromagnéticas y refleja las
restantes. Las ondas reflejadas son captadas por el ojo e interpretadas en el cerebro
como distintos colores según las longitudes de onda correspondientes.
La luz blanca puede ser descompuesta en todos los colores del espectro visible.
En la naturaleza esta descomposición da lugar al arcoíris.
Tema: Color

Cada color tiene numerosos significados asociativos y

simbólicos. Por ello, el color nos ofrece un enorme vocabulario
de gran utilidad en la alfabetidad visual.

Autor/as/es: Donis A. Dondis

Definiciones de color
● Color: Sensación originada en la acción de las radiaciones cromáticas de los
cuerpos o sustancias reflejantes sobre los receptores fisiológicos y los centros
cerebrales de la visión. Según la teoría ondulatoria de la luz, percibimos las
distintas longitudes de onda como diferencias de colores.

● Color Cálido: Se refiere a las radiaciones del espectro luminoso que presentan
las máximas longitudes de onda (rojo, naranja, amarillo) que producen una
reacción subjetiva percibida como temperatura.

● Color Frío: A diferencia de los llamados cálidos, los colores fríos se sitúan en el
sector del espectro correspondiente a las longitudes de onda mínimas,
identificándose en la percepción visual con sensaciones de temperatura,
opuestas a la de los colores cálidos.
Ondas electromagnéticas visibles
Las ondas electromagnéticas existen en un gran rango de frecuencias que se conoce como
espectro electromagnético.

El espectro visible es una pequeña banda a la derecha de la región infrarroja y a la

izquierda de la ultravioleta. Esta pequeña región es la porción del espectro
electromagnético que a los humanos nos permite ver. Cuando hablamos de luz, nos
referimos al tipo de onda electromagnética que estimula a la retina de nuestros ojos. La
longitud del color rojo es la más larga del espectro visible, mientras que la violeta es la
más corta; entre el rojo y el violeta se encuentran los demás colores

Cuando todas las longitudes de onda del espectro visible llegan a nuestro ojo al mismo
tiempo, percibimos el blanco. En realidad, el blanco no es un color, sino más bien la suma
de todos los colores y el negro tampoco es un color, sino la ausencia de longitudes de
onda del espectro visible.
En 1666, al pulir unas lentes para su
telescopio, Isaac Newton empezó a
preguntarse por qué se producían
franjas de colores en los bordes de las
lentes y a pensar sobre ello.
Esta inquietud, que ya se planteaba desde
la época de Aristóteles, pero recién con
Newton hizo que fuera explicado:
¡La luz puede ser separada!

Cada color es característico de una

longitud de onda y si hacemos pasar luz
blanca por un prisma, la dispersión
La separación de la luz visible se
produce colores: rojo, naranja, amarillo,
conoce como dispersión.
verde, azul, índigo y violeta.
¿Cuál es la verdad sobre el color?
Cuando vamos a la primaria nos enseñan que hay colores primarios y secundarios:
● Colores Primarios: Cualquiera de las sensaciones de color de los matices
fundamentales, rojo, amarillo, azul, perceptualmente irreductibles, de los que
derivan los demás colores.
● Colores Secundarios: Aquellos colores formados a partir de la mezcla de dos
primarios.
Pero cuando estudiamos diseño nos dicen que los colores primarios son:
(RGB) Rojo · , Verde · y Azul · , y que si los sumamos nos dan Blanco.
Y que si juntamos Rojo y Verde = Amarillo ·
Rojo y Azul = Magenta ·
Azul y Verde = Cyan ·
Y que Cyan + Magenta + Amarillo = Negro (CMYK)
Síntesis de color
En la superposición de colores luz, denominada síntesis aditiva de color, el color
blanco resulta de la suma de todos los colores luz, mientras que el negro es la
ausencia de luz.

En la mezcla de los colores primarios en la síntesis sustractiva de color, con tintas

pigmentos o pinturas, amarillo, cian y magenta; el blanco solo se consigue si el
pigmento o el soporte son de ese color, mientras que el negro es resultado de
la superposición completa de los colores cyan, magenta y amarillo, una mezcla
que en cierta medida logra absorber todas las longitudes de onda de la luz.

Aunque también se utiliza la tinta Negra, K, o Key para que el negro sea
intenso.
El color es esencial
El color es, indiscutiblemente, uno de los recursos esenciales en la
construcción de la comunicación visual.
Esencial, como fenómeno físico que afectará inevitablemente a toda
creación perceptible por el ojo humano, que comunica y provoca una
respuesta emocional de carácter inconsciente en el observador.
Como toda manifestación comunicacional, está vinculada a un contexto
social, cultural, etc. Entender el color como fruto de la cultura y sometido
a sus variaciones nos sitúa como agentes activos en los procesos de
interpretación en el marco de una sociedad.
Color y cultura
Los humanos damos significado a lo que vemos, interpretamos los estímulos
visuales y los transformamos en cosas a las que damos sentido, a la vez
condicionados por un determinado contexto cultural. También hacemos esto con
los colores, damos significado al color según cómo y dónde se presenta. Es un
proceso complejo de identificación de indicios y señales, de interpretación y
decodificación. Del mismo modo que damos significado a lo que vemos, somos
capaces de utilizar el color para comunicar, señalar o informar.

Las diferentes trayectorias culturales humanas han ido construyendo complejas

estructuras de convenciones, códigos e interpretaciones simbólicas sobre los
colores. La progresiva globalización cultural de los últimos tiempos ha borrado
algunas diferencias y ha hecho converger algunas convenciones.
La oposición verde-rojo como sistema de codificación tiene un
significado claramente implantado en nuestra sociedad y en
todo el mundo:

paso permitido o prohibido, aparato encendido o apagado,

polo positivo o negativo, aceptar o cancelar.

Si como diseñadores hacemos uso de este código socialmente

establecido, nos aseguramos una fácil interpretación a la vez
que contribuimos a consolidar y perpetuar su significación.
Al entrar en un supermercado las combinaciones de color en los
productos toman significado para nosotros, nos ayudan a localizarlos y a
navegar por el supermercado.

En conjunto, se agrupan formando zonas y en detalle nos lanzan señales

sobre las calidades, sobre todo simbólicas, de cada producto.
El color y el apetito
El color es a menudo el primer elemento que las personas observan en
cualquier producto alimenticio. Por lo tanto, el color predetermina el
sabor y la calidad de los alimentos que comemos independientemente de
la realidad ya que antes siquiera de que las papilas adquieran el sentido del
gusto a través del alimento, ya se han enviado señales al cerebro para
interpretar el sabor a través de los ojos.

Por esa razón las empresas de marketing utilizan la psicología del color y
dedican mucho tiempo a elegir los colores correctos al diseñar sus
productos.
Los colores que reducen el apetito, son los que tienen una relativa ausencia
en la naturaleza o que se pueden asociar a alimentos en mal estado o quemados.

Azul. Aparte de los arándanos, no es fácil encontrar el azul como color natural. Muchas
dietas milagro que tienen como objetivo la pérdida de peso sugiere el uso de platos
azules para comer porque se come menos comida debido a la naturaleza del color. El
uso de luces azules en los comedores es utilizado para un menor consumo de
alimentos.

Gris. Generalmente aleja a las personas de la comida debido a que lo asocian con el
moho o alimentos en mal estado en general. En realidad, muchos alimentos
procesados son grises, pero se les suele agregar color para compensar la pérdida de
color que resulta de la exposición de los alimentos a la luz, el aire y otras condiciones.

Negro. Se utiliza para hacer que el apetito de una persona disminuya. Aunque puede
ser un color elegante para vestir, a la hora de comer puede transmitir que el alimento
está en mal estado o quemado.
Colores que dan hambre: Son los que más se encuentran en la naturaleza
y que usan las industrias alimenticias y de marketing para vender alimentos

Verde. Es un color que se asocia con lo saludable. Las ensaladas están llenas de alimentos
verdes y las verduras que son tan importantes para la salud.

Naranja. Estimula el cerebro, lo que aumenta la actividad mental y a menudo provoca una
sensación de hambre. Muchos alimentos saludables son de color naranja; calabaza,
zanahorias, naranjas y calabazas, etc.

Rojo y amarillo. Al ser colores considerados cálidos, aumentan la presión arterial, la

frecuencia cardíaca y hacen que el hambre sea más frecuente. Es por eso que la mayoría
de las cadenas de comidas rápidas tienen un logo de color rojo o amarillo que usan en sus
productos. La combinación de ambos colores nos da la sensación de más hambre.

Blanco. La mayoría de los restaurantes usan platos blancos ya que hacen que la comida se
vea más fresca y apetitosa en el contraste de colores. Por otro lado, este color se asocia con
la limpieza y la pureza.
Color en los ambientes
¿Sabías además que los colores a tu alrededor pueden estar influenciando
tus emociones y tu estado de ánimo? Ciertas tonalidades pueden
facilitar que nos irritemos, mientras que otras pueden favorecer nuestra
relajación. Incluso ciertos colores pueden ayudarnos también a descansar
la vista.

Hay una gama de tonalidades que están asociados a la tranquilidad y

que nos transmiten calma. Estos colores suelen ser los más
recomendados para pintar las paredes de una casa o para generar un
ambiente más tranquilo.
El color azul es el color de la tranquilidad, la calma y la armonía por
excelencia. Relaja la mente y reduce los síntomas de estrés y ansiedad.
El azul claro suele estar relacionado con la sabiduría y se estudia su efecto sobre la
reducción del ritmo cardíaco. Este color nos puede producir tales sensaciones al estar
relacionado con la calma del mar o del cielo tranquilo.

Los verdes transportan a nuestra mente hacia la naturaleza, se dice que es el color más
relajante para el sistema nervioso de los seres humanos. El verde es un tranquilizante
natural e incluso se habla de un poder curativo ayudando a estabilizar las emociones.
En cambio un verde más amarillento se asocia con la enfermedad, con la envidia y con
sensaciones desagradables.

El color blanco es el color de la luz y el bienestar emocional. En la antigüedad, se

utilizaba este color para la gran mayoría de edificios puesto que les daba un efecto de
soberbia y pureza.

No se recomiendan paredes rojas, marrones o grises, ya que irritan o desmotivan.

Psicología del color
Los colores despiertan respuestas emocionales específicas en las
personas.

El factor psicológico está formado por las diferentes impresiones que

emanan del ambiente creado por el color, que pueden ser:

de calma, de recogimiento, de plenitud, de alegría, opresión, violencia...

La psicología de los colores fue ampliamente estudiada por Goethe, que

examinó el efecto del color sobre los individuos:
• Blanco: puede expresar paz, soleado, feliz, activo, puro e inocente;
crea una impresión luminosa de vacío positivo y de infinito.
El blanco es el fondo universal de la comunicación gráfica.
• Negro: es el símbolo del silencio, de lo desconocido y, a veces, impuro y maligno. Confiere nobleza y
elegancia, sobre todo cuando es brillante.
• Gris: simboliza la indecisión y la ausencia de energía, expresa duda.
• Amarillo: es el color más luminoso, más cálido, y expansivo. Es el color del sol, de la luz y del oro, y como
tal es intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos.
• Rojo: significa vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Color
fundamental, ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y
agresivo.
• Azul: es el símbolo de la profundidad. Inmaterial y frío, de tranquilidad y melancolía. Oscuro: infinito.
• Violeta: es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría
representar también la introversión.
• Verde: es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la
calma indiferente: no transmite alegría, tristeza o pasión.
• Marrón: es evocador del ambiente otoñal y da la impresión de gravedad y equilibrio. Es el color realista,
tal vez porque es el color de la tierra que pisamos.
Psicología del color
En esta ocasión compararemos dos de las teorías del color más
reconocidas: la teoría de Goethe, quien se dedicó a estudiar los colores
desde el punto de vista de la percepción para, así, establecer una relación
entre los colores y algunos estados de ánimo.

En contraste, Lüscher dividió los colores primarios en 2 categorías: los

colores heterónomos (el amarillo y el azul que representan la luz y la
oscuridad respectivamente) y los colores autónomos (el rojo y el verde que
representan el ataque-defensa del organismo).
El círculo cromático o rueda
de colores es una
representación ordenada y
circular de los colores de
acuerdo con su matiz o tono, en
donde se representa a los
colores primarios y sus
derivados.

Su uso es compatible tanto con

los modelos Síntesis sustractiva
de color, como con los modelos
Síntesis aditiva de color.
Esquema de colores y sus combinaciones
● Esquema acromático: No existe color, solo negro, blanco y grises.
● Esquema análogo: Se toma un color y se acompañan con los contiguos.
● Esquema de choque: Combinamos un color con el tono que está a la derecha o a la
izquierda de su complemento en el círculo cromático.
● Esquema complementario: Utilizamos dos colores opuestos en el círculo cromático.
● Esquema monocromático: Un color combinado con sus tintes y matices.
● Esquema neutral: Se utiliza un color con el agregado del negro o de su
complementario.
● Esquema complementario dividido: Consta de un color y los dos análogos de su
complementario.
● Esquema primario: Colores primarios saturados.
● Esquema secundario: Colores secundarios.
● Esquema triada terciario: Se utilizan colores equidistantes uno del otro en el círculo
cromático.
Paleta de colores
La paleta de colores o paleta cromática son una selección de colores que
aplicados en una misma imagen, gustan a la vista. Normalmente la define
el diseñador o director de arte de un proyecto. Se utiliza para el diseño de
una pieza gráfica, la decoración de un ambiente o la creación de una obra
artística.
Una paleta de colores contiene un conjunto de tonalidades que se hablan
entre sí. Cada una de estas tiene uno o varios significados y tienen la
capacidad de evocar emociones en las personas.
Es una de las herramientas de diseño gráfico más elementales, ya que se
utiliza para crear combinaciones de colores que trabajen bien juntos.
 Ejercicio
Clase 21
1. Elegir un personaje muy famoso
2. Obtener la paleta
3. Que tus compañeros/as adivinen a
qué personaje pertenecen.
4. Luego deberán debatir:
¿Por qué creen que sus diseñadores
eligieron esa paleta para ese
personaje?
(Tener en cuenta la personalidad del
personaje, sus intenciones,
ambiciones, poderes etc.)
Tarea para el Proyecto final
Para continuar con el Proyecto Final que estamos desarrollando:
Vamos a utilizar todo lo visto en clase para definir una Paleta de 3 colores:
1 principal, 1 secundario y 1 acento (3 como lo indica Android pero si diseñas para IOS
únicamente vas a utilizar 1 color principal).
Asegurate que los colores o el color que elijas exprese el alma del proyecto que estás
diseñando.
Para ello realizaremos las siguientes tareas:
● Investigar sobre qué colores simbolizan las 3 palabras clave de mi proyecto.
● Crear la paleta con Adobe color CC.
● Realizar un breve informe sobre el analisis de color y allí justificar porque fueron elegidos.
● Luego los incorporaremos a los elementos de las pantallas.
● En la mayoría de los casos mantendremos el blanco como fondo principal de pantallas
(aunque no forma parte de la paleta de 3 colores).
Ejemplos de entrega
 Moodboard

Tiempo

Calma

Profesional
PALETA DE COLORES Palabras guía:

Primario - Secundario - Acento Tiempo - Calma - Profesional

Elegí el color principal teniendo en mente a la user persona “Pilar” y la temática “Psicología”.
El morado es un color que transmite sensibilidad, delicadeza, elegancia, lujo o espiritualidad.
El color morado se asocia a la elegancia y la sensibilidad.
Es muy utilizado en publicidad para remarcar la distinción o el lujo.
El color secundario lila acompaña al principal.

El color de Acento en su mayoría compuesto del color rojo

pero con mezcla de blanco y un poco de amarillo,
que lo convierten en más femenino y delicado.
Se eligió por su intensidad, su capacidad de llamar la
atención y destacar, para que sirva de guía para el usuario.
EVOLUCIÓN DEL PROTOTIPO
5) FIDELIDAD ALTA
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto