Como criar uma palete cor (UI Bootcamp Week 9)

1. Introdução: Esta semana, neste módulo, vamos criar uma paleta de cores especificamente para usar para interface de usuário ou design de interface de usuário. Primeiro, vamos dar uma olhada nas cores que estão realmente disponíveis para você na tela do seu computador em design digital, então vamos dar uma olhada nos vários espaços de cores, as especificações, como você diz seu computador qual cor você gostaria que ele exiba, por favor. Em seguida, veremos quais combinações de cores se parecem naturalmente juntas. Estas são combinações de cores objetivamente boas. Falaremos um pouco sobre por que você provavelmente está melhor ignorando esses gráficos de psicologia de cores que você vê on-line que provavelmente são um pouco demais, excessivamente simplificados, mas como a cor tem um pouco significado mais sutil. E devemos experimentar e aprender a procurar esse sentimento. Finalmente, veremos qual é o propósito de cada uma das cores dentro um design de interface do usuário para que possamos ajudar a escolher aqueles que atendam a esses propósitos. E, finalmente, selecionaremos nossa paleta de cores pronta para usar para um design de interface do usuário. Há muito a considerar quando estamos escolhendo uma paleta de cores. E as cores realmente podem fazer ou quebrar o design da interface do usuário. Então, vamos gastar um pouco de tempo aprendendo a criar uma paleta de cores que funcione para o design da interface do usuário. 2. Espaços de cores: Terminamos nosso módulo sobre como a cor funciona falando sobre os espaços de cores disponíveis em seus programas de computador. E como quando você está criando um site, você está lidando com sRGB, RGB padrão, que normalmente só será chamado de RGB. Você pode ter notado em seus programas gráficos e, às vezes, no CSS2, que existem maneiras diferentes de referenciar cores. Hsl, hex, HSB ou CSS aqui. Essas são maneiras diferentes de referenciar exatamente o mesmo conjunto de cores. Então, se olharmos para trás para este gráfico de todas as cores, todas essas HSL, HSP, todas elas fazem referência a essa mesma e gama de cores ou mesmo intervalo de cores. Assim, podemos traduzir de um para o outro sem perder nenhuma cor em nossa paleta. O que isso significa é decidir se você faz referência às suas cores em RGB ou HSL depende inteiramente de você. Cabe inteiramente ao que você trabalha melhor. Cada um deles tem suas próprias vantagens e desvantagens. Então, vamos dar uma olhada em por que você pode definir seu programa gráfico para um e não o outro. Então, se dermos uma olhada nessa cor roxa, eu tenho usado bastante. Já sabemos que, para defini-lo como RGB, olharíamos o quão longe ele está dos cantos daquele triângulo gama que tomamos anteriormente. A referência exata para isso é algo como 7976231. Se você já escreveu algum CSS, saberá que provavelmente escreveu isso um pouco mais assim. Isso está referenciando exatamente a mesma cor da mesma maneira. É apenas em vez de usar três dígitos para cada um, simplifica e adiciona algumas letras lá com a, B, C sendo maior que nove. Isso é chamado de código hexadecimal. É apenas uma versão abreviada de escrever os valores RGB de 255. As vantagens de trabalhar com um código hexadecimal são puramente que ele torna o tamanho do arquivo um pouco menor. Faz muito sentido quando você está salvando uma fotografia de alta definição, mas quando você está fazendo um site e não está usando tantas cores, você realmente não precisa usar o hexadecimal código muito. O problema com lidar com cores RGB é que ela não é realmente muito intuitiva. Estamos lidando com eles só porque essas são as três luzes na tela do computador. Mas se precisarmos ajustá-lo, é muito difícil saber exatamente como talvez dessaturar a cor, exatamente como alteramos esses três números. É muito mais intuitivo pensar em HSL, matiz, saturação e leveza. O matiz é um valor de 360, dependendo de quantos graus ele está ao redor. A roda de cores, a saturação é uma porcentagem com 0 sendo completamente dessaturado ou cinza, e um 100 sendo completamente saturado. Portanto, uma cor e leveza muito puras também são uma porcentagem. Portanto, é um número de 100 com 0 sendo preto e 100% branco. Agora, ao longo deste curso, estamos nos referindo a esse valor como valor. E isso porque em alguns contextos, leveza significa algo um pouco mais semelhante a um brilho. No contexto do espaço de cores HSL, o L significa exatamente a mesma coisa que temos chamado de valor até agora, quanto branco ou preto isso é. Então, temos alguma vantagem real usando HSL, em vez disso, é um pouco mais intuitivo trabalhar. Podemos ajustar os números e sabemos como a cor mudará. Mas vamos ver algumas outras vantagens. Posso criar facilmente um conjunto de três cores com um valor semelhante e uma saturação semelhante com diferentes matizes. E eles vão sentir a mesma importância em uma página. Então você notará que todas essas três cores têm uma saturação de 45 e uma semelhança de 60. Eles só têm uma tonalidade diferente e sentem o mesmo. A tonalidade é calculada por uma roda de cores como esta. 10 seria um vermelho perfeito como com 360, e só funciona no sentido horário de lá. E uma vantagem real de ter q como número é que podemos encontrar rapidamente o contraste na cor. Podemos apenas tirar 180 graus ou adicioná-lo dependendo se o número estiver acima ou abaixo de 180. E podemos encontrar instantaneamente nossa cor contrastante. Também podemos ver que esses números são muito, muito facilmente se eles têm uma saturação contrastante e uma leveza contrastante também. Também é muito fácil com o HSL obter uma cor que seja exatamente a mesma tonalidade. Uma variação na saturação. Talvez em todo o nosso design, queremos diferentes versões saturadas dessa cor. Mas lembre-se quando estamos escolhendo nossas cores eram muito, muito raramente ajustando a saturação ou a leveza completamente por conta própria. No exemplo na tela, a cor à direita parece um pouco brilhante demais e a cor à esquerda parece quase lamacenta ou cinza. Não parece particularmente bom. Provavelmente ajustaríamos algumas coisas com essas duas cores para fazê-las funcionar melhor com nossa paleta. Da mesma forma, pode ser muito útil apenas ajustar o valor l e obter uma versão mais clara ou mais escura da mesma cor. Mas, novamente, nunca usaremos esses valores exatos e nossa paleta de cores porque obtemos cores que não parecem particularmente bonitas. O espaço de cores HSL não vai corrigir todos os nossos problemas, mas para corrigir essa cor à esquerda e há cor à direita. Pelo menos temos alguns números que são um pouco mais intuitivos para trabalhar na Figma e em alguns outros programas gráficos, Há também um valor HSB. O B significa brilho, mas novamente, não significa brilho. Mais uma vez significa valor como a cor é escura ou clara. A única diferença aqui são apenas as dimensões. Você notará que o ciano mais saturado à esquerda está no meio, enquanto à direita está no canto superior direito. No coral draw, Affinity Designer e alguns outros programas gráficos você pode ver algo como esse triângulo chamado H WB ou Hugh, White, Black. Você notará que um dos cantos é branco, um é preto e um é o tom. Este é provavelmente um espaço de cores ainda mais intuitivo para se trabalhar, mas não vamos falar muito sobre isso porque você não pode usar isso em CSS e será uma dor para você transfira os valores. Eu recomendaria simplesmente usar o HSL. Existem algumas maneiras diferentes referenciar cores em seu site, mas elas essencialmente darão acesso às mesmas cores. O Rgb provavelmente será um pouco mais difícil de se trabalhar. Então talvez devêssemos deixar isso. A Hsl, por outro lado, vai nos dar acesso às mesmas cores, mas talvez uma maneira um pouco mais intuitiva de escolher essas cores. Ainda queremos evitar ficar muito preguiçosos ao ajustar essas cores. Lembre-se, raramente queremos apenas D saturar uma cor sem ajustar a tonalidade e o valor para garantir que ela ainda fique boa. 3. Harmonias de cores: Já falamos bastante sobre harmonias de cores nesta seção, e até um pouco em algumas seções anteriores. Mas vamos ver isso com um pouco mais de detalhes e criar alguns dos termos técnicos que você pode ouvir agora. Então, cores complementares significam as cores exatamente opostas umas das outras na roda de cores. E isso porque, como sabemos, se misturarmos todas as ondas de luz dessas duas cores juntas, temos toda a gama de luzes. Assim, estimulará e relaxará os cones em nossos olhos igualmente à medida que olhamos ao redor do design, também olhamos para este exemplo onde há três cores equidistantes ao redor da roda de cores. Agora, essas são cores triádicas. Se tivéssemos três cores muito bem definidas e muito poderosas em nosso design. Podemos querer escolhê-los equidistantes em torno do círculo assim, podemos escolher cores que são divididas como cortesia. E isso novamente é um conjunto de três cores, mas desta vez elas não são equidistantes. Apenas uma das cores é a cor dominante, e as outras duas cores são o mesmo número de graus longe dessa cor dominante, tetrads, cores é quando usamos dois conjuntos diferentes de cortesia cores. Idealmente, não deveria estar muito perto, mas eles não precisam necessariamente ser equidistantes ao redor do círculo. Também. Poderíamos escolher cores como essa. Oh, nós poderíamos escolhê-los mais assim. Existem muitos seletores de cores on-line para ajudá-lo a criar esses conjuntos iniciais de cores usando uma dessas técnicas matemáticas. Vou recomendar este que acabei de encontrar chamado HTML color coordinates.com. E estou recomendando isso porque lembre-se, muitas pessoas têm a cor, vamos criá-la incorretamente. E eu verifiquei isso e não só tem a roda de cores correta, mas também você pode facilmente mudar entre cores complementares ou cores triádicas ou qualquer uma dessas outras harmonias de cores o qual acabamos de falar. Pessoalmente, acho mais fácil trabalhar diretamente na Figma porque a Figma tem esse recurso muito bom onde posso fazer matemática dentro de uma caixa de entrada. Então, digamos, por exemplo, que eu tinha escolhido esse azul como minha cor dominante. E eu queria criar um esquema de cores complementar dividido. Bem, este azul está 100% saturado e tem um valor de 50, então está entre brancos e pretos. E eu simplesmente escolhi que uma das minhas cores complementares divididas será menos 90 graus. Um será mais 90 graus. Então eu posso adicionar 92 a tonalidade e subtrair 92, a tonalidade para a próxima cor. E agora temos o esquema de cores. Se quiséssemos escolher uma harmonia de cores complementar dividida como a da tela aqui, porque isso está usando apenas 1,5 da roda de cores. Não estamos usando laranja, vermelho ou amarelo. Vamos usar o roxo e o verde muito mais em nosso design. Imagine que estamos tentando ter uma ponderação igual de toda a roda. Não queremos muita cor de nenhum lado. A próxima coisa é que nunca queremos que nossas cores sejam perfeitamente harmônicas. É um pouco perfeito demais. Ele remove um pouco de interesse visual. Então, vou ajustar um pouco os tons. E, claro, nunca teremos cores completamente saturadas ou que estejam completamente em 50 na escala de leveza a escuridão. E então talvez algo assim seja o ponto de partida para criar minha paleta de cores. Então, acabamos de ver algumas maneiras diferentes de escolher uma paleta de cores harmoniosa. Mas todos eles envolvem essencialmente a escolha de cores que são igualmente espalhadas ao redor da roda de cores. Se selecionarmos estes com base em matemática na Figma ou usando um site como o que acabei de mostrar. Vamos querer ajustar a tonalidade um pouco. Não queremos que seja perfeito porque queremos que haja algum interesse visual em nossos projetos finais. E, claro, se usarmos uma ferramenta como essa para selecionar nossas cores, elas nos darão cores muito, muito saturadas e muito brilhantes. Vamos querer ajustar a saturação e o valor das cores para que elas sejam um pouco mais utilizáveis para nossos sites. 4. Emoções: Na faculdade de arte, fui a uma palestra em psicologia das cores. E lembro-me de ter dito que os times de futebol que usam vermelho são mais propensos a ganhar porque são mais agressivos, são dominantes e têm medo em seus adversários. No entanto, é claro, isso é apenas ciência psuedo. Na verdade, ninguém nunca ganhou a Copa do Mundo de Rugby usando camisas vermelhas e, na verdade, um hóquei no gelo que você provavelmente ganhará se usar azul. É apenas ruído estatístico padrão. Realmente não deveria estar no jornal. É o tipo de penugem que você normalmente ouve quando as pessoas estão tentando encontrar algo a dizer. Como se você pesquisar no Google Images por psicologia de cores, você verá todos esses diagramas absurdos de pessoas tentando decidir o que as cores significam e seus significados normalmente são enganosamente vagos e eles crossover e não faz sentido. Claro que há um milhão de tons de vermelho e eles não estão todos com raiva e alguns deles são realmente bastante calmantes. Esta é apenas uma peça padrão de simplificação excessiva. Mas isso não significa que as cores não expressem emoção ou sentimento. Na verdade, eles provavelmente fazem mais do que qualquer coisa. Mark Rothko fez uma carreira inteira criando emoção com cores, mas ele usou uma mistura de cores. E a emoção de uma cor depende de seu contexto, o mesmo que tudo o resto. O menor pedaço de cor em um aplicativo web que vai mudar completamente o que transmite e o que sente e a emoção de todo o aplicativo. Mas, infelizmente, não posso dar-lhe um pequeno gráfico prático que diz, lido como agressivo, precisamos fazer um pouco mais de trabalho do que isso. Suponha por um segundo que criamos uma homepage muito, muito preto e branco para um site, e eu quero adicionar apenas uma cor. Que cor eu adicionaria? Bem, eu tenho esse tipo de verde muito relaxante no fundo aqui. Mas talvez eu queira que a página pareça mais empresas. Bem, eu poderia fazer o satura. Talvez eu não mude necessariamente tanto a tonalidade. Talvez eu tenha mudado a saturação. Você pode ver que tudo parece diferente agora escolhendo essa cor, estou fazendo uma afirmação mais ousada, mas estou fazendo uma declaração muito diferente. Ou talvez eu queira que ele se sinta mais criativo. Então eu faço rosa. Talvez rosas e roxos se sintam mais criativos porque eram um pouco mais raros na natureza. E, portanto, parece mais alternativa. Ou talvez pareça mais ousado só porque é tão brilhante. É difícil comunicar como mudar essa cor e o plano de fundo muda a forma como nos sentimos sobre ela. Mas todos podemos concordar que isso acontece. À medida que você está vendo sites na natureza, tente pensar sobre o que eles fazem. Você sente. Esta fina linha laranja, essas formas coloridas ousadas e planas, este verde grande, fluorescente, ou este azul descolorido. Embora isso seja parcialmente subjetivo e seus usuários possam sentir algo um pouco diferente de você. Queremos nos treinar para sermos particularmente bons em sentir cores da mesma forma que um músico é muito bom em detectar como são diferentes notas no contexto de músicas diferentes. E uma boa maneira de nos treinar para fazer isso é ver as cores em um contexto ou em contraste com uma cor diferente, este azul arroxeado usado no design no canto inferior direito. Você pode pensar, isso parece bastante parecido com o que usei nos créditos de abertura para este mesmo vídeo. E se eu quisesse estar na marca, talvez eu usaria esse azul como minha cor de fundo. Ou vamos por um segundo, suponha que acabei de inundar a página inteira com esse azul. Basta olhar para isso por um segundo. Reconheça o que você tem campo, mas não tente necessariamente nomeá-lo. E então vou salientar que este não é o azul que usei nos créditos de abertura, mas este é instantaneamente, eu sinto algo diferente. Talvez ajude se olharmos para eles um ao lado do outro. A cor à esquerda parece mais limpa para mim. Parece um pouco perfeito. Enquanto o da direita parece um pouco mais tátil, como se eu pudesse pegar um pedaço de papel e interagir com ele. Há uma diferença distinta entre essas duas cores que eu só notei quando as coloco ao lado da outra. Como um músico bem treinado provavelmente pode ouvir a diferença entre um C e um C afiado. E eu só posso ouvir a diferença quando eles se aproximam um do outro em uma música. No entanto, se uma música usa um C-sharp em algum lugar e, de repente alguém a muda para um C. eu posso instantaneamente aqui que a música não está certa. Não pude perceber por conta própria. Mas quando ouço isso no contexto da música, posso ver que está errado. Portanto, é muito importante que tenhamos a sensação dessas cores da maneira correta. Mas a maneira de fazer isso é provavelmente olhar para eles em algum tipo de contexto ou em contraste com outras cores. Portanto, há muita simplificação excessiva sobre o que uma cor pode significar, o que significa vermelho e o que significa azul. Mas há todos os tipos de tons diferentes desses, então podemos ignorar a maioria dessas coisas. Mas a cor faz a conexão emocional mais rápida e forte. E, portanto, é muito importante que nos treinemos para identificar as emoções nas cores. A menor mudança de cor pode afetar massivamente as emoções que ela invoca. E é muito mais fácil para nós identificar as diferenças quando dizemos isso em contexto. Vamos fazer isso em seguida. 5. Exercício de emoções: Então, no último vídeo, mencionei que para nos ajudar a nos treinar para sentir as cores, é bom vê-las em seguida, duas cores contrastantes. E também é bom vê-los no contexto. Agora, eu fui em frente e escolhi algumas palavras contrastantes e tentei encontrar cores que se encaixam nelas e colocá-las um ao lado do outro para ver se a cor zangada que tenho à esquerda se sente irritada ao lado de a cor calma que tenho à direita, é claro, não escolhi especificamente um clichê, vermelho e azul para ficar zangado e calmo, mas acredito que encontrei uma cor zangada e uma cor calma, no entanto. Como outro exemplo, escolhi mais duas palavras, criativas e organizadas de uma forma que elas se sentem como palavras contrastantes comigo. E eu escolhi essas duas cores que sinto que comunicam essas duas palavras. Tenho mais alguns exemplos de cores contrastantes, mas vou fazer você adivinhar qual é qual? Então, para isso, escolhi as palavras divertidas e sérias. Qual deles você acha que eu decidi ser divertido? Sim. Talvez seja um pouco óbvio, mas ao criar as duas cores emocionais contrastantes juntas, torna muito mais fácil para mim selecionar uma cor para se divertir. O próximo conjunto de palavras que escolhi foi alto e silencioso. E acabei escolhendo essas duas cores são mais alguns exemplos. Escolhi as palavras natureza e tecnologia, e essas são as duas cores com que acabei. E eu escolhi as palavras jovens e velhos. E essas são as duas cores que acabei com. Então, a primeira metade deste exercício é pensar em um adjetivo ou uma palavra descritiva que ajude a explicar uma mensagem de marca você pode ter em seu site. Talvez você esteja fazendo o site para um banco e, portanto, a palavra pode ser segurança. Então pense na palavra contrastante para segurança, a palavra contrastante seria risco. E então tente identificar boas cores que comuniquem essas duas palavras, segurança e risco, e coloque-as em contraste e composição como a da tela. Tente e faça pelo menos um desses onde você não muda a tonalidade, basta brincar com a leveza e a saturação. Isso nos impede de usar essas ideias cansadas como vermelho é paixão como muleta e nos faz realmente olhar para as cores. Isso não apenas torna mais fácil encontrar a cor aqui depois. Como um bônus adicional, ajuda você a encontrar cores que você realmente gostaria de evitar. Se você está tentando evitar que seu site pareça arriscado, você quer evitar as cores que você pode associar ao risco. Uma vez que estamos felizes, identificamos uma boa cor emocional. Vejamos como ele se parece em um intervalo. Então este é o rosa que escolhi para criativo antes. Posso ter alguns tons mais escuros e claros em todo o meu site. Então, vamos tentar criar um pouco de alcance. Claro, adicionei um pouco de vermelho aos tons mais escuros e um pouco de amarelo aos tons mais claros. Fiz a mesma coisa com minha cor divertida. E, como exemplo final, criei um intervalo com minha cor calma para isso não quer dizer que todo esse intervalo vai torná-lo na minha paleta de cores final. Agora tenho algumas opções para brincar quando descobri quais cores eu preciso. E posso experimentar minhas cores calmas no contexto de um design real agora e ver qual delas ficará bem como essa cor de fundo, por exemplo, ou quais das minhas cores criativas ficam boas? Claro, teremos um design mais complicado do que este, mas queremos experimentar as cores no contexto do design para garantir que elas ainda sintam como queríamos que elas se sentissem. Seu exercício para este vídeo é escolher uma emoção ou descrever a palavra que você deseja seu site comunique. Então pense sobre qual é a palavra contrastante e encontre uma cor para ambas as palavras escolhendo e ajustando essas duas cores juntas, vamos vê-la em contraste com seu oponente e isso vai realmente nos ajudar a escolher o tom exato. E, finalmente, quando estivermos felizes com nossa cor, vamos criar um intervalo. Então, temos as versões mais escuras e as versões mais claras. E então, apenas experimente-os no contexto de um site para garantir que eles fiquem bem e se certificar de que sentem as emoções que deveriam estar sentindo. 6. Objetivo das cores: Para nós escolher a paleta de cores exata que vamos usar para nosso aplicativo web. Vale a pena pensar sobre qual será o propósito de cada uma das cores. Então, vamos ver esse design que criei um pouco mais cedo e veja todas as cores que já estão nele e para que elas estão sendo usadas? Primeiro de tudo, é claro que temos nossos negros e brancos. Ou neste caso, tenho um azul marinho escuro e o cinza azulado claro. A menos que eu esteja tentando criar um estilo muito formal ou criar um ponto muito específico com preto e branco, raramente vou usar um preto perfeito e um branco perfeito. Eles quase sempre terão um pouco de tonalidade lá. Pode haver uma tonalidade muito dessaturada que tenha um valor muito alto ou muito baixo. Também haverá muitos deles, muito mais do que você pensaria. Na verdade, se você olhar para esse design, eu tenho cerca de seis negros e brancos dentro desse design. E esta é apenas uma página também. Pode até haver um uso para eu ter mais alguns. Lembre-se, a maioria das cores do seu site, vou ficar muito dessaturado. Você vai ter muito, muito poucas cores brilhantes realmente saturadas. Então, na verdade, esses negros e brancos ou blues muito dessaturados, que eles são realmente importantes porque há a maior parte do site. No entanto, muitas vezes as pessoas nem pensam muito nessas cores porque é muito difícil conseguir uma paleta de cores decente. Muitas vezes, as pessoas usam apenas uma paleta de cores que encontraram em outro lugar e provavelmente até esquecem as que estão em segundo plano e em primeiro plano, como este conjunto de cores aqui. Em seguida, temos essas cores realmente óbvias. Aqueles em que você está sempre pensando, os branding e os de call to action. Então eu tenho um grande botão de chamada à ação laranja brilhante. É a coisa mais importante no site. Está realmente se destacando e dizendo clique em mim. O objetivo dessa cor é chamar seus olhos imediatamente. E então temos a marca azul aqui. O objetivo dessa cor é criar uma mensagem de marca consistente e coerente por toda parte. Também podemos usar isso como uma cor secundária para botões. Queremos que ele se destaque menos do que a laranja. Eu também escolhi esse azul porque ele contrasta muito bem com a laranja. E então, se nossos olhos ficarem um pouco acostumados a olhar para a laranja, podemos dar uma cor brilhante diferente. Então, isso é principalmente para nossas cores de marca realmente óbvias em todo esse design. Se tivéssemos um aplicativo mais complicado, podemos ter uma terceira cor de marca que usamos em outro lugar. Mas o propósito dessas cores é que elas mais se destacam e criam a maior personalidade para nossa aplicação. E, por fim, temos nossas cores de destaque. Agora, eles estão sendo usados aqui atrás de pastilhas e o status está na página para que possamos lembrar os estribos. Podemos nos lembrar de coisas como quantas mensagens não lidas temos. Não precisamos que eles pulem para nós, mas precisamos encontrá-los quando estamos procurando por eles. Muitas vezes, essas podem ser uma variação de nossas cores primárias e secundárias ou algo que contrasta muito bem com elas. Mas quase sempre teremos um vermelho brilhante, um verde brilhante e um amarelo brilhante neste conjunto de cores de destaque. E isso porque a única coisa que é universal em nossa compreensão da cor na web é que todos agora sabem que as mensagens de aviso são vermelhas e as mensagens de sucesso são verdes. No entanto, podemos ajustar um pouco vermelho e verde. Precisa ser óbvio que é o aviso vermelho e o sucesso vermelho. Mas neste exemplo que dei aqui, joguei com eles um pouco. Eu os fiz não muito saturados, nem muito brilhantes. Mas acho que ainda há, obviamente, o sucesso e as cores de advertência e o amarelo são frequentemente usados para obter informações. Então essas são minhas cores de sotaque. Eles serão usados com moderação, às vezes apenas por um pouco de toque visual. E às vezes eles chamam um pouco de atenção, mas não tanto quanto nossos botões de chamada à ação. Portanto, temos três tipos distintos de cores ao longo desta aplicação, temos nossos negros e brancos que raramente são pretos e brancos. Temos nossas cores primárias e secundárias, e temos nossas cores de destaque. Depois de sabermos quais são nossas cores, também devemos levar algum tempo verificando quais trabalham juntos. Algumas cores simplesmente não funcionarão em cima de outras cores. E podemos querer anotar isso para que as pessoas não as usem acidentalmente. Agora, porque a cor parece em relação ao ambiente. A única maneira de verificar isso é realmente olhar com nossos olhos. Assim como fizemos com os exercícios de Joseph Alberta, você pode criar uma caixa menor dentro de uma caixa maior e verificar como as cores ficam dentro de uma da outra. Então, por exemplo, essa laranja neste cinza, ou mesmo o cinza na laranja, parece muito bom. Posso ver muito claramente a diferença distinta nas cores. Este cinza muito claro com esta laranja, isso parece absolutamente fantástico. Acho que essas cores podem ir em cima ou dentro umas das outras. No entanto, esse outro cinza com essa laranja, não funciona. É muito difícil ver a linha definida entre eles. Parece um pouco embaçado quase. É muito doloroso para meus olhos serem honestos. Há muito contraste entre os tons laranja e cinza. Mas os valores e as saturações não são tão diferentes. Não há contraste suficiente entre eles. Então eu provavelmente quero ter certeza de que todos saibam que não podemos usar essas duas cores juntos. Este laranja não pode ir neste fundo cinza, e não podemos ter esse texto cinza em um botão laranja, vamos querer fazer esse mesmo teste com todas as combinações de cores. Tudo bem se uma cor não funcionar com outra, desde que façamos anotações, mas queremos garantir também que a maioria das nossas cores funcione com a maioria das outras cores. Então, temos três grupos distintos de cores. Temos nossos negros e brancos, temos nossas cores primárias e temos nossas cores de destaque. A maioria das pessoas que fazem a maioria dos sites não está pensando todos esses diferentes tipos de cores. E, no entanto, a maior parte do nosso site é nossos negros e brancos. Então, queremos ter certeza de que temos todos estes Olhando bem quando temos toda a nossa paleta de cores, queremos verificar se eles funcionam um sobre o outro. E a única maneira de fazer isso é realmente colocá-los um em cima do outro e verificar se eles ficam bem. 7. RESUMO: Finalmente criamos uma paleta de cores. Pode mudar à medida que projetamos nossas páginas em nosso aplicativo e sem dúvida, descobrirá que algumas cores são menos úteis do que pensávamos, ou que precisamos de outra cor quando começamos a projetar páginas individuais. O importante é que temos uma paleta de cores acordada com nossa equipe ou nossos clientes. E se isso mudar, podemos ter uma conversa sobre isso. Na época. As cores transmitem as emoções da nossa marca, mas são em grande parte muito dessaturadas. Portanto, teremos um impacto emocional sutil no usuário de nosso aplicativo da web. Embora algumas de nossas cores estejam muito saturadas, mas serão usadas com muita moderação em torno do design. Estes se destacarão e chamarão a atenção das pessoas facilmente. Entre todas as cores dessaturadas, as cores têm um propósito que permanecerá o mesmo durante todo o design do aplicativo, facilitando para os usuários navegar pelas futuras páginas assim que tiverem uma compreensão inconsciente do que cada coluna significa. Agora estamos prontos para aplicar nossas cores ao nosso design. Mas primeiro, vamos escolher algumas imagens e ilustrações apropriadas para usar em nosso design.