DISEÑO UX/UI

Clase 21
Color en el diseño
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 20 Clase 21 Clase 22

Illustrator y Moodboard Color en el diseño Tipografía

● Repaso de mapa de bits ● Principios básicos ● Tipos de tipografía

● Illustrator ● Psicología del color ● Familias tipográficas
● Trabajo con vectores ● Jerarquías tipográficas
● Esquemas y paletas de
● Moodboard ● Legibilidad
● Armado de moodboard colores ● Tarea para el Proyecto
● Tarea para el Proyecto ● Herramientas Final
Final ● Tarea para el Proyecto
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 produce colores:
rojo, naranja, amarillo, verde, azul, índigo y La separación de la luz visible se conoce
violeta. como dispersión.
¿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.
Adobe Color
 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 como lo indica Android.
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
 Palabras guía:
PALETA DE COLORES Tiempo - Calma - Profesional
Primario - Secundario - Acento

#777DF2 #ACB0F2 #F25E5E

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