Como criar esquemas de cores incríveis para projetos de web e UI design

1. Introdução à aula com o curso de esquema de cores: Olá e bem-vindo ao meu curso sobre a criação esquemas de cores incríveis para seus projetos de design de interface do usuário para seu site e seus painéis. Neste curso, vou cobrir passo a passo desde o início um pouco sobre a cor 2-D, o que são cores neutras? O que são cores vibratórias? Quais são as cores que chamam a atenção? Então vamos cobrir tudo isso. Então vamos para o próximo passo, que é, “Onde devo começar meu esquema de cores?” Esta é a questão que muitos designers de interface do usuário têm em mente, ou mesmo se você é um desenvolvedor ou você não sabe sobre design muito, você pode estar preocupado que como eu posso construir meu esquema de cores? Vou responder a esta pergunta. Nós vamos apenas usar uma cor para criar um esquema de cores incrível neste curso e até mesmo adicionar mais cores a isso. Então vamos passar de uma cor e continuar adicionando mais cores. Então, passo a passo, o processo de adicionar cores para seus projetos de design de interface do usuário. Então eu vou compartilhar toneladas de recursos, recursos on-line e recursos que criei para este curso, que são como 30 esquemas de cores diferentes. Você pode iniciar rapidamente seus designs de interface do usuário usando esses. Você pode usá-los no design do painel, design interface do usuário, eu tenho exemplos junto com eles. Então eu vou compartilhar com vocês um monte de exemplos, muitos recursos. Mais uma coisa que é muito importante e muitos designers perdem, que é a acessibilidade de cores. A acessibilidade de cores é, na verdade, projetar para pessoas com deficiência de cor e também usar as taxas de contraste de cores, quanto o plano de fundo ou o primeiro plano é visível. Este é um tópico que muitos designers realmente sentem falta. Então, vamos cobrir isso neste curso. O que você está esperando? Devemos começar agora e criar alguns esquemas de cores incríveis. 2. Por que as cores são importantes para UX e usabilidade: Vamos falar sobre qual é a importância das cores no design da interface do usuário, em aplicativos móveis e web design ou em geral em todos os diferentes projetos de produtos. Sempre que você olhar para qualquer aplicativo móvel ou qualquer produto digital que você está indo para comprar, a primeira coisa é que você está indo para olhar para a sua aparência visual. Esta é a primeira coisa que você vai notar. Isso vai fazer alguma percepção e você pode dizer o valor desse produto em sua mente. Esta vai ser a sua primeira impressão sobre esse produto. As cores são muito importantes, acordo com uma pesquisa feita pelos usuários de cores CCI levam apenas 90 segundos para ter alguma idéia de qualquer produto on-line para avaliá-lo, para criar algumas primeiras impressões sobre esse produto, e 62 por cento para 90 por cento disso, decisão sobre a primeira impressão que eles vão fazer são baseados no esquema de cores sozinho. Marcas como o Facebook e outras grandes marcas, eles estão usando cores em todos os seus dispositivos, seus aplicativos para destacar sua marca. Da mesma forma, as cores vão impactar você, os usuários emocionalmente e psicologicamente eles vão impactá-los. Esta vai ser a sua primeira impressão. Para criar as primeiras impressões, as cores são essenciais. Da mesma forma, do ponto de vista da experiência do usuário, as cores vão melhorar a usabilidade de qualquer aplicativo. Por exemplo, se o botão principal de call-to-action é muito proeminente, ele vai convidar o usuário para pressioná-lo. Isso realmente vai aumentar a usabilidade do seu aplicativo. Da mesma forma, você pode usar as cores para melhorar a navegação. Por exemplo, você viu em painéis no lado esquerdo, por exemplo, você usa a caixa de entrada do Gmail, no lado esquerdo você pode ver claramente qual é a pasta ou qual caixa de entrada ou rascunhos ou o que você está trabalhando agora está selecionado. As cores estão lá para mostrar que você selecionou isso, há mensagens de erro, há mensagens de informação, há mensagens de sucesso. Todos eles são exibidos usando cores. Se você remover as cores de qualquer interface, não vai fazer nenhum sentido. As cores estão lá para ajudá-lo a entender qualquer design de interface, qualquer interface de usuário. Eles vão melhorar a usabilidade e a experiência do usuário de qualquer aplicativo. Da mesma forma, agora vamos para o outro lado, que é influência psicológica da compra de algum produto. Da mesma forma, quando você compra algo on-line, suas decisões são principalmente baseadas no esquema de cores. Sempre que você está fazendo alguma avaliação inicial de qualquer compra, a aparência e a sensação de que o produto vai ajudá-lo a tomar a decisão de que eu deveria comprar este produto ou eu deveria fazer este curso. É por isso que suas imagens de produto, elas importam muito. As cores usadas nelas, os fundos usados nelas. Se você olhar para a Nike e outros produtos que são grandes marcas, eles usam cores muito intuitivamente, muito cuidadosamente em suas imagens, em seus shorts modelo, com o curto lá, modelos com algum futebol ou algo como Isso. Eles usam todos os fundos, todo o uniforme, todas as cores, todas as luzes. Eles usá-los com muito cuidado porque eles estão indo para aumentar a influência na mente do usuário ou a mente dos clientes que eu deveria comprar este produto. Este é um produto premium ou algo assim. Isso é tudo sobre sua influência usando cores e como elas são importantes no design da experiência do usuário, nas decisões de compra de seus clientes. Também aprimorando a usabilidade de qualquer aplicativo. Você pode dizer que é uma arquitetura de informação, você está exibindo basicamente a informação. As cores estão sendo usadas para contar histórias, para exibir informações que fazem sentido, que é criar um layout legível. legibilidade também é um fator de cor, porque se o contraste de cores não for suficiente, o que vamos falar sobre acessibilidade de cores, os usuários não podem ler o que você escreveu em seu site ou seu aplicativo móvel ou qualquer artigo que você tenha escrito. Espero que você esteja indo para desfrutar de todo esse estudo sobre esquema de cores e como vamos aplicá-los a diferentes aplicativos e sites diferentes. Fique ligado e eu vou vê-lo em breve no próximo vídeo. 3. Modos de cor RGB x CMYK: Então, a primeira coisa que vamos aprender é o que são diferentes modos de cores porque quando você está projetando para tela, você precisa entender perfis de cores e quais são diferentes modos de cores como RGB ou CMYK e como você vai usá-los e quais ferramentas realmente os suportam. Sempre que você estiver projetando, você começa com a ferramenta e as configurações certas. Isto é muito importante. Então primeiro eu vou começar com o modo RGB, vermelho, verde, azul, que é na verdade o modo de telas digitais e é usado em todas as telas digitais diferentes, e se você olhar para a captura de tela à esquerda, há o modo RGB, que é você pode ver agora que este vermelho tem cor vermelha para 14 e verde é misturado nele e é 72 e azul é 75. Então isto compõe esta cor vermelha à direita. No topo você pode ver a cor que selecionei. Então isso é realmente descolorido. Vamos falar sobre CMYK, que é usado principalmente para impressão. CMYK significa ciano, magenta, amarelo e preto. Então K é realmente preto. Não é nada começando com k, ele está terminando a última letra fora preto e é usado principalmente para design de impressão. Então, se você está planejando projetar seu cartão de visita ou seu logotipo, ou seu qualquer coisa que vai ser impresso para sua empresa e material de impressão, você deve começar com um modo CMYK, e você vai selecionar cores com base em CMYK valor. Então ciano será 89 agora, magenta é 66. Não há cor amarela ou preta misturada nesta cor azul. Então, uma dica que eu vou te dar. Há cores como, você pode ver que eu selecionei esta cor azul, cor azul particular, e aqui temos a partir das quatro cores, C, M, Y, e k. Então, há na verdade quatro cores misturadas entre si. Nós só selecionamos duas cores deles. Ciano e magenta e estamos misturando apenas cor ciano e magenta para criar esta cor azul andt vai ajudá-lo muito na impressão. Ele vai economizar um monte de custo, custos de impressão, e também vai economizar um pouco de cor. Então, sempre que você está projetando para impressão, você está projetando um logotipo, você está projetando um cartão de visita, tente usar dois valores de cor, este é apenas um protótipo. Então isso é tudo sobre CMYK e RGB. Principalmente nós vamos projetar para telas digitais para que não precisamos nos preocupar com CMYK, mas eu acho que você deve saber sempre que você está de alguma forma projetando um cartão ou você pode dizer um cartão de visita, você não falha. Mais um conceito que é muito importante entender é perfis de cores. No modo RGB, seu monitor ou seus dispositivos digitais, eles podem exibir 16,7 milhões de cores, mas há mais tons de cores do que isso. Então, quais 16,7 milhões seu monitor deve exibir? Isso vai ser decidido por perfis de cores, ou eles também são chamados de espaços de cores. Então o espaço de cores ou o perfil de cores na verdade vai dizer ao seu dispositivo digital que esses tons de cores vão ser azuis ou estes vão ser vermelhos, ou estes vão ser amarelos, verdes. Então é assim que ele vai mostrar o intervalo de cores que podem ser exibidas dentro de um perfil de cores. Para design digital, usamos sRGB, que é usado principalmente em web design, e é amplamente usado em todos os navegadores da web. Então ele vai usar para exibir imagens, para exibir seus ícones, seus projetos em sites, e também nos dispositivos digitais, como seus telefones celulares. Então, principalmente, vamos projetar 99,99 por cento vamos usar o modo sRGB e se você quiser estudar mais sobre isso, há mais alguns exemplos de perfis de cores mais comuns, mais populares sobre o Adobe RGB 1998 e também há cores perfis para CMYK. Então, se você estiver imprimindo no Japão ou em qualquer outro país, eles têm seu próprio perfil padrão para uma cor. Então CMYK, Japan Standard versão dois e há como talvez 50 perfis de cores diferentes para dispositivos digitais. Então você precisa selecionar sRGB, que será mais comum, e estaremos usando apenas isso. Agora, no último, vou falar sobre algumas das ferramentas que são específicas para o design CMYK ou RGB. Então, se você está projetando para sites são aplicativos móveis. Então eu gostaria de mostrar que os aplicativos à direita, eles são realmente usados na indústria muito como figma, esboço, Adobe XD Studio e Invision Studio. Então, se você está projetando aplicativos móveis ou você principalmente projetar site, você tende a usar as ferramentas à direita. Photoshop é uma mistura que você pode projetar usando o modo CMYK n modo RGB, mas eu não recomendaria para branding ou design inferior. No lado esquerdo, você está vendo o Adobe Illustrator, que é uma ótima ferramenta realmente adorável para o trabalho CMYK, trabalho branding ou trabalho de design de impressão. Também há recursos de ilustrador que você pode iniciar um design de modo RGB, ou você pode projetar um sites no Illustrator também, mas eu não recomendaria para esse propósito. Da mesma forma, as ferramentas que eu trabalhei realmente recomendo são Adobe XD, esboço e figma agora. Pode haver ferramentas diferentes ou prioridades diferentes no futuro, mas Photoshop, Adobe XD, figma e esboço, estas são as quatro ferramentas que eu recomendo que você comece a aprender ou usar agora mesmo em 2019. Então, isso é tudo. Sempre que você tentar selecionar sua ferramenta, tente selecioná-la com base nas ferramentas de modo RGB ou ferramentas que são usadas especificamente e feitas especificamente para design de web e design de interface do usuário e design de aplicativo móvel. Então isso é tudo para este RGB e CMYK, var e comparação. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 4. Roda de cores 101: Deixe-me apresentá-lo com roda de cores. Você pode ter visto isso muitas vezes, mas aqui estamos indo para discutir como e quais são as diferentes cores que estão indo para fazer esta roda de cores, e como realmente ele é feito de. Vamos ver algumas das cores primárias e secundárias e como elas são misturadas para criar esta roda de cores bonita. Primeiro fale sobre cores primárias. Nossas cores primárias são três, amarelo, azul e vermelho. Eu me lembro quando eu era criança, nós costumávamos misturar essas cores para criar cores diferentes em nosso nível Montessori ou berçário ou aulas de jardim de infância. Estas são as três principais cores primárias e todas as cores diferentes serão feitas misturando-as. Estas são cores primárias, então vamos misturá-las para criar nossas cores secundárias. Agora você pode ver que estas são cores secundárias, laranja, esta cor violeta ou roxa, e a cor secundária é verde, eles são feitos misturando as duas cores primárias. Cor primária, amarelo e vermelho vão criar laranja, Vermelho e azul vai criar cor violeta ou roxo e cor primária, azul e amarelo vão criar uma cor secundária. Vamos misturar essas cores secundárias com a próxima cor primária para criar mais cores diferentes. Estas serão as nossas cores terciárias. Aqui temos as cores terciárias e é assim que todo o círculo desta roda de cores é realmente concluída. Temos cores primárias, em seguida, cores secundárias, em seguida, vamos misturar cores primárias e secundárias para criar cores terciárias. Agora, vamos falar sobre os tons, tons e matizes de qualquer cor e o que é realmente matiz. Este é um conceito muito importante. Se você conseguir isso, você pode criar qualquer tipo de esquema de cores mesmo com base em uma única cor. Primeiro, Hue. Matiz é realmente cor pura, nós chamamos matiz, que é na verdade a cor eo nome da cor, cor pura como laranja, é a tonalidade e nós vamos usar a cor pura ou [inaudível]. Agora, matiz. Tint é, na verdade, quando misturamos matiz com branco. Se continuarmos adicionando cor branca em qualquer matiz como, por exemplo, eu tenho cor amarela ou laranja e eu tento misturar branco nele Ele vai ficar mais brilhante e mais leve. Isto vai criar uma tonalidade. Eu me lembro quando eu era criança eu costumava misturar e criar diferentes tons ou tons de cores misturando branco, cor bestial em talvez cor verde ou azul, para criar tons diferentes da mesma cor azul. Da mesma forma, tom. O tom é, na verdade, a mesma tonalidade mais cinza. Vamos adicionar cor cinza para criar tons diferentes. Muito tempo No mundo do design, normalmente chamamos essas tonalidades e até mesmo tons. Chamamos tons principalmente tons ou tons da mesma cor e usamos o termo de forma intercambiável, mas a coisa real é que tonificar uma cor é realmente adicionar cinza a ela. Se você tem alguma cor, quaisquer cores puras como roxo ou violeta e você está adicionando cinza nele, ele realmente vai criar um tom. É basicamente um lavado, cores maçantes. Se você quiser criar uma sombra maçante de qualquer coisa, você está realmente criando tom e você está adicionando cor cinza a ele. Você precisa se lembrar apenas dessas três coisas. Os tons são cinza, os tons são brancos e os tons são pretos. Vai criar a nossa rima na tua cabeça. Sombras. Sombras estão adicionando preto. Quando você adiciona preto a uma tonalidade pura, você vai torná-lo muito mais escuro e vai criar tons dessa cor. Usando este modelo, matiz, matiz, tom e tons, podemos criar um esquema de cores inteiro apenas com base em uma única cor. Se temos apenas uma cor como laranja ou talvez azul, matiz vai ser que precisamos, por exemplo, precisamos de cinco cores ou seis cores. Podemos fazer isso facilmente. Podemos criar como dois ou três tons, um ou dois tons, adicionando branco e um ou dois tons da mesma cor para criar um esquema de cores inteiro. Agora, eu vi muitas vezes que os designers quando eles lêem um resumo de design ou falam com um cliente, o cliente tem alguns problemas específicos de esquema de cores como talvez meu cliente diz que eu preciso de uma cor quente ou eu preciso de um olhar convidativo na minha site. Quero que o usuário se sinta relaxado e quero que seja muito convidativo e excitante. Então eu vou mudar para as cores quentes. O que meu cliente está me dizendo que você precisa usar cores quentes em seu design. É isso que ele está pedindo. Você precisa cuidar desse problema e você precisa ter certeza de que conhece a diferença entre cores quentes e cores legais. Você pode ver as cores que têm mais vermelho, laranja e sombra amarelada neles são basicamente cores quentes, e as cores que são verdes e azuis, eles têm mais sombra de azuis e verdes neles, eles são cores realmente legais. Sempre que você está selecionando ou baseando seu esquema de cores, você precisa manter essa coisa em mente que as cores legais são realmente calmas e eles são mais, você pode dizer, eles têm mais harmonia e eles têm mais intensidade, eles são cores mais fortes e cores estáveis, e as cores no lado mais quente da roda de cores são mais emocionantes. Eles são mais, você pode dizer divertido. Eles são mais vibrantes. Esta é a diferença básica. 5. O que é cores de nutro: Agora, eu vi muito tempo que em aulas de design ou em qualquer lugar onde eu tenha visto um vídeo do YouTube ou algo assim, eles não falam sobre cores neutras. Sempre que você estiver projetando, por exemplo, uma interface, design de interface do usuário do aplicativo móvel, até mesmo seu interior de quartos, você vai usar um monte de cores neutras. Por exemplo, estou projetando para um aplicativo móvel e quero o plano de fundo desse aplicativo seja um amarelo pálido ou um azul acinzentado pálido. Na verdade, o que estou fazendo é que estou usando uma cor neutra. Qual é o benefício dessa cor neutra? Você pode ter visto que em suas casas nas paredes, você vê principalmente que eles são pintados com cores neutras. Por que é isso? A razão é que as cores neutras estão realmente indo para agir como a base de você pode dizer, estendendo de outras cores, por exemplo, eu tenho cor azul acinzentado pálido em minhas paredes. Agora eu quero uma cor de acento e essas cores neutras vão dar muito poder à minha cor de acento, ou você pode dizer minha cor nítida e vibrante em cima disso. Então, as cores neutras são basicamente tons maçantes e claros, e na verdade o que eles fazem é que eles vão agir como uma base para cores mais vibrantes sobre eles. Vou usar a maioria deles como meus antecedentes ou talvez minhas bordas no meu design, ou talvez fundo para uma imagem de um modelo, talvez assim. Você já viu muitas vezes essas cores, mas você pode não reconhecê-las porque elas são usadas em um tom muito mais claro às vezes. É assim que as cores neutras são usadas. Deixe-me mostrar-lhe uma outra ferramenta que você pode usar para obter essas cores, e que é Picular. Aqui temos uma ferramenta que mostrei. Eu vou usar um monte de tempo durante este curso, que é picular.co eo que eu fiz foi, na verdade eu procurei para o termo, design de interiores. Você verá muitas cores nítidas e vibrantes juntamente com cores neutras. Aqui temos estas cores acastanhadas. Estas duas são cores neutras. Esta é uma cor vermelha um pouco afiada, é uma cor de acento ou cor brilhante. Então temos novamente cor maçante, C4C4C4. Então temos novamente, cor marrom esverdeada pálida. Então nós temos novamente aqui, estes são todos diferentes tons ou tons dessas cores neutras. Isto é novamente neutro e esta é novamente uma cor muito agradável, 79767B, uma cor neutra marrom acinzentado agradável. Você também pode usar diferentes matizes ou tons desta cor para torná-la mais escura ou mais clara. É assim que você pode ver que temos cores diferentes dessas cores neutras. Eu realmente quero mostrar-lhe o conceito de cores neutras porque eu vi um monte de designers que simplesmente ignorar isso. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pergunte-me, vamos para a próxima lição. 6. Exemplos de cores quentes e de nude no design de UI: Deixe-me mostrar-lhe alguns dos exemplos do uso de tons quentes e frios em diferentes designs de diferentes aplicativos e sites. Aqui está o primeiro exemplo, aplicativo de fitness Hermes e você pode ver ao contrário de outros aplicativos, ele tem um uso de cor muito quente. Você pode ver aqui nós temos amarelos, um pouco de cor marrom creme, deixe-me descer, você pode ver aqui marrom avermelhado. Mais uma vez, se descermos aqui, teremos marrom muito escuro. Isto é tudo tema de arte. Está relacionado com a sua arte. Então este é um grande tema. Você pode ver aqui que tem um tom quente para todo o design. Há poucas coisas mais frias aqui, como este temporizador. Isso é realmente o que os designers fazem. Eles realmente tentam misturar quente e com o blues para obter um pouco de acalmar seu design. Então é assim que eles realmente o equilibram. Então isso também acontece quando você desenha algo para seus interiores. Então, se você está projetando seu quarto ou algo assim, você pode pintar suas paredes creme ou vermelho ou algo assim. Em seguida, para suas camas e suas almofadas, você pode usar azul pontilhado acinzentado em cinza você pode dizer cobertura para suas almofadas. É assim que realmente tentamos usar. Mas, no geral, todo o aplicativo ou todo o design têm mais tendência para um esquema de cores. Por exemplo, se estiver quente, então será mais quente e menos frio. Aqui está um ótimo exemplo. Então deixa-me mostrar-te outra. Aqui temos outro. Tem mais legal e calma olhar como você pode ver cores cianas por aqui. Isto aqui é muito roxo claro. Você pode ver todo o olhar é muito calmante e todo o tema é um tema um pouco resfriado. Este é outro exemplo. Deixe-me mostrar-lhe mais alguns exemplos aqui temos outro exemplo muito bem projetado, mas todo o tema é baseado em tons quentes. Você pode ver fundo vermelho escuro, muito cremoso por aqui. Então este é um ótimo exemplo. Você pode ver até mesmo as imagens aqui, eles têm tons muito escuros, avermelhados ou laranjados. Isso é basicamente este design é mais focado em tons quentes além de tons frios. Então, aqui temos. Deixa-me mostrar-te outra. Este é outro, e aqui temos novamente, uso de cor única, principalmente verde, verde muito escuro. Então é novamente um pouco no lado calmante e muito sério, um pouco sério e calmante lado, então não. Então, eles também usaram esta cor creme avermelhada ou cor creme acastanhada. Por isso, é mais em uma inclinação mais para, você pode dizer vermelho e verde. Então, talvez eles sejam, na verdade, opostos. Então, cores complementares, ambos são opostos um ao outro, mas isso é mais inclinado e mais olhando para tons quentes. Então este é outro. Na verdade, ele tentou misturar duas coisas diferentes, como eu disse antes, quente e calmo. Então eles estão misturando cores quentes como o fundo, e a cor do primeiro plano é uma cor calmante que é verde escuro. Da mesma forma, se você olhar para este, este é para hotéis. O que quero mostrar aqui é a sua seriedade. É mais inclinado para a calma. Temas calmos, cores calmas. Você pode ver por aqui principalmente o blues e se nós descermos. Então, principalmente o azul. Azul também é para, você pode dizer, cor profissional. Mostra que esta empresa é séria ou que esta empresa tem organização profissional. É assim que isso tem sido usado. Então aqui temos outro exemplo que é o sistema de entrega de alimentos. Então, como você pode ver, para a emoção que eles têm usado esta cor laranja porque laranja é um pouco emocionante e cor quente. Se olharmos para ele aqui, você pode ver que também há cores verdes muito afiadas, que são talvez, eu acho que para orgânicos ou talvez vegetarianos, algo assim. Mas a aparência geral ou tema disso é quente. O design sempre se inclinará para um lado, se será um design quente ou pode ser um design legal ou pode ser um design neutro. Mas principalmente está inclinando para um lado. Então este é um design um pouco quente. Aqui temos outro exemplo de design legal e é aplicativo de investimento. Você verá que a maioria dos aplicativos ou projetos relacionados a finanças ou negócios ou coisas assim. Eles vão usar muito blues e este tons roxos muito. Então você pode ver aqui é outro exemplo. Isso é principalmente em direção ao tom calmante. Então temos outro exemplo. Esta é uma página de aprendizagem e esta é também, eu acho que para a empresa financeira. Aqui você pode ver novamente a cor azul é proeminente. Então temos este verde. Verde é basicamente para a segurança, que isso é seguro para investir ou algo assim. Então é por isso que a cor verde foi usada aqui. Então, aqui está outro exemplo. Novamente, este site web design é realmente design quente. Eu realmente amo como este designer tem usado muita simplicidade neste design, e um bom uso do tom quente com este azul maçante. Eu acho que é um pouco escuro, azul maçante, azul acinzentado. Então realmente amo isso. Design muito simples e muito bem feito. Aqui está o meu projeto. Você pode ver, você pode ter visto essas ferramentas GP. É mais inclinado para o lado mais frio ou tema legal, porque está relacionado com médicos e médicos são principalmente apareceu com essas cores como esta cor azulada ciano, que eles realmente usam a maior parte do tempo como cirurgiões. Então o azul escuro que eu usei é para o negócio ou profissionalismo sério, que este é um aplicativo profissional, algo assim. Então, isso é tudo. Espero que você tenha gostado desta lição que maioria dos aplicativos que eles estão indo para inclinar para um lado, se ele vai ser um tema legal ou talvez seja um tema escuro. Talvez você tente equilibrá-los usando um pouco do outro lado. Por exemplo, se você estiver projetando tema quente, você pode adicionar um pouco de cor legal para equilibrá-lo. Então, se tiver alguma pergunta, vamos passar para a próxima lição. 7. Teoria de relacionamento com cores: Agora, vamos olhar para o que são diferentes esquemas de harmonia de cores e como cores diferentes realmente funcionam juntas, e quantos tipos diferentes de combinação de cores e esquemas de cores podemos realmente construir. Portanto, existem poucas regras que você pode seguir para criar um esquemas de cores harmoniosas. Antes de entrarmos nisso, vou mostrar a vocês que esta é realmente a ferramenta Adobe Color CC. É uma ferramenta online. É gratuito, você pode usar isso para construir seus esquemas de cores. Antes de iniciar seu esquema de cores, você precisa de uma cor, que será sua cor base. Então cor base você pode obtê-lo a partir do logotipo ou da marca da empresa que você está projetando para. Ou talvez, se você estiver projetando o logotipo você mesmo, você pode selecionar a cor com base no tema. Por exemplo, se você é forte ou divertido ou qualquer cor. Agora eu selecionei minha cor base para ser este, 3E4F87, 266 matiz, 54 saturação, 53 brilho. Neste momento, está algures por aqui. A primeira harmonia de cores ou o primeiro esquema de cores que você pode criar, você já criou isso e que é monocromático. Monocromático significa que vamos usar apenas uma cor. Vamos adicionar alguns tons, tons e tons da mesma cor, vamos usá-los e criar um esquema de cores. Então, esse esquema de cores, que é baseado em uma única tonalidade, e saturação e brilho diferentes, ele vai ser monocromático. Neste momento, o que estão a ver é monocromático. Então, se você quiser apenas qualquer cor aqui, você pode clicar sobre ele e você pode usar esses controles deslizantes. Você pode ver que o matiz está permanecendo o mesmo, que é a barra superior aqui, dois inferiores são na verdade a saturação e o brilho. Se você quer mover algo assim, você pode fazer isso. Você pode construir esquemas de cores como este. Este é realmente o nosso monocromático e pode efetivamente funcionar em qualquer design de interface do usuário. Assim, você não precisa usar muitas cores ou três ou quatro cores muito vibrantes para mostrar suas diferentes ações possíveis em suas telas. Há mais uma coisa, você também pode selecionar seu esquema de cores da sua imagem, você pode importar o gráfico ou imagem aqui. Vamos usar este. Ele vai escolher cores diferentes a partir daqui você pode ver estas são as cores que foram usadas neste esquema de cores e nesta imagem. Agora, nós vamos voltar para a nossa roda de cores e você pode ver isso é como eles realmente usaram o, ele é realmente espaçado para fora as cores no mesmo espaço, você pode ver um pouco de laranja vermelho , laranja e azul. Então estas são as cores que foram usadas, vermelho rosado. Vamos passar para outro esquema de cores que é análogo. Análogos significa que as cores que estão mais perto na roda de cores, você pode combinar uma ou duas ou três cores que estão mais perto dentro de seu esquema de cores e construir um esquema de cores com base nisso. Então eles vão trabalhar harmoniosamente. Se eu tentar mover a cor base para aqui, você pode ver, por exemplo, se eu tentar escolher uma cor base nos verdes ou talvez um pouco de amarelo. Então verde e laranja, então meu esquema de cores é basicamente análogo e eu selecionei minha cor base, que é este, o verde médio. Temos o equilíbrio de ambas as cores amareladas, verde amarelado, cor laranja, e também os tons verdes puros. Agora, se você quiser ajustá-lo, não tente usar algo assim. Você pode ajustá-lo, você pode movê-lo assim, então ele está realmente se movendo em direção a um tom mais cinza. Você pode ver que isso está realmente deixando isso chato. Então aqui temos branco, então aqui temos cinza. Você também pode usar este para torná-lo brilhante ou escuro como este. Talvez eu queira um pouco de cor escura nele, e eu quero alguns tons claros nele, alguns tons maçantes nele. Sempre que você está construindo um esquema de cores, há uma dica que eu vou te dar agora e você deve ouvir com atenção. Que não usamos todas as cores da mesma nitidez ou brilho. Se esta cor é muito brilhante, eu quero algo maçante ou escuro para o meu fundo. Porque eu quero que isso apareça no fundo. Da mesma forma, eu não vou usar todas as cores brilhantemente, eles vão, eu posso ter algumas cores maçantes ou algo assim. Este vai ser o meu esquema de cores. Aqui está outra ferramenta, que eu realmente amo. É uma ferramenta online, eu vou mostrar o URL aqui, fonte de cor, eu acho. Você pode ver aqui eu selecionei um esquema de cores análogo compreendendo destes. Então, se eu tentar movê-lo para cá, vocês podem ver que é assim que eu estou realmente me movendo nas cores, cores diferentes. Vamos experimentar este laranja, amarelo e verde. Quando eu selecionar este análogo, você pode ver que ele vai me dar alguns mais escuros, mistura de mais escuro, e alguns tons maçantes e tons e matizes. Eu vou escolher um que eu acho que vai funcionar bem, por exemplo, como este. Isso está realmente ótimo. Você pode ver que ele mostra os exemplos de uso deste esquema de cores, você pode ver que é basicamente para design de ícones, mas você pode usar isso em seu web design ou design de interface do usuário. Você pode ver se eu tentar usar este esquema de cores, esta é a aparência e sensação que virá da combinação dessas cores. Como você pode ver isso, fundo é um pouco maçante, mas a cor amarela em cima é muito brilhante e afiada. Este é o esquema de cores análogo. Agora, vamos passar para outro que é tríade. Tríade é na verdade um triângulo perfeito em sua roda de cores. No topo temos vermelho e você pode ver depois de três cores ou três saltos, é na verdade uma próxima cor. Então, depois de cada três cores, então o espaço será semelhante em todas elas. Se eu tentar usar este, vamos tentar usar este. Isso é mais vibrante e tem um monte de contraste em todas essas cores porque eles são separados de um monte de ângulo. Se as cores estão mais próximas umas das outras, elas têm menos contraste. mais que eles se afastem uns dos outros, por exemplo, se eles são totalmente opostos, eles têm mais contraste. Se eles têm como separados por dois saltos aqui, eles têm menos contraste. Então se adapte à sua demanda, o que você quiser em seu esquema de cores. Você quer muito contraste? Ou você quer contraste sutil em seus esquemas de cores? Então a tríade é, na verdade, você pode ver um triângulo, perfeitamente espaçado triângulo na curva. Agora, vamos passar para split-complimentary. Antes disso, digamos que eu use esse complemento. Então esquema de cores complementar, que eu acho que você deve usar principalmente, é na verdade totalmente duas cores opostas em uma roda de cores. Eles terão muito contraste, por exemplo, este azul e laranja, ou este azul e laranja mais escuros. Se eu tentar selecionar, vamos ver, eu vou usar este. Então você pode ver que isso é realmente como eles vão olhar. Eu adoraria tonificar uma cor, então vamos usar esta. Isso parece realmente ótimo. Você pode ver que é assim que eles vão olhar se tentarmos construir ícones neste esquema de cores com base neste esquema de cores complementar. Complementar significa que eles são totalmente opostos em uma roda de cores. Pode ser vermelho ou verde. Você pode ver no design universal da interface do usuário. Vermelho é para excluir ou cancelar, e verde é para sucesso. São cores totalmente opostas. Da mesma forma, azul e laranja, vi muitos esquemas de cores usando-os. Então temos essa cor verde e magenta. Então nós temos esta cor amarela laranjada e esta cor siano cercada, tipo azul-cerco algo cor. Este esquema de cores, Eu realmente amo laranja e azul diferencia. Estas são duas combinações, na verdade, um e dois, e eu realmente amo este. Estas são duas das minhas cores favoritas. Esta cor azulada escura, roxa, e a cor laranja. Isto é tudo sobre cortesia. Vamos passar para o próximo, que é split-complementar. Tudo é o mesmo cortesia. Então você pode ver que esta é cor vermelha agora, é exatamente opostos deve ser verde. Mas, na verdade, mudamos para a direita e para a esquerda para essa cor complementar. Vai ser não ter muito contraste, mas ainda tem um monte de contraste. Ele terá três cores, então mais variedade nele. Vamos selecionar este ou este. Então você pode ver, eu estou tentando este esquema de cores, e vamos tentar este. Então este parece bom. Você pode ver que eu selecionei este esquema de cores split-complementar. Estes são os ícones que podem ser usados ou é assim que você pode usar cores diferentes neste esquema de cores, e não vai ter muito contraste, mas ainda assim como as cores complementares, mas ainda um monte de contraste. Além disso, você pode ver mais uma coisa que as cores na parte inferior, elas estão quase mais próximas umas das outras. Então eles vão agir mais como um esquema de cores análogo. Eles têm alguma compatibilidade. Esta cor podemos usar para contraste. Agora, no último, eu vou mostrar a vocês este esquema de cores quadrado ou complementar duplo às vezes as pessoas dizem que há duas cores complementares como vermelho, verde e azul e laranja. Então, na verdade, isso é complementar a divisão. Vamos movê-lo para cá assim. Então você pode ver agora aqui na parte inferior, ele está olhando muito legal porque nós temos quatro cores agora para jogar. Vamos selecionar este, e você pode ver isso é como ele vai produzir alguns ícones e patronos, e é assim que eles vão ser usados. Se você estiver indo para, por exemplo, construir um painel onde temos notificações, onde temos mensagens de erro, onde temos muitas dessas coisas, então vamos ficar com esse tipo de esquema de cores onde nós precisa de quase quatro cores para coisas diferentes e ações diferentes. Além disso, você pode datá-los e se você quiser, você pode usar algo como isso ou algo assim e usar isso em seu esquema de cores também. Na maioria das vezes, designers de ícones ou talvez ilustradores, eles precisam de muitas cores, cores vibrantes diferentes, diferentes cores maçantes para completar a ilustração. Mas em design de interface do usuário ou web design, podemos facilmente projetar qualquer interface, coisa com apenas uma ou no máximo duas cores. Então, tenha isso em mente. Isto é tudo sobre diferentes harmonias de cores. Vou mostrar-lhe os exemplos na próxima lição, como e onde você pode usar e onde esses diferentes esquemas de cores foram usados. Vamos passar para a próxima lição e ver alguns exemplos. 8. Exemplos de harmonia: Agora deixe-me mostrar-lhe como eu criei alguns esquemas de cores no passado, e este é um dos exemplos, deixe-me mostrar-lhe. Você pode ver que este é um site e é sobre uma sinalização digital multimídia e diferentes dispositivos digitais e gerador de caracteres sinais digitais realmente. Na verdade, redesenhei este esquema de cores total e tudo mais e mantendo a maior parte do layout o mesmo. Você pode ver aqui você está vendo este azulado compartilhado, em seguida, o estoque, preto, vermelho. Então você está vendo alguns grandes o fundo. Então, se você passar por aqui, você pode ver que este é azul escuro, este é um pouco azul claro, e se você passar sobre ele, você está vendo alguma cor amarelada. Este é, na verdade, todo o esquema de cores , tem vermelho, azul e amarelo. Deixe-me mostrar-lhe, Eu copiei valores diferentes a partir daqui e eu vou mostrar-lhe como realmente eu projetei este esquema de cores e o que realmente pertence, é a qual método de harmonia esquema de cores pertence. Deixa-me mostrar-te. Estamos de volta ao Adobe color CC e esta é realmente a nossa cor base, esta é a cor base que eu comecei com. Este é 214U na verdade, e você pode ver que isso está quase mais perto de tentar adicionar esquema de cores. É um triângulo perfeito. Este é vermelho, amarelo no lado e azul no lado. Este é realmente esquema de cores tríade e você pode ver no meio este, então nós temos outro tom ou você pode dizer sombra deste, reduzindo a saturação um pouco e aumentando realmente o brilho dele. É basicamente uma mancha. É uma cor clara básica com algum menos, você pode dizer nitidez ou saturação. Então temos essa cor vermelha, esta é uma cor vermelha um pouco mais escura, talvez por força, porque esta é uma organização e é uma organização muito antiga. Então nós temos este amarelo para emoção, alguns dos links que eu usei talvez eu queria que fosse clicado e eu queria ter algum bom efeito quando alguém paira sobre eles. Esta é a cor que selecionei. Isto é novamente, na verdade muito perto U para 214, um pouco diferente, como 10 ou 14 ou 16 um pouco de mudança. Na verdade, foi assim que criei todo este esquema e me candidatei. Há mais cores nele, mas eles são principalmente as ações e tenso fora desta cor azul. A única cor que são contrastantes são na verdade este vermelho e amarelo. Deixa-me mostrar-te. Agora esta é uma roda de cores e este é na verdade o esquema de cores tríade que eu estou usando vermelho, azul e amarelo. Vermelho, azul, amarelo, mas estou escolhendo tons diferentes, matizes do mesmo esquema de cores. Não tente usar as mesmas cores puras como esta. Este é um exemplo. Deixe-me mostrar-lhe mais exemplos. Vamos ver mais um exemplo de esquema de cores monocromáticas. Isto é realmente usando apenas uma única cor, que é na verdade cor amarela e se você olhar para isso, você pode ver aqui nós temos apenas uma pitada de cor vermelha. Vermelho é na verdade essa cor de marca da organização e este designer, ele realmente escolheu a cor amarela, que é eu acho que três ou quatro paradas de distância desta cor vermelha e se nós descermos, você pode ver que está usando apenas amarelo, um pouco compartilhado sombra mais escura de amarelo que é bom. Isto ainda é monocromático. Novamente, uma sombra ou tom maçante desta cor amarelada. Da mesma forma, aqui, algumas pontas claras de amarelo e uma cor laranja amarelada e é isso. Basicamente, é vermelho, que já está lá cor de marca e amarelo. Amarelo é realmente usado ou inteiro neste site e mais uma coisa que eu quero mencionar ou ar, se você olhar para esta parte, amarelo, branco e preto, eles têm um monte de contraste. Você pode ver este preto é para breu preto e amarelo e branco sobre eles são realmente emocionante, um cores muito vibrantes. Isto é, na verdade, você pode dizer, este designer pegou essas cores com base nisso. Você pode ver se você olhar para relacionamentos duradouros sobrecarga, sucesso global são relacionamentos duradouros Eu tenho algum entusiasmo para ele, talvez eles queiram que seus clientes tenham algum entusiasmo e interesse, algo assim, talvez criativo soluções. Este é um esquema de cores muito agradável, apenas usando amarelo. Você pode fazer isso também. Vamos ver mais alguns exemplos. Aqui está um aplicativo muito grande projetado por algum designer e eu não me lembro. De qualquer forma, o que eu quero mostrar aqui é que este é novamente um esquema de cores triádico usando azul, vermelho e amarelo. Vermelho é realmente usado aqui para cancelar a chamada para essas ações, mas principalmente é pesadamente, a cor mais usada é esta cor azul, escura, cor roxa azulada e então temos um tom para baixo muito maçante tom acinzentado Cor azul aqui. Então temos esta laranja, que está relacionada com esta cor vermelha aqui. Aqui você pode ver à direita aqui, se eu arrastá-lo assim, você pode ver aqui nós temos este ícone de mapa aqui. Então temos amarelo usado aqui. Você pode ver aqui nesta área, estimativa justa, $12 e amarelo. Então, a cor amarela é muito brilhante e azul é um azul maçante. Este é outro exemplo de usar cores maçantes e maçantes e misturar as cores brilhantes e nítidas com cores maçantes. Eles vão estourar no fundo maçante. Outro esquema de cores, é novamente esquema de cores triádico. Agora deixe-me mostrar-lhe um exemplo de esquema de cores análogos aqui temos este site natuur e meio, o que quer que seja, de qualquer maneira é da Holanda. Você pode ver ou ouvir. Agora eles têm todas as cores que estão em verde azulado e sombra siana ou azulada e você pode ver verde, negócio, azul e isso é tudo. Então, na verdade, o tema é a natureza, então eles ficaram na natureza, que é água azul e árvores verdes. Todos eles vão esquema de cores. Tudo é semelhante a isso. Você pode ver no topo eles estão usando algumas cores muito claras densas e muito escuras da mesma sombra, mesma cor, mesma tonalidade para criar isso, eu acho que este banner cookie aqui. Deixe-me mostrar-lhe como realmente funciona e como mais um exemplo deste. Este é outro brilho de design com o nome de brilho. Ele também está usando esquema de cores que é monocromático principalmente, e apenas uma cor que vai ser uma cor complementar. Na verdade, é a mistura de esquema de duas cores. Por que estou te mostrando isso? Porque na maioria dos projetos que viram e designers para realmente eles tentaram misturar dois esquemas de cores. Eles tentaram usar monocromático, que é, na verdade, você pode ver o segredo real por trás dele que você tenta escolher uma cor e tentar criar tons diferentes e diferentes, você pode ver diferentes tons mais escuros, tons diferentes da mesma cor, e adicionar diversão ou duas cores para o contraste. Você pode ver aqui, maioria das cores ordem k, esta é a mesma cor usada por todo o lado e se eu clicar e arrastá-lo, você pode ver, vamos para o fundo. Aqui temos cor vermelha muito escura. Você pode ver azul e vermelho, e eles parecem quadrados. Então temos esta cor verde que é usado muito menor sobrecarga, mas é na verdade para contraste. Se eles tentarem usar a mesma cor aqui, não vai chamar a atenção. Essa cor do botão é a mesma. É consistente como a ação primária. Vamos arrastar só este. Você pode ver que os botões são da mesma cor, mas eles têm usado alguns trabalhadores como você pode ver a cor laranja aqui para avaliações verificadas. Só para mostrar que este item é diferente, queremos sua atenção aqui. Este é um exemplo muito bom de usar um esquema de cores monocromático e complementar, tendo alguns, adicione um pouco mais de cor ao esquema de cores monocromático apenas para chamar a atenção. Agora vou compartilhar com vocês mais um esquema de cores de análogos populares, que é azuis e verdes. Eu vi isso muito tempo em diferentes interfaces e eu vou mostrar-lhe alguns dos sites. Agora, então você pode ver que este é outro site. Acho que sim. Esta é uma plataforma de crescimento de negócios de qualquer maneira gleam. Você pode ver aqui que eles têm verde azulado. De qualquer forma, este é o esquema de cores azul azul-azulado. Eu realmente amo isso. Muito agradável. Você pode ver que o botão verde está realmente olhando bem nesta cor azulada escura aqui e se eu descer, você pode ver a maioria de suas cores. Eles são na sua maioria verdes. Vamos descer. Novamente, você pode ver cor roxa azulada e verde e se descermos novamente, o mesmo contraste de cor é um gradiente muito agradável. Vou mostrar-lhe onde realmente ele tem sido usado mais, vamos ver outro exemplo. Isto é lavagem de carros brilhante. Você pode ver novamente em suas fotos na verdade eles estão usando apenas uma cor, esta muito afiada, cor verde amarelada, talvez quatro lá. Eles querem mostrar aquele produto verde ou algo assim. Mas você pode ver, se você olhar fechando a imagem, próximo, você pode ver os olhos usando blues ou aqui no fundo em seu todo em sua maioria em azuis e verdes, azuis e verdes. Este é outro contraste. Muitas vezes eu já vi isso azuis e verdes. Mas agora eles estão. A maioria dos sites é monocromática. Este é o exemplo que eu mostrei antes, página inicial do brilho. É de Marius. Nada de palhaços e eu realmente adoro isso. Muito simples, muito eficaz. Você pode ver que esta é mais escura, cor rosa avermelhada usada aqui. É, na verdade, você pode dizer muito tem um monte de contraste nesta área aqui. Então temos isso, uma cor laranja pálida, mas em branco vai olhar, eu vou ter muita atenção. Isso é tudo. Na maioria das vezes monocromático do que eles são neste Designer Edit vulnerável mais cores para ter algum contraste. Este aplicativo eu já mostrei a você, este é de projetado por Maomé ícone mágico. Você pode ver acima do amarelo, este azul e este esquema de cores triádicas vermelho. Eu realmente amo isso. Muito bem feito dever de casa pela Jihad. Tem, eu acho, 11.444 visualizações. Acho que isto parece muito limpo. De qualquer forma, é assim que na verdade os exemplos de diferentes esquemas de cores complementares sexta-feira. Então temos analógico, monocromático, todos esses esquemas de cores diferentes, esquemas de cores complementares. Eu vi que eles são principalmente azuis e laranjas. Eu já vi isso muitas vezes agora. Eu não tenho um exemplo. Talvez se eu tivesse, eu mostrarei para você. Até lá, vejo-te em breve na próxima lição. 9. 1ª escolher, Escolha primeira cor: Agora, esta é a hora da sua primeira missão. Aqui está. Sua primeira tarefa é que você selecionará apenas uma única cor para qualquer esquema de cores. Vou lhe dar a tarefa no próximo slide. Qual é a sua missão aqui? Novamente, primeira cor, selecionando sua primeira cor e como você está indo para fazê-lo. Vou te dar algumas dicas. Aqui está a tarefa, Pickup é uma empresa de entrega de alimentos e você está indo para selecionar sua primeira cor que vai trabalhar para esta empresa. Você também vai me dizer a razão pela qual você selecionou essa cor então isso é novamente, uma questão de psicologia de cores. Vou mostrar-lhe essa ferramenta que irá ajudá-lo a pegar sua primeira cor e que é picular.co. Picular.co você pode ver aqui esta é a ferramenta e você está indo para selecionar qualquer cor, por exemplo, comida, pick-up, algo assim. Ele vai mostrar-lhe várias cores. Eu vou estar esperando por sua seleção de cores e eu também vou perguntar por que você selecionou esta cor como sua cor principal em seu esquema de cores. Esta vai ser a sua cor primária. A cor principal é que vai funcionar em seu esquema de cores. Gostei desta tarefa. Estarei esperando sua tarefa, que é a primeira, escolhendo sua primeira cor. Vamos começar e começar a criar nossos esquemas de cores incríveis. 10. Secrets de criar tons: Nesta lição, eu vou compartilhar com vocês meus segredos de criar sombra, matizes e tom de uma mesma cor e como você pode usar a mesma técnica que eu uso para criar seus esquemas de cores de forma eficaz. O primeiro que vamos cobrir são sombras. O truque para criar tons de boa aparência é que você vai manter a mesma tonalidade e adicionar preto. Mas, na verdade, você vai fazer duas coisas. Sempre que você estiver criando uma sombra, você vai reduzir o brilho e aumentar a saturação. Então, ouça-me outra vez. Reduza o brilho e aumente a saturação. Então isso vai criar uma sombra muito agradável. Se você realmente quer cor muito maçante, você pode manter a saturação mesma e apenas reduzir o brilho. Agora, você pode ver na parte inferior eu criei quatro tons diferentes desta tonalidade esquerda que é 218 graus ou 218 e você pode ver à direita, eu tenho 70% de saturação e 70% de brilho. Então, na verdade, o que estou fazendo é reduzir o brilho e aumentar a saturação. Da mesma forma, aumentando a saturação nos próximos 75 por cento e 40 por cento de brilho, estou reduzindo-o, aumentando o brilho na cor preta. Não é realmente preto, é sombra escura do mesmo azul. saturação é de 80 por cento e o brilho é de 25 por cento. Então, este é um truque muito legal para criar suas máscaras. Agora, vamos ver onde você vai encontrar essas sombras. Você vai encontrá-los nesta seção do seu seletor de cores. Então, na parte inferior, temos mais preto adicionado à mesma cor. À direita, temos mais saturação. À esquerda temos menos saturação. Então, tenha isso em mente. No meio temos alguma saturação média, está em 60 por cento. Então, da esquerda para a direita, eu estou agora em 60 por cento. É assim que você vai encontrar seus tons nesta seção do seu seletor de cores. Seja qual for a ferramenta que você usar, será semelhante a esta. Agora criando tons. Aqui você pode ver que eu criei diferentes tons da mesma tonalidade, que é 218 e azul e você pode ver à direita, Eu criei três tons diferentes do mesmo, esta tonalidade azul. A técnica que eu usei é que eu estou aumentando a saturação lentamente e eu estou diminuindo muito o brilho. Então precisamos de uma cor sem brilho dentro de algo como 58% de brilho, 42% de brilho e eu estou realmente aumentando a saturação. Na verdade, estou manipulando essas cores, brilho e saturação para criar um tom de cinza lavado para esta tonalidade azul. É assim que estou criando meus tons. Deixe-me mostrar-lhe a área que você vai encontrar no seu seletor de cores para os tons. Esta é a seção onde você vai encontrar a maioria dos seus tons na zona cinza. É assim que eu crio meus tons. Eu me movo nesta seção para encontrar a cor que eu mais gosto. Vamos falar sobre matizes um pouco mais detalhadamente e qual é a fórmula que eu uso para criar tons diferentes. Então mesmo matiz e vamos adicionar branco ou aumentar o brilho ou aumentar a leveza. Então aqui eu tenho quatro cores na parte inferior e você pode ver da esquerda para a direita, eu estou realmente fazendo duas coisas. Mais uma vez, duas coisas. Mais uma vez, duas coisas. Você precisa manter isso em mente. O que estou fazendo é reduzir a saturação e aumentar o brilho. Esta é a mesma coisa que você vai fazer quando você está criando matizes. Então saturação, 60 por cento, 30 por cento, 12 por cento e você pode ver que o brilho está em 100% e está aumentando, 90 por cento, 100 por cento, 100 por cento. Então é assim que você vai criar algumas tonalidades eficazes para o seu design e para o seu esquema de cores. Agora, sempre que você estiver usando algum seletor de cores, você vai encontrar matizes nesta área de suas zonas de cores. Então tente digitalizar, mova nesta seção para encontrar o tom que você gosta ou deseja criar. Você pode ir para o canto superior esquerdo para encontrar as cores que estão muito próximas do branco. Às vezes precisamos de uma cor que seja muito próxima do branco e um pouco de cinza para nossos fundos. Então, sempre que eu estou projetando um laboratório móvel ou sites, eu normalmente tendem a usar alguma cor branca acinzentada azulada. Na verdade, o que eu faço é que eu estou no canto superior esquerdo e eu tento encontrar uma cor que tem um pouco de azul, um monte de branco, e um pouco de cinza. Então, para criar uma cor muito agradável que pode atuar como um fundo e não distrair meus olhos ou meus olhos usuários olhos. Isso é tudo por esta lição. Se tiver alguma pergunta, me pergunte. Espero que tenha gostado desta lição. Vejo-te em breve na próxima lição. 11. Psicologia de cores: Agora vamos falar sobre psicologia das cores. Agora, eu vi muitos designers que eles não sabem qual cor é concedida para qual finalidade. Então, cada cor ou cada tema de cor que você tem, ele vai ter alguns efeitos psicológicos em seus usuários ou seus espectadores desse design. Então vamos falar sobre o que essas cores diferentes são e o que elas realmente significam e por que você deve selecioná-las. Então vamos começar. O primeiro, meu blues favorito. Agora, por que você vê que há um monte de uso de azul na indústria de design de interface do usuário, você viu um monte de aplicativos móveis, você viu um monte de outros sites ou páginas de aprendizagem que estão usando azul porque é a cor mais segura. É apreciado tanto por homens como por mulheres e é justificável, por isso desenvolve realmente a confiança. É confiável, é forte, mostra que este é um site profissional ou este é um aplicativo profissional. Estes são os efeitos psicológicos do azul. Agora verde. Verde você já sabe que todas as nossas árvores e toda a nossa vegetação que está ao nosso redor é verde, isso está relacionado ao crescimento e saúde e prosperidade, paz porque o verde é realmente uma cor pacífica. Está relacionado com árvores, crescimento, folhas, de modo que é tudo. Se sua equipe está realmente relacionada a medicina ou medicina ou algo assim ou talvez algum produto orgânico ou talvez algum produto relacionado à saúde, você pode usar verde como sua cor principal da marca ou sua cor principal em seu aplicativo. Agora, você já sabe que o amarelo é na verdade uma cor quente, por isso é mais relacionado ao calor, clareza porque amarelo é a cor da sua luz solar. O sol é muito amarelo, não podemos nem olhar para ele. Tão amarelo é, na psicologia humana, está relacionado com clareza, otimismo, calor porque o amarelo é a nossa cor mais quente do sol e está relacionado ao sol. Estas são algumas coisas que estão relacionadas ao amarelo. Tenha em mente que, à medida que você se move para cores quentes como laranja e amarelo, elas são principalmente cores emocionantes. Eles têm mais cores vibrantes neles, então tenha isso em mente também. Novamente, você pode ver para o vermelho, novamente é emocionante porque está no lado quente. Vermelhos, laranjas e amarelos, eles são cores mais emocionantes é por isso que eles são usados na indústria de alimentos. Você viu McDonald's, eles só usam amarelos e vermelhos. Essa é a decisão deles, projetado para ver e obter essas cores para obter alguma emoção acontecendo nos níveis de alimentos ou o que eles têm em mente. Também está relacionado com a juventude porque mostra cheio de energia ou algo assim. É uma cor ousada e algo corajoso ou ousado como isso. Estas são poucas características dos traços de psicologia que estão relacionados às cores vermelhas. Agora, cor roxa ou violeta, eles estão mais relacionados à criatividade, sabedoria e imaginação. Se você vê a maioria dos meus sites e sempre que eu desenho principalmente, minhas cores, que eu tento então escolher são algum tom de roxo, azul e amarelo ou laranjas amarelas. Então laranja é para criatividade, emoção e este azul púrpura é realmente confiável, sabedoria e criatividade. Na verdade, eu tento construir minha equipe em torno disso. Se você estiver usando algumas cores como essa, você precisa entender o que elas realmente significam para que você possa usá-las corretamente. Em seguida é cor laranja. Laranja é realmente uma cor amigável e é alegre e mostra confiança. Você pode ter visto que a maioria dos sites eles usam laranja e azul como suas cores principais, porque esta é a razão. É uma cor convidativa, que você possa ver amigável, por exemplo, eu quero que meu design seja amigável, eu quero alguma cor convidativa, eu vou usar algum botão laranja ou call-to-action ou meu botão principal página de destino. Por exemplo, ligue para mim ou baixe esta cópia, este PDF ou algo assim. É uma cor amigável, alegre e porque é emocionante, por isso é alegre. Em terceiro lugar, está relacionado à confiança, que também está relacionada a uma cor azul. Azul também é confiável, modo que é tudo sobre cor laranja. Agora, vamos falar sobre a cor preta. Preto é principalmente relacionado com produtos de luxo e se você olhar para diferentes marcas de luxo como Apple e todos os outros diferentes, eles têm principalmente cinza e preto nos logotipos. Você pode ver que o logotipo da Apple está ficando preto e eles também têm um monte de cinza. Isso é realmente mostrando força, seriedade, produto de luxo. Além disso, um monte de marcas de moda, eles têm usado um monte de preto em seus sites e em seu marketing de produtos e algo assim. Principalmente ele vai estar relacionado ao luxo e imagem de marca. Que esta marca é uma marca de luxo ou é uma marca de alto nível ou algo assim. Então, estes são diferentes traços psdsychology que estão relacionados ao preto, como ousadia, ele puxou, então mistério, formalidade, tendências, luxo e seriedade. Se você está projetando para um produto que eles querem algum olhar muito luxo ou eles querem algum, muito top of the line look, então você vai usar um monte de cores pretas escuras em seu site ou aplicativos móveis. O último, vamos falar sobre a cor branca. O branco está principalmente relacionado com a paz e a pureza e também está relacionado com a limpeza, inocência, conforto e esperança. Se você está projetando para uma ONG ou algo assim, você pode usar muito essa cor. Também no design, se você estiver usando branco como fundo, ele vai lhe dar um monte de espaço. Se você quiser usar um monte de espaços em branco, você vai adicionar um monte de branco aqui. Na verdade, ele vai atuar como um pano de fundo e vai lhe dar um olhar limpo. Você pode ver que ele já está relacionado à limpeza, então, se você quiser algum visual limpo, você vai usar um monte de espaço em branco em torno do seu objeto. A cor branca é usada principalmente para seus fundos, se você quiser um fundo escuro e quiser usar o botão branco sobre ele, você pode fazer isso também. Espero que tenham gostado desta lição, se tiverem alguma dúvida, perguntem-me. Vamos passar para a próxima lição. 12. Psicologia de cores de gênero: Psicologia tem outra perspectiva que é qual cor é como por, qual gênero? Se você está projetando um site para homens, crianças ou mulheres, você precisa cuidar das cores que você está usando, você precisa saber que cores são apreciadas pelos homens e quais cores são desgostadas pelas mulheres, coisas assim. Primeiro vamos falar sobre o que são diferentes cores psicológicas que são mortais, apreciadas por diferentes gêneros. Vamos começar com homens, e homens principalmente como esta cor azul, verde, preto e vermelho, eles vão gostar principalmente de cores fortes, você pode ver azuis, verdes, preto, preto é muito ousado, vermelho é muito ousado, essas cores são apreciadas pelos homens. As cores mais apreciadas pelas mulheres são a cor azul, então a segunda é roxa, verde e vermelha. Tenha em mente que as cores são realmente são de pesquisa, as cores que você está vendo e têm o mais altura é realmente mais apreciado pela mulher, como você pode dizer 40 por cento mulheres que gostam de azul, então 30 por cento como este, roxo para coisas assim, você precisa ter em mente que esta não é apenas uma apresentação gráfica, na verdade significa que essas cores são mais apreciadas e essas causas são menos apreciadas pelas mulheres. Uma coisa que você viu em comum que a cor azul, é apreciada tanto por homens como por mulheres, é por isso que ele é usado em design de interface do usuário ou aplicativos móveis ou web design como uma cor padrão, que é a razão por trás disso. Os homens realmente gostaram de cores mais vibrantes e brilhantes que têm mais vibração neles, tendo em mente que se você está projetando algum produto que precisa de atenção dos homens vão usar cores vibrantes brilhantes, azul, laranja, verde e vermelho, verde , vermelho e azul, ambos são como homens e mulheres. Ao contrário dos homens, as mulheres gostavam principalmente de cores suaves, mais suaves significa que as cores pastel suaves que são, na verdade, você pode dizer, não muito afiadas ou muito brilhantes, eles têm tom muito médio, tipo muito pastel. Veja, você pode ver essas cores que eu mostrei abaixo, elas têm toque muito suave e cores suaves, elas não são muito vibrantes, elas não são muito brilhantes ou muito afiadas ou muito, têm muita saturação. Isto é como você está indo para projetar se você está projetando, particularmente para um aplicativo de mulher ou mulher NAB ou produto mulher, ao contrário das mulheres, homens principalmente como camisa escura, eles são mais inclinados para camisas escuras como azuis escuros, cinza escuro e cor laranja escuro, verde escuro e cor vermelha forte escuro, ou também é mais perto da cor marrom. Tenha isso em mente que os homens são principalmente inclinados para cores vibrantes e escuras em vez de tons suaves de diferentes cores rosa ou outras. Da mesma forma, se você está projetando para mulheres, eles vão inclinar mais para a tonalidade das cores como eles têm mais branco nelas, eles não gostam de roupas muito escuras ou cores maçantes, se você está projetando para homens ou mulheres, você precisa manter todas essas coisas em mente. Isso é tudo sobre a psicologia escala de homens e mulheres com gênero gosta qual cor e se você está projetando para especificamente são para produto mulher, então você vai usar cores que são mais apreciadas pelas mulheres.Se você está projetando para homens, você vai usar cores que são, que são mais atraentes para o gênero, que é os homens. Isso é tudo, se você tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 13. Scheme a pessoa do seu design: Neste vídeo, eu vou falar sobre como as cores vão mudar o tema ou mudar a aparência de qualquer marca, qualquer site que você está projetando, qualquer logotipo que você está projetando ou construindo. Eu vou cavar em meu processo de quando eu tento selecionar cores, como diferentes variações vão afetar e criar diferentes temas ou você pode dizer diferentes personalidades de uma empresa ou empresa, ou logotipo ou site ou aplicativo móvel. Seja o que for que você está selecionando suas cores, você precisa ter muito cuidado. Eles podem mudar a percepção, eles podem mudar o humor, eles podem mudar a personalidade de todo o seu aplicativo, seu site e sua marca. Vou mostrar-vos o meu ilustrador e como estou a construir agora, minha pequena empresa para páginas de aprendizagem. Vamos cavar. Aqui como você pode ver, eu estou realmente construindo, eu já construí esta marca e você pode ver que eu queria ser uma empresa de personalidade forte. LandRight significa design e desenvolvimento da página de destino para a sua pequena empresa. Isto é basicamente o que esta empresa faz. Para as pequenas empresas, eu acho que eles precisam algumas boas pessoas profissionais que têm bom conhecimento e compreensão das coisas. Se você olhar para estas quatro combinações diferentes à esquerda, que são o meu canto superior esquerdo, que é o meu favorito LandRight, âmbar, cor amarelada dourada com este azul escuro e eu realmente amo isso. Eu usei isso no meu exercício de ganho muito, mas aqui você pode ver que parece forte e profissional, mas tem um monte de vibração devido a este amarelo e parece e se sente principalmente como uma empresa criativa ou algo assim. De qualquer forma, se estou focado principalmente no design, acho que vou optar por esta combinação amarela e azul. Agora, indo para esta direita, isso é mais focado em verdes e azuis, então ele está basicamente relacionado ao crescimento e isso pode ser uma boa opção. Mas do ponto de vista da força, eu não acho que você pode dizer que tem muita força para principalmente para a parte de branding. Eu já selecionei esses rostos tipo, então eles também vão com o mesmo tema e a mesma personalidade. Se você fez o meu curso de tipografia, você pode ver que eu selecionei este calha este é o meu, você pode dizer prémio para eu tê-lo comprado. Agora, movendo-se para as duas opções de fundo que eu realmente amo. À esquerda, é basicamente cor vermelha pálida, cor vermelha muito pálida, que é cor contrastante para este roxo azulado. Estes dois são basicamente cores opostas e aqui você pode ver o que eu estou tentando fazer é, é basicamente uma combinação moderna de cores. Eu vi muito tempo que essas cores pálidas e neutras foram usadas com os tons muito brilhantes ou muito escuros para criar algum efeito único. Passando para a última opção que eu realmente amo, eu apenas criei estes agora, eu pensei que eu deveria compartilhar estes com você. Você pode ver que este é o que eu realmente amo, é principalmente com crescimento e personalidade. Tem muito profissional olhar azul profissional, cor roxa escura com alguma cor verde seanish aqui para o crescimento. Você pode ver que esta é a cor. Se eu quiser torná-lo mais brilhante, talvez algo mais perto de ouvir. Vamos fazer seu brilho 95 saturação para 70 por cento. Eu acho que devemos reduzir um pouco a saturação, eu iria com este, é, ele tem um monte de contraste, muita personalidade, muito escuro, cor muito profissional e eu acho que nós só precisamos desses dois cores para projetar todo o tema. Eu tentaria algo assim, você pode ver aqui, Eu selecionei meu datilógrafo este título e, em seguida, outro texto parágrafo. Então eu tenho este botão com o logotipo, eu preciso combinar todos estes para criar ou construir todo o tema do meu design. É assim que tento variar cores diferentes. Se eu mostrar a vocês meu processo antes disso, vocês podem ver que isso é realmente onde eu comecei e isso tem toneladas de combinações diferentes dessas tipografias, basicamente tipografia. Eu também comecei com este aqui este é um funil como forma. Se você tem alguma idéia de S-EO, otimização de motores de busca ou páginas de aprendizagem, você pode saber que este é o funil. É, na verdade, nesta direcção. Deve ser de cima para baixo, mas é assim. Este foi o primeiro logotipo que eu tentei e então eu mudei para este, este é um formato mais simples. Eu realmente amo formas simples porque eu acho que se o seu logotipo é mais simples, é mais fácil de lembrar e funcionaria melhor em tamanhos menores. Se eu tiver algo como isso, ele vai funcionar muitos tamanhos agradáveis e menores em. A segunda coisa é que ele está em uma forma quadrada. Tem muito potencial, para mim, selecionei este último para estar nestas duas últimas opções, estou realmente ansioso para estes, talvez eu adicione mais algumas cores. É assim que todo o esquema de cores vai afetar a personalidade do seu design, todo o seu site ou todo o aplicativo móvel. É assim que todo o esquema de cores vai definir a personalidade de sua marca, seu site, seu aplicativo móvel. Espero que tenham gostado desta lição se tiverem alguma pergunta me façam. Vamos passar para a próxima lição. 14. Propósito de cada cor em design em UI: Existem dois segredos em qualquer design de esquema de cores. Uma que eu vou te contar nesta lição, a segunda, eu vou te contar. Outra regra que eu sigo e você também deve seguir, o que fará de você um monte de bom designer e ele irá ajudá-lo a criar esquemas de cores impressionantes. A primeira coisa é que qual é o propósito de cada cor em seu esquema de cores? Se você tentar se concentrar nisso, cada cor tem um propósito. Você precisa atribuir esse propósito a essa cor, e você precisa ficar com isso. Neste esquema de cores, você pode ver que este é o nosso design que eu já mostrei antes. Aqui você pode ver as cores de fundo são escuras ou claras. As duas cores que foram usadas como fundo é esta, esta cor azul púrpura. Então temos esta cor muito clara que é, na verdade, vamos selecionar esta. É realmente f9, f9, f9. Estas são as duas cores que foram usadas como fundo. Se você cavar neste design, você já viu outras cores que foram usadas como um fundo? Precisa consertar suas cores. Uma cor é atribuída ao plano de fundo. Estas duas cores, eles estão realmente trabalhando como o fundo de toda esta aplicação. Em seguida, chegando às próximas cores que serão nossas cores de ação ou você pode ver as cores que vão chamar a atenção do usuário. Estas são na verdade a cor amarela que você pode ver, vamos ampliar. Você pode ver aqui temos esta cor amarela nesta seção. Eu acho que mais uma seção, qualquer maneira, isso é realmente, eles têm usado esta cor amarela e esta cor vermelha aqui como suas cores de ação. Então temos para o próximo passo, temos nossas cores de status. Talvez habilitado, desabilitado, ativo , inativo, ou talvez mostrando algum ícone ou localização ou algo assim. Estas são algumas cores extras. Eles estão usando esta laranja, este designer está usando realmente laranja ou este cinza, este cinza escuro. Se você olhar de perto sobre isso aqui, você pode ver quando a chamada está habilitada, ele tem um azul muito escuro, a mesma cor de fundo habilitada. Esta é na verdade sua cor principal, cor primária, onde eles realmente começaram e quando ela está desativada, ela tem essa cor. Esta é uma cor mais escura, você pode dizer, menos saturada do mesmo, este azul e este tem sido usado aqui. Da mesma forma, se você olhar para este texto, eu vou ampliar um pouco. Não vai parecer Jaggie. Você precisa notar uma coisa que a cor mais escura é para o texto que está habilitado ou algo assim. O resto do texto que você pode ver é muito maçante, cor acinzentada. Você pode ver a diferença. Esta é uma diferença muito sutil, mas você precisa notar que se você quiser ser um bom designer. Aqui está uma recapitulação, você precisa descobrir quais cores vão ser suas cores de ação ou seu, as cores de ação em seu aplicativo, se seria um botão ou um ícone de telefone ou uma rejeição ou excluir ícone, excluir botão ou qualquer coisa assim. As cores de ação serão específicas. Cores de fundo, você precisa considerar suas cores de fundo que eu quero uma cor muito maçante, cor mais escura para um fundo e cor muito clara para outro. Você precisa de algumas cores de status. Principalmente eles são necessários no design do painel. Quando você está projetando um painel, existem diferentes status, mensagens de erro. Temos notificações diferentes, temos atualizações diferentes, então precisamos dessas cores de status. Este é, na verdade, o propósito de cores diferentes. Você precisa atribuir esse propósito e você precisa manter isso. Mais uma coisa, se você notou que as cores de ação são muito brilhantes. Eles têm personalidade que chama a atenção do que as cores de fundo, eles são maçantes, pálidos eles são maçantes, pálidos , ou você pode dizer suave, olhar limpo para eles facilmente por mais tempo. As cores de status são misturadas com animação ou movimento em algum momento para chamar a atenção do usuário. Como você pode ver quando você deslizar o controle deslizante cair ativado e desativado. Isso é, na verdade, uma animação. Então tem feedback. É assim que os designers de interface do usuário usam cores em seus aplicativos, em seus sites e em seus logotipos, qualquer coisa que você possa usar os mesmos princípios. Atribuir uma cor e ficar com isso e atribuir-lhe uma função e isso é tudo. Vejo você em breve na próxima lição. 15. Sharpe com cor sem cara - segredo de contraste de cores: Agora vou contar outro segredo sobre esquemas de cores e como você pode construir esquemas de cores incríveis. A regra é que vamos misturar cores maçantes com cores saturadas ou afiadas. As cores maçantes, eles vão atuar como um fundo ou uma regra de suporte para a cor afiada em cima dela. Você pode ver aqui neste exemplo neste slide, você está visualizando uma cor azul muito nítida, mas o fundo é uma cor cinza azulada e maçante. É um tom muito maçante do mesmo azul. Eu tenho que fazer um pouco cinza e torná-lo um pouco mais brilhante, e você pode ver que eles estão olhando grande. Você pode ver aqui temos a saturação do botão superior doce e afiado. É 89 por cento e brilho é 88 por cento. O fundo que você pode ver a saturação é muito baixa, 10 por cento e mesma cor a tonalidade é a mesma e o brilho é 89 por cento. Esta é a regra que você precisa ter em mente. Aqui está outro exemplo de cores maçantes que vão se misturar bem com cores saturadas. Agora aqui temos duas cores diferentes, e vocês podem ver que temos essa cor marrom e temos essa cor laranja amarelada muito afiada. Aqui temos, novamente, a saturação do topo é 88% e o brilho é 100 por cento, então está emitindo muita luz, isso é cor muito luminosa e o fundo é um pouco maçante, brilho é apenas 25 por cento, e saturação é de seis por cento. Este é outro exemplo do mesmo esquema de cores, então eu misturei duas cores, mas uma delas é muito brilhante e muito saturada e a outra é menos saturada e menos brilhante, então elas vão juntas muito bem. Agora outro truque, que eu vi muito é que eu vi com os designers especialistas que eles tendem a misturar cores pálidas com cores saturadas. Em seus esquemas de cores, eles têm cores pálidas. Cores pálidas significam que o fundo vai realmente ter muito menos saturação e pode ter algum brilho alto. Aqui você pode ver que eu tenho a combinação de duas cores. Esta é uma cor esverdeada muito pálida. Eu realmente amei essa combinação, de qualquer maneira. À esquerda você pode ver aqui temos a cor que tem saturação de 14 por cento e brilho é 89 por cento, então o brilho é bom, mas o azul superior aqui tem saturação média em torno de 55 por cento e brilho é 50 por cento. Na verdade, isso é muito mais saturado, mas não um grande salto do fundo, então o fundo é um pouco brilhante e pálido. Eu chamaria de brilhante e pálido no sentido de que tem menos situação, mas é brilhante. Você pode ver que o botão na parte superior tem uma diferença de saturação de 40 por cento mais salto na saturação do que o fundo pálido. Este é outro contraste que você pode tentar. Agora, vamos passar para o segundo passo, que é cores brilhantes, versus cores maçantes. Eles vão ficar bem juntos também. Esta é uma única cor. Eu usei a mesma tonalidade e o brilho do fundo é 13 por cento, por isso é muito maçante, é muito preto. É muito próximo da cor preta. À esquerda você pode ver a mesma cor e o brilho é de 100 por cento. Este é outro truque que você pode usar. Estes são os princípios se você aprender estes e você pode manipulá-los, você tem bom comando sobre essas duas habilidades, você pode criar qualquer esquema de cores e que vai pop seu design que vai olhar legal. Agora você pode ver que estou usando apenas uma cor, novamente, aqui e o brilho do meu botão é 30 por cento, é cor muito escura e muito saturada e o fundo é muito pálido e muito brilhante. Este é novamente outro exemplo do mesmo esquema de cores. Você também pode julgar meu esquema de cores se você olhar para diferentes áreas de texto aqui, onde eu tenho alguns tons médios misturados em todo este design. Espero que você tente notar como cores diferentes foram combinadas porque esta é realmente a escala. Se você começar a notar diferentes esquemas de cores ao seu redor, você vai pegar o segredo de que como podemos misturá-los juntos. Aqui está outro exemplo de fundo brilhante e cores escuras em cima dele. Você pode ver que eu escrevi chão brilhante mais cores escuras. Aqui você pode ver, eu estou usando um gradiente de azulado escuro para esta cor vermelha rosada e você pode ver o brilho de ambas as cores é inferior a 50 por cento. Eu acho que você precisa experimentar com isso, mas eu acho, pessoalmente, que o brilho deve ser inferior a 50% ou apenas 50%. Se você tentar aumentar como 60,70,80, então você precisa aumentar sua saturação também, porque o botão vai parecer maçante. Tente manter seu brilho como 50 por cento, 55 por cento, não mais do que isso. Agora, deixe-me mostrar-lhe um exemplo de usar esses dois princípios de fundo maçante mais cor saturada em cima dele, então temos fundo claro, pálido e temos alguma cor escura em cima dele. Você pode ver aqui, eu tenho uma amostra. Este vai ser o seu exercício, na verdade. Este é um design, Crypto Bank e você pode ver que estou usando apenas uma tonalidade, uma única cor para criar todo esse esquema de cores. Deixe-me mostrar como criei isso. Truque aqui é fundo brilhante e em cima dele temos uma cor muito afiada. Aqui temos esta cor. Esta é a nossa cor azul primária e tem a saturação de 80 por cento e o brilho é 60 por cento. Eu não quero que você vá acima de 60%, eu acho. Isso está ótimo em cima de um fundo branco brilhante, então temos muito contraste. Da mesma forma, no botão aqui, se olharmos para esta área inferior aqui, que eu realmente quero mostrar a vocês que vocês precisam entender isso. Aqui temos outra cor como fundo e a saturação desta cor é sete por cento e brilho é 100 por cento. É uma cor basicamente pálida, brilhante, muito menos saturação e muito alto brilho. Isto é uma coisa. Além disso, temos cor muito escura, brilho é 60 por cento e saturação é 80 por cento. Este é o truque que eu queria te mostrar. Se você dominar este truque, você vai, me agradecer mais tarde que este truque realmente ajudá-lo muito. Estes são os dois princípios que eu realmente queria mostrar que como você pode criar um, usando com uma cor, você pode criar esquemas de cores incríveis usando este princípio. Espero que tenham gostado desta lição. Se tiver alguma pergunta para me fazer. Vamos passar para a próxima lição. 16. Como construir meus planos de cores: Hoje vou compartilhar com vocês minha perspectiva de construir um esquema de cores. Pode haver diferentes métodos de construção de um esquema de cores, mas é assim que crio meus esquemas de cores. Então eu vou compartilhar esse método com vocês, e nas próximas lições vamos abordar passo a passo. Vou compartilhar e mostrar minhas telas diferentes do Adobe XD e como continuo adicionando cores diferentes. Este é o meu método. número um é que você começa com apenas uma cor. Você pode escolher essa cor de qualquer cor da marca, ou você pode escolher essa cor no tema do seu design, por exemplo, se você tiver um aplicativo de sofá ou um aplicativo de mídia, você pode usar cores azul escuro ou vermelho de qualquer maneira. Então, selecione sua primeira cor, e vamos criar um esquema monocromático. Você pode ver diferentes tons e matizes, traços diferentes. Estes são todos da mesma cor, alterando a saturação e o brilho. Este é sempre o meu primeiro passo. É assim que eu começo a criar meu esquema de cores. Então eu comecei com essa tonalidade aqui à esquerda, então eu tenho sombra, matiz, mais algumas tonalidades, três tons, matiz, e mais uma tonalidade, que é a mesma tonalidade, mas tem muita saturação. Na verdade, você pode dizer que chama atenção de cor azul. Então tem mais saturação, este azul. Eu realmente amo isso. Isto é, na verdade, você pode dizer a árvore do meu esquema de cores. É assim que começo a experimentar e construir meu esquema de cores. Então você precisa experimentar com isso, tentar criar alguns tons, tons e tons. Agora, o terceiro passo é tentar adicionar uma cor contrastante. Então, já construímos diferentes tons e matizes desse azul, agora vamos adicionar uma cor oposta, que é uma cor contrastante, e a cor oposta na roda de cores é na verdade laranja para o azul. Você pode ver que eu adicionei uma cor de contraste aqui. Se você olhar de perto, você pode ver mais uma coisa, que em cada cor aqui, há cores diferentes que vão funcionar. Por exemplo, em uma cor escura, vai funcionar uma cor branca clara, então, em uma cor de matiz, precisamos de uma cor escura. Então estamos realmente experimentando essas cores e ver o que tem mais contraste e que pode ser facilmente lido. Tente usar cores que tenham bom contraste em diferentes planos de fundo. Agora, o meu último passo. Sempre que eu parar de construir meu esquema de cores, por exemplo, se você está projetando um aplicativo móvel ou nosso painel, você precisa de mais algumas cores, como você pode ver no lado direito, temos cores de status. Então eu realmente adicionar cores de status diferentes para informações, para erros, para mensagens de sucesso, pode ser para alguma atualização. Você pode ver que um deles é azul. Isto é, na verdade, por exemplo, se eu tiver alguma atualização, ou alguma atualização de software, ou talvez alguma atualização de valor, eu não quero que seja algum erro ou algo assim. Quero que seja muito calmo, cor azul. Eu usei uma tonalidade aqui para mostrar meu status. Nossa tonalidade, você pode usar a tonalidade para a mensagem de status. Você pode usar uma mensagem amarela, por exemplo, eu quero mostrar ao usuário que esse valor, você precisa atualizá-lo. É por cinco minutos atrás valor, então você precisa atualizá-lo, então eu vou pegar esta cor amarela e mostrar essa mensagem. Da mesma forma para erro, eu vou usar um pouco de vermelho, e também para o verde, eu vou usar para o sucesso. O truque é que você precisa criar essas cores e estes amarelo, azul e vermelho, e verdes que realmente vão funcionar e ficar bem nessas cores. Eles devem combinar bem. Às vezes você começa a escolher cor aleatoriamente, então isso não é um truque, você não precisa fazer isso aleatoriamente. Eu vou mostrar a vocês como realmente é feito nas próximas lições passo a passo, então você não precisa se preocupar com isso. Vamos passar para a próxima lição. Se você tiver alguma dúvida sobre a construção deste meu método de esquema de cores, você sempre pode me perguntar. Vamos passar para a próxima lição. 17. Como pegar sua primeira cor: Sempre que você começar a construir qualquer esquema de cores, a primeira coisa é por onde começar. Eu vi muitos designers que são novos designers ou que não têm muita experiência em design. O primeiro erro que eles fazem é que eles não sabem por onde começar seus projetos. Você pode ver que eles estão um pouco confusos onde devemos começar, que cor devemos escolher. Eu vou simplificar isso para você e eu vou te mostrar dois começos que você pode fazer. O primeiro começo é que sempre que você estiver começando qualquer design, procure sua marca. Se pertence a uma marca já construída, talvez eles tenham uma cor vermelha em seu logotipo ou talvez eles tenham alguma cor amarela em seu logotipo como McDonald's. Você pode de lá, pegar a cor da marca e começar a partir daí. A segunda opção é que você comece com seu próprio eu. Por exemplo, se eu quiser construir qualquer design posso começar com uma cor azul porque é seguro, e segundo é que ele é apreciado por homens e mulheres ambos. Então azul é uma cor um pouco segura. É por isso que você vê um monte de cores azuis mesmo você pode ver nesta interface deste “Adobe X” o botão compartilhar é azul. Esta é uma cor muito segura. Comece com azul e vá de lá. Agora vou mostrar alguns exemplos de como realmente eu criei um esquema de cores, e vamos criar um esquema de cores monocromático agora usando essa cor azul. Primeiro vou mostrar-vos o exemplo. Aqui está “aplicativo de sofá inteligente” de uma marca ROM, R-O-M. É uma empresa europeia, e eles têm escritórios no Reino Unido, Alemanha e em toda a Europa. Quando eu comecei este aplicativo, Eu não adicionei qualquer conceito ou qualquer idéia de seu esquema de cores. Você pode ver que eu estou usando alguma cor amarelo-alaranjado e azul muito escuro que é perto de preto e este vermelho. Além disso, este verde. Minha cor principal é este azul escuro, este vermelho e este laranja ou amarelado, é mais de uma cor amarela. Além disso, você veria alguns Browns maçantes aqui, acinzentados muito maçantes aqui, então nós temos marrom muito escuro nisso. Assistir vídeo, ler texto. Isto é um switcher. Então, switcher de torneira. Se eu tocar aqui, ele alternar entre duas telas, então você pode ver um pouco de verde aqui que é basicamente o nosso um status cores. De qualquer forma, se você olhar de perto, deixe-me ampliar. Se você olhar de perto, estes são novamente textos castanhos escuros aqui. Se você olhar para aqui, esta cor é realmente roxo azulado escuro. Então temos este mini-sofá, sofás meine, é na verdade cores acinzentadas, azuladas e castanhas maçantes. É menos marrom, mais cor azul acinzentado maçante. Foi assim que eu criei isso, então você pode ver que esta é a barra dab [fonética] e quando alguém clica nela, há um destaque para este ícone. É uma cor azul escuro. Eu vou mostrar-lhe como realmente eu consegui obter este esquema de cores com este aplicativo e eu criei muitas telas para este que você pode ver aqui. Da mesma forma, você pode ver que há poucas opções aqui para diferentes mais funcionalidades como esta barra deslizante. Temos azul escuro aqui para o preenchimento. Esta cor esverdeada para algum status, este vermelho escuro, cor vermelha muito afiada, cor vermelha marrom. Nós vamos para o site deles; na verdade eu escolhi essas cores de sua marca. Ok, então aqui está a marca real. Chama-se ROM. Se você olhar de perto para todos os sofás e toda a equipe de suas sessões de fotos e peles de sofá e suas cores, você verá semelhanças no que eu usei no meu aplicativo. Eu escolhi uma cor daqui, esta cor forte, que é a cor vermelha deles. Então eu escolhi outras cores dessas imagens; você pode ver seus sofás têm uma cor azulada muito escura. Isso eu usei no meu esquema de cores. Você pode ver estes marrons, marrom maçante cores cinza acastanhado que eu escolhi a partir desta imagem. Isto é novamente acinzentado escuro, e vemos algumas dicas de amarelo e laranja aqui na imagem. Eu acho que estes estão indo para ir bem juntos porque eles estão olhando grande neste design de interiores. Eles também ficarão ótimos no aplicativo. Este azul escuro é realmente ir muito bem com este vermelho, é basicamente um esquema de cores tríade, vermelho, azul e amarelo. Você pode ver aqui as dicas de amarelo nesta imagem. Eles estão ótimos com essa cor acinzentada e escura. Foi assim que eu comecei. Comecei com esta cor e escolhi mais algumas cores para o tema, e as usei para fins diferentes. 18. Crie seu primeiro esquema de cores com uma única cor: Agora a segunda pergunta é, onde devo começar se eu não tiver uma marca? Você pode começar com qualquer cor. Você pode escolher alguma cor para sua marca. Por exemplo, se eu tiver sal do Himalaia. Por exemplo, eu quero começar uma empresa, ou talvez eu estou projetando para uma empresa verde que está rotulando que este é um 100% natural ou algo assim, eu poderia entrar em verdes e amarelos mais. Se eu estou projetando um aplicativo on-line ou algo que vai funcionar on-line para alguns designers ou algum outro grupo financeiro, eu poderia usar azul. Então tente selecionar a cor no tema do seu aplicativo. Por exemplo, se eu tiver aplicativo muito sério, eu poderia entrar em cores azuis reais escuras. Então, você precisa considerar. Então, para este exemplo, eu vou selecionar essa cor e eu vou replicá-la. Qualquer esquema de cores, eu diria que você cria pelo menos dois tons, dois tons e dois tons. Então vamos criar uma cor muito escura aqui primeiro. Então vamos para o preenchimento e ir para o modo HSB. Aqui temos brilho, vamos primeiro criar algumas tonalidades já alto brilho. Vamos usar menos saturação. Então este parece ótimo. Vamos criar mais alguns. Vamos movê-lo para um lado mais esbranquiçado. Então eu vou reduzir a saturação. Então, na verdade, você também pode ir até aqui. Você pode ver que a tonalidade vai ficar a mesma. Então você pode arrastar até aqui e ir à sua semelhança. Talvez eu queira um pouco de cor esbranquiçada, algo aqui. Então isso parece ótimo. Então eu tenho duas tonalidades aqui. Então você pode ver, vamos arrastá-los até aqui. Agora vou ter algumas máscaras, pelo menos duas. Então eu vou ficar um pouco escuro aqui e um pouco saturado nesta área. Então vamos com esta cor. Era 201. Então eu vou ficar com ele 201. Então não são 200, 200 eram 200. Acho que foi 201, eu acho. Então, 201. Vamos mover todos eles para 201 e depois temos 201. Vamos apagar este. Também vai ser 201. Vamos fazer com que seja 100 por cento disso. Então temos agora quatro cores, vamos adicionar mais algumas. Você pode dizer um pouco menos pesado imagem escura aqui. Então eu vou fazer isso aqui. Então deixe-me dizer-lhe a psicologia por trás disso. Então eu estou realmente criando dois tons escuros, dois tons, pelo menos e você pode ver que isso pode ser para o meu texto normal, texto de parágrafo. Isso pode ser para os meus títulos ou textos muito ousados que eu realmente quero que os usuários chamem a atenção. Para estes, eu tenho cores claras para que eles possam trabalhar juntos nessas telas escuras. Da mesma forma, vamos ter mais alguns. Vamos adicionar mais um aqui, mais dois na verdade. Então precisamos de algo no meio, algo assim, talvez para fronteiras ou algo assim. Vamos adicionar mais um. Então é um pouco mais escuro. Isso é 20. Então você pode ver que temos na verdade três níveis. Isto é, na verdade, nível médio ou tons. Então temos cores muito escuras e muito claras. Então começamos com essa cor base, e criamos pelo menos seis cores a partir disso. Então este é o seu esquema de cores real e eles devem ser pelo menos essas cores para obter um ótimo esquema de cores. Então você pode ver aqui é um exemplo de aplicação desses esquemas de cores. Você pode ver como realmente eu consegui fazer isso. Esta é uma cor muito escura. Este é realmente um azul afiado. Deixe-me diminuir o zoom. Portanto, é um azul muito afiado. Eu acho que é quase o mesmo, que é essa cor. Então você pode ver neste fundo que eu estou usando uma cor muito escura. Então isso está realmente voltando para a lição básica onde eu disse a vocês que tons muito claros em muito escuro. Então eles vão ter um monte de contraste. Da mesma forma ampla sobre isso está olhando bom. Posso lê-lo facilmente. Aqui temos um pouco marrom escuro, desculpe, eles não são marrons. Eles são, na verdade, você pode ver que esta é uma cor muito maçante e é quase expiado. Então tom acinzentado, deixe-me mostrar-lhe os ícones na parte inferior. Então aqui temos tom azulado maçante desta mesma cor azul. Para o destaque estou usando nosso azul primário. Então esta é na verdade a nossa cor de acento, ou você pode dizer a cor estourando, esta aqui. Se você quiser fazer um mais nítido, então nós vamos arrastá-lo até aqui e se você quiser uma cor mais nítida, você vai aumentar a saturação aqui. Então, temos uma versão mais nítida da mesma cor. Então, se você quiser usar algo assim, você pode usar essa cor mais nítida como eu usei aqui, 961 pontos de bônus aqui. Se formos até aqui, então você pode ver que há muitas variedades ou muitas coisas que você pode fazer com o mesmo esquema de cores. Então você pode ver aqui eu tenho como 1, 2, 3, 4, esquemas de cores, dois temas escuros e dois claros. Estou usando as mesmas cores. Então você pode ver que estou usando as mesmas cores. Aqui eu tenho fundo muito escuro e eu inverti o esquema de cores a partir deste, meu fundo claro. Então você pode ver aqui que temos as últimas encomendas. É uma cor acinzentada muito pálida, por isso não sai. Não quero chamar muita atenção para este. Da mesma forma, quero atenção nesta área, então tenho tons muito claros e escuros. Da mesma forma para este botão, é o nosso botão principal ou botão de ação principal na tela. Por isso, está a ter muita atenção. Da mesma forma, este tem azul primário. Então você pode ver que esses azuis são realmente cores atraentes de atenção neste fundo preto ou escuro. Na verdade, não é preto, é azul muito escuro. Então eu vou te dar este arquivo. Se você quiser olhar para ele, você pode olhar para ele, mas eu já lhe mostrei como realmente começar e você vai me agradecer por isso porque vai tornar sua vida muito mais fácil, porque você pode apenas criar qualquer esquema de cores com apenas uma cor. Você não precisa de duas ou três ou quatro cores. Espero que tenham gostado desta lição. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 19. Criar o segundo projeto de dois projetos: Agora é a hora de sua outra tarefa e que está criando esquema de cores monocromáticas. Você me viu criando um esquema de cores monocromático usando apenas uma única cor azul. Aqui está a missão. Swish é um aplicativo de prototipagem para designers. Crie um esquema de cores monocromático que funcionará para esta empresa. Você também vai criar uma tela de login e aplicar esse esquema de cores para essa tela de login e você vai enviar ambos. Junto com seu esquema de cores e aquela tela. Vou mostrar-te como quero que pareça. Aqui, como podem ver, aqui está um exemplo do que eu realmente quero de vocês. Esta é uma tela de login, esqueceu sua senha ou qualquer outra coisa, você pode apenas projetar uma tela de aplicativo móvel agora este é apenas o meu arquivo de recursos. Você vai criar um esquema de cores à esquerda como este, será monocromático. Pode não ter verde e enviá-lo assim para mim. Essa é a sua primeira tarefa que estou ansioso para ver a sua tarefa. Vamos começar. 20. Adição de segunda cor para contrastes: Agora, vamos dar o segundo passo em qualquer esquema de cores. O primeiro passo foi que acabamos de criar um esquema monocromático. Agora, vamos adicionar mais uma cor ao nosso esquema de cores. Para fazer isso, vamos selecionar nossa cor base, e eu vou pegar seu valor hexadecimal, comando C, e vamos usar algumas das ferramentas online para pegar nossa segunda cor. Há muitas ferramentas lá fora. Vou compartilhar com vocês três ou quatro. Agora, eu vou usar este Coolors ou Coolors.co. Na verdade, clique neste “Generator”, e vamos ver para onde vamos. A primeira coisa que vou fazer é editar isto e copiar isto aqui como o meu valor, e vou bloqueá-lo. Clique neste “Bloqueio”. Eu chamei isso de trancar esta cor. Vamos pressionar nossa barra espacial para obter mais algumas cores. Aqui, como você pode ver, temos mais algumas cores, e você pode selecionar as cores que quiser a partir daqui e bloqueá-lo. Mas agora, eu estou procurando uma cor mais vibrante em vez dessas cores muito maçantes. O que eu vou fazer, é continuar pressionando minha barra de espaço, até que eu tenha a cor que eu quero. Algumas cores laranja são muito afiadas; cor laranja que pode ser misturado com esta cor azul. Por que é isso? Porque você pode ver, se vamos para este aplicativo de fornecimento de cores, esta cor azul é realmente cor oposta e complementar a esta laranja, então eu estou procurando alguns tons destes. Ou eu posso usar azul escuro e laranja, ou eu posso usar um pouco de azul pálido e laranja afiada, então é isso que eu estou procurando. Tenho um pouco de cor mais perto desta. Na verdade, é cor laranja amarelada. Se eu pressionar o “Configurações” aqui, Eu posso aumentar o seu brilho ou eu posso movê-lo deslizante, por exemplo, talvez um querer algo mais perto desta laranja, e eu posso bloqueá-lo então. Então eu vou, novamente, pressionar “Barra de espaço”. Agora, você pode ver que estou recebendo mais cores. Eu realmente gosto dessa cor acinzentada, então eu realmente tranquei. Eu realmente gosto deste verde, então eu vou trancá-lo também. É assim que, você pode ver, eu criei um esquema de cores muito bonito. Tenho uns tons escuros. Tenho alguns tons verdes. Tenho uns tons amarelos. Laranja amarelada vai funcionar muito bem com blues. Estes são, na verdade, dois azuis, um verde, um, um, um pouco, cor acinzentada, e este laranja amarelado. Foi assim que criei este esquema de cores e posso exportá-lo. Você pode clicar aqui e você pode clicar em “PNG” ou você pode clicar em “SVG”, e você pode arrastar isso para o seu software gráfico. Vou guardar algo assim. Outra maneira é que, eu realmente tentei usar isso, Adobe Color CC, e eu vou pegar cores daqui. O que eu fiz foi, eu realmente copiei, selecionei esta corrente base, então é na verdade a cor base. Copiei o valor hexadecimal aqui. Você pode ver, este é o meu valor hexadecimal para a cor base. Eu selecionei esquemas de cores complementares e diferentes a partir daqui. Se você quiser experimentá-lo, você pode selecionar algo assim. Agora, você pode ver que isso é muito básico. Básico significa que essas cores não parecem muito ótimas umas com as outras; existem algumas cores maçantes, existem algumas cores nítidas. Você pode ajustar estes; mantenha a mesma tonalidade e tente ajustá-la. Por exemplo, se eu quiser algo assim, cor amarela, e vamos mover este amarelo um pouco para cá, e este laranja. Vamos mover este azul assim. Além disso, eu vou usar um tom um pouco mais escuro ou maçante aqui, mas acastanhado, algo assim. Castanho. Este rosa está parecendo muito, muito estranho. De qualquer forma, esta é outra maneira de obter a sua segunda cor. Eu não, na verdade, como este aplicativo esquema de cores para criar todo o esquema de cores porque ele vai te dar um monte de diferentes cores estranhas aqui. Por exemplo, se eu quiser ir para este composto, o que você pode fazer, é você pode obter essas cores de base, e você pode criar mais cores que você está pensando criando diferentes tons, e tons, e tons do mesma cor, então não tente usar ou copiar as mesmas cores que esta roda de cores realmente gera. Mais uma coisa é, eu normalmente faço, é eu realmente ir para este explorar e eu procurar, por exemplo, se eu tiver um azul, laranja, algo assim, eu vou selecionar aqui. Você pode ver, eu realmente gosto deste esquema de cores. Está muito mais perto do que procuro. Posso baixá-lo, posso salvá-lo. Da mesma forma, este parece realmente ótimo: azul e laranjas. Estou gostando desses dois ou três. Os esquemas de cores, eu vou baixar todos eles, e eu vou ver quais cores vão ficar ótimas no meu aplicativo. Se você está procurando verde e laranja, você pode ver que temos diferentes esquemas de cores. Você pode iniciar seu esquema de cores selecionando qualquer outro esquema de cores, e tentar alterar um pouco de matizes, e ajustá-lo para suas próprias necessidades. É assim que eu, na verdade, seleciono minha segunda cor ou adiciono mais cores ao meu esquema de cores. Agora, eu vou abrir este esquema de cores editores. Você pode ver o editor de preenchimento. Vou movê-lo para baixo. Este é outro truque que eu realmente uso muito que eu manter a cor na mesma posição e mover para cá. Nesta roda de cores, na verdade eu fui para esta cor laranja, e eu acho que eu estou gostando lá olhando grande juntos, então eu vou manter esta cor laranja aqui. Deixe-me mostrar-lhe um exemplo de como, na verdade, eu usei isso porque esta vai ser a nossa ação de cor secundária. Você pode ver nesta tela, temos azul, mas você pode dizer para destacar nossa barra de guias e não para nossas principais ações primárias. Existem, na verdade, dois tipos de botões de atenção. Um deles é o principal que é a nossa ação principal, que queremos que nossos usuários tomem nesta tela. Ação secundária que é, na verdade, talvez algum item destacado, ou selecionado, ou algo assim. Você pode ver aqui e aqui, estou usando cor laranja para o item selecionado. Para minha ação primária, estou usando minha cor azul. Da mesma forma aqui, isso é novamente, o mesmo, e isso é novamente, o mesmo. Você pode ver, eu não estou misturando essas duas cores simultaneamente um com o outro. Aqui como você pode ver, eu realmente usei uma cor cinza azulado escuro aqui para mostrar este item da lista aqui. É assim que, na verdade, você tenta adicionar mais uma cor ou mais cores ao seu esquema de cores. Eu acho que duas cores são mais do que suficientes para qualquer tipo de esquema de cores para construir qualquer aplicativo, qualquer painel, ou qualquer site. Outras cores que você precisa são cores de status, sobre as quais vamos falar na próxima lição. Agora, eu ficaria com essas duas cores. Uma cor eu vou escolher, e eu vou criar diferentes tons e tons dessa cor. A segunda cor será para a minha cor de acento ou ação primária, e eu não vou criar mais tons disso. Este vai ser o seu, você pode dizer, mantra de seus esquemas de cores. Não tente criar tons e matizes de ambas as cores. Tente usar uma cor e cria matizes e tons dessa, de modo que eu dou meu segundo passo ou seleciono meu segundo esquema de cores e cores. Espero que tenham gostado desta lição. Se tiver alguma pergunta, me pergunte. Vamos nos encontrar na próxima lição. 21. Status no design de interface em interface de interface: Agora, na última etapa, vamos falar sobre as mensagens de status. Este é um aplicativo de carteira digital, que está mostrando seu Bitcoin ou valor total da moeda. Esses aplicativos ou painéis onde vemos um monte de dados ou algo assim, precisamos de um monte de mensagens de status. Por exemplo, aqui temos a tela. A cor da tela afirmando que temos algum lucro ou nossos valores estão subindo. Da mesma forma neste Bitcoin, seu valor foi aumentado 22,8 por cento, da mesma forma para isso. Temos pelo menos três mensagens de status. Um é o sucesso ou talvez algo esteja aumentando, um é algo está diminuindo, e o terceiro é realmente assim. Por exemplo, eu quero alguma atualização. Por exemplo, esse valor pode ser anterior, três minutos ou cinco minutos atrás. Quero que o usuário pressione esta atualização agora para obter o valor mais recente. Na verdade, este vai ser o meu texto informativo. Três cores, precisamos de mais para este esquema de cores. Já fizemos este exercício. Construímos este esquema de cores usando apenas uma cor azul, e agora estas são todas variações diferentes. Se você olhar de perto aqui, você pode ver que é assim que todas essas cores foram colocadas para fora. Esta cor mais escura é para o valor mais importante. Então temos essa cor azulada pálida. Queremos que ele seja facilmente legível ou legível neste fundo azulado pálido. Este fundo pálido muito brilhante e azulado, queremos que seja muito mais fácil de ler. Se você olhar de perto nesta tela, você pode ver esta 1,5 ou esta cor vermelha escura, é facilmente legível. Se você for para este valor aqui, vamos passar para este HSB. É 73 por cento de saturação, saturação muito alta e 85 por cento do brilho. Se você quiser uma cor mais escura, você pode ficar mais escura, mas eu acho que é realmente visível agora. Da mesma forma, aqui, este verde realmente neste fundo cor preta, esta tela e esta tela são diferentes. Por que é isso? Porque em um tema claro, precisamos de um pouco de cor mais escura e em tons mais escuros ou planos de fundo pálidos ou cores escuras, precisamos de uma cor que tenha mais luminância, mais luz emitindo dela. Queremos que seja diferente do plano de fundo. Você pode ver que este fundo é azul, muito maçante. Esta cor é, na verdade, deixe-me mostrar-lhe. Tem 98 por cento de saturação e 90 por cento de brilho, modo muito brilhante, cor muito saturada. Se você olhar para aqui, esta cor tem a mesma tonalidade, 148, mas na verdade tem 98% de saturação, mas o brilho é 70%. Você precisa usar sua cabeça de designers. Você não precisa ficar com as cores que esta cor vai funcionar bem em cada fundo. Tente usar a cabeça. Esta cor aqui, se você olhar para ela, é na verdade 20% de saturação e 61 por cento de brilho. Mas se você olhar para essa cor, é 7 por cento saturado e 60 por cento de brilho. Na verdade, estou usando uma cor muito acinzentada aqui porque o fundo já está muito escuro. Preciso de algo diferente. Este esquema de cores, mesmo que pareça ser a versão lite deste esquema de cores, mas eles são diferentes. Agora, se você olhar para esta cor aqui, parece um pouco bem afiada e eu acho que precisamos torná-la um pouco mais leve. Vamos colocar 100 aqui. Parece bom. Vamos reduzir o brilho e eu vou para algum lugar por aqui. Vou adicioná-lo agora. Também para este. Certifique-se de que estes podem ser facilmente vistos e eles têm um bom contraste com o fundo. Vamos falar sobre acessibilidade de cores mais tarde. Mas agora eu quero pegar essa regra simples, que precisamos de diferentes mais contraste quando você quer ter alguma elegibilidade em suas cores. Talvez algo por aqui. É muito afiado ou vibrando. Vou reduzi-lo aqui, em algum lugar. Talvez em algum lugar. Quero que seja um pouco mais leve, tenha mais brilho. Vou tocar na parte de cima aqui. Vamos tentar esta cor. Eles parecem muito semelhantes, mas não são semelhantes. Isso parece ótimo. Aqui você pode ver que este é um tom muito escuro da mesma cor. Tem 73 por cento de saturação e 85 por cento de brilho. Se você quiser ficar mais escuro, você pode pressionar 80 por cento aqui, e também para este, 80 por cento aqui. Por que eu estou usando 80 por cento de brilho, porque, o fundo é totalmente branco. O fundo é totalmente brilhante e é 100 por cento, então eu estou usando luz. 20 por cento de diferença, se te lembrares da regra, mostrei-te que estou a usar 100 por cento para esta. Desculpe. Então 80 por cento de brilho para este e este é na verdade branco, isso é 100 por cento de brilho. A diferença de 80 e 100 é, na verdade, 20 por cento. Certifique-se de que você tem uma boa diferença entre esses dois. Vamos ver o que temos aqui. Aqui temos 70 por cento e é 100 por cento, 70, 100, 70, 100. Da mesma forma, se olharmos para aqui, vamos ver este fundo. Tem 31 por cento de brilho, e este tem 100 por cento de brilho. Isto é bom. Este é, na verdade, todo o esquema de cores. Aqui o esquema de cores é um pouco diferente porque temos fundo claro aqui, temos fundo escuro. Olhe para este texto da carteira digital. É um pouco mais escuro, tonalidade maçante de azul. Aqui temos um pouco mais leve, uma versão mais brilhante disso. Porque temos fundos mais escuros. Você precisa manter isso em mente. Da mesma forma, aqui temos alguns azuis acinzentados, e aqui temos azuis acinzentados, mas eles são um pouco mais leves na natureza. Eles não são aborrecidos assim. Sempre que você estiver construindo algum esquema de cores, você precisa ter algumas mensagens de status como esta. O truque para criar estes é muito fácil. Deixa-me mostrar-te. Vamos pegar essa cor aqui. Mova para fora, faça um pouco maior. Aqui está a nossa cor base. Vamos replicá-lo e eu vou mostrar-lhe um truque para criar cor vermelha, por exemplo. Temos esta cor. O que eu vou fazer é, eu vou para este verde. Agora, temos a tonalidade verde. Podemos nos mover e talvez possamos ter algo assim. A tonalidade é a mesma, acabei de mudar a saturação e o brilho. Então, temos cor verde. Vamos adicionar mais uma cor, que vai ser o nosso amarelo. Eu vou para esta cor amarela, mas você pode ver agora nós não precisamos deste amarelo, precisamos de um pouco mais claro, amarelo, talvez algo aqui. Neste momento, não parece muito bom porque está em um fundo cinza. Se você colocá-lo em um fundo preto escuro, pode parecer melhor, mas você precisa experimentar com ele. Se você não gosta desta cor, você pode mudá-la. Vamos adicionar cor vermelha aqui. Eu vou para este vermelho, ou pode ser isto ou isto, qualquer coordenada que você quiser. Vou usar um pouco desta cor vermelha rosada. Vamos deixar isso um pouco escuro. Estou tentando mudar a luminância dessas cores, estou tentando combiná-las. Esta cor, esta cor e esta cor, eles parecem quase iguais. A cor azul é sempre mais escura. Se eu quiser mudá-lo, posso mudá-lo assim. Este também parece ótimo. Eu vou criar mais um para este amarelo porque eu não gosto muito dele. Quero que algo seja assim. Este está parecendo melhor para mim. Você pode experimentar essas cores e, em seguida, você pode começar a adicioná-las ou corrigir sobre elas. Neste momento, temos este amarelo, que é 50 matiz, 27 e 100. É mais para um pouco de cor laranja. Agora eu selecionei este que é 63. Se você quiser chegar mais perto deste, eu vou com este 50, 52, e eu vou aumentar meu brilho um pouco mais. Esta é a cor que precisaremos para nossas mensagens de status. Esta é uma técnica muito simples para criar cores que vamos selecionar nossa cor base e mover apenas este controle deslizante para vermelho, verde e amarelo ou laranja. Isso vai cuidar de todos esses problemas que temos quando estamos criando esquemas de cores. Mais uma coisa que você precisa considerar é que, qual item vai destacar e qual item é resolvido? Isto é muito importante. Algumas coisas não são importantes, como outros itens na tela. Este texto é muito importante. Esta mensagem de que está aumentando ou diminuindo. Isto é muito importante. Isto é apenas informação, carteira digital. Ninguém vai olhar para ele primeiro. Da mesma forma, este, queremos que seja um efeito sutil. Não queremos que chame a atenção. Não tente usar todas as cores que atraem atenção por toda a tela. Isso é, você pode dizer, desastroso. Eu vi um monte de designers novatos ou iniciantes que eles tendem a usar toda a atenção captando cores de tela em todo o lugar, e isso vai arruinar o propósito do design de informações. Na verdade, estamos projetando para que a informação seja exibida assim. Tenha isso em mente e eu vou compartilhar todos esses arquivos com você. Eles são realmente arquivo Adobe XD, talvez um, dois escala. Talvez alguns arquivos de esboço, eu vou incluir isso no meu curso também. Se você tem alguma pergunta para me fazer nesta lição, nós adicionamos as cores de status que você pode ver aqui, e isso vai acabar com nosso esquema de cores. Se tiver alguma pergunta, pode me fazer. Vou adicionar mais algumas dicas e truques a esta lição e a este curso. Até lá, vejo-te em breve na próxima lição. 22. Esquemas de cores de painel: Nesta lição, vou falar sobre o design do painel. Agora, as cores usadas no design do painel é que você pode ver um pouco diferente do seu web design normal, ou do seu logotipo normal, ou design de marca. Sempre que você está projetando painel ou alguns gráficos ou algo assim, então sempre que você quiser exibir um monte de informações em espaço pequeno, você precisa de um monte de cores. Por quê? Porque temos atualizações diferentes, temos mensagens de erro diferentes, temos mensagens de informação diferentes, temos ícones de sino diferentes, onde temos atualizações novas e futuras ou alguma indicação de que algo foi mudou. Talvez eu esteja offline ou online para que haja outro status de que este usuário esteja online ou offline. Na verdade, existem cinco ou seis estados diferentes. Agora, se você está usando um mensageiro ou algo assim, você pode ter visto que as atualizações no lado direito, aquela data e hora que eu enviei para esta pessoa, neste momento ou se ele viu minha mensagem ou não, Se ele leu minha mensagem ou digitando ou não. Estas são, eu acho que cinco ou seis mensagens de status diferentes para qualquer design de painel. Vou mostrar-lhe como você pode usar um esquema de cores que pode encontrar todos esses problemas, e também, você precisa considerar mais uma coisa que é acessibilidade ou contraste adequado de suas cores. Nós vamos cavar, então vamos começar. Este é um painel que eu projetei no Adobe XD, e isso é apenas uma maquiagem rápida. Eu copiei o design de outra pessoa, então só para ilustrar o que realmente quero dizer. Você pode ver no lado esquerdo, temos navegação muito escura onde temos todos os itens de navegação, diferentes seções do nosso painel “caixa de entrada”, “importante”. Então temos “canais”, então há poucas coisas dentro dos canais. Eles são quatro canais, design de interface do usuário, usabilidade, marketing , suporte, e você também pode criar um novo canal. Então temos artigos arquivados. Se você olhar para este design, você pode ver que temos hierarquia diferente. No lado esquerdo temos canais diferentes, como se tivéssemos quatro canais. O primeiro status que você verá aqui é, vamos ampliar. O primeiro é este selecionado, então o estado selecionado é que neste momento este canal foi selecionado, e no lado direito, o que você está visualizando é alertado para isso. Você pode ver aqui o design da interface do usuário do título, então o canal selecionado é o design da interface do usuário. Por que eu estou usando esta cor azulada claro porque o fundo é muito escuro, então temos um tom um pouco mais claro do mesmo azul escuro no fundo para ser usado como uma mensagem de atualização de canal selecionado. Quero mostrar ao usuário que este canal foi selecionado por isso deve haver uma maneira clara de mostrar que por isso é muito importante. A segunda atualização que você pode ver aqui é que eu tenho quatro novas mensagens no canal de marketing. Para isso, eu usei uma cor verde, então, na verdade, todo esse esquema de cores é baseado em azul e verde. É basicamente esquema de cores análogo onde temos azul e verde. Eles são muito próximos um do outro, então na verdade é basicamente verde cianish, então é uma mistura de verde e azul na verdade. Este é o esquema de cores análogo, os esquemas de cores que as cores que estão mais próximas umas das outras, elas vão funcionar bem juntas. Eu estou usando a cor cian esverdeada e esta cor azul, e nós temos este tom escuro de azul então nós temos um azul muito proeminente aqui, que é muito azul afiado para ícones, então este canal é na verdade um pouco de cor azul maçante, Então você sabe a broca que esta é na verdade a mesma técnica, contraste maçante ou escuro de escuro e claro, e pálido, e afiado. Foi assim que criei esta seção inteira. Agora você pode ver que cada cor tem algum propósito, então você pode ver aqui, se olharmos para esta seção, você pode ver este novo canal, desculpe, este novo canal é um botão, então na verdade ele executa alguns ações. cor é mais nítida do que todos estes, então estes são todos brancos e este é todo azul junto com este ícone. Agora vamos ao ponto em que temos essas duas cores diferentes, que é verde e este vermelho. Eu já disse que precisamos de muito mais cores e um design de painel do que em qualquer web design ou qualquer outro design de aplicativo porque temos que mostrar muitos status. Aqui temos, novamente verde, é uma cor verde muito afiada. Eu acho que é mais perto deste, mas é mais específico para esta seção aqui, que é que eu estou online ou este usuário está online. Então nós temos este vermelho, que é muito comum porque nós já temos este patrono embutido em nossas mentes que este vermelho é realmente a atualização, então a atualização do ícone do sino. Vamos para esta seção aqui. Aqui precisamos de um tom de cor mais escuro aqui no título do texto, e então um pouco de cor cinza escuro para o texto. Agora você pode ver que eu diminuí desta vez porque não é muitas vezes importante agora. A mensagem mais recente está na parte inferior, então você pode dizer este tempo, na verdade eu tentei reduzir sua opacidade. Deixe-me ver se é opacidade. Não, eu não estou usando opacidade na verdade, então é na verdade opacidade. Este é outro truque que vou te mostrar em outra lição agora. Apenas certifique-se de obter as cores e como eu estou aplicando-as e como eu estou usando-as. Sombra mais escura, menos escura para o texto, mais escura para o título, menos escura para o texto. Novamente, você pode ver aqui fundo claro para este tipo de caixa, luz, fundo azulado e muito maçante se eu for para a fronteira aqui. Vamos para a fronteira. Você pode ver se você olhar para as cores aqui, a cor de preenchimento, que está no meio, é na verdade, deixe-me mostrar-lhe. Use saturação e matiz mais brilhante a 10, 5% de saturação e 99% de brilho. Mas se você olhar para a borda, é quase a mesma tonalidade, mas a saturação é um pouco alta, e o brilho é um pouco baixo. É apenas um pouco de sombra mais escura do mesmo “preenchimento” que estou usando. Você pode ver que este efeito é muito sutil, mas é perceptível em quando você está projetando algo como este UIs, este Messenger, ou caixa de bate-papo, ou algo assim. Da mesma forma, o mesmo efeito que eu apliquei no botão enviar e este texto é um pouco mais escuro porque precisamos de um monte de bom contraste com o fundo. Vamos chegar a este ponto aqui, que é a nossa mensagem aqui. A parte mais difícil onde eu era incapaz de combinar cores diferentes, eu tinha que obter essa cor amarela com muita luta. É basicamente uma cor laranja amarelada e está na tonalidade 51, 8 e 100. Se você notar que esta cor de texto de cor é na verdade uma cor acastanhada, por isso não é cinza, é um pouco de cor acastanhada porque marrom, laranja e amarelo, eles estão realmente mais próximos uns dos outros porque o marrom é na verdade o mais escuro desta laranja e amarelo é laranja muito clara, esbranquiçada, cor pálida. Foi assim que fiz a combinação entre eles. Este é o ícone aqui. Também é castanho escuro. Este texto aqui também é castanho escuro. À esquerda, eu só coloquei cor laranja e uma borda de cor laranja em torno dele, então ele age como uma coisa separada por aqui. Se alguém quiser fechá-lo, ele pode tocar ou clicar neste ícone e removê-lo. Da mesma forma, temos uma busca aqui. Esta é a principal função aqui. Existem apenas duas funções que podem ser feitas, se você pode digitar aqui ou procurar aqui. É assim que, na verdade, todo o esquema de cores está funcionando. Cor nítida no fundo escuro, e cor esbranquiçada maçante, são quatro canais que você pode ver aqui. Então temos este novo canal de cor azul muito brilhante para a ação aqui, e isso é tudo. Tentei criar outra variação. Você pode ver que esta é uma cor azul pouco mais clara e também estes novos canais de cor eles são diferentes. Também tentei uma combinação diferente de verde e azul aqui, então aqui o botão de envio é verde em vez de azul, então vamos diminuir o zoom e deixe-me mostrar-lhe ambos os esquemas de cores. Aqui nós os temos. Vamos ampliar. Você pode ver de relance se você apertar seus olhos o que áreas são muito proeminentes. Este botão Enviar é muito proeminente quando você olha para ele de longe. Também esta mensagem de erro ou esta informação está parecendo muito importante aqui. Então você pode ver as cores em ambas as atualizações, 0-4-0-4, elas estão parecendo muito proeminentes. Uma vez que você amplie seu design, você verá o que as coisas são realmente importantes aqui e qual esquema de cores está ótimo. Eu votaria neste esquema de cores à esquerda porque você pode ver se você olhar para o novo canal, é muito visível, muito brilhante nesta área aqui no esquema de cores esquerdo em vez do direito. Sua tarefa virá na próxima seção para criar um painel ou talvez eu vou te dar este para colorir para mim, e esta será sua tarefa. Espero que você tenha gostado desta lição que como realmente aplicamos esquema de cores para painéis e como diferentes esquemas de cores realmente combinam uns com os outros nesses tipos de painéis. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 23. Criação de planos de cores acessíveis: Nesta lição, vamos falar sobre Acessibilidade de Cores e este é um tópico muito importante a partir de duas perspectivas. Vamos falar sobre daltonismo, e vamos falar sobre a relação de contraste de cores. Estas são as duas coisas que vão importar quando você está projetando com cores e contrastando cores diferentes entre si. A primeira coisa é que queremos que as informações sejam facilmente vistas, reconhecíveis e facilmente lidas pelo usuário. O contraste entre o fundo e o primeiro plano deve ser bom, então qualquer usuário, você pode dizer uma pessoa normal, ele ou ela pode facilmente ler esse texto. Eles podem facilmente julgar o que está escrito ou o que este botão faz. Aqui, temos o esquema de cores que projetamos anteriormente em lições anteriores, e este é um esquema de cores monocromático, diferentes tons de azul, e eu estou realmente misturando a sombra mais escura com tons claros e o tons claros com sombra mais escura. Você pode ver todas as cores diferentes, o texto escrito aqui, o texto aqui que está escrito nessas cores, ou sobre essas cores, é basicamente do mesmo esquema de cores. A cor mais escura e a luz a maioria das cores são usadas para o texto, e eu estou variando em diferentes planos de fundo, e você pode ver que temos diferentes taxas de contraste aqui, então agora estamos falando sobre taxa de contraste. Uma boa taxa de contraste está acima de três. Agora, se você olhar para a esquerda, a primeira combinação, que é uma cor azul pálido, que é esta aqui, e este azul, nosso principal azul primário, está realmente falhando, então, a taxa de contraste não é boa para texto. Em todos os outros lado direito, você pode ver que temos um bom contraste. Podemos usar essas combinações com segurança, mas a primeira está falhando, então precisamos consertar isso. Agora, um pouco sobre o que é na verdade os padrões de contraste de cor triplo A e duplo A. Triple A é basicamente para texto menor, por isso, é muito bom contraste. Se você tem contraste triplo A, como temos aqui, 7.57 e 8.01. Este é realmente muito bom nível de contraste, e para texto menor, se você está projetando um aplicativo móvel e você tem uma mensagem muito pequena e 14 pontos, ou talvez 12 pontos, texto muito pequeno, você quer que ele tenha um bom contraste proporção de triplo A. Se você está projetando qualquer outra coisa como um botão muito grande, e temos como texto de 18 pontos sobre ele, então podemos usar com segurança padrão duplo A também. Esta é a diferença entre estes dois. Também para logotipos e para as coisas que não são importantes. Por exemplo, se o botão estiver desativado, se essa funcionalidade não estiver presente na tela ou no painel, você precisará considerar que, mesmo se a taxa de contraste falhar para isso, não importa, porque você sempre pode usar três ou duas taxas de contraste para isso porque isso está desativado. O usuário não vai usar essa funcionalidade. Para qualquer outra coisa, qualquer botão de pressão, qualquer item tocando, qualquer navegação suspensa ou algo assim, você precisa de pelo menos o dobro de padrão A. Estas são diferentes taxas de contraste que vamos fazer na próxima lição sobre diferentes ferramentas que eu uso e como realmente uso ferramentas diferentes para criar essas taxas de contraste e verificar se há elas. Então vamos também falar sobre o que é uma ferramenta simples diferente para verificar sua acessibilidade de cores para pessoas daltônicas, que é o próximo tópico. Aqui temos cegueira de cor, que é, eu acho que deuteranopia muito comum. O principal problema com isso é que eles podem não ser capazes de distinguir entre vermelho e verde. Sempre que você está projetando para acessibilidade de cores, você quer esquema de cores acessível que qualquer um pode ver o que está acontecendo. Ou você vai acompanhar essas cores com alguns símbolos ou ícones, por exemplo, erro, se você tiver algum erro. Você pode mostrar algum ponto de exclamação com ícone, algum ícone que vai mostrar ao usuário que isso é um erro. Além disso, com o sucesso, você pode mostrar a marca de verificação ou marca de verificação para que o usuário possa ver que esta é realmente a mensagem de sucesso. Mais uma coisa, se você olhar para essas duas cores, vermelho e verde, verde é um pouco maçante ou mais escuro sombra e vermelho tem mais saturação, mais contraste, mais luminoso, mais luz emitida a partir dele. Tente diferenciar entre vermelho e verde desta maneira. Um vai ser mais dominante, mais luminoso, emitindo mais luz, e um vai ser um pouco aborrecido. Porque sempre que eles virem isso, eles vão ver algumas cores laranja pálidas e amareladas, ambos, e eles não vão ser capazes de distinguir o que está acontecendo. Então, ou use ícones com estes ou tente usar tons diferentes, talvez você possa dizer níveis de saturação, um vai ser um pouco maçante, cor escura, um vai ser uma cor vermelha brilhante , algo assim. Na próxima lição, eu vou mostrar a vocês como eu uso diferentes ferramentas, ferramentas on-line para criar um esquema de cores acessível que vai funcionar para a maioria dos usuários, e eles não terão nenhum problema em ler tudo, julgando o que está acontecendo. Vamos passar para a próxima lição e ver como podemos criar esquemas de cores acessíveis. 24. Acessibilidade de programa de cores: Então, a primeira ferramenta que vamos discutir sobre acessibilidade de cores é contrast-ratio.com. Eu vou compartilhar todos os links para esses diferentes sites ou ferramentas que eu uso. O que fazemos aqui é que vamos colar nossas cores sempre que precisarmos verificar a taxa de contraste, vamos verificar colando nossas cores aqui. Nós vamos para o Photoshop, por exemplo, eu tenho essa cor. Eu vou copiar seu valor hexadecimal e vamos passar para, novamente aqui. Vamos remover isto e colá-lo aqui. Agora, com cor branca, tem uma taxa de contraste de 1,31, que está falhando no padrão, então vamos mudar isso. Vamos usar esta cor em cima dela. Vou pegar o valor hexadecimal, copiá-lo. Você pode usar isso no Sketch ou em qualquer software que você está usando agora, é viável para mim usar o Photoshop. Nós temos a proporção de 7,57, e aqui está realmente ele está mostrando como ele vai se parecer, neste contexto. Da mesma forma, podemos trocar cores para ver ambos os efeitos. Você pode ver, isso está ótimo 7,57 é um triplo A, que vai funcionar para pequenos textos também. Da mesma forma, eu também amo essa ferramenta que é, colorable.jxnblk.com e eu não sei, de qualquer maneira. Nós vamos usar isso da maneira semelhante, e aqui vamos nós, eu estou realmente usando o mesmo esquema de cores, que nós realmente melhoramos aqui. Deixe-me mostrar-lhe o próximo slide. Você pode ver aqui esta cor na verdade eu melhorei, e o que eu fiz foi aumentar o brilho e também a saturação desta cor, e na verdade eu tentei usar um tom mais escuro desta. Eu usei um tom de cor mais escuro. Acho que foram 25, algo assim. Vamos copiar isso e vamos colá-lo aqui, como nosso plano de fundo, e vamos usar essa cor como nossa cor de texto. Vamos usar este aqui. Temos 4.7, então o que eu fiz foi deixar você mostrar aqui com esses controles deslizantes. O que eu fiz é que eu realmente queria tornar esta cor de texto um pouco mais escura. O que eu fiz foi aumentar um pouco de saturação, e nós vamos reduzir a leveza para aqui, 0,22 como este. Ele está realmente diminuindo o brilho por isso, se você quiser, você pode ver sempre que eu estou tentando diminuir o brilho, ele está realmente tendo mais contraste. Se eu quiser um monte de contraste como AAA, você pode ver que eu preciso reduzir o mais brilhante, e isso realmente vai ser o valor aqui. Você também pode ver que quando eu tento diminuir a saturação, talvez eu não queira uma cor muito saturada como esta. Quero que esteja aqui em algum lugar como este. É assim que você pode jogar com ele, você pode consertar as cores. Se você quiser mais contraste entre eles, você pode jogar com saturação e leveza. Você pode ver se eu tentar aumentar a leveza, é AA. Quando eu estiver indo para baixo de três, vai falhar, ok? Esta é outra ferramenta. Terceira ferramenta, que eu realmente amo é que eu apenas por acaso tenho aqui, contrast-grid.eightshapes.com. Esta ferramenta é realmente ótima. Deixa-me mostrar-te. O que realmente eles estão fazendo aqui, é que estas são todas as cores diferentes para o meu esquema de cores. Eu tenho laranja, eu tenho azul escuro, Eu tenho azul médio, Eu tenho cor azul acinzentado escuro para texto. Isto é novamente para mensagens de texto. Estas são mais algumas cores claras, folhas de luz e você pode ver à esquerda aqui, linhas e colunas. O que eu estou fazendo aqui é a primeira coluna e linha é para F, que é cor branca. Então temos a próxima cor que vai ser F0, F6 , FC, então esta é novamente uma cor azulada pálida. Você pode ver o que ele realmente está fazendo é, na verdade, ele está cruzando ambas as cores e testando todas as cores de texto diferentes em cima de diferentes fundos. Todas essas cores são testadas em todas essas cores, na verdade. Cruzar checando tudo isso. Você pode ver, por exemplo, se você passar por aqui neste bloco, esta cor está realmente neste fundo aqui, F0, F6, FC, então é uma boa combinação e está mostrando 5,9 problema de contraste. Isso significa que se eu tentar misturar 546067 com F0, F6, FC, eles vão correr bem, mas não para texto menor. Se eu quiser ir para texto menor, você pode ver que eu preciso considerar esta combinação que é, 15303F com este F0, F6 FC. Significa que precisamos de um pouco mais de contraste. Esta combinação tem AAA. Isto está a falhar, isto está a falhar. DNP significa falhar. Está mostrando, não passa. Isso significa que ele não passa o padrão AA ou AAA. Da mesma forma, aqui você pode ver que esta laranja está quase falhando em todos os fundos. O único maior que ele vai passar é na verdade este, este tom mais escuro de preto azulado. Também aqui, que é cor azul AAA, AAA, então novamente, este AA azul afiado. Esta é, na verdade, uma combinação de grade inteira de suas cores acessíveis que essas cores realmente vão trabalhar juntas. Aqui está o índice, você só precisa colar a cor em cada linha diferente e com a vírgula, você pode usar o nome da cor. Se você quiser, por exemplo, se eu tivesse isso, você pode ver que eu tenho carvão e tudo isso. Mais uma coisa é que você também pode copiar HTML de grade, e CSS se você quiser mostrá-lo em algum lugar. Além disso, você pode aumentar o tamanho do bloco se você quiser gostar deste. Você pode ver claramente qual texto está realmente funcionando, e qual deles não está funcionando. Então AAA é qualquer coisa acima de sete, AA é 4.5 mais, ou às vezes AA18 que é para texto maior, é na verdade três mais. Então, se você ver ou ouvir, AA18 significa que você pode usar este esquema de cores, mas com um texto grande. Então deve estar acima de 18 pontos, algo assim. Se você quiser ler sobre isso, você pode ver aqui é, na verdade, o padrão WCAG20 para Contraste Mínimo. Eles têm um monte de texto para ler se você quiser lê-lo, vá em frente. No último, vou falar sobre a ferramenta que usei para pessoas daltônicas ou com deficiência de cor que têm dificuldade em julgar qual é a cor. Você pode fazer download deste Color Oracle.org e baixar o aplicativo para Windows, Mac ou Linux. Deixe-me mostrar-lhe um exemplo. Então aqui eu tenho esse design. Agora, eu já estou executando este aplicativo para que você possa ir até aqui. Vou clicar com o botão direito do mouse, e vou mostrar essa deuteranopia mais comum, essa deficiência de cor. Eu vou selecionar isso, e ver como minhas cores vão se parecer. Agora, você pode ver sua visão ou sua versão de ver todas essas cores. Você pode ver se você olhar corretamente nesta cor amarela e vermelha, não há tanta diferença, esta laranja ou esta cor vermelha. Eles precisam ter alguma separação. Então isso é um pouco mais escuro, isso é um pouco mais leve. Tente se certificar de que algo assim aconteça. Da mesma forma aqui, eles só estão vendo a maioria das cores que são tons mais escuros e mais claros. Eles são incapazes de distinguir entre essas cores, então se eu clicar aqui, esta é novamente a exibição. Vamos tentar mudar para outra coisa. Vamos tentar um pouco de cor rosa aqui. Vamos usar um pouco de branco aqui. Vamos ver como fica quando eu ligo isso. O mesmo, eu acho, o ponto principal por trás de tudo isso é que você precisa ter algo que distingue entre diferentes níveis de cores. Uma cor é um pouco mais escura, a outra é um pouco mais clara. Isso vai ajudá-los. Caso contrário, eles geralmente vêem a maioria das cores que eles vão misturar juntos. Por exemplo, isso é principalmente vermelho e laranja e amarelo, ou verde. Isso vai ser um monte de problemas para eles. Vamos selecionar outras deficiências como, protanopia, é raro, mas tem alguns problemas. Você pode ver agora isso é quase semelhante a isso, mas esta tela está parecendo muito amarela para eles. Vamos selecionar outro, que é tritanopia. Isto é diferente, e você pode ver que eles estão realmente vendo esta cor laranja como cor rosa e cor vermelha é visível. Todas as outras cores são visíveis, mas o verde tem alguns problemas. Você pode ver que ele está mostrando como uma cor azul. Então, isso é tudo. Tente verificar suas cores em uma escala de cinza e você pode ver que temos diferentes níveis. Tente ver que seu design deve ter diferentes níveis de escala de cinza. Escala de cinza significa que algo é mais brilhante e leve do que o outro. Um é escuro, o outro é luz, outro é escuro, o outro é luz. Isso realmente vai funcionar para essas pessoas. Segunda coisa, deixe-me mostrar-lhe outro exemplo. Então, aqui está outro exemplo de um aplicativo. Você pode ver aqui temos Bitcoins diferentes, como aumento ou diminuição de 22 por cento. Deixe-me mostrar-lhe qual é realmente o problema neste projeto. Então, se eu for para essa deficiência de visão mais comum, você pode ver que este símbolo mais e símbolo de menos é a única coisa que está diferenciando entre estes. Então, se você pode olhar 1.5 seta para baixo, isso vai ajudá-los que isso realmente está diminuindo. Neste caso, eles não podem dizer com o vidro que isso está diminuindo ou aumentando. Se você olhar para esta área, uma é um pouco maçante, e outra é um pouco de cor afiada. Deixa-me mostrar-te, isto é um pouco diferente. Então, quando eles olham para aqui, você pode ver mais amarelo brilhante e isso é maçante. Isto está a mostrar-lhes claramente que isto tem algum incremento, algum lucro, e isto tem alguma perda aqui. Mas aqui, é um pouco diferente. Se você olhar de perto, você pode ver, deixe-me mostrar-lhe. Há uma diferença de, você pode dizer escuridão e leveza em ambas as cores, vermelho e verde. Tente usar isso para diferenciar. Além disso, tente acompanhar com ícones diferentes. Podemos usar essa seta para baixo e seta para cima para mostrar a essas pessoas ou a esses usuários que, isso realmente significa isso. Porque, todo o resto está indo para exposição à informação. Na verdade, estamos nos comunicando com nossos projetos. Na verdade, estamos mostrando ao usuário que essa cor significa isso. Estamos nos comunicando usando cores, por alinhamento, por ícones diferentes. Isto é realmente o que um designer faz. Eles se comunicam e mostram informações de forma visual, melhor maneira, e as apresentam ao usuário para que ele possa ou ela possa entendê-las. Estes são poucos os problemas que eu queria mostrar a vocês em relação a essa deficiência e às ferramentas que estou usando. Para verificar diferentes taxas de contraste e todas essas coisas. Tente criar todos esses esquemas de cores como este, e você estará em boas mãos. Certifique-se de que suas cores têm uma boa taxa de contraste e eles não preenchem o contraste principal que eu vi um monte de designers que eles não sabem sobre este problema, e principalmente eles estão criando um monte de shorts drible ou [inaudível] carteira. Eles estão criando aplicativos móveis que realmente falharam nas taxas de contraste. Então, se tiver alguma pergunta para me fazer, te vejo na próxima lição. 25. Plugins de Stark para acessibilidade para cores: Hoje eu vou compartilhar com vocês um plugin muito bom que você pode usar para verificar sua acessibilidade de cores, taxas de contraste de cores, e daltonismo. Um monte de designers, eu vi que eles não sabem ou eles não se importam muito com acessibilidade de cores ou o nem sequer se incomodam em testar seus fundos de cor e proporções de primeiro plano que esta cor neste fundo, se deve ser um bom contrastes, se ele será visível ou legível em diferentes tamanhos de tela ou telas diferentes. Vou mostrar-lhe um plugin muito bom que está disponível para aplicativos Adobe XD e Sketch. Você pode usá-los e vamos ver o que é isso. Aqui temos isso, este é Stark e este é um ótimo plug-in. Você pode usar isso para o Adobe XD e para o Sketch e ele realmente testa para diferentes taxas de contraste padrões como AA, AAA. AAA é para texto pequeno e este é para texto grande, 4.5. Este é realmente o ponto ideal, AA seu texto deve ser pelo menos passado este padrão. Para um texto muito pequeno, você precisa passar este AAA. Além disso, ele tem simulações daltônicas, que você possa testar cores para pessoas daltônicas ou usuários. Há mais alguns recursos chegando, como sugestões de cores e exportação perfeita. Vamos ver e testar no Adobe XD, então eu vou mudar para o meu Sketch no meu Mac e vamos ver isso a partir daí. Agora, agora eu estou no Adobe XD e você pode ver se você vai para este menu, Eu estou no agora no Windows, você pode ir para Plug-ins. Você pode clicar em Discover plugins, e você pode procurar Stark aqui e ele já está instalado. Se não estiver instalado, basta clicar aqui e ele será instalado. Uma vez instalado, você pode ver aqui eu tenho dois botões, deixe-me ampliar. Esta cor é bastante visível para mim neste fundo, mas se eu selecioná-lo, ambos e eu vou para Plug-ins e Stark e Verificar Contraste, você pode ver que está falhando aqui. A taxa de contraste é quase 3:1, 3.34 o que é muito baixo para mim. Agora, vamos testar o segundo. Eu vou selecionar ambos e eu vou novamente ir para Plug-ins e Stark, Verificar Contraste, e agora você pode ver que ele está passando quase normal taxa de texto 4.5, que é bom, para grandes textos está passando ambos. Eu acho que isso é muito bom combinações de cores, então se eu estou indo para ir com meus botões, eu vou usar essas duas cores em vez destes dois. Tente se certificar de que você está usando cores que têm boas taxas de contraste e que passam todos os padrões de cores. Vamos testar a outra ferramenta que ele tem. Vamos selecionar estes e eu vou testar a simulação daltônica. Aqui temos simulação daltônica, vamos mantê-lo assim e eu vou usar este aqui. Eu acho que este é o mais popular, 4-5 por cento as pessoas têm essa deuteronopia. O que aconteceu na verdade, para que possam ver esta cor azul. Você pode ver que esta cor é um pouco diferente, mas esta cor também é diferente, é quase roxa. Vamos ver outro, tritanopia, isso virou verde. É assim que você o usa no Adobe XD. Agora vou mudar para a minha ferramenta Sketch e vou mostrar-lhe a tela e como este plug-in funciona no Sketch. Agora você pode ver que eu estou agora no meu iMac, e este é o meu Sketch, e eu já baixei e instalei esse plug-in Stark. Então nós vamos apenas para os plug-ins, Stark e Show Stark. Esta é na verdade a tela que recebemos. Vamos ver, vamos usar este iPhone 8. Deixe-me só torná-lo um pouco maior assim. Agora é neste modo de daltonismo. Ele está simulando este, deuteranopia e também você pode testar outro. Você também pode exportar esse modo de exibição para que haja mais algumas funcionalidades disponíveis neste. Se você quiser testar as taxas de contraste de cores, você pode ver aqui que temos contraste de cores. Vamos selecionar este e verificar o contraste, clique aqui, selecione duas camadas contendo [inaudível]. Precisamos de duas camadas. O que está acontecendo? Vou selecionar este e este, vamos verificar o contraste. Isto é realmente essas duas camadas e você pode ver que ele está me mostrando que a taxa de contraste é 7.06, então ele está passando todas as diferentes taxas de contraste. Agora, como você pode ver, essas cores não são as mesmas, que eu mostrei no meu Adobe XD, estas são cores um pouco diferentes. Se eu testar o mesmo para estes dois, vamos pegar estes dois e verificar o contraste. Vai falhar a maioria deles. É apenas bom para texto grande, que é, eu acho que na verdade mais de 18 ou 19 pixels, ou 18 pontos, eu acho. Isto é 3.34, eu acho que é muito baixo, pelo menos deve passar este. É assim que você usa o plug-in Stark no seu Sketch, então isso é tudo sobre o uso do plug-in Stark no software Sketch. Espero que você tenha aprendido algo valioso neste vídeo, em breve, no próximo vídeo. 26. Espremido de cores com propósito: Aqui está outra atribuição e é sobre a criação de um esquema de cores baseado em um tema de cores. Cor tema é basicamente o que a empresa faz e como a empresa usou algumas palavras-chave que estão indo para ajudá-lo a definir o que essa empresa realmente [inaudível] com seu esquema de cores. Aqui está a sua missão. SecureDot é uma empresa de segurança on-line, construir um esquema de cores profissional e forte que reflete o que eles fazem. A primeira coisa é que eles são uma empresa de segurança, eles estão online. As palavras-chave aqui são segurança, profissional e forte. Tente usar picular.co ou qualquer outro esquema de cores. O que eu quero que você faça é, você vai enviar este esquema de cores junto com esta tela. O que você está esperando? Comece a criar esta atribuição agora. 27. Diferenças de cores sutis: Nesta lição, vamos falar sobre um segredo muito simples do design da interface do usuário, que é diferenças sutis. Agora vou mostrar como você pode gerenciar suas diferenças sutis, diferenças muito leves em suas cores e formas para criar uma ótima interface do usuário. Aqui, como podem ver, tenho esta mensagem muito simples. Eu criei em apenas 10 minutos. Eu estava criando agora mesmo. Aqui, como você pode ver, há alguns problemas com esta tela. Uma é que se olharmos para esta área aqui, esta fronteira, está muito feia. O que vamos fazer é, você pode ver que há um fundo muito pálido, esta cor cheia na parte de trás, que é também esta cor muito brilhante e pálida desta quase mesma tonalidade. O que vamos fazer é, precisamos desta cor, vamos começar com esta cor como a borda. O que eu vou fazer é, eu vou começar com a mesma cor que tem para o fundo, para a borda como esta e então o que nós vamos fazer é reduzir nosso brilho para 90 por cento. Se você quiser este efeito, você pode ver borda muito estabelecida e se você diminuir o zoom você pode ver que você não vai obtê-lo em seus olhos. Isso não vai machucar seus olhos, na verdade. Selecione isso, vamos torná-lo mais 80 por cento. Agora eu acho que ele está olhando melhor em 80%, então eu vou ficar com isso. Se você quiser, você pode aumentar a saturação. Vamos tentar 25% e vamos fazer 90 por cento, algo assim. Isto parece bom. Eu vou usar esta cor. Vamos reduzir a saturação um pouco, 20 por cento. Ok, então eu vou adicionar esta cor ao meu esquema de cores também, ok? Esta é a magia das diferenças sutis. Eu só criei um visual agradável com diferenciação, com um pouco de diferença entre as cores. Da mesma forma, se você olhar para esses textos, eles são da mesma cor, o mesmo preto. O que eu vou fazer é, eu vou selecionar esta cor. Desculpe, este texto aqui. Há dois truques para ele. Um, você pode usar essa opacidade e passar cerca de 60% de sobrecarga, ou como 70%, então 70 por cento está com boa aparência. Este é um truque muito simples. Muitos desenvolvedores podem usá-lo, que eles podem reduzir a opacidade da mesma cor para 70 por cento. Da mesma forma, estes dois minutos atrás, nós não queremos que ele seja tão brilhante, então nós também vamos reduzi-lo para 50%, algo assim, ou talvez 60 por cento. É assim que realmente a magia diferenças sutis realmente funciona em nossos esquemas de cores ou em nosso texto. Esta é, na verdade, uma versão um pouco mais melhorada do mesmo. Ok, então se você quiser mais um efeito, você pode adicionar aqui, você pode adicionar a borda. O que podemos fazer aqui é, vamos começar o mesmo com a mesma cor. Vamos diminuir esse brilho para 90 por cento e saturação 80 por cento. Vamos fazer com que 88%. Algo assim. Ok, então isso é interessante. Vamos torná-lo um pouco mais visível. Vou conseguir 85 por cento, 82 por cento. Isto parece bom. Esta é outra maneira de aumentar sua aparência de sua interface do usuário e não quer jogá-la nos olhos de seus usuários, ok? Este é um truque muito simples que eu queria mostrar a vocês. Eu vi muitos designers, eles não sabem disso ou têm qualquer idéia sobre isso. Sempre que você estiver fazendo algo assim, não tente usar a mesma cor para tudo. Tente reduzir o brilho, então ajuste-o para criar UIs com ótima aparência. Espero que tenham gostado desta lição. Se tiver alguma pergunta para me fazer, nos vemos na próxima lição. 28. O que são escalas de cores?: Nas lições anteriores, nos vídeos anteriores, você me viu criando diferentes tons de uma única cor. Nós os usamos principalmente no painel ou outro design de interface do usuário. Nós precisamos principalmente, eu acho, três ou quatro, duas tendas e dois tons, pelo menos quatro ou cinco escalas diferentes da mesma cor. Agora, o tópico é escala. Vou mostrar-lhe e compartilhar com você as ferramentas on-line onde você pode gerar. Você pode colocar apenas uma cor e criar um monte de cores diferentes que podem ir com isso, juntamente com diferentes tons e tendas. Vamos chamar-lhe simplesmente a escala, a escala de cores. Vamos começar com este site. Esta é uma muito antiga. Usei-o há uns cinco, seis anos. Eu continuei a usá-lo. Basta digitar uma cor, por exemplo, esta. Vai mostrar-te onde está esta cor. É por aqui. Aqui temos todos os tons claros. Se você descer, você pode ver que fica mais escuro, mais escuro e mais escuro. Sempre que você está projetando algo, por exemplo, algum painel se você quiser obter todos os tons diferentes e tendas diferentes da mesma cor. Por exemplo, eu quero uma cor mais clara para o meu fundo, ou talvez algo assim. Eu vou me mover como quatro ou cinco passos ou seis passos de distância, como talvez este, eu vou copiá-lo e colá-lo e tentar este junto com esta cor. Esta é uma ferramenta muito útil, 0to255.com. Então eu vou mudar para algumas ferramentas modernas. Este foi criado por um cara que eu acho Hihayk. Esta é uma das grandes ferramentas que vejo online. Aqui temos esta cor inicial, esta é a cor inicial. Se você quiser começar de outra cor, deixe começar de outra cor. Vamos com este. Vamos adicionar um pouco de azul aqui. Dei-lhe este valor. O que quer que você faça, você tenta colocar algum valor aqui, valor hexadecimal ou usar esses controles deslizantes se você quiser. Vamos começar com esta cor. Vamos tirar um pouco de vermelho daqui para ficar mais azul. Isso parece ótimo. De qualquer forma. Este é o ponto de partida. Basta colar a sua cor aqui. Deixa-me mostrar-te o que isto realmente está a fazer. Ele está realmente usando alguns ângulos e alguns cálculos diferentes para obter outras cores. Estes são principalmente análogos cores do esquema de cores para combinar com este azul. Este do meio é na verdade a sua cor, aqui. Ele está usando quatro degraus no lado esquerdo, lado mais escuro e um, dois, três, quatro, cinco, seis no lado mais claro. Ele está realmente gerando 10 cores. Se você quiser mudar alguns valores, se eu quiser talvez sete. Nove tons claros. Não 70. Eu quero sete. Vamos adicionar nove aqui. Agora, temos nove tons claros aqui. Se eu quiser talvez 10, você pode ver que eu tenho 10 tons diferentes aqui. Da mesma forma, se eu quiser mais valores escuros, talvez eu queira seis valores escuros. Vou adicionar seis aqui. Agora, este é o passo, na verdade. Cinquenta por cento, se quiser mudar. Deixe-me mudar para 15 por cento. Você pode ver que é assim que está mudando. Da mesma forma, se eu for a este, eu coloco aqui 20 por cento, você pode ver que ele está realmente fazendo com que leve 20% de cada vez. Não precisamos disso porque precisamos de uma cor brilhante muito bonita. Vou usar 50 ou talvez 65 por cento, algo assim. Talvez eu queira aumentar 85, vamos usar 85. Este está ótimo. Da mesma forma para o mais escuro, vou usar 30 por cento. Não, 50% parece bom. Aqui temos degraus. Então temos a leveza e a escuridão. Isso é basicamente controle de brilho. Então temos o ângulo de matiz na roda de cores, se você se lembra. Não me lembro de que cor é ali. Mas o que eu vou fazer, é na verdade variar o seu esquema de cores. A partir deste, ele está realmente indo menos sete graus em ângulos escuros. É só mudar a cor um pouco, o ângulo da sua tonalidade um pouco. Da mesma forma, neste lado, ele está mudando o ângulo para mais 67 por cento. Se você quiser reduzi-lo, você pode ver agora esta é a cor roxa, que estava muito perto da sombra azul nas rodas de cores. Se você continuar iterando, se você quiser algum esquema de cores aqui, por exemplo, você pode ver que este é um esquema de cores totalmente diferente. Eu mudei meu ângulo para 189%, vamos usar 90%. Noventa por cento é realmente totalmente, você pode dizer em um passo de lá. Diferença de noventa por cento. Vamos usar 180. É assim que você pode usar esse ângulo de matiz de cor clara para criar diferentes esquemas de cores. Como você pode ver, este é realmente análogo, cores muito próximas, verde e azul. Eu realmente gosto. Eu vou ficar com este aqui. Cores mais escuras, eu gosto disso menos sete graus, então eu não vou mudá-lo. Da mesma forma, a última parada é a saturação. Se você quer cores escuras muito saturadas, se você se lembra, eu lhe disse que sempre que você estiver indo para fazer seu esquema de cores mais escuras, você vai saturá-lo. Mais saturação e mais escuridão. Da mesma forma para as cores claras, vou reduzir sua saturação. Vou usar 10 por cento aqui. É assim que meu esquema de cores está funcionando. Se você quiser mais saturação, você pode ver, você pode tentar mais saturação como esta por exemplo. Eu quero um tema muito onde eu quero olhar muito verde ou olhar muito fresco, então eu vou aumentar a saturação aqui. Vamos usar o brilho para 90 e saturação é 80 por cento. É assim que ele está criando todo o meu esquema de cores. Eu realmente amo isso. Tem seis cores escuras e 10 cores claras. Você pode usar apenas este para criar todo o esquema de cores. Você não precisa de mais cores. Talvez um pouco de pastagem. Isso é realmente chamado de escala de cores. Em seguida é esta ferramenta da caixa de cores de design de elevador. Isso também é semelhante a este, mas aqui temos mais controle e eu acho que esse controle parece melhor. No lado direito, você pode ver que ele está me mostrando paleta de cores junto com as taxas de contraste de cores. Você pode ver 1,56, 2,23. Três está ótimo. Então temos quatro contrastes, 4.06w, e assim por diante e assim por diante. Aqui podemos controlar os passos. Por exemplo, quero 15 passos aqui, e esta é a minha tonalidade inicial. Por exemplo, eu quero começar com um pouco de azul aqui, e eu quero terminar com algum roxo avermelhado aqui, algo assim. Isto é, na verdade, você pode ver que estes são os passos e subindo em direção diferente, que significa que a tonalidade está realmente mudando. Você pode ver 195, 197, 199. Estes são os valores de matiz, eu acho que deixe-me ver. Estes são os valores de matiz na parte inferior e na parte superior estes são realmente o valor de escala 0,10, 20, 30. Na verdade, estes são os meus passos de escala. Aqui temos a curva. Se você quiser alterá-lo, você pode alterá-lo como este EaseInOut. Na verdade, é diferente usando uma combinação diferente de método EaseIn para ser aplicado sobre este, por exemplo, eu uso algo assim. Você pode ver à direita, ele está gerando o esquema de cores. Se você quiser pegar todo o esquema de cores, você pode usar esta captura de tela de página inteira. Você pode capturar isso, ou você pode usar esta, esta ferramenta, eu realmente amo isso. Isto é getfireshort. Deixe-me mostrar-lhe como realmente funciona. Vou capturar a parte visível ou capturar minha seleção. Vou selecionar esta área aqui para obter todo o meu esquema de cores. Isso é tudo. Vou guardá-lo como um esquema de cores. Você deve estar se perguntando, como podemos copiar tudo isso? De qualquer forma. Aqui, temos curvas diferentes, e então temos a saturação. Você pode ver o quanto saturado suas cores iniciais serão, quão menos saturadas serão? No final, temos muitas situações, podemos controlá-la aqui. Da mesma forma, temos a curva, vamos mudar a taxa. Isto é contra a saturação. Quanta saturação precisamos? Este parece bom. Então isso é novamente para a saturação, eu acho. É para a saturação. Este está ótimo. Então temos a luminosidade. Luminosidade é quanta luz deve estar emitindo de suas cores. Meu começo será cores mais claras, então mais luminosidade e será ter menos cores mais escuras. Dark, você pode ver menos luminosidade assim. Quaisquer configurações de matiz que você deseja, então novamente, temos essa curva. Não tenho certeza de cores de bloqueio. O que significa a cor do bloqueio? Acho que daqui, talvez um valor hexadecimal. Talvez eu queira trancar esta cor. Deixe-me ver. Este está realmente bloqueando esta cor. Então você pode compartilhá-lo e realmente compartilhar por URL, RGB, cores JSON. Se você é um programador, eu acho que você pode usar esse JSON hexadecimal. Você também pode copiar esses valores hexadecimais se desejar e usá-los em seu software ou software de design. Esta é, na verdade, a escala. Temos passos 0,10, 20. Na verdade, isso também é usado pelo Google Material Design. Se te lembrares, então a última ferramenta é esta. Isto é, na verdade, para dados. Se você quiser apresentar um monte de dados ou informações ou gráficos muito grandes onde temos um monte de dados. Você pode usar isso. Estes são modos de cores diferentes no lado esquerdo, eu normalmente uso a luminosidade da tonalidade, e você pode pegar a cor. Por exemplo, eu quero escolher alguma cor aqui começando e aqui eu tenho a luz de cor final. Vamos usar este aqui. Aqui, você pode adicionar etapas diferentes, se desejar. Por exemplo, um, dois, três, quatro, cinco, seis, sete passos, vamos adicionar oito, nove e 10. Eu criei toda a escala aqui. Você também pode visualizá-lo. Se você clicar em visualizado, você pode ver como esta cor vai mostrar o mapa dos EUA. É assim que você pode ver. Na parte inferior direita, diz desemprego dos EUA 2018. É a sombra amarela, a sombra muito brilhante é o alto desemprego. Você pode ver, se eu pairar sobre ele, ele vai me mostrar os valores. Se você estiver em design de informações, você pode usar algum seletor de cores como este e você pode copiar todos estes e criar seu esquema de cores para suas visualizações. Isso é tudo sobre escala e como você pode gerar escala usando essas quatro ferramentas on-line, pode haver outras, mas agora, eu acho essas muito interessantes. Espero que tenham gostado deste vídeo. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 29. Projeto 4:Schema de cores com Scheme: Agora, a hora é para outra tarefa e isso vai ser um pouco difícil porque eu quero que você crie um esquema de cores que vai se encaixar em todas essas ações diferentes. Você pode ver aqui, este campo é o campo escuro, que é o endereço de e-mail, ele está ativo agora. O segundo, o senha, está vazio e está no estado padrão, não está preenchido, estado inativo. Então temos o botão Criar Conta, que é mais atraente ou o botão principal Call To Action ou CTA, que chamamos na tela, que tem o foco principal desta tela. Então já temos uma conta e login aqui, que é uma ação secundária. Você está indo para colorir esta tela assim. Vou mostrar-lhe o que fiz aqui. Você pode ver, então aqui está o meu esquema de cores para este mais seguro e você pode ver aqui, eu usei cores diferentes para diferentes estados. Como você pode ver, nossa principal cor primária é este azul escuro, cor azul real e, em seguida, temos muito claro azulado, cor azul céu para o login aqui. Você vai enviar esta versão com esquema de cores junto com sua versão em tons de cinza, e junto com este esquema de cores. Pelo menos mostre-me seu esquema de cores e também o esquema de cores que você está usando e você pode dizer, quais são as diferentes funções que você está atribuindo a cada cor, por exemplo, esta é a nossa cor primária, esta é a nossa ação. Esta é a ação primária, estas são cores da marca, esta é extra, então temos a cor do campo de texto inativo, que é a borda em torno dela, campo de texto inativo. Então temos texto de entrada inativo, que é a senha escrita dentro dele. Isto é para texto escuro. Temos texto claro, texto escuro, campo de texto ativo, a borda ao redor do campo de texto ativo. Então temos esse passado. Não é branco, é cor muito esbranquiçada de tonalidade 204, que é, eu acho que a nossa marca cor azul. Então temos a cor secundária. Eu quero que você me mostre seu esquema de cores e quais são as funcionalidades ou funções que cada cor foi atribuída. O que esta cor está fazendo, o que esta cor está fazendo, e o que esta cor está fazendo. Essa será a sua missão. Espero que apresente isso em breve. Você pode usar qualquer software ou, na verdade, Adobe Photoshop ou Sketch. Vamos começar. 30. 12 Sempre desenhe em escala de cinza: Hoje vou mostrar-lhe o terceiro segredo de qualquer design de esquema de cores. Sempre que você começar seu projeto, você vai projetar um quadro de palavras, como você pode ver aqui à esquerda. Você pode ver, eu usei valores diferentes ou diferentes tons de cor cinza, do escuro à luz para representar o meu quadro de palavras para que você possa ver que este é um campo ativo. Tem mais borda escura do que esta. Isso é realmente campo inativo não preenchido, campo de texto. Da mesma forma aqui como você pode ver esta cor do texto, e esta cor do texto é a mesma. Este logotipo, tem cor muito escura, e também você pode ver que eu separei esta cor O, deste ponto com algum cinza. Só para mostrar que esta vai ser uma cor diferente. Da mesma forma, você pode ver aqui eu tenho mostrado que este botão, esta é a parte mais importante, por isso é destacado nesta tela. Da mesma forma, na parte inferior você pode ver que eu usei login aqui, em todas as tampas e também tem cor escura. Já tem uma conta. Este texto é leve e o botão Login, que é uma ação, está escuro. Você pode ver apenas por um olhar, você pode olhar para esta tela, e você pode dizer que essas coisas são importantes, ou destacadas, ou seu estado é diferente do outro, então essas são as coisas que você precisa tomar cuidado sempre que você está começando qualquer um de seu design, site ou qualquer coisa. O truque aqui é sempre, sempre e sempre começar o seu design em escala de cinza. Nunca tente começar a projetar algo assim, e escolher cores aleatoriamente, e apenas continuar projetando coisas aleatoriamente. Tente esboçar, tente enquadrar o aplicativo, o site ou o que você está projetando e, em seguida, pegue um pouco de cor. Por exemplo, como aqui, eu peguei essa cor primária, que é azul escuro. Então estas são na verdade duas cores da marca, e este verde é extra, ele vai me ajudar às vezes. Então você pode ver todas essas cores eles são na verdade os tons da mesma cor, que é este aqui. Esta cor, e eles têm tons diferentes. Este está usando para mensagens. Este é novamente para texto, textos escuros, texto claro. Este vai ser o nosso passado. Isto não é branco, tem algum matiz misturado nele, esta cor eu acho. Então estou usando essa cor. Isto é para a minha acção secundária. Você pode ver aqui cores primárias, cor secundária, então se você está pensando que você realmente precisa de uma cor muito contrastante para sua ação secundária, você está errado. Você pode ver aqui este azul é muito claro e muito, você pode dizer, cor muito brilhante em vez desta cor escura. É totalmente oposto a este, mas não é tão contrastante como este. Este botão 'Criar conta', tem mais contraste, e é mais vibrante, e está chamando a atenção mais do que este login. Sua próxima tarefa será criar algo assim, e também me mostrar seu esquema de cores, quantos tons você precisava para completar toda a tela, você pode ver aqui, existem cores diferentes usadas para isso campo ativo, este especificado. Isto aqui e depois este botão. Outro botão que é ação secundária, e este texto é diferente. Este texto é um pouco mais escuro, este é um pouco leve, então é assim que você realmente desenha algo assim. Também o fundo tem alguma cor aqui. Estes estão à esquerda. Você pode ver que adicionei as cores no meu painel de ativos. Isto é [inaudível]. Se você quiser usar o esboço ou qualquer outro aplicativo, tudo bem. Você pode ir em frente e usar qualquer ferramenta. Figma ou o que quiser. Mostre-me suas telas e isso é tudo. Na próxima lição, você vai criar a tarefa, mas agora se você tiver alguma dúvida, me avise, me pergunte na discussão, ou se você tiver alguma sugestão, me avise. Espero que você tenha gostado desta lição e você aprenderá o segredo de projetar boas interfaces ou bons esquemas de cores. Ou seja, sempre comece seu design com escala de cinza. Vejo você em breve na próxima lição. 31. Nomeação de suas cores: Neste vídeo vou mostrar-lhe os truques e dicas sobre como gerenciar suas cores. Enquanto você está gerenciando suas cores, a primeira coisa é como você vai nomeá-los. Estou agora no esboço. Você pode ver aqui, eu vou compartilhar esse arquivo com você. Você pode ver aqui, eu tenho umas 20 cores diferentes. Aqui eu tenho diferentes tons de azul, saturação diferente, leveza diferente para o Cinza. Você pode ver que eu tenho como 10 cinza diferente e nove ou 10 cinza diferente, então nós temos tons de verde, laranjas, vermelhos, roxo, e cor ciano. Isso realmente vai ajudá-lo a construir quando você está projetando algum painel. Como você vai nomear suas cores? A primeira coisa é que quantas cores são, quantas sombras você precisa. Se você não está construindo um sistema maior, sugiro que você pelo menos construa cinco tons diferentes da mesma cor. Se você tem vermelho escuro, vermelho mais escuro, vermelho mais escuro, então temos vermelho médio, então temos este vermelho claro, então este é o vermelho mais claro. É assim que você vai nomeá-los. escuro, mais leve, mais leve, médio, algo assim. Este esquema de nomeação pode ser usado até cinco cores. Mas se você tem tipo, eu tenho essas cores cinza, como se fossem nove cores diferentes. Como é que lhes vou dar um nome? Eu vou usar outra técnica que é chamada, Eu tenho visto um monte de designers e até eu acho que o Google Material Design está usando isso. Vamos nomeá-los: Cinza 20, Cinza zero, 10, 20, 30, 40, 50, 60. Sempre que você está movendo para cima como Cinza 60 ou 70, ou 80 ou 100, eles vão ser a cor mais escura. Como você desce como zero, 10, 20, eles são tons mais claros. Isso vai ajudar seus desenvolvedores ou qualquer equipe com que você está trabalhando, que é mais fácil para transmitir as cores que você está usando. Sempre que você está tentando construir algo assim, eu quero que você nomeie suas cores assim. Cinza 20, Cinza zero, Cinza 10, Cinza 20, 30, 40 , 50, 60, 70, 80 e 100. Ou você pode pelo menos ir para 90 para ter como 10 tons diferentes. Acho que 10 será suficiente, mais do que suficiente. É assim que você vai nomear suas cores. Na próxima lição, vou mostrar como você vai realmente salvá-los ou criar um guia de estilo ou estilos no esboço da Adobe. Vamos passar para a próxima lição. 32. Usando o plugin de gerador em Sketch: Neste vídeo, vou falar sobre como você vai gerar estilos de esboço para suas cores. Por exemplo, eu tenho umas 30 cores, eu não quero criar um único estilo novamente e novamente, então eu quero criar todos os estilos. Para isso, você precisa de um plugin chamado Sketch Styles Generator, vá em frente e baixe-o e instale-o clicando duas vezes nele. Então vamos ao Sketch. Deixe-me ir para “Criar novo arquivo”, “New Art Board”, vamos criar qualquer quadro de arte. Vamos criar este. Vou escolher alguns retângulos aqui. Aqui temos um retângulo. Vamos começar com alguma cor aqui como se eu tivesse essa cor azul. Replicar dois, três e quatro. Vou usar outra cor, talvez assim. Vamos adicionar um pouco de cinza aqui, vamos adicionar um pouco de cor ciano azulada, escuro para o fundo talvez, eu tenho algo assim. Eu tenho agora quatro cores, então o que eu vou fazer é primeiro, eu vou renomeá-los. Você pode usar um plugin chamado “Renomeá-lo”. Na verdade, eu não os organizei, então vamos organizá-los assim. Vamos torná-lo mais leve, então vamos apenas com a cor mais clara de todos estes. Algo como isto. Aqui temos o retângulo um, dois, três, quatro. topo é o, no topo. Em seguida, vou mover esta camada para baixo. Este deve estar aqui, e este está na posição certa. Agora eu vou selecionar todos eles e eu vou executar outro plugin para renomeá-los, “Renomear camadas selecionadas”, e nós vamos usar “Layer Name” com algum “Number Sequence”. Vamos renomeá-los assim. Este é azul barra azul um, dois, três, quatro. Temos algo assim. Também podemos usar o número de atribuição, como azul um, dois, três, quatro. Vamos renomeá-los. Este vai ser quatro, este é o mais escuro, então temos azul três, dois, um. Esta é uma maneira de renomeá-los. Agora vamos selecionar todos eles e vamos para “Plug-in” e vamos usar “ Style Generator” aqui, clique aqui, e todos os estilos foram gerados. Se formos até aqui, você pode ver dentro azul, estamos vendo azul um, dois, três, quatro. É assim que você está indo e você sabe criar seus estilos e gerar seus estilos, para que você possa reutilizá-los no Sketch. É assim que você vai organizar suas cores. Se você estiver usando Zeplin ou Ferramenta de Terceiros para mostrá-lo aos seus desenvolvedores, então você vai construir seu esquema de cores ali. Isso é tudo. Espero que você tenha gostado desta lição e tente fazer o download deste plug-in Style Generator. Deixa-me mostrar-te. Você também vai gerar estilos para suas cores de texto. Se eu clicar aqui, você pode ver que isso é algo chamado estilos, títulos, preto. Eu tenho algo como isso, botão, branco, azul, formulário, texto formulário de texto, ativo cheio, inativo. Você vai criar todos esses estilos e cores diferentes para sua ferramenta de parágrafos. Você pode ver aqui este texto aqui, que é parágrafo, é diferente do título e tem cor diferente. Você vai criar todos os estilos diferentes, gerar todos os estilos diferentes usando este Gerador de Estilo, e você pode usá-los em seus designs mais tarde. Isto é sobre a reutilização e como você vai gerenciar seus estilos no Sketch. No próximo vídeo, vou mostrar o mesmo processo que você pode fazer no Adobe XD. Vamos passar para a próxima lição. 33. Como gerenciar cores no Adobe XD: Agora, agora, estou no Adobe XD e vou mostrar a vocês como você vai adicionar suas cores aos seus ativos, que são seus estilos, cores e estilos de ralador. O que eu realmente faço é se você projetou todas as suas cores e aplicou suas cores à sua tela, você só vai selecionar tudo, clique com o botão direito do mouse. E adicione cores aos ativos. É tão simples no Adobe XD. Agora você pode ir com estas cores e você pode organizar estas. Por exemplo, esta é a cor mais escura, então eu vou movê-la para cima, então este, depois este, e então nós temos este, algo assim. Então temos este cinza, que é o mais escuro de todos estes. Então temos essa cor primária no topo, vamos movê-la para o topo, então temos essas duas cores da marca. Vamos mover essa para cima, e isso é tudo. Além disso, eu acho que havia uma cor para usar para o fundo, que é este; FAFD e algo parecido. Podemos adicionar essa cor a partir daqui, clique com o botão direito do mouse em Adicionar ativos, e foi adicionado aqui. O que eu estou fazendo aqui é que eu estou realmente organizando-os assim e você também pode renomeá-los, por exemplo, este é o meu azul primário, algo assim, então você pode usar novamente a mesma técnica, cinza 60 e coisas assim, que eu lhe disse na última Lição 350. É assim que vamos nomeá-los. Você também pode nomeá-los assim, por exemplo, esta é esta cor e podemos adicioná-la a talvez cor de fundo, algo assim. Você pode nomeá-los com base em sua funcionalidade, você também pode nomeá-los assim, você também pode nomeá-los, por exemplo, texto, cor do texto escuro, cor do texto claro, coisas assim. É assim que você gerenciará suas cores no Adobe XD. Se você quiser adicionar seus estilos mais grexer junto com as cores, você pode clicar com o botão direito do mouse e adicionar um estilo grexer aos ativos. Isto vai adicionar a cor e o tamanho da fonte, tudo por aqui. Da mesma forma, para outros, por exemplo, este é o seu outro estilo, você pode adicionar essas sílica para que você possa continuar adicionando isso. É assim que você criará ativos e cores do guia de estilo em estilos mais grexer no Adobe XD. É assim que você vai gerenciar suas cores no Adobe XD, espero que você tenha gostado desta lição. Você também pode alternar para criar exibição. Você pode ver aqui isso é bom, mas não está mostrando o nome emprestado à frente. Você também pode procurar por cor, por exemplo, se eu tentar usar um nome, por exemplo, primário, ele vai me mostrar a cor. Eu também posso clicar com o botão direito do mouse e destacá-lo na tela onde ele tem sido usado em telas diferentes, então estes são um monte de grandes recursos e eu espero que você tenha gostado desta lição. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 34. Como gerenciar cores no Photoshop: Neste vídeo eu vou falar sobre como você vai organizar e salvar suas paletas de cores e cores no Photoshop, Adobe Photoshop. Você pode ver no lado direito que eu tenho painel de amostras. Se você não vê-lo, você pode ir para “Windows” e aqui você pode clicar em “Amostras”. No painel de amostras você pode ver que temos este menu à direita. Se você clicar aqui, temos diferentes opções, miniaturas minúsculas, miniaturas pequenas, miniaturas grandes, pequena lista. Se você nomeou suas cores corretamente como azul primário, primário escuro, ativo secundário, azul link, algo assim, você realmente precisa mudar para esta exibição, pequena lista. Ou você também pode mudar para esta grande lista, você pode ver que eu posso facilmente encontrar as cores. Você pode ver, as cores inferiores eu não nomeei eles, então você pode ver que é difícil tocá-los ou usá-los. Então, a primeira coisa é sempre tentar nomear suas amostras. Em segundo lugar, se você tem algo como você pode ver aqui, eu já tenho um monte de cores na minha paleta de cores, e eu quero começar um novo projeto, e agora eu quero um esquema de cores totalmente separado. Eu não quero que eles sejam adicionados aqui ou aqui. Então o que eu vou fazer é, eu vou para o meu “Substituir Amostras”. Está bem? Assim, você pode redefinir suas amostras, carregar novas amostras de cores, salvar amostras. Você pode substituir amostras. Então eu tenho um arquivo, então eu vou primeiro salvá-los. Deixe-me salvá-los na área de trabalho. Minha amostra atual, 2019. Está bem. Então eu salvei minha amostra e agora o que eu vou fazer é eu tenho um arquivo. Deixa-me mostrar-te onde está. Então eu tenho um arquivo chamado amostras vazias e eu vou clicar em “substituir amostras” e ir para encontrar isso. Acabei de colá-lo na minha área de trabalho “switches vazios”, e eu vou carregá-lo. Você vai ver o que acontece. Todas as cores se foram, então temos apenas uma cor preta. Agora o que vou fazer é adicionar as minhas cores agora. Eu só peguei essa cor, eu vou para aqui, e seletor de cores e vai adicionar duas amostras. Então agora eu vou nomear uma cola primária ou talvez traço, eu vou usar traço, algo assim. Você também pode adicioná-los à sua biblioteca atual. Por exemplo, se eu clicar aqui, vou adicioná-lo à minha biblioteca atual e posso usá-lo no Adobe XD, Adobe Illustrator, Adobe Photoshop, CC Live Softwares que estão usando biblioteca. Por isso, agora vou adicioná-lo aqui. Vou escolher o próximo, e vou clicar novamente em “Swatch”. Este é o meu, vamos chamá-lo de amarelo secundário. Então eu vou clicar aqui e quanto a isso vai ser meu fundo branco ou algo assim, fundo branco. Esta é outra cor, talvez média ou algo assim. Então vamos mantê-lo como Cyan. Então, aqui estou eu adicionando apenas quatro cores. Você também pode adicionar mais, por exemplo, como densos e tons, diferentes desta cor azul aqui, por exemplo. Agora vou adicioná-lo a azul, dez, algo assim. Então eu vou novamente para este 20 azul, algo assim. Então eu vou passar por cima deste, azul 30, algo assim. Acho que tenho cores mais do que suficientes agora. Então, se você quiser excluir alguma cor, você pode simplesmente pegá-lo, agarrá-lo, e deixar em que excluir e ele vai ser excluído. Você também pode clicar com o botão direito do mouse e ir para o gerenciador de predefinições e aqui você pode movê-los se quiser. Por exemplo, eu quero que ele esteja aqui, e então eu quero que ele fique aqui assim. Então eu posso movê-los por aí feito, e você verá que eles foram arranjados. Portanto, há muitas coisas que você pode fazer com eles. Então vamos movê-los para a lista grande, e aqui temos todas as cores listadas corretamente. É assim que você vai usar diferentes paletas de cores, organizar suas cores no Adobe Photoshop. Se tiver alguma pergunta para me fazer. Vamos passar para a próxima lição. Antes disso, vou lhe dizer que você pode baixar esse arquivo de amostras vazias. Eu vou te mostrar, eu vou dar para você. Você pode simplesmente substituir suas amostras usando esse arquivo.aco vazio ou paleta de amostras de cores, e suas cores desaparecerão. Então vamos voltar às minhas cores. Então eu quero que eles sejam minha amostra atual, então eu vou carregá-lo assim nas miniaturas pequenas. Está bem. Então, isso é tudo. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 35. Extensões para encontrar cores: Neste vídeo, vou compartilhar com vocês minhas principais opções de cores e esquemas de cores gerando plugins ou extensões que você pode adicionar ao navegador Chrome e ao navegador Firefox. Vamos começar. Primeiro eu vou com algumas extensões do Chrome porque eles são realmente bom e realmente ótimo. Deixe-me mostrar-lhe como realmente funcionam. Aqui eu tenho um deles. Na verdade, é paleta de site. Se eu clicar nele, você pode ver que eu tenho listras site agora. Ele vai gerar uma paleta muito agradável, assim como um guia de estilo. Aqui eu tenho todas as cores. Tenho-os de uma forma muito agradável. No final, você pode ver modelo de esboço, amostra da Adobe, aberto na paleta do Google, aberto em Coolers. Isso é realmente ótimo. Posso baixá-los. Este é o, eu acho, melhor plugin que eu já vi. Você pode ver aqui que temos todas as diferentes opções de download. Então eu vou passar para o próximo, que é Colorzilla, você pode ver aqui. Isto é muito antigo. Eu estou usando isso de muito como eu acho que dois ou três anos dos últimos três anos. Basta clicar aqui e começar a escolher as cores daqui. Não sei por que não está funcionando. Eu preciso ir a este site, na verdade. Aqui temos. Você pode ver agora sempre que eu me mudar para cá, por exemplo, eu quero escolher esta cor verde, eu vou clicar aqui. Ele vai escolher o valor hexadecimal e também vai copiá-lo. Se eu quiser colar essa cor no Photoshop, Sketch ou em qualquer outro só preciso controlar ou comandar V para colar essa cor. Este é Colorzilla. O primeiro que te mostrei é o Site Palette, este aqui. Então este é Colorzilla. Para o próximo que é este, Snatchr. Ele vai novamente pegar todas as cores deste site. Você pode ver aqui, cores de texto. Estas são as cores de fundo. Ele tem duas seções, cores de texto e cores de fundo. Você pode ver como eles usaram diferentes tons de azuis acinzentados aqui no texto. Ele também vai pegar os estilos de tipografia. Cânfora tem sido usado aqui principalmente em todo o site. Não há uma opção para baixá-los. Eu vou dizer se você quiser obter este, é bom que as cores foram separadas em cores fundo e texto, mas nada muito que você pode fazer. Então temos o próximo que é este Palettab. Deixa-me mostrar-te. Aqui está este, Palettab. Também está disponível para o Firefox. Está disponível para Firefox e Chrome. Sempre que você abrir uma nova aba, você pode ver aqui temos uma bela Paleta ou esquema de cores agradável. Toda vez que você fizer isso, você receberá um novo esquema de cores. Sempre que abro uma nova aba, alguns dos meus alunos continuam me perguntando, qual era a extensão que você está usando, que estavam criando esses esquemas de cores junto com essas fontes do Google. Esta é, na verdade, paleta de cores. Desculpe, Palettab, este aqui. Você pode baixá-lo em sólido. Também está disponível para o Firefox. Apenas duas extensões estão disponíveis para Firefox e Chrome e que são Palettab e Colorzilla. Estas são extensões muito, você pode dizer muito antigas. Então o último que vou mostrar é este, CSS Peeper. Deixe-me mostrar-lhe o que ele pode fazer. Vamos fechar este. Aqui temos. Aqui está o CSS Peeper. Se você clicar aqui, você pode ver que ele vai mostrar-lhe o nome do site, em seguida, as fontes usadas aqui sobre o tempo de carregamento do arquivo CSS. Se você se mover para essas cores aqui, você pode ver que ele listou todos os diferentes tons que foram usados nesta cor. Até mesmo a opacidade, junto com a opacidade. Por exemplo, este foi usado 0 por cento de opacidade, 8 por cento de opacidade e tudo isso. Você pode simplesmente copiar a partir daqui única cor, mas você não pode baixar toda a paleta. Se você vai para este ativos, ele mostra todos os ativos, PNGs diferentes e SVG, eu acho. Esta é a guia que estamos procurando para que você possa copiar qualquer cor que quiser. Talvez você goste de apenas uma cor e você quer começar seu esquema de cores com esta. Estes são cinco plugins diferentes que você pode baixar e você pode instalar em seu navegador Chrome e Firefox. Deixa-me mostrar-te. Este é o Palettab no Firefox, você pode ver que ele está carregando o mesmo. Então temos este Colorzilla aqui. Você também pode instalar o Colorzilla. Há mais uma que vou mostrar a vocês que é o Gerador de Guia de Estilo. Ele não funciona com todos os sites, mas se você clicar aqui, você pode ver que ele está gerando guia de estilo, semelhante ao Site Palette eu acho. Eu não tenho certeza se você pode baixar qualquer coisa ou qualquer coisa. Você não pode baixar nenhuma Amostra ou Paleta de cores para abrir no Photoshop ou Sketch ou Adobe XD ou qualquer outra coisa. Esta é outra ferramenta, Style Guide Generator, Palettab e Colorzilla. Temos poucas extensões no Firefox que são boas para a geração de esquemas de cores, mas por outro lado , no Chrome, temos muitas opções boas aqui. Agora, o vencedor de hoje para mim é a Paleta do Site. Esta é uma das melhores ferramentas que eu acho. Você pode ver que ele pode baixar o modelo de esboço e Photoshop para abrir em sua ferramenta de design favorita. Além disso, este é muito útil. Às vezes eu só preciso escolher uma cor, então eu uso essa. Eu escolho Colorzilla e escolho essa cor e começo a partir daí. Estas são todas as diferentes extensões e plugins que eu uso. Se você tiver mais alguma recomendação ou usar outra coisa, tente me mostrar na discussão de comandos. Espero que tenham gostado deste vídeo. Vamos seguir em frente. Vejo você em breve no próximo vídeo. 36. Ferramentas online para sistemas de cores que uso: A maioria dos novos designers tem tendência a se meter em problemas que, “Qual cor devo escolher? Ou “De onde devo começar meu esquema de cores?” Por exemplo, se você estiver construindo sua própria startup ou algo assim, você pode estar se perguntando, “Onde devo obter minhas cores?” Eu vou compartilhar com vocês algumas das minhas ferramentas, apenas cinco delas, que você pode usar. Você pode usá-los para gerar cores a partir de uma imagem ou imagem. Se você quiser ter uma foto de praia ou algo assim, você pode pegar cores de lá também. Então, se você sabe qual é o seu tema, por exemplo, o meu tema é alimentação ou agricultura ou algo assim. Posso tirar uma foto de algum ambiente e começar a construir meu esquema de cores. Da mesma forma, vou mostrar-vos duas ferramentas que normalmente exploro. Os esquemas de cores já estão construídos e também podemos começar a partir daí. Vamos cavar. A primeira ferramenta que vou mostrar é color.adobe.com e você vai clicar neste “explorar”. Uma vez que você clicar sobre este explorar, você vai ver um monte de esquemas de cores legais que você quer começar com. Há, eu acho, talvez, mais do que milhares de esquemas de cores por aqui. Aqui temos o mais popular, mais usado aleatoriamente o tempo todo esta semana, algo assim. Você pode ver aqui nós temos à esquerda, este esquema de cores, este é um esquema de cores muito claro para talvez perfume feminino ou talvez algo assim. Principalmente está relacionado com frescura e um pouco de toque feminino, então, você pode ver este. Se você quiser baixá-lo, você pode clicar em download. Você também pode salvá-lo. Você pode abri-lo ou editá-lo, se quiser. Você pode ver aqui azul, laranjas e verduras. Este é outro. Isso está mais relacionado com a natureza, eu acho. Então nós temos diferentes tons de blues Eu realmente amo isso. Então temos este azul e laranja, que são azul púrpura, que são minhas cores favoritas. Então temos este, muito simples verde, laranja e amarelo. Estes são todos os esquemas de cores diferentes. O que você quer fazer aqui é, por exemplo, eu quero algo talvez em azul e laranja, eu vou digitar aqui azul e laranja e você vai ver que haverá um monte de esquemas de cores diferentes que eu tenho usado azul e laranjas. Este eu realmente gosto, eu acho que podemos facilmente usar este aqui. Vamos começar por aqui, vamos tentar editá-lo. Aqui temos este. Você pode ver que foi aberto aqui. Da mesma forma, se voltarmos, vamos ver se podemos salvá-lo ou baixá-lo. Vamos clicar em “Download”. Precisamos entrar no nosso Adote CC. De qualquer forma, vamos clicar em “Salvar”. Você também pode criar seu próprio ID. Você pode criar seu ID aqui. Você pode baixar também o Adobe XD, que é um software gratuito. Se eu quiser clicar nas informações, você pode ver que esta é a tela inteira. Talvez eu tente pegar a captura de tela aqui. Para isso eu uso esta ferramenta Jing. Se você não tem Jing, eu acho que você deve baixá-lo. É uma ferramenta gratuita e eu realmente amo como ele realmente funciona. Às vezes é muito útil para mim. Você também pode usar este plug-in de captura de tela curta de arquivo aqui no Firefox e Google Chrome. Então o que eu faço é normalmente pegar algo assim e eu vou começar com este esquema de cores. Estas serão as minhas cores principais, este azul e este laranja. Este é um azul mais escuro, este é branco, e este é um pouco de cor pálida aqui. Vamos fechar isto. É assim que vou começar com o Adobe Color CC. Agora vamos ver outro site onde eu normalmente vou explorar diferentes esquemas de cores e diferentes paletas de cores. Aqui está o Explorer, tente clicar nele e você verá toneladas de esquemas de cores diferentes. Aqui você pode ver que há muitos. Você também pode filtrá-los. Por exemplo, eu quero azul e amarelo. Vamos ver quais são os esquemas de cores aqui. Está a levar algum tempo. Isso realmente leva muito tempo. Eu acho que o motor de busca deles é lento, mas eu tenho digitado agora azul e laranja e você pode ver aqui laranja e azul. Todos os temas que foram marcados com laranja e azul, eles estão aqui. Acho que a busca deles é um pouco lenta e lenta. Eu não vou fazer algo assim. Vai levar muito tempo aqui. Então eu posso ir “Próximo”, “Próximo”. Aqui tenho algumas boas laranjas e azuis. Azul, laranja, verde. Azul, laranja, verde. Azul, laranja, limão, e muitos outros esquemas. Você também pode criar e salvar seus próprios esquemas de cores. Se você for para o meu perfil, vou mostrar-lhe minha conta e perfil onde eu criei, eu acho que 10 ou 15 esquemas de cores diferentes e paletas de cores. Vou compartilhá-los com você para, não se preocupe, você pode baixá-los e usá-los em qualquer um de seu aplicativo ou software. Você pode ver aqui que eu tenho uma dieta saudável. Isso é tudo verde, marrom e amarelo. Azul, verde, amarelo, você pode ver aqui, esquema de cores muito popular. Isso é laranja-coco, e isso também é marrons, laranjas e amarelos. Então temos pistola-metal, verde, azul, e alguns mais verde e azul, versões diferentes. Vermelho, azul, verde. Isto é seguro. Você pode usar isso em qualquer aplicativo. Da mesma forma, alguns mais. Estes são alguns tons diferentes de azul, azul e ciano. Eu o usei em alguns dos meus cursos. Você pode ver mais alguns projetos orgânicos. Este é realmente um esquema de cores analógico, verdes e azuis, projeto V2. Estes são esquemas de cores 14. Eu vou compartilhar isso com você também. Não se preocupe, você pode baixá-los facilmente. A próxima coisa é que, se você tiver alguma imagem ou um esquema de cores, por exemplo, eu quero construir meu esquema de cores com base em alguma imagem. Vou carregar esta imagem. Isto é de canva.com. Vamos selecionar alguma imagem. Você pode selecionar qualquer imagem, se quiser. Vamos selecionar esta imagem do meu estúdio. Eu acho que vai levar algum tempo, então vamos selecionar alguma imagem das minhas fotos. Isto parece bom. Vou clicar nesta imagem aqui e vamos ver que esquema de cores ela vai me mostrar. Aqui eu tenho uma foto de um interior do quarto e você pode ver que estas são cores diferentes. Ele me mostrou azul claro, cinza ardósia escuro, cinza claro ardósia, e essas poucas cores. Da mesma forma, esta é outra ferramenta que você também pode usar. Basta pegar uma imagem, por exemplo, eu vou pegar essa. Eu também gosto deste porque mostra um monte de diferentes variedades de cores. Você pode ver por aqui. Na verdade, acho que há algo aqui que não consigo entender. São cores de cortesia ou tríade? Seja o que for, acho que está tentando gerar alguma paleta de cores com base nessas harmonias de diferentes triângulos de cores, tríade complementar. Isto é realmente muito útil. Existem muitas cores diferentes para escolher. Em seguida, outra ferramenta, que é esta, palettgenerator.com. Vamos enviar uma imagem aqui. Aqui temos. Você pode ver que ele está me mostrando muito menos cores, todos os marrons. Vamos levar para dez cores dominantes. Aqui está, na verdade, mais algumas cores. Eu gosto dele de certa forma porque ele mostra todos os diferentes tons, pontos fortes, e tons das cores como aqui. Além disso, este é o pano de fundo. Use cores nos fundos aqui. Ainda faltam algumas cores. Mais uma vez, colormind.io. Você também pode fazer upload de uma imagem aqui. Vamos começar com este. Ele vai construir um esquema de cores baseado nessa imagem. Agora você também pode clicar em “Gerar”, e ele vai mostrar-lhe mais algumas sombras. Você pode ver um esquema de cores agradável. Na verdade, está criando as sombras da mesma imagem que acabamos de enviar. Estas são algumas ferramentas que você pode usar. Estes dois Adobe Color CC e coolers.io, Explore as paletas de cores, gerar paletas de cores a partir das imagens. São quatro ferramentas, e isso é tudo. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 37. Como encontrar inspirações de cores online: Neste vídeo, eu vou mostrar mais algumas ferramentas que eu uso e mais algumas coisas que você precisa ter em mente como, quais são as cores padrão para iOS ou Android ou sistema operacional Windows. Então, sempre que você estiver projetando para um aplicativo iPhone ou um aplicativo Android Material Design, você precisa saber quais são as cores do sistema. Vou mostrar-lhe também algumas das contas de geração do esquema de cores do Instagram onde essas pessoas tentam criar um monte de esquema de cores legal para que você possa pegar a partir daí. Vamos começar. Este é o primeiro site, eu acho que eu usei muitas vezes. Eu acho que esta deve ser uma das melhores ferramentas para encontrar o tema do seu negócio. Por exemplo, eu quero um sério, alguma coisa. Vamos ver quais são as cores que existem, essas cores são principalmente marrom laranja, você pode ver azuis, então é assim que eu vou começar com minha equipe de meus esquemas de cores. Em segundo lugar, vou mostrar quais são as cores padrão do Windows, iOS e Android. Este é um artigo de icons8.com, e você pode ver que eles mostraram todos os diferentes puxadores. Esta é a paleta de design do Windows 10. Você pode obtê-lo a partir daqui, o guia oficial de estilo. Em seguida, temos os valores padrão do sistema operacional iOS 10 ou iPhone. Você pode ver aqui que temos vermelho. Estes são valores diferentes para as cores que foi usado, que foi usado em iPhones ou sistema operacional iOS. Então temos este design Android Material, você pode ver que eles têm um monte de paletes de cores escaladas. Temos diferentes escalas de cores. 50-900. [inaudível] da mesma cor e eles têm muitas cores que você pode escolher de lá. Este é um ótimo artigo que vou compartilhar com vocês todos os links, então você não precisa se preocupar com isso. Aqui temos novamente, estas são as cores das diretrizes de interface humana de Apple.com. Então agora vou mostrar-vos alguns dos sites inspiradores. Aqui eu tenho isso de como dois ou três anos atrás, Eu salvei, thedaycolor.com. Você pode ver que há toneladas de esquemas de cores ótimos, muito modernos e muito únicos. Você pode ver que temos aqui e aqui temos muito escuro roxo azulado e laranja nele. Não tenho certeza se você pode ver. Este é outro, você pode usá-lo em qualquer design de interface, azul, vermelho, verde e amarelo. Eles têm todas as cores, cores de status, tudo. Pode começar com algo assim. Aqui temos alguns seguidores do Instagram e Instagram você pode dizer, eu não tenho certeza do que é contas. Estou caindo desta cor incrível. E esse cara ou garota, ou quem quer que ele seja ou ela, a parte. Um monte de grande, Você pode ver esquemas de cores por aqui. Eu acho que eles têm toneladas de esquemas de cores e você pode, se você quiser começar ou aqui, por exemplo, este roxo e verde parece ótimo. Também tenho aqui cor púrpura e ciana, esquema de cores muito agradável. Há toneladas de grandes esquemas de cores aqui. Temos novamente, laranja e azul, muito popular, adorei. Então o outro é Colors Cafe, colors.cafe, este é outro e também tem muitos esquemas de cores, você pode ver. Também mostra como na verdade ele ou ela está adicionando mais cores a ele. Eu realmente gosto de como ele mostra em diferentes origens, escuro e claro. Aqui temos luz e escuridão. Isto é o Colors. Café. Você pode começar com qualquer esquema de cores como este este este parece ótimo. Este é um ótimo esquema de cores, laranja e azul. Você pode ver o segredo por trás disso é, você pode ver se você vê as cinco cores inteiras, que a luminância é, não é muito diferente uma da outra. Todas as cores são, têm a mesma emissão de luz, então eles são como cores médias maçantes, cores muito decentes. Você pode chamá-los de cores decentes. Eles não são muito afiados, eles não são muito divertidos ou eles não são muito, você pode dizer, eu estou lhe dando uma vibração. Se você olhar para aqui, deixe-me mostrar o que estou projetando. Você pode ver essas duas cores Eles são muito afiados, eles têm um monte de contraste, isso é realmente muito escuro, azul púrpura. Deixa-me mostrar-te. Na verdade, este é o meu esquema de cores que estou construindo agora. Outro esquema de cores, esta experimentação no Adobe Illustrator, você pode fazê-lo em qualquer lugar. Você pode ver aqui que eu tenho, esta é a minha cor primária real e esta aqui. Eu estou usando este escuro. Estou estendendo com você pode ver algumas cores pálidas, alguns tons claros de amarelo, alguns azuis. Isto é, eu acho que minha outra cor que eu estou tentando adicionar ao meu esquema de cores, mas agora, eu vou apenas para ir com esses dois. Este é azul púrpura escuro e cor amarela ou dourada laranjada. É assim que estou trabalhando. Eu usei diferentes ferramentas on-line para gerar isso então você não pode dizer que eu, você só usa, eu uso escolher as duas primeiras cores eu mesmo e, em seguida, eu estendi usando algumas ferramentas on-line como você estava vendo cores aqui, eu obtê-lo de coolers.co Também algumas cores aqui eles também são de coolers.co. Essas sacarose, acho que peguei de outro lugar. De qualquer forma, é assim que eu realmente construo meu esquema de cores. Estas são todas as inspirações que você também pode procurar ao seu redor na natureza, nos diferentes anúncios, nos outdoors, tudo. Espero que tenham gostado desta lição. Se você tiver alguma dúvida, vamos discutir e passar para a próxima lição. 38. Ferramenta online para gradientes de cores: Desde os últimos anos, gradientes tem sido usado muito em seu web design, projetos de aplicativos móveis de diferentes designers, designers interface do usuário e web designers, eles estavam em muita tendência e ainda são, então eu estou vai compartilhar com você cinco ou seis recursos diferentes e sites que você pode usar para obter um gradientes lineares e outros gradientes que você pode usá-los em seu design. O primeiro que eu vou mostrar é web gradients.com, ea coisa legal sobre isso é que você pode baixar o arquivo de esboço e arquivo PST. Há eu acho que 180 gradientes diferentes e você pode usá-los em botões ou qualquer coisa que você quiser. Eu realmente amo isso porque você também pode copiar o CSS. Se você é um desenvolvedor da Web, você pode copiar CSS. Você pode baixar esboço ou PST, você também pode abrir este arquivo de esboço no Adobe XD se você quiser. Este é, eu acho, o paraíso para gradientes de web. Se você clicar aqui no esboço e você precisa baixá-lo, ele vai mostrar-lhe esta tela, WebGradients esboço, gumroad.com, e a maioria dos meus alunos, Eu não tenho certeza por que eles têm problemas para baixá-lo. Diz $0. Se você quiser doá-lo, você pode doá-lo. Caso contrário, basta pressionar zero aqui e clicar em, I Want This, e você pode baixá-lo. Da mesma forma, temos outro site, grabient.com e você também pode baixar esboço, você pode ver no topo aqui há, eu acho que estes são como 20 ou 30 gradientes diferentes. Então temos este gradients.cssgears.com. Aqui temos novamente gradientes diferentes. Estes não são muito grandes, mas o legal sobre isso é que se você clicar em qualquer um disso, você pode clicar neste HTML5, Adobe XD ou ícone de esboço para baixar o arquivo instantaneamente. Eu tentei baixar este aqui. Então, se você clicar aqui, ele vai baixar o arquivo XD para este gradiente. Mais uma ferramenta que eu usei no passado é misturar duas cores graciosamente. Então o que eu normalmente faço é selecionar uma cor daqui, por exemplo, esta e esta aqui. Se eu clicar mistura, você pode ver como ele é misturado bem. Da mesma forma, se você pode alterar algumas configurações aqui, você também pode copiar o código, o design ou o código do site. Na verdade, é código CSS para gradientes de fundo. Este é outro site, colinkeany.com ferramenta de mistura. Aqui está outro, uigradients.com. Eu não gosto muito, mas eu acho que é ótimo que você pode baixar e obter o arquivo JPEG e também o CSS a partir daqui. Se você é um desenvolvedor web, você pode fazer isso. Aqui temos gradientes diferentes e se você passar por aqui, você pode mostrar mais alguns. Por exemplo, quero algo aqui. Então não é muito útil, mas eu acho que você pode obter alguma coisa daqui, alguma inspiração. Então temos gradients.io. Há novamente gradientes de cores diferentes e eles são apenas gradientes, você não pode baixá-los ou qualquer coisa. vez, temos mais uma ferramenta que é colorspark e vai gerar cores diferentes dependendo de apenas variando coisas diferentes como essa. Você também pode copiar seu CSS. Também há uma ferramenta de cores para este, então, se você quiser, você pode mudar para a ferramenta de cores e ele vai gerar alguns. Esta cor parece legal, então se eu precisar de algumas cores rápidas, eu posso fazer isso. Da mesma forma, ele também tem um plugin de esboço. Você pode ver aqui cores faíscas esboço plugin. Você pode baixá-lo e você pode obter cores em com Control Shift e C ou Control Shift C para colocá-los em seus designs instantaneamente, algo assim. Estas são todas as ferramentas diferentes que eu queria te mostrar. Eu realmente amo este, gradientes de web. Não confira este, baixe-o, e tente construir seus ativos de cores e usar cores a partir daí. Espero que tenham gostado deste vídeo. Comece uma discussão ou me dê alguns comentários sobre ele se você tiver alguma dúvida me pergunte. Vejo você em breve em outro vídeo. 39. Truques para criar gradientes NOVA Aula: Neste vídeo, vou compartilhar com vocês alguns dos truques para criar gradientes de aparência legal e como você pode usá-los em seu design de interface de usuário. Agora, à direita você pode ver aqui, eu não vou criar nada aqui. Este será outro tutorial onde eu vou mostrar-lhe como criar isso em figma. Mas agora estamos mais interessados nisso. Existem muitas técnicas diferentes. Como podem ver, escrevi aqui escuro e claro. Agora a primeira técnica que uso é, deixe-me abrir tudo. A primeira técnica que eu uso é que, eu vou entrar para este gradiente linear. Você pode ver aqui, primeira coisa é ângulo, então é nesta direção. Angle realmente importa. Este gradiente, se você aplicar neste gráfico circular, pode não funcionar porque o ângulo é diferente. primeiro truque é que, você tem que selecionar uma cor que vai ser a mesma tonalidade 205. Será uma versão mais leve. Então temos outro que será um pouco mais escuro. Agora o que eu tento fazer é, eu tento mudar um pouco de matiz, você pode ver aqui, de 205 eu saltei para 216. Este é outro truque que te ensinei no meu curso de esquema de cores. Agora, você pode ver que você pode mudar o ângulo aqui, se você quiser apenas arrastar assim e onde quer que você acha que é confortável, você pode deixá-lo cair assim. Eu vou manter a luz aqui nesta direção e escuro aqui. O primeiro truque é escuro e claro. Temos sombra muito escura de um lado e cor muito clara do outro lado e eles são quase a mesma tonalidade. Eles são da mesma cor. Agora, se você for para este, então este é realmente chamado de cores análogas. Analogues cor significa que, vamos usar cores que estão muito próximas umas das outras na roda de cores. Agora deixa-me mostrar-te a roda de cores. Aqui temos a roda de cores. Se formos para análogo, você pode ver que estas são as cores análogas. Sempre que você mover um deles, eles vão se mover juntos. Temos verde, ciano, azul, então temos verde e azul, laranja e verde, depois âmbar amarelado com laranja, depois rosa e roxo, vermelho e rosa. Estas são todas cores análogas. Eles estão muito próximos um do outro na roda de cores. Este é o segundo truque. O que eu preciso é, eu uso esta cor azul e cor verde. Você pode ver este esquema de cores análogos. Temos azul e verde. De um lado eu uso essa cor azul. Segundo, do outro lado eu usei cor verde. Isso é chamado de segundo truque para criar cores análogas. Aqui temos outro gradiente, e é feito usando cores análogas. O próximo é usar cores complementares. O azul é oposto a esta cor amarelada ou púrpura. Eu usei cores complementares na roda de cores. Deixe-me mostrar-lhe o que são realmente cores complementares. Deixe-me ver se tenho a roda de cores. Aqui temos a cortesia. Se eu tentar selecionar uma cor aqui, vamos selecionar esta. Se eu for complementar, vai ficar laranja. Se eu tentar selecionar esta cor, mover esta cor para aqui, você pode ver que está se movendo dentro desta seção amarela ou laranja aqui. Eles são totalmente opostos uns aos outros na roda de cores. Este é outro truque. Se você estiver criando um gradiente, poderá usar cores complementares para. A próxima é, estou usando três cores. Estas são novamente cores complementares, mas na verdade eu sou inspirado por uma cena, por exemplo, pôr do sol com um monte de nuvens escuras. Você pode pegar essas cores de uma imagem também, então este é um truque muito simples. Muitos designers, eles não sabem disso, é por isso que eu salvei com o nome de cores de nuvem do pôr do sol. Se eu for aqui, você pode ver que tem três cores aqui. Esta é a laranja ou o sol atrás das nuvens. Esta é a nuvem escura aqui, e esta é a outra cor de nuvem que é um pouco azul mais claro. Ou você, como você pode ver, diz que é o raio dentro da nuvem. Isso é com você. Este é realmente aquele gradiente aqui, um, dois, três. Você pode mover as paradas onde quiser. Pode mover isto para cá, se quiser. Mova isto aqui, seja qual for a cor que quiser mais. Eu gosto assim, então este é outro truque. Você pode criar gradientes com base em esquemas de cores de imagens diferentes, de cenas diferentes, cenas de natureza. Eles são ótimos para criar essas cores e gradientes. Agora o último truque é que, vamos usar a mesma cor de cor monocromática. Deixa-me mostrar-te. Temos esta laranja aqui, que tem 18 por aqui. Então esta é a tonalidade 43. Mas é, na verdade, se nos mudarmos para cá, podem ver que tentei mover a cor nesta área para aqui, que é um pouco branco acinzentado. O que eu fiz foi, deixe-me mostrar-lhe. Vamos movê-lo para cá. Vamos manter 18. Estou usando a mesma cor em ambas as paradas. Estes são chamados basicamente pára. Uma parada de 100 por cento, 0 por cento pára. Daqui, 0 a 100 por cento. Posso movê-lo assim. Se eu quiser mover este aqui, eu posso usar isso. Este é outro truque. Você pode usar uma única cor com duas paradas. Um será um pouco no lado cinza, talvez como este branco acinzentado. O outro está aqui. Da mesma forma, você pode usá-lo assim, e o outro vai estar nesta seção mais escura aqui. Isso vai ser cinza mais cor ou branco mais cor, ou isso é realmente esquema de cores monocromático. Uma única cor. Aqui, nós realmente usamos a cor única, mas nós mudamos a tonalidade um pouco. Deixa-me mostrar-te, se não te lembras. Este é 205, mas o mais escuro tinha 216. Mas aqui estamos usando a mesma tonalidade para as duas paradas. Este mais leve tem 18 e a prática de saturação é diferente. Vamos movê-lo para cá assim. Você pode ver que isso vai terminar esta lição, se eu quiser mostrar-lhe como você pode usá-los na interface do usuário. Estes são dois exemplos. Você pode ver que isso é claro para escuro com alguma variação como esta. Então temos este que tem o pôr do sol ou esquema de cores inspirado na natureza, onde temos duas cores opostas. Na verdade, três cores estão sendo usadas aqui, roxo, azul e laranja. É assim que você realmente aplica seus gradientes no esquema de cores e em suas UIs, em seus sites. Alguns dos gradientes, eles vão funcionar muito bem em fundos. Alguns deles vão trabalhar [inaudível], porque como este, este é muito escuro e claro. Isto não vai funcionar em todo o fundo, porque temos de colocar alguns textos e outras coisas em segundo plano. Tenha em mente que sempre que você usar algo assim, você tem que usar um fundo mais leve. Gradientes, por exemplo, como este, isso pode ser usado como um plano de fundo. Mas estes escuros e muito claros têm muito contraste. Onde você tem muito contraste no gradiente, paradas, você não pode usá-los como plano de fundo. Vamos seguir em frente aqui e deixe-me compartilhar com vocês alguns dos gradientes on-line. Você pode ver aqui é um fabricante de gradiente de coolors.co. Você pode escolher cores, qualquer cor que você deseja usar. Você também pode copiar o código CSS a partir daqui. Da mesma forma, lá temos outro, gradient.com. Este é outro site, tem muitos gradientes. Da mesma forma, temos cssgradient.io. Temos muitos sites diferentes por aqui, UiGradients, Grabient, Gradient Hunt, Mesh Gradients e WebGradients. Está levando algum tempo para carregar de qualquer maneira. Aqui estão mais alguns geradores, geradores de cores CSS, geradores de gradiente, onde você pode pegar a cor e gerar o gradiente. Este é o gradiente. Você pode ver que isso está muito bonito em um fundo. Se eu tentar mudar a cor aqui para este, isso está olhando realmente grande, é maçante, mas está olhando realmente grande. É assim que você cria gradientes diferentes e essas são técnicas diferentes que você pode usar. Espero que tenham gostado desta lição. Se tiver alguma pergunta, pode sempre me perguntar. Vamos passar para a próxima lição. 40. Aula de cores no esquema de cores: Neste vídeo, vou falar sobre um tópico muito importante relacionado com esquemas de cores que é a luminância de cores. Agora, luminância de cor é na verdade parte de duas coisas. Um fator é matiz, qual matiz você selecionou. Alguns dos tons como você pode ver aqui amarelo, o é verde, este azul claro, este azul yanish, as cores aqui, estes naturalmente têm mais luminância, eles têm mais vibração neles. Sempre que você estiver selecionando cores, há dois fatores que você deve considerar. Um é o que é a saturação dessa cor porque a saturação realmente vai amplificar a luminância. Luminância é apenas você pode ver que algumas cores são muito nítidas, muito vibrantes, você pode dizer que eles estão emitindo mais luz deles em vez de outros. Isto é o que realmente é luminância e luminância tem duas coisas a considerar, uma é saturação, alta saturação significa alta luminância. Além disso, se você selecionou alguma tonalidade por aqui nesta área amarela ou verde ou nesta seção aqui, você pode ver à esquerda que temos luminância 94, 83, 80 por cento, 82 por cento, 87 por cento. Esta luminância ocorre naturalmente de forma semelhante, esta cor aqui, tem 70 por cento, esta cor roxa rosada é muito vibrante. Vou mostrar-lhe uma técnica muito simples que você tem que ajustar algumas das cores. Como se o seu esquema de cores tem este amarelo ou verde ou esta cor ou esta cor, você tem que ajustar sua saturação e brilho para torná-los igualmente bem ou trabalhar com suas outras cores. Deixe-me mostrar-lhe um exemplo. Agora, você pode ver à esquerda eu selecionei topo, este azul, verde, amarelo, este roxo e este vermelho. Agora você pode ver que este amarelo é muito vibrante, este verde também é da mesma seção, aqui você pode ver 83 por cento, estes são os fatores de luminância. Aqui novamente, vermelho e depois temos este roxo. Isso novamente tem mais vibração. Agora, você pode ver que todas essas cores que eu selecionei têm 100% de saturação e 100% de brilho. Você pode ver naturalmente verde e amarelo e este rosa, eles estão parecendo mais vibrantes para mim. Agora, muitos designers que eu vi que eles erros quando eles selecionam suas cores. Agora, o que você tem que fazer sempre que você está usando essas cores simples, você está usando um monte de saturação. Você tem que equilibrar, você tem que reduzir o fator de luminância. Você tem que trabalhar com que você pode ver na parte inferior Eu tenho ajustado essas cores. Por exemplo, este, se eu mostrar, você pode ver isso, brilho é 88%, saturação é 87. Se eu quiser suavizar, posso reduzir a saturação aqui e aumentar o brilho. Aqui eu gosto mais por aqui, 91 por cento. Agora você pode ver esta cor se ampliarmos é muito melhor do que olhar para esta. Você não pode continuar olhando para esta cor por mais tempo de duração. Da mesma forma, para este verde você tem que ajustá-lo ao seu esquema de cores, você tem que tonificá-lo. Você tem que diminuir sua saturação, seu brilho, sua vibração, sua luminância. Agora você pode ver todas essas cores aqui, este amarelo, este azul, este verde, eles estão quase mais próximos um do outro no fator de luminância. Você pode ver que eles parecem pertencer um ao outro em vez de você pode ver aqui, alguns são um pouco menos luminosos ou menos vibrantes. Alguns são muito vibrantes, eles não vão funcionar bem juntos. Também para os seres humanos, eles não podem manter seus olhos nessas cores que têm uma saturação muito alta ou têm uma luminância muito alta. Você tem que ajustar manualmente suas cores, como você pode ver aqui, este azul, eu posso ir para aqui. Eu tenho que abaixar um pouco. Eu vou me mover por aqui, eu vou me afastar desta área porque isso é muito vibrante, isso é alta saturação. Isso também é alta saturação e escuridão, então eu vou manter o meu, você pode ver a cor aqui, seleção por aqui. Da mesma forma, este vermelho você pode ver Eu tenho tonificar para baixo e de 100 por cento eu reduzi sua saturação para 75 por cento e brilho é 85 por cento. Agora você pode ver que é mais fácil de olhar mesmo se você quiser movê-lo para algum lugar aqui assim, então isso parece melhor. Da mesma forma, esta cor, esta ainda é muito afiada e vibrante para mim, então eu vou tonificar um pouco para baixo aqui. O cinza, vou tentar fazer um pouco de cinza aqui, um pouco escuro. Agora eles se ajustaram ao meu olho. Agora, sempre que você estiver criando um esquema de cores, não tente usar cores como essas. Certifique-se de que sua luminância, sua saturação é tom baixo, é mais fácil para os olhos humanos olharem. Eu vi alguns dos meus alunos que eles tentam usar esse tipo de cores, este é o grande erro um monte de designer iniciante ou designers nervosos que eles fazem. Então tenha em mente que você tem que ajustar a saturação e também se você está nesses tons como este amarelo e este verde ou este ou este, eles são naturalmente mais vibrantes. Eles são naturalmente mais luminosos. Eles vão emitir mais luz. Amarelo é muito mais próximo do branco, então ele tem o fator mais luminoso como você pode ver, 94 por cento, então é apenas seis por cento abaixo da cor branca. Espero que você tenha o conceito de luminância agora e como usar isso em seus esquemas de cores. Agora, se você tem alguma pergunta ou não entendeu nada, você sempre pode me perguntar. Até lá, nos encontraremos em outra lição. Tome cuidado e adeus. 41. Qual é o próximo?: Agora, muito obrigado por estar comigo junto com toda essa duração de tempo e aprender comigo. Espero que tenha aprendido algo útil. Se você é incapaz de entender algo ou tem algumas perguntas, você sempre pode entrar em contato comigo através desta plataforma. Você sempre pode entrar em contato comigo através do meu site learnuxid.com. Você pode entrar em contato comigo, você pode me enviar um e-mail. Você pode se juntar a mim nas redes sociais e me fazer perguntas ou qualquer coisa, quaisquer perguntas que você tenha sobre design de experiência de usuário, design de interface de usuário ou freelancing em geral. Até lá, vamos vê-lo dentro de outro curso. Não confira minhas outras aulas e cursos sobre design, sobre tipografia, layout design, esquemas de cores e todas essas coisas diferentes. Tente deixar uma crítica honesta, escreva alguns comentários sobre o que você aprendeu dentro deste curso. Até lá te vejo em breve dentro de outra aula ou curso. Até lá, cuide-se e tchau.