INSTITUTO TECNOLÓGICO DE MÉRIDA

INGENIERÍA EN SISTEMAS
COMPUTACIONALES

Nombre: Gonzalo Adolfo Zupo Silveira

Profesor: Héctor Cetina

Asignatura: Graficación

Grupo: 5SB

Fecha de entrega: Martes 17 de septiembre de 2019

 PSICOLOGÍA DEL COLOR
La psicología del color es el estudio de cómo el color afecta el comportamiento humano,
siendo esta una rama del campo más amplio de la psicología del comportamiento. Esta
ciencia argumenta que sentimos el color y que cada color tiene una poderosa influencia
sobre el estado de ánimo y mental de un individuo.
Cada color tiene un significado, y por ello debemos saber qué es la psicología del color, para
descifrar qué puede llegar a sentir nuestro público con la imagen visual de nuestro proyecto.
La psicología del color es un campo de estudio que está dirigido a analizar el efecto del color
en la percepción y la conducta humana. Desde el punto de vista estrictamente médico,
todavía es una ciencia inmadura en la corriente principal.
La psicología del color tuvo incidencia en la psicología humana desde tiempos remotos,
circunstancia que se expresaba y sintetizaba simbólicamente. Entre muchos ejemplos, en la
antigua China los puntos cardinales eran representados por los colores azul, rojo, blanco y
negro, reservando el amarillo para el centro (por tanto, el amarillo fue tradicionalmente el
color del imperio chino).
De igual forma, los mayas de América central relacionaban Este, Sur, Oeste y Norte con los
colores rojo, amarillo, negro y blanco respectivamente. En Europa los alquimistas
relacionaban los colores con características de los materiales que utilizaban, por ejemplo
rojo para el azufre, blanco para el mercurio y verde para ácidos o disolventes.
El precursor de la psicología del color fue el poeta y científico alemán Johann Wolfgang von
Goethe (1749-1832) que en su tratado Teoría del color se opuso a la visión meramente física
de Newton, proponiendo que el color en realidad depende también de nuestra percepción,
en la que se halla involucrado el cerebro y los mecanismos del sentido de la vista. De
acuerdo con la teoría de Goethe, lo que vemos de un objeto no depende solamente de la
materia; tampoco de la luz de acuerdo a Newton, sino que involucra también a una tercera
condición que es nuestra percepción del objeto. De aquí en más, el problema principal pasó
a ser la subjetividad implícita en este concepto novedoso.
Los colores tienen diferentes interpretaciones y significados en cada cultura, pero debemos
saber que el color influye de manera asombrosa en el estado de ánimo. De ahí que la
psicología del color este en continuo desarrollo y que los creativos del arte dominen de
forma vital este campo. Algunas empresas cuando diseñan sus logros toman en cuenta los
colores que van a emplear, así también cuando decoran una tienda se tiene que valorar los
colores ya que así lograrán que la gente quiera utilizar cierta marca o comprar en ese local.
Nuestro cerebro es capaz de asociar y procesar formas y colores en nuestra memoria, así
que es posible que cuando vemos en las tiendas departamentales o en las calles
innumerables objetos en tono rosa o rojo pensamos que se acerca el día de San Valentín.
(De la Llave, 2018)
En el diseño de apps no solamente debemos tener en cuenta la usabilidad, la efectividad,
el estilo o el branding de nuestra empresa. También debemos tener muy en cuenta el
tratamiento del color, que provoca instantánea e involuntariamente una reacción
emocional y subjetiva en el usuario móvil.
Hablamos en general de la paleta de colores que utilizaremos. Dependerá de diversos
factores, y en algunas ocasiones también dependerá del tipo de app y/o negocio que habrá
detrás de la app.
Existen infinidad de estudios que hablan sobre cómo influyen los colores fríos o cálidos. Es
una disciplina de la que se ha hablado largo y tendido en el marketing. En esta ocasión
queremos ir más allá y ver qué importancia tienen los colores en una app. Empecemos por
las primeras impresiones.
En las stores existen apps con iconos de todos los colores, aunque algunos predominan más
que otros dependiendo si es una app social, un juego, etc.
Si eres conformista y quieres seguir las tendencias en desarrollo de apps, entonces lánzate
a por el azul o el rojo. Si quieres diferenciarte, tu color es el verde; es menos común que el
azul y el rojo pero no es demasiado arriesgado. Pero si quieres ser un rebelde, hacer algo
que nadie haya hecho, puedes inclinarte por el rosa o el morado, tonalidades minoritarias
en las stores.
 PSICOLOGÍA DEL COLOR EN EL USUARIO
El uso de los colores para estimular ciertas emociones y acciones, se ha convertido en un
factor clave para lograr transmitir mensajes específicos a los usuarios en una web.
Según un artículo de estudio de la Universidad de Winnipeg, las personas se forman una
primera impresión en los primeros 90 segundos de interacción con una persona, objeto o
imagen. Y entre un 62-90% de estas impresiones se crean en base al color únicamente.
La mayor parte del efecto causado por lo que vemos, gira en torno al color. Lo que implica
que aplicado al diseño web, puedes potenciar significativamente los resultados que
esperas.
Por ejemplo, si estás diseñando un sitio web dirigido a mujeres adultas jóvenes y deseas
transmitir la sensación de lujo, belleza, elegancia y libertad, (todo ello al mismo tiempo),
quizás estarías tentado a usar el morado y el negro. Pero el último requisito de libertad,
podrías no cumplimentarlo tan bien como en este ejemplo, en donde L’oreal transmite el
efecto perfecto entre elegancia, ligereza y lujo.
Y curiosamente usando un tono de azul que muchos usarían en sitios web para médicos.
Eso es lo que logra el conocimiento de la psicología del color y el feeling creativo de un buen
diseñador.
¿Pero qué pasaría si la misma empresa deseara también influir en el mercado masculino
joven? Sería una pésima idea emplear un tono pastel, aunque fuese el color azul tan
estrechamente ligado con el género masculino. Así que un color que en otros contextos
podría significar esperanza o estar ligado al cuidado del medio ambiente, en este diseño
denota fuerza, masculinidad y frescura.

Hay cuatro elementos en los que los colores empleados y su integración son relevantes si
deseas maximizar tu tasa de conversión:

El fondo: Si bien, depende de las necesidades de comunicación de cada empresa, como se

muestra en los ejemplos, el color elegido debe propiciar una excelente legibilidad del copy
principal. Si analizamos las imágenes, en la última, el blanco transmite limpieza, orden,
seriedad y confianza, mientras que el rojo estimula a la acción. Pero, en la primera imagen,
es más fácil que la mirada se desvíe al fondo rojo más que observar las letras en blanco. Sin
embargo, la combinación de todos los elementos logra un extraordinario balance y sobre
todo, termina dirigiendo la mirada hacia los elementos de conversión.
Los botones y CTAs: Estos elementos, podrían considerarse, quizá, los más importantes o
más influyentes en una conversión ya que si el usuario no los localiza en todo momento,
podría perder el interés o foco y esa conversión se perdería. En los ejemplos, vemos primero
un botón en blanco para que resalte claramente sobre el rojo, mientras que en el segundo,
lo encontramos a la inversa, un color neutro de fondo y los CTA en rojo. En ambos casos,
llaman la atención claramente, por lo que cumplen su cometido. Aquí cabe decir que el rojo
es uno de los colores más sobre utilizado en botones de llamados a la acción, por lo que
conviene realizar algunos split tests para determinar si es el color que le convendría a tu
sitio web.
Textos: En ambas imágenes tenemos colores usados comúnmente en web: blanco y negro.
Lo importante cuando elijas los de tu sitio, es que mantengas como prioridad la legibilidad
y la sencillez visual. Esto permite que los elementos más importantes destaquen, centrando
la atención del usuario en los elementos que te interesan. Y esa atención es la que puede
lograr que realicen la acción que estás buscando.
Las imágenes: No solo el contenido de las mismas es importante, sino los colores de las
mismas, porque pueden por sí mismas transmitir más que el mismo texto, como pasaba en
el ejemplo de la página de maquillaje L’oreal. Pueden catapultar el contexto, dotándolo de
mayor significado para el usuario, pueden complementarlo de forma equilibrada e incluso
pueden estar ahí para equilibrar el espacio visual pero, sin restar importancia a lo principal,
que son los copy y botones CTA.
En general, los sitios web suelen emplear tanto colores neutros como colores más vivos. Los
colores más llamativos son los que se utilizan principalmente para destacar información
importante.
Debo reconocer que en el diseño web moderno, es cada vez más común que los colores
neutros sean los colores dominantes dentro de un sitio web. Su función es similar a la de
los espacios en blanco: dar un respiro al lector, un descanso, crear una apertura visual y que
el usuario sea capaz de digerir y priorizar el contenido del sitio de forma natural.
Al final, todo lo que lleves a cabo debe girar en torno a algunos factores clave, que influirán
también en los colores que elijas:

 El objetivo del sitio web, y sobre todo de cada página específica. Sin esto bien
definido, de nada servirá tener el sitio web más bonito del mundo. Como diría Alicia
en El País de las Maravillas: Si no sabes a dónde vas, poco importa el camino que
tomes.
 Tu buyer persona: Es increíble la cantidad de veces que podemos pasar por alto este
elemento, incluso el no tenerlo definido suele ser bastante común, pero, es un
punto crítico para elegir qué colores son los más convenientes para tu sitio web.
 Concepto visual: Esto podría llegar a ser confuso o parecer redundante si ya se
tienen los dos puntos anteriores. Pero, el concepto delimitará lo que deseas
comunicar más allá de lo que puede lograrse a través del uso de la psicología del
color. Por ejemplo, si en base a tu objetivo y buyer persona sabes que necesitas un
sitio limpio de diseño minimalista o moderno, no solo bastará emplear un código de
color específico, tendrás que elegir inteligentemente la tipografía, los espacios
vacíos, el grosor de las líneas o los tamaños de los textos, entre otros muchos otros.
Cada elemento comunica algo y todo debe estar integrado para maximizar el efecto
que deseas.
 PROFUNDIDAD DE COLOR DE UN PIXEL
De todos es sabido que los archivos y dispositivos digitales almacenan números,
concretamente números en sistema binario, es decir ceros y unos, nada más. El color que
queremos mostrar en un determinado pixel lo representamos pues con un número. ¿y
cuántos colores podremos mostrar? Depende de la cantidad de información asociada con
cada pixel.
1 bit: 0 1. El ejemplo más sencillo sería este: utilizar 1 bit para la información de color. Un
bit puede valer 0 o 1. Por tanto sólo podremos representar 2 tonos. Suele utilizarse 0 para
el blanco y 1 para el negro.
2 bits: 00 10 01 11, con dos bits podemos representar 4 tonos diferentes.
3 bits: 000 001 010 100 110 101 011 111, es decir 8 colores diferentes
4 bits: 16 colores

8 bits: 256 colores.

Esta es la profundidad de color habitual en las imágenes de «escala de grises»: los píxeles
pueden tomar uno entre 256 tonos de gris.
24 bits: 16,7 millones de colores
El estándar para imágenes en color es una profundidad de 24 bits, dedicándose 8 bits a
almacenar la información de cada uno de los 3 colores primarios: 8 bits para el Rojo, 8 para
el Verde y 8 para el Azul. Es decir, una imagen estándar en color puede almacenar 256 tonos
de rojo, 256 de verde y 256 de azul: 256 x 256 x 256 = 16.777.216 colores. A las imágenes
que permiten esta variedad tonal (24 bits, o 8 b its por canal) se las denomina imágenes en
color verdadero o más habitualmente con su equivalente inglés «true color».
Normalmente, las imágenes RGB, de escala de grises y CMYK contienen 8 bits de datos por
canal de color. De ahí que las imágenes RGB se denominen RGB de 24 bits (8 bits x 3
canales), las imágenes en escala de grises se denominen escala de grises de 8 bits (8 bits x
canal), y las imágenes CMYK se denominen CMYK de 32 bits (8 bits x 4 canales).
Independientemente de la cantidad de colores que contenga una imagen, su
representación está limitada por el máximo número de colores que puede mostrar el
monitor en el que se visualiza. Por ejemplo, un monitor de 8 bits solo puede mostrar un
máximo de 256 colores de una imagen de 24 bits.
 RESOLUCIÓN DE UNA IMAGEN
La resolución de una imagen es el número de píxeles por pulgada que contiene (1 pulgada
= 2,54 centímetros). Ésta se expresa en PPP (puntos por pulgada en español) o DPI (dots per
inch en inglés).
Cuantos más píxeles (o puntos) haya por pulgada más información contendrá la imagen
(más precisa), por ejemplo, una resolución de 300 dpi significa que la imagen contiene 300
píxeles de ancho y 300 píxeles de alto, por tanto, se compone de 90.000 píxeles (300x300
ppp). Gracias a esta fórmula, resulta fácil conocer la dimensión máxima de un tiraje.
Por lo general, se considera que una resolución de 300 ppp para una imagen es más que
suficiente antes de la impresión. Esta resolución puede revisarse a la baja en el caso de
impresiones que haya que visualizar a una distancia más o menos alejada del observador
(por tanto, asociada al poder separador del ojo humano).
Un pixel es la menor unidad homogénea en color que forma parte de una imagen digital.
Esta imagen es muy representativa porque, para el mismo tamaño de imagen, se aprecia
perfectamente cómo cambia la resolución desde 1×1 a 100×100 pixeles:

La resolución de una imagen es la cantidad de píxeles. La resolución se utiliza también para

clasificar casi todos los dispositivos relacionados con la imagen digital, ya sean pantallas de
ordenador o televisión, impresoras, escáneres, cámaras digitales, etc.
La resolución total expresa el número de píxeles que forman una imagen de mapa de bits.
La calidad de una imagen también depende de la resolución que tenga el dispositivo que la
capta.
En el caso de las cámaras, el número de píxeles que contenga una fotografía depende de la
configuración y, como máximo, de cuántos píxeles utilice el sensor CCD de la cámara para
captar la imagen.
La resolución de una imagen digital se calcula multiplicando su anchura por la altura en
pantalla. Por ejemplo, la imagen de 1200 x 1200 píxeles = 1.440.000 píxeles, expresado en
Mp megapixel es igual a 1,4 Mp.
 REDUCIR EL TAMAÑO DE UNA IMAGEN SIN QUE PIERDA CALIDAD DE RESOLUCIÓN
Las imágenes son un elemento que no pueden faltar en ninguna web por muy sencilla que
sea, por diferentes motivos:
Proporcionan un toque estético en las páginas principales, ofrecen un respiro en lacam
lectura entre párrafos de texto, ayudan al lector a comprender mejor lo que estás
explicando en tus artículos, etc.
Pero hay un factor que tienes que tener muy en cuenta a la hora de subir imagenes a tu
web: su tamaño y su peso.
Cuanto más grande y pesada sea una foto, más afectará a la velocidad de carga de la página.
Y ya sabes que cuanto más tarde en cargar, menos le gustará a Google y afectará
negativamente al posicionamiento SEO de tu web.
Para que esto no ocurra solo tienes que cambiar el tamaño de la imagen, en el caso de que
sea demasiado grande, y comprimirla para que pese menos

TinyPNG es el programa online para reducir y comprimir fotos e imágenes que más utilizo
diariamente. Desde esta página web podrás subir hasta 20 archivos a la web de hasta 5MB
cada uno, es fácil de usar y muy rápido, lo que hace que me guste por encima del resto de
programas y aplicaciones con estas mismas funciones.

Ventajas del programa para comprimir TinyPNG:

Acepta PNG y JPG.
Hasta 20 imágenes a la vez.
Hasta 75% de compresión.
Descarga una a una rápidamente en tu ordenador.

Compressor.io
Un programa online de compresión que permite reducir el peso de imágenes de hasta
10Mb, lo cual no hacen ninguno de los otros programas que comento. De todas formas,
normalmente antes de subir una imagen siempre se debe reducir el tamaño con
herramientas como photoshop, por lo que si hacemos este ajuste correctamente nunca
necesitaremos usarla por esta característica.
 BIBLIOGRAFÍA
https://www.canva.com/es_mx/aprende/psicologia-del-color/

http://www.psicologiadelcolor.es/
https://es.wikipedia.org/wiki/Psicolog%C3%ADa_del_color
https://www.yeeply.com/blog/diseno-de-apps-color/
https://neoattack.com/psicologia-del-color/
https://www.cevagraf.coop/blog/profundidad-de-color/
http://product.corel.com/help/CorelDRAW/540240626/Main/ES/Doc/wwhelp/wwhimpl/c
ommon/html/wwhelp.htm?context=CorelDRAW_Help&file=CorelDRAW-Understanding-
color-depth.html

https://www.canson-infinity.com/es/faq/que-es-la-resolucion-de-una-imagen
https://lawebdetuvida.com/reducir-tamano-fotos-comprimir-imagenes/