Transcripciones
1. Introducción: Esta semana, en este módulo, vamos a crear
una paleta de colores específicamente para usar para el diseño de interfaz de usuario
o interfaz de usuario. En primer lugar, echaremos un vistazo a
los colores que en realidad están disponibles para ti en pantalla de
tu computadora
en diseño digital, luego echaremos un vistazo a
los diversos espacios de color, las especificaciones, cómo cuentas su computadora de qué color le gustaría que
mostrara, por favor. A continuación, veremos
qué combinaciones de colores se ven juntas de
forma natural. Estas son objetivamente
buenas combinaciones de colores. Hablaremos un poco sobre
por qué probablemente estés mejor ignorando estas gráficas de psicología del
color que
ves en línea que
probablemente también son un poco,
demasiado simplificadas, pero cómo el color tiene un poco
significado más sutil. Y deberíamos experimentar y aprender a buscar estos sentimiento. Por último, veremos
cuál es el propósito de cada uno de los colores dentro una pieza de
diseño de interfaz de usuario para que podamos ayudar a elegir los que
cumplan esos propósitos. Y luego finalmente, en realidad
seleccionaremos nuestra paleta de colores lista para usar para una pieza de diseño de interfaz de
usuario. Hay mucho que considerar cuando estamos eligiendo
una paleta de colores. Y los colores realmente pueden hacer o romper el diseño de la
interfaz de usuario. Así que pasemos un poco
de tiempo aprendiendo a crear una paleta de colores que funcione
para el diseño de la interfaz de usuario.
2. Espacios de colores: Terminamos nuestro módulo sobre cómo funciona el
color
hablando de los espacios de color que están disponibles en sus programas de
computadora. Y cómo cuando estás
construyendo un sitio web, estás tratando con sRGB, RGB
estándar, que
normalmente solo se llamará RGB. Es posible que hayas notado en tus programas gráficos
y a veces en CSS2 que en
realidad hay diferentes formas de
hacer referencia a los colores. Hsl, hex, HSB, o CSS aquí. Estas son todas formas diferentes de referenciar exactamente el
mismo conjunto de colores. Entonces si miramos atrás a este
gráfico de todos los colores, todos estos HSL, HSP, todos
hacen referencia a
esta misma y gama de colores o misma gama de colores. Entonces podemos traducir
de uno a otro sin perder ningún
color en nuestra paleta. Lo que eso significa es decidir si hace referencia
a sus colores en RGB o HSL
depende enteramente de usted. Depende enteramente de
lo que mejor se trabaja. Cada una de ellas tiene
sus propias ventajas y desventajas. Así que echemos un pequeño
vistazo a por qué podría configurar su programa de gráficos en
uno en lugar del otro. Entonces si echamos un
vistazo a este color púrpura, he estado usando bastante. Ya sabemos que
para definirlo como RGB, veríamos
lo lejos que está de las esquinas de ese
triángulo gamma que tomamos antes. La referencia exacta para esto
es algo así como 7976231. Si alguna vez has escrito algún CSS, sabrás que
probablemente hayas escrito eso un poco más así. Esto está haciendo referencia exactamente
al mismo color de la misma manera. Es más que usar
tres dígitos para cada uno, lo simplifica y agrega unas
pocas letras ahí con a, B, C siendo superior a nueve. Esto se llama código hexadecimal. Es solo una
versión acortada de escribir los valores RGB de 255. Las ventajas de trabajar
con un código hexadecimal son puramente que hace que el
tamaño de tu archivo sea un poco más pequeño. Tiene mucho
sentido cuando estás
guardando una fotografía de muy
alta definición, pero cuando estás haciendo
un sitio web y en realidad
no estás usando
tantos colores, realmente no necesitas
usar el hex código tanto. El tema de tratar con los colores
RGB es que en realidad
no es muy intuitivo. Estamos lidiando con ellos
solo porque esas son
las tres luces en
la pantalla de la computadora. Pero si necesitamos
ajustarlo, es muy difícil para
nosotros saber exactamente cómo
desaturar el color, exactamente cómo alteramos
estos tres números. Es mucho más intuitivo
para nosotros pensar en HSL,
tono, saturación y ligereza. El matiz es un valor de 360 dependiendo de cuántos
grados esté alrededor. El volante de color, la
saturación es un porcentaje con 0 siendo completamente
desaturado o gris, y un 100 está
completamente saturado. Por lo que un color muy puro y
ligereza es también un porcentaje. Entonces es un número
de un 100 con 0 siendo negro y un 100% blanco. Ahora, a lo largo de este curso, nos hemos estado refiriendo a
este valor como valor. Y eso es porque
en algunos contextos, ligereza significa algo un poco más parecido
a un brillo. En el contexto
del espacio de color HSL, la L significa exactamente lo mismo que
hemos estado llamando al
valor hasta ahora, cuánto blanco o negro es. Entonces tenemos alguna
ventaja real usando HSL en su lugar, es un poco más
intuitivo trabajar con. Podemos ajustar los números y como sabemos cómo va a cambiar el
color. Pero veamos
algunas otras ventajas. Puedo crear muy fácilmente un
conjunto de tres colores con un valor similar y una saturación similar
con diferentes tonalidades. Y se van a sentir sobre la misma importancia en una página. Por lo que notarás que los tres
de estos colores tienen una saturación de 45
y una semejanza de 60. Simplemente tienen un tono diferente y se sienten alrededor de lo mismo. El matiz se calcula mediante
una rueda de color como esta. 10 sería un
rojo perfecto como con 360, y solo funciona en sentido horario
alrededor de ahí. Y una verdadera ventaja
con tener q como número es que realmente podemos encontrar
rápidamente el
contraste en color. Podemos simplemente tomar unos 180
grados de distancia o
añadirlo dependiendo de si el número
está por encima o por debajo de un 180. Y podemos encontrar al instante
nuestro color contrastante. También podemos ver a partir de
estos números son realmente, realmente fácilmente si tienen una saturación contrastante y una ligereza contrastante también. También es muy fácil
con HSL para nosotros obtener un color que
es exactamente el mismo tono. Una variación en la saturación. Quizás a lo largo de nuestro diseño, queremos diferentes
versiones saturadas de este color. Pero recuerda cuando estamos
eligiendo nuestros colores fueron muy, muy raramente vamos a ajustar la saturación o la ligereza
completamente por sí solos. En el ejemplo de la pantalla, el color de la derecha
se ve un poco demasiado brillante y el color de la izquierda parece casi fangoso o gris. No se ve
particularmente agradable. Probablemente ajustaríamos un
par de cosas con ambos colores para que
funcionaran más agradables con nuestra paleta. De igual forma, puede ser
muy, muy útil simplemente ajustar el valor l y obtener una
versión más clara u oscura del mismo color. Pero de nuevo, nunca
vamos a utilizar realmente estos valores exactos y nuestra paleta de colores
porque obtenemos colores que no se ven
particularmente bonitos. El espacio de color HSL no va a solucionar
todos nuestros problemas, sino para arreglar este color a
la izquierda y hay
color a la derecha. Al menos tenemos algunos números que son un poco más intuitivos para trabajar en Figma y en algunos otros programas
gráficos, también
hay un valor HSB. El B significa brillo, pero de nuevo, no
significa brillo. De nuevo significa valor cuán
oscuro o claro es el color. La única diferencia aquí
son solo las dimensiones. Notarás que el cian
más saturado la izquierda está en el medio, mientras que a la derecha está en
la esquina superior derecha. En el sorteo de coral, Affinity Designer y algunos
otros programas gráficos
podrías ver algo como
este triángulo llamado H WB o Hugh, Blanco, Negro. Notarás que una
de las esquinas es blanca, una es negra, y
otra es la tonalidad. Este es probablemente un espacio de
color aún más intuitivo con el que trabajar, pero no
hablemos demasiado de ello porque no puedes usar esto en CSS y va
a ser un dolor para ti transferir
los valores a través. Recomendaría
simplemente usar HSL. Hay algunas formas diferentes hacer referencia a los colores
en tu sitio web, pero esencialmente te
van a dar acceso a los mismos colores. Rgb probablemente va a ser un poco
más difícil de trabajar con. Entonces tal vez deberíamos dejar eso. Hsl, por otro lado, nos
va a dar acceso
a los mismos colores exactos, pero quizás una forma un poco
más intuitiva de elegir esos colores. Todavía queremos evitar volverse demasiado perezosos al ajustar
estos colores. Recuerda, rara vez queremos
solo D saturar un color sin ajustar el tono y el valor para asegurarnos de que todavía
se vea bien.
3. Armonías de colores: Ya hemos hablado bastante
de armonías de
color en esta sección, e incluso un poco en
algunas secciones anteriores. Pero vamos a ver esto con
un poco más de detalle
y llegar a algunos de los
términos técnicos que puede escuchar ahora. Por lo que los colores complementarios
significa los colores que son exactamente opuestos entre
sí en la rueda de color. Y eso es porque como sabemos, si mezclamos todas las ondas de luz de estos
dos colores juntos, tenemos toda la
gama de luces ligeras. Por lo que estimulará y relajará los conos en nuestros ojos por igual a medida que
miramos
alrededor del diseño, también miramos este
ejemplo donde hay tres colores equidistantes
alrededor de la rueda de color. Ahora estos son colores triádicos. Si íbamos a tener
tres colores muy bien definidos, muy potentes
en nuestro diseño. Quizás queramos elegirlos equidistantes alrededor
del círculo como este, podríamos elegir colores que
se dividen de cortesía. Y esto de nuevo es un
conjunto de tres colores, pero esta vez
no son equidistantes. Apenas uno de los colores
es el color dominante, y los otros dos colores
son el mismo número de grados lejos de
ese color dominante, tetrads, colores es cuando usamos dos conjuntos diferentes de
cortesía colores. Idealmente, no
debería haber demasiado cerca juntos, pero no
necesariamente necesitan
ser equidistantes
alrededor del círculo. Tampoco. Podríamos elegir
colores como este. Oh, podríamos
elegirlos más así. Hay muchos recolectores de color en línea
para ayudarte a crear estos conjuntos iniciales de colores utilizando una de estas técnicas
matemáticas. Voy a recomendar
éste que acabo de encontrar llamado HTML color
coordinates.com. Y lo estoy recomendando
porque recuerda, mucha gente tiene el color, lo
crearemos incorrectamente. Y he revisado
esto y no solo tiene la rueda de color
correcta, sino que también puedes cambiar
fácilmente entre colores
complementarios
o colores triádicos o cualquiera de esas otras armonías de
color que acabamos de hablar. Personalmente me resulta
más fácil trabajar directamente en Figma porque Figma tiene esta
característica realmente bonita donde puedo hacer matemáticas dentro de una caja de entrada. Entonces digamos, por ejemplo, yo había elegido este azul
como mi color dominante. Y quería crear un esquema de
color complementario dividido. Bueno, este azul está 100%
saturado y tiene un valor de 50, por lo que está justo entre
blancos y negros. Y simplemente he
elegido que uno de mis colores complementarios divididos
será menos 90 grados. Uno será más 90 grados. Por lo que sólo puedo sumar 92 el
matiz y restar 92, el matiz para el siguiente color. Y ahora tenemos
el esquema de color. Si fuéramos a elegir una armonía de
color de cortesía dividida como la que está en la pantalla aquí, porque esto solo está usando
1.5 de la rueda de color. No estamos usando
naranja, rojos o amarillos. Vamos a usar
el morado y el verde mucho más en nuestro diseño. Imagina que estamos
tratando de tener una ponderación igual de
todo alrededor de la rueda. No queremos demasiado
color de ningún lado. Lo siguiente es que
nunca queremos que nuestros colores sean perfectamente armónicos. Es un poco demasiado perfecto. Elimina un poco de interés
visual. Entonces voy a retocar un poco
los matices. Y por supuesto, nunca
vamos a tener colores que estén completamente saturados
o que estén completamente a los
50 en la escala de ligereza
a la oscuridad. Y entonces tal vez
algo como esto sea el punto de partida para
crear mi paleta de colores. Por lo que acabamos de mirar
algunas formas diferentes de elegir una paleta de
colores armoniosa. Pero todos esencialmente
implican elegir colores que se distribuyen igualmente
alrededor de la rueda de color. Si seleccionamos estos
basados en matemáticas en Figma o usando un sitio web como
el que acabo de mostrarte. Vamos a querer
ajustar un poco el matiz. No queremos que sea perfecto porque
queremos que haya algún interés visual
en nuestros diseños finales. Y por supuesto, si usamos una herramienta como esta para
seleccionar nuestros colores, nos
van a
dar unos colores muy, muy saturados, muy brillantes. Vamos a querer ajustar la saturación y el valor de
los colores para que sean un poco más utilizables
para nuestros sitios web.
4. Emociones: Camino de vuelta en la universidad de arte, fui a una conferencia
de psicología del color. Y recuerdo que me dijeron
que los equipos de fútbol que usan rojo son más propensos a ganar porque son
más agresivos, son dominantes y
golpean miedo en sus oponentes. No obstante, por supuesto, eso
es sólo ciencia psuedo. De hecho, nadie ha ganado nunca la Copa
del Mundo de Rugby con camisas rojas y en realidad un
hockey sobre hielo que es más probable
que ganes si usas azul. Es solo ruido
estadístico estándar. Realmente no debería
estar en el periódico. Es el tipo de pelusa
que normalmente
se escucha cuando la gente está tratando de
encontrar algo que decir. Al igual que si buscas Google
Images por psicología del color, verás todos estos diagramas
sin sentido de personas tratando de
decidir qué
significan los colores y sus significados normalmente
son engañosamente vagos y ellos crossover
y no tienen sentido. Por supuesto que hay un millón de
tonos de rojo y no
todos están enojados y algunos de ellos en realidad
son bastante calmantes. Esto es sólo una
pieza estándar de sobresimplificación. Pero eso no significa
que los colores no expresen una emoción o un sentimiento. De hecho, probablemente hacen
más que nada. Mark Rothko hizo toda
una carrera a partir de crear
emoción con colores, pero usó una mezcla de colores. Y la emoción de un color
depende de su contexto, igual que
todo lo demás hace. El poco más pequeño de color en una aplicación web que
va a
cambiar por completo lo que
transmite y lo que siente y la emoción de toda
la aplicación. Pero desgraciadamente, no puedo
darte un pequeño
gráfico práctico que diga, leídos como agresivos, necesitamos hacer un poco
más de trabajo que eso. Suponga por un segundo que
hemos creado una página de
inicio
muy, muy blanca y negra para un sitio web, y quiero añadir un
solo color. ¿ De qué color agregaría? Bueno, tengo este tipo
de verde
muy relajante en el fondo aquí. Pero tal vez quiero que la página
luzca más corporativas. Bueno, yo podría hacer lo satura. Tal vez no necesariamente
cambie el tono tanto. Quizás cambié
la saturación. Se puede ver que
todo se siente diferente ahora al
elegir este color, estoy haciendo una declaración igual de
audaz, pero estoy haciendo una declaración muy
diferente. O tal vez quiero que se
sienta más creativo. Entonces lo hago de color rosa. Quizás los rosados y
los púrpuros se sientan más creativos porque eran un
poco más raros en la naturaleza. Y así se siente
más alternativa. O tal vez se siente más audaz
solo porque es tan brillante. Es difícil comunicar
cómo cambiar este color y
el fondo cambia cómo nos sentimos al respecto. Pero todos podemos estar de
acuerdo en que sí lo hace. Como estás por ahí viendo
sitios web en la naturaleza, intenta pensar en
lo que hacen. Te sientes. Esta delgada
línea naranja, estas formas audaces, de colores
planos, esta grande, verde
fluorescente, o
esta de color azul apagado. Aunque esto es parcialmente
subjetivo y tus usuarios pueden sentir algo un
poco diferente a ti. Queremos
entrenarnos para ser particularmente buenos en
sentir colores de la misma
manera que un músico es muy
bueno en detectar cómo sienten las
diferentes notas en el contexto de
diferentes canciones. Y una buena manera de entrenarnos para hacer esto es
ver los colores en un contexto o en contraste con
un color diferente, este azul púrpura utilizado en el diseño en
la parte inferior derecha. Se podría pensar, esto se parece
bastante al que utilicé en los
créditos de apertura para este mismo video. Y si quisiera estar en la marca, tal vez usaría este azul
como mi color de fondo. O vamos por un segundo, supongamos que acabo de inundar toda la
página con solo este azul. Basta con mirar esto por un segundo. Reconoce lo que tienes campo, pero no necesariamente
intentes nombrarlo. Y entonces señalaré
que este no es el azul que usé en los créditos de
apertura, pero éste es un instante, siento algo diferente. Tal vez ayude si los
miramos uno al lado del otro. El color de la izquierda
se siente más limpio para mí. Se siente un poco perfecto. Si bien el de la derecha
se siente un poco más táctil, como en realidad puedo recogerlo un trozo de papel e
interactuar con él. Hay una diferencia distinta
entre estos dos colores que solo noté cuando los
pongo uno al lado del otro. Al igual que como un
músico bien entrenado probablemente puede escuchar la diferencia
entre un C y un C agudo. Y sólo puedo escuchar
la diferencia cuando vienen
uno al lado del otro en una canción. No obstante, si una canción usa un
C-sharp en algún lugar y de repente alguien lo cambia a un C. puedo instantáneamente aquí que
la canción no esté bien. No pude notarlo por sí sola. Pero cuando la escucho en
el contexto de la canción, puedo ver como
que está mal. Por lo que es realmente importante que tengamos bien
la sensación de estos
colores. Pero la forma de hacerlo es
probablemente mirarlos en algún tipo de contexto o en
contraste con otros colores. Entonces hay mucha sobresimplificación sobre
lo que puede significar un color, lo que significa rojo, y
lo que significa azul. Pero hay todo tipo de tonos
diferentes de estos, así que podemos ignorar la
mayoría de estas cosas. Pero el color sí hace la conexión
emocional más
rápida, más fuerte. Y por lo tanto, es realmente
importante que
nos entrenemos para identificar
las emociones en colores. El más pequeño cambio de color puede afectar
masivamente qué
emociones invoca. Y es mucho más fácil para nosotros identificar las diferencias
cuando lo decimos en contexto. Hagámoslo a continuación.
5. Ejercicio de emociones: Entonces en el último video, mencioné que
para ayudarnos a
entrenarnos a sentir los colores, es bueno verlos a continuación,
dos colores contrastantes. Y también es bueno
verlos en contexto. Ahora, he ido adelante y escogido algunas palabras contrastantes y
después traté de encontrar colores que les quepan y los pongan uno al
lado del otro para ver si el color enojado que tengo la izquierda se siente enojado
al lado de el color tranquilo
que tengo a la derecha, he, por supuesto, específicamente
no elegido un cliché, rojo y azul para estar
enojado y tranquilo, pero creo que he encontrado un color enojado y un color
tranquilo, sin embargo. Como otro ejemplo,
elegí dos palabras más, creativas y organizadas de
una manera que esas se sienten como
palabras contrastantes para mí. Y he elegido estos
dos colores que
siento comunica
esas dos palabras. Tengo algunos ejemplos más
de colores contrastantes, pero voy a hacerte
adivinar cuál es cuál? Entonces para esto, he elegido
las palabras divertidas y serias. ¿ Cuál crees que
decidí que era divertido? Sí. Es un poco obvio quizás, pero al crear los dos colores
emocionales contrastantes juntos, me
hace mucho más fácil seleccionar un color para la diversión. El siguiente conjunto de palabras que
elegí fue ruidoso y tranquilo. Y terminé eligiendo estos dos colores son un
par de ejemplos más. Elegí las palabras
naturaleza y tecnología, y estos son los dos
colores con los que terminé. Y elegí las
palabras jóvenes y viejas. Y estos son los dos
colores con los que terminé. Por lo que la primera mitad de este ejercicio es
pensar en un adjetivo o una palabra descriptiva que ayude a explicar un mensaje de marca pueda tener en su sitio web. A lo mejor estás haciendo el
sitio web para un banco, y por lo tanto la palabra
podría ser seguridad. Entonces piense en la palabra
cosa del contraste para la seguridad, la
palabra contrastante sería riesgo. Y luego intenta identificar buenos colores que comuniquen
ambas palabras, seguridad y riesgo,
y los pongan en un contraste y composición
como el de la pantalla. Intenta hacer al menos uno de estos donde no
cambies el tono, solo juegas con la
ligereza y la saturación. Esto nos detiene usando esas ideas
cansadas como el rojo es pasión como muleta y nos hace realmente
mirar los colores. Esto no sólo hace que sea más fácil encontrar el
color aquí después. Como bono añadido, te ayuda a encontrar
colores que realmente
querrías evitar. Si estás tratando de evitar que
tu sitio web luzca arriesgado, quieres evitar
los colores que podrías asociar con el riesgo. Una vez que estamos contentos hemos identificado un buen color
emocional. Veamos cómo se
ve en un rango. Entonces este es el rosa que elegí
para creativo antes. Podría tener algunos tonos
más oscuros y más claros
en toda mi página web. Así que intentemos crear
un poco de rango. Por supuesto, he añadido
un poco de rojo a los tonos más oscuros
y un poco de amarillo a los tonos más claros. He hecho lo mismo
con mi divertido color. Y como ejemplo final, he creado una gama
con mi color tranquilo a esto no es decir que toda
esta gama la
convertirá en mi paleta de colores
final. Justo ahora tengo algunas opciones con las que
jugar cuando
descubrí qué colores necesito. Y puedo probar mis
colores tranquilos en el contexto de un diseño real
ahora y ver
cuál se va a quedar bien
como este color de fondo, por
ejemplo, o ¿cuál de mis colores
creativos se ven bien? Por supuesto, vamos a tener un
diseño más complicado que este, pero queremos probar
los colores fuera en el contexto
del diseño para
asegurarnos de que todavía sientan como queríamos que se sintieran. Tu ejercicio para este video
es elegir una emoción o palabra
describiendo que quieras que tu sitio web se comunique. Entonces piensa en cuál es
la palabra contrastante y encuentra un color para ambas palabras
eligiendo y retocando
estos dos colores juntos, lo
vamos a ver en
contraste con su oponente y realmente
nos va a ayudar a elegir la sombra exacta. Y por último, una vez que estemos
contentos con nuestro color, vamos a crear una gama. Entonces tenemos las versiones más oscuras
y las versiones más ligeras. Y luego solo pruébalos en el contexto de un sitio web
para asegurarse de que se vean bien y asegurarse de que
sientan las emociones que se
suponía que estaban sintiendo.
6. propósito de color: Para que escojamos la
paleta de colores exacta que
vamos a utilizar para nuestra aplicación
web. Vale la pena
pensar en cuál va a ser
el propósito de cada uno de los
colores. Entonces veamos
este diseño que
creé un poco
antes y veamos todos los colores que
ya están en esto y para qué se
están utilizando? En primer lugar, por supuesto
tenemos a nuestros negros y blancos. O en este caso,
tengo un
azul marino oscuro y el gris azulado claro. A menos que esté tratando de crear
un estilo muy formal o crea un
punto muy específico con blanco y negro, muy raramente
voy a usar un negro
perfecto y
un blanco perfecto. Casi
siempre van a tener un poco de
algún tono ahí dentro. Puede haber un tono muy
desaturado que bien tiene un valor muy
alto o muy bajo. También va
a haber muchas de ellas, mucho más de lo que pensarías. En realidad, si
miras este diseño, tengo cerca de seis negros y
blancos dentro de este diseño. Y esta es solo
una página también. Incluso puede haber un uso
para mí tener unos cuantos más. Recuerda, la mayoría de los
colores en tu página web, voy a estar
muy desaturado. Vas a
tener muy, muy pocos colores brillantes
realmente saturados. Por lo que en realidad estos
negros y blancos o blues muy desaturados, que son realmente importantes porque ahí la
mayor parte de la página web. Sin embargo, la gente a menudo ni siquiera piensa en
estos colores tanto porque es muy difícil conseguir una paleta de colores de
aspecto decente. La gente a menudo solo usará una paleta de colores que
encontraron en otro lugar y probablemente incluso olvidarse las que están en el
fondo y en primer plano, como este conjunto de colores aquí. A continuación, tenemos esos colores
realmente obvios. Los que
siempre estás pensando, los de branding y
el llamado a la acción. Así que tengo un gran botón de
llamada a la acción de color naranja brillante. Es lo más sobresaliente
en la página web. Es realmente destacarse
y decir click sobre mí. El propósito de este color es captar los ojos de
inmediato. Y luego tenemos el
branding azul aquí. El propósito de este color
es crear un
mensaje de marca consistente y coherente en todo. También podríamos usar esto como color
secundario para botones. Queremos que destaque
menos que la naranja. También he elegido
este azul porque contrasta bastante bien
con la naranja. Y así si nuestros ojos se acostumbraron un poco demasiado a
mirar la naranja, podemos darle un color brillante
diferente. Entonces eso es sobre todo para nuestros
colores de marca realmente obvios en todo este diseño. Si tuviéramos una aplicación más
complicada, posible que tengamos un tercer
color de marca que usamos en otro lugar. Pero el propósito de estos colores es que más destacan y crean la mayor personalidad
para nuestra aplicación. Y por último, tenemos
nuestros colores de acento. Ahora, estos se están utilizando
aquí detrás de las pasquetas y el estado está en la página para que podamos
recordar los grapas. Podemos recordar cosas como cuántos
mensajes no leídos tenemos. No necesitamos que
nos salten, pero sí necesitamos encontrarlos
cuando los buscamos. A menudo, estos podrían
ser una variación de nuestros colores primarios y
secundarios o algo que contrasta
muy bien con ellos. Pero casi siempre
vamos a tener un rojo brillante, un verde brillante, y
un amarillo brillante en este conjunto de colores de acento. Y eso es porque
lo único que es universal en nuestra comprensión
del color en la web es que todos ahora
saben que los mensajes de advertencia son rojos y los
mensajes de éxito son verdes. No obstante, podemos ajustar un poco rojo
y verde. Tiene que ser obvio que es la alerta roja y
el éxito rojo. Pero en este ejemplo que
he dado aquí, he jugado un poco con ellos. he hecho no demasiado
saturados, no demasiado brillantes. Pero creo que todavía queda bastante
obvio el éxito y los colores de advertencia y el amarillo se
utilizan a menudo para la información. Entonces estos son mis colores de acento. Se van a
usar con moderación, a veces solo por un
poco de estilo visual. Y a veces llaman un
poco de atención, pero no tanto como nuestros botones de
llamada a la acción. Por lo que tenemos tres tipos distintos de colores a lo largo de
esta aplicación, tenemos nuestros negros y blancos que muy raramente son blancos y
negros. Tenemos nuestros colores primarios
y secundarios, y tenemos nuestros colores de acento. Una vez que sepamos cuáles son
nuestros colores, también
debemos tomarnos algún tiempo comprobando cuáles
trabajan juntos. Algunos colores simplemente no van a funcionar encima
de otros colores. Y tal vez queramos
hacer una nota de esto para que gente no vaya y
accidentalmente las use. Ahora porque el color se ve
relativo a su entorno. La única forma de
comprobar esto es mirar realmente con nuestros ojos. Tan similar a como lo hicimos con los ejercicios del Joseph Alberta, puedes crear una caja
más pequeña dentro de
una caja más grande y comprobar cómo se ven los colores
dentro de uno al otro. Entonces, por ejemplo, esta
naranja en este gris, o incluso el gris en la naranja, se ve realmente bien. Puedo ver muy claramente la diferencia
distinta en colores. Este gris muy claro
con esta naranja, esto se ve absolutamente fantástico. Creo que estos colores pueden tanto ir encima o
dentro de uno al otro. No obstante, este otro gris con esta naranja, no funciona. Es muy difícil ver la línea
definida entre ellos. Se ve un poco borrosa casi. Es bastante doloroso para
mis ojos ser honestos. Hay mucho contraste entre los tonos naranja
y gris. Pero los valores y las saturaciones
no son tan diferentes. Simplemente no hay suficiente
contraste entre esos. Así que probablemente quiero
asegurarme de que todos
sepan que no podemos usar estos
dos colores juntos. Esta naranja no puede ir sobre
este fondo gris, y no podemos tener este
texto gris en un botón naranja, vamos a querer hacer esta misma prueba con cada combinación de colores. Está bien si un
color no funciona con otro
mientras hagamos unas notas, pero queremos asegurarnos
también de que la mayoría de nuestros colores funcionen con
la mayoría de nuestros otros colores. Entonces tenemos tres
grupos distintos de colores. Tenemos nuestros negros y blancos, tenemos nuestros colores primarios, y tenemos nuestros colores de acento. La mayoría de las personas que hacen la
mayoría de los sitios web no están pensando
realmente en todos estos diferentes
tipos de colores. Y sin embargo, la mayor parte de nuestro sitio web
son nuestros negros y blancos. Por lo que queremos asegurarnos de que
consigamos todos estos luciendo bien cuando tengamos
toda nuestra paleta de colores, queremos comprobar que funcionan uno
encima del otro. Y la única forma de
hacerlo es realmente
ponerlos uno encima del otro y
comprobar que se vean bien.
7. RESUMEN: Finalmente creamos
una paleta de colores. Podría cambiar a medida que diseñamos nuestras páginas en nuestra aplicación y sin duda encontrará que algunos colores son menos
útiles de lo que pensábamos, o que necesitamos
otro color cuando
empezamos a diseñar
páginas individuales. Lo importante
es que tenemos una paleta de colores acordada con
nuestro equipo o nuestros clientes. Y si cambia, podemos tener una conversación al
respecto. En su momento. Los colores transmiten las
emociones de nuestra marca, pero en gran parte están
muy desaturados. Entonces tendremos un sutil impacto
emocional en el usuario de nuestra aplicación
web. Si bien algunos de nuestros colores
están muy saturados, pero se
utilizarán con mucha moderación alrededor del diseño. Estos se destacarán y captarán la atención de la
gente fácilmente. Entre todos los
colores desaturados se encuentran los colores tienen un propósito que se mantendrá igual a lo largo del diseño de la
aplicación, facilitando
a los usuarios navegar por páginas
futuras una vez que tengan una comprensión inconsciente
de lo que significa cada columna. Ahora estamos listos para aplicar
nuestros colores a nuestro diseño. Pero primero, elegamos algunas imágenes e
ilustraciones apropiadas para
usar en nuestro diseño.
Rob Sutcliffe, UI Designer / Developer
