Cores em UX/UI Design (+ tabela de cores no Figma)

1. Promoção: Nesta classe, vamos aprender tudo sobre cor no design UX UI. Vamos começar com todos os conceitos básicos sobre como escolher, misturar e combinar cores, e depois mergulhar um pouco mais e configurar nossas próprias folhas de estilo. Durante o curso da aula, abordaremos os seguintes assuntos. Técnicas comuns, dicas e truques sobre como combinar cores. Conversão de cores entre impressão e design de tela. Valores de cores como hexadecimal, RGB, Pantone e CMYK. O que são e quando os usamos? Covariância, o que são e como configurá-los? Nomeando cores FAZER caminho certo. Vamos para a regra dos 60, 30, 10, uma ótima maneira de distribuir seus colegas para uma hierarquia sólida. Vamos investigar a acessibilidade. E, no final, vamos certificar-nos de documentar esses colares para o desenvolvimento. E eu vou mostrar a vocês uma ótima maneira de fazer isso. No final deste curso, você será capaz de usar cores no design UX UI com confiança. Este é um curso por muito aprendizagem dose IM. 2. Introdução: Vamos falar sobre cor no design da interface do usuário. E juntos vamos dar uma olhada nos seguintes tópicos. Vamos começar com o básico e aprender sobre o que é hexadecimal para ser Pantone e CMYK, e quais usamos para nosso design de interface do usuário? Em seguida, vamos falar sobre converter essas cores de impressão para tela. E ao contrário. Vamos falar sobre como escolher cores e como misturá-las e combiná-las como um profissional, vamos aprender quais variantes sobre como criá-las, como nomear cores da maneira certa. Vamos falar sobre um sistema de cores e como documentar suas cores para programação. E também vamos falar sobre a chamada regra 60, 30, 10, uma maneira muito útil de distribuir suas cores da maneira certa. Então vamos começar com o nosso primeiro tópico. 3. Material: Você pode querer trabalhar ao meu lado, então eu preparei alguns arquivos para você baixar no curso que você está fazendo simplesmente navegue para projetos e recursos. E lá você encontrará todas as informações e o link que podemos baixar o material ou você pode navegar para o meu perfil. Bem, você também encontrará um link direto para a página de download. E nesta página você vai encontrar uma variedade de downloads. Você pode simplesmente escolher a causa que você está tomando no momento e, em seguida, basta clicar em Download. E ele baixará automaticamente o arquivo para você. Para abrir um arquivo Figma para baixá-lo, É importante que você tenha uma conta Figma. Dentro da sua conta, navegue para novo, impressionar Importar. Em seguida, você pode escolher um arquivo que você gostaria de abrir. Pode levar um momento como eles são bastante grandes, mas uma vez que você os importou, eles estarão em sua conta e você não precisa repetir esse processo. Estou trabalhando com fontes do Google para a maioria dos meus designs. Então, se você está trabalhando com o aplicativo Figma, então você não precisa fazer nada. Todas as fontes do Google são pré-carregadas automaticamente. Se você quiser trabalhar com Figma no navegador, então você só precisa pesquisar a fonte que ele está mostrando como faltando. Por exemplo, Poppins, eu uso muito. E então você pode baixar diretamente essa fonte instalada no seu computador e você está pronto para ir. Ou os recursos são gratuitos para alunos existentes e você não precisa inserir nenhuma informação adicional. Você pode, é claro, também baixar qualquer um dos outros arquivos no caso de você estar interessado. Então, sob geral são sempre adicionar qualquer coisa que eu acho que pode ser útil. Portanto, há, por exemplo, um modelo Bootstrap e, em seguida, uma lista com links para livros de inspiração e blocos que são realmente ótimos para o design UX UI. Esta lista de downloads está crescendo constantemente, então certifique-se de voltar e dar uma olhada de vez em quando. 4. Pantone CMYK HEX e RGB ?!: Assim, as cores não podem ser sentadas de maneiras diferentes. Os mais comuns que você provavelmente encontrará, nosso Pantone, CMYK, hex e RGB. Os dois primeiros, Pantone e CMYK são tipicamente usados para impressão. A diferença entre os dois é que Pantone é aquela mistura específica de tinta, então é 100% da mesma cor em qualquer lugar do mundo. Agora você não pode imprimir uma cor Pantone em sua impressora doméstica. É algo que na loja de impressão eles pegariam aquela tinta específica e depois adicionariam à sua impressão digital. No entanto, você pode ir a uma loja de impressão e dar uma olhada no chamado livro Pantone, ou você pode até comprar um você mesmo. Dentro desse livro, você vê todas as cores diferentes, relógios e códigos correspondentes. A UE no final do número corresponde ao papel não revestido. E você pode ver um assento para papel revestido ou algumas versões mais. Então, mesmo que você possa receber uma cor Pantone porque é a maneira mais confiável de fazer referência a uma impressão de cor. Você provavelmente só vai usá-lo para um logotipo ou para empresas maiores para suas cores de marca porque é muito caro para imprimir com Pantone. Então, na maioria das vezes você usaria CMYK e CMYK e Pantone correspondem. Então CMYK é ciano, magenta, amarelo, e K é de preto. Então, com essas quatro cores, impressas misturam-se para colorir que você está procurando. Agora, é importante entender os valores de impressão e o que eles são, especialmente Pantone se você precisa olhar para a referência, mas você não será capaz de usar esses valores on-line. O que usamos para o nosso design de interface do usuário é para os chamados valores hexadecimais e RGB. RGB significa vermelho, verde e azul. Então nossa tela mistura essas três cores para criar uma cor assim como na impressão, nós misturamos CMYK. Portanto, é um sistema muito diferente para criar uma cor, é por isso que a impressão e a tela nunca terão a mesma aparência. Hex também é uma forma de RGB. É apenas uma maneira muito mais curta de ser anotado. Hex significa hexadecimal e é um código de seis dígitos com um hash na frente dele. Por isso, é muito curto e fácil de manusear. Você pode exibir a mesma cor com um RGB ou um valor RGBA para um presente representa a opacidade. Então você pode alterar isso. Por exemplo, se você colocar nem 0.5 vista em 50 por cento de opacidade, É exatamente o mesmo. Então você pode usar hexadecimal ou RGB. No entanto, eu recomendo usar hexadecimal porque ele vem em um formato de string que é mais curto e mais fácil de manusear, copiar, colar e compartilhar. Então, para você, eu projetei apenas dar o valor hexadecimal para todas as suas cores será mais do que suficiente. Agora, há uma coisa que você realmente precisa estar ciente quando se trata de cor e referência de cor no design da interface do usuário. Agora aprendemos que no design de impressão temos as chamadas cores Pantone. Essa é a nossa referência universal de como essa cor deve parecer. Agora isso não acontece com colares na tela. Agora, mesmo que tenhamos nossos valores hexadecimais, eles ficarão bem diferentes em telas diferentes. Não será uma cor completamente diferente se você estiver escolhendo um vermelho, não vai virar um verde, mas será um pouco diferente. O que você pode fazer é abrir esta apresentação em, por exemplo, sua área de trabalho e seu telefone. E você verá que provavelmente há uma ligeira diferença nas cores. Agora é assim que as coisas funcionam no design de tela. E desde que suas cores tenham contraste suficiente e um harmonioso entre si, então isso também não é problema. É importante que você esteja ciente disso porque às vezes seu cliente não está ciente disso. E se eles, por exemplo, lhe deram uma referência Pantone, eles esperam que seu design pareça exatamente o mesmo, que simplesmente não é possível. 5. Como converter cores do design em tela em e de as costas: Então, em alguns casos, você pode ser solicitado a converter de impressão para tela você mesmo, ou apenas para encontrar o valor correspondente. Então vamos dar uma olhada em como podemos fazer isso. Agora, se você está dando um valor RGB e você quer hexadecimal ou o contrário. Isso é super fácil. Em qualquer software de design, você pode simplesmente abrir a cor e , em seguida, você geralmente vai obter uma roda de cores ou algo assim. E isso é, por exemplo, em Figma, você só tem um pequeno menu suspenso. E então você pode escolher sua cor RGB, e então você verá a diferença aqui. Se você tem um RGBA, basta colocar o último dígito. Digamos que não é 0,5 aqui, e isso lhe dará a opacidade. Agora, se você recebeu uma cor de impressão e pediu para convertê-la em uma web colorida, isso é um pouco mais complicado. Há conversores on-line, mas a maioria deles não são muito bons. O que eu gosto de usar é o conversor oficial do site Pantone. Agora você pode usar isso a qualquer momento que você converter Pantone CMYK ou qualquer coisa, de impressão para design de tela. E o contrário, o que você faz é ir até aqui para encontrar uma cor Pantone e uma ferramenta de busca de disco aberto. Então, se eu tenho dado um valor Pantone, eu vou para Pantone, pantone, e então eu colo meu valor aqui. E eu escolho. E a NIC aqui me dá a amostra. E se você selecionar uma amostra, verá no valor Amostra para RGB esse hexadecimal e o valor CMYK. Se você tem essas amostras físicas aqui, na verdade há uma chamada ponte de cor. E você também pode ver um diretamente sobre as amostras. Agora isso também funcionaria ao contrário. Digamos que só temos nossos valores hexadecimais e queremos encontrar um valor de impressão correspondente porque somos muito bons e queremos ajudar os designers de impressão. Então, nesse caso, vamos para RGB CMYK no conversor hexadecimal. Clique aqui e, em seguida, você pode escolher aqui qual o valor que você deseja inserir. Tenho Hex, introduzo o meu valor, procuro. E novamente, você entra nas amostras e vai fazer algumas sugestões e a melhor correspondência e escolher novamente. E você pode ver que eu encontrei minha amostra correspondente aqui. Agora, esta é realmente uma ótima maneira de converter cores, e eu recomendo usar esses conversores Pantene. No entanto, nunca será 100% o mesmo na impressão e na tela porque é apenas algumas faixas de cores muito diferentes. Mas é provavelmente o melhor resultado que você tem. E sempre lembrei que esses conversores estão lá para ajudá-lo e não para criar um obstáculo. Então, se você acha que o valor hexadecimal que você dá a ele precisa ser ajustado um pouco. Isso é muito bom. 6. Escolha mistura e combinar cores como um profissional: Vamos falar sobre como escolher cores e misturar e combiná-las como um profissional. Você pode ter um toque natural para escolher e misturar cores, e isso é absolutamente bom para apenas então ir em frente e usá-lo. Se você estiver no entanto, se sentindo um pouco inseguro sobre a configuração de suas próprias cores de marca. Vou mostrar-lhe algumas técnicas que você pode usar. Na tela, você vê uma roda de cores RGB, que é o que usamos para design de tela. Há 12 cores principais nesta roda. Eles podem ser divididos em cores frias e quentes. Em seu software de design, isso será parecido com isso e você pode escolher cores a partir daqui. Vou usar uma versão simplificada para os meus exemplos. Desta forma, podemos ver os diferentes segmentos de cores um pouco melhor. Um ótimo ponto de partida para escolher cores para sua marca também é feito paleta de cores do Google. No site Material Design, você pode navegar para cores e, em seguida, chamar um sistema. É um ótimo sistema em geral para explorar. E aqui você encontra as paletas de cores e ele pode ver cores diferentes e torna apenas um pouco mais fácil começar e como escolher suas primeiras cores. Agora eu vou voltar para a roda de cores e mostrar-lhe como combinar essas cores. Portanto, a nossa primeira abordagem é a abordagem monocromática. Isso significa que você escolhe sua cor. Por exemplo, há sombra vermelha, laranja, e depois caminhe em direção ao centro da roda de cores. Então você tem um sombreamento muito bom. Você pode usar praticamente qualquer cor, no entanto, amarelo e o verde claro é um pouco mais complicado. Screen geralmente está funcionando maravilhosamente se você está apenas começando e quer algo muito seguro para trabalhar com. Agora você pode ouvir muito sobre a associação com a cor, como azul é calmante e vermelho é muito dinâmico. Mas para ser honesto, eu prefiro me concentrar na maneira que eu combiná-los porque é aqui que eu crio o tom. Como você viu em uma abordagem monocromática, tanto vermelho quanto azul tiveram um efeito calmante bastante suave. Vejamos a nossa segunda abordagem, que é a abordagem análoga, pela qual escolhemos cores que estão próximas umas das outras. Então eles não precisam estar exatamente na mesma pele dentro de um ângulo aproximado de 90 graus. Desta forma, você pode criar um pouco mais dinâmico, mas você ainda tem esse visual muito profissional e elegante. Se você está procurando algo ainda mais vibrante, então você deve usar a abordagem complementar. Então eu estou começando com o meu azul novamente, mas então eu adiciono a cor do lado oposto da roda. E eu posso afrouxar isso um pouco adicionando mais algumas formas. Agora você pode empurrar isso ainda mais. E em vez de descer a roda de cores, você pode usar a chamada abordagem complementar dividida, que basicamente mistura essa abordagem com a abordagem análoga. E você só escolhe uma cor ao lado dela. Se eu quiser algo muito animado, esta é a abordagem que eu uso porque eu estou misturando quente e frio e eu estou tendo uma dinâmica de cores ainda todos trabalhando lindamente juntos. Basta notar que ao usar uma abordagem dividida, eu recomendarei que você fique dentro da mesma distância do centro para escolher suas cores. Caso contrário, pode ficar um pouco confuso novamente. Vamos resumir. Tivemos um olhar para a abordagem monocromática, que é em que descemos para roda de cores e temos um olhar muito suave e sofisticado. Você poderia usar a abordagem análoga, que é onde nós escolhemos cores ao lado do outro. Aqui Meu, nós adicionamos um pouco mais de vibração, mas ainda temos essa sensação muito calma e suave sobre isso. Se você está procurando um pouco mais dinâmico em seu design, então eu recomendo usar a abordagem complementar complementar ou dividida, onde você mistura cores gratuitas. Há mais maneiras que você pode misturar cores, mas essas são realmente as três abordagens que você pode começar com. E você terá algo com o qual você pode trabalhar de forma agradável e fácil. 7. Inspiração com cores: Então, configurar um sistema de cores e todas as coisas técnicas em torno dele é realmente ótimo. Mas às vezes você só quer um pouco de inspiração para acertar esse humor. Às vezes, também é o caso de que não há cores de marca estabelecidas, mas já existe um produto, imagens incríveis ou pacotes de fotos em torno de um produto. Então vamos ver o que dar esta imagem, o que podemos fazer é então apenas adicionar isso ao nosso software de design e apenas escolher as cores da imagem para criar nosso esquema de cores. Podemos então adaptar mais tarde esse esquema de cores e usar um seletor de variantes ou adaptado um pouco em nosso sistema para encontrar algumas cores complementares. O que você também pode fazer se você quiser apenas algumas idéias gerais para humores, você pode ir para o Pinterest e apenas colocar na paleta de cores. E então você terá algumas ótimas idéias. Geralmente, há algumas coisas fantásticas que estão relacionadas com imagens da natureza e, em seguida, basta escolher cores de lá. Então isso é realmente grandes movimentos que você também pode usar em um quadro de humor. Por exemplo, se você gosta de um deles, você pode simplesmente clicar em Adicionar e, em seguida, você vai obter mais imagens semelhantes como ele. Outro ótimo lugar é paletas de cores. Isso também lhe dá uma grande variedade de paletas e inspiração diferentes. Outro que eu gosto de usar é o espaço de cores. Com o espaço de cores, você pode adicionar sua cor aqui e, em seguida, você pode clicar em Gerar. E ele vai apenas geralmente é um muito bom, então relógios para ir juntos para você. E aqui em cima o que eu gosto especialmente é a ferramenta de gradiente. Então você pode escolher duas cores. Você também pode, obviamente, ajustá-los. E então você pode colocar gradiente, e então você pode ver o gradiente aqui. E você pode mudar as direções do gradiente. E, em seguida, aqui você vai chegar ao código CSS imediatamente e um gradiente que você pode apenas configurar em seu sistema de design com as cores que você recebe aqui. E um último que você pode querer tirar é cores mente dupla o na ortografia. E há também um apenas gera amostras de cores para você. Então aqui você pode ver isso em qualquer cor. Você pode realmente fazer bastante com ele. Então você pode, você pode ver toda a variação aqui. Você pode fazer upload de fotos. E você pode gostar de ter um que se ajusta ou apenas realmente, realmente ir e brincar com ele. Porque você pode realmente fazer muito nesta ferramenta. 8. Variantes de cores no design de UI: Vamos dar uma olhada nas variantes, o que elas são e como configurá-las. Então, uma variante é basicamente uma versão mais clara ou mais escura dessa cor. Então, uma coisa que pode vir à mente é usar a transparência. Dessa forma, você pode criar tons mais claros da cor. No entanto, este é apenas o caso em um fundo claro porque eles são transparentes através deles. Então isso é algo que você pode usar para uma sobreposição ou efeito diferente, mas não é realmente uma variante. Um final é uma versão completa de uma cor em um tom mais claro e mais escuro. Então vamos ver como podemos encontrar isso. Você pode criar suas próprias variantes alterando o valor de matiz. Mas acho muito mais conveniente usar um conversor online. Existem muitos conversores diferentes lá fora e você pode simplesmente adicionar a cor que você escolheu, e então ele irá criar um monte de variantes para você. Não há regra sobre quantas variantes você precisa para o seu design. E você sempre pode adicionar mais à medida que você se dá bem. O importante é ter uma cor base e, a partir dessa, você cria suas variantes. Então, para criar minha variância, eu gosto de usar design de material. Você vai para Material Design, cor e sistema de cores. E alguns rolam para baixo, você encontra os grânulos de cor aqui. Nas paletes de cores. Você pode jogar com a cor que você tem se você ainda está procurando cor, ou você pode simplesmente colar a que você já escolheu. E então a partir dessa seleção aqui, e você terá toda a variância. Então você também pode se adaptar à cor, por exemplo, você pode apenas mudá-lo aqui e então ele irá adaptar o valor para você ou você pode pegar aqui e ele sempre irá criar a variância ao redor. Deixe-me voltar para uma laranja que eu realmente gosto de usar. Então eu acho que deveria ser este aqui. Sim, exatamente. Eu gosto desta laranja e eu provavelmente vou usar este tom aqui. Então o que ele faz são duas coisas que você pode ver aqui. Primeiro, ele vai te dizer que cor você deve usar em cima. E, por outro lado, dá-te esses números aqui em baixo. Esses números não são o nome da cor. O nome da cor é uma vez que você passa o mouse sobre ela, o hexadecimal que você vê no topo. E este número aqui em baixo, há 900, 250 é basicamente o número para a variante. E isso é realmente grátis. Você não tem que usar este sistema. Você também pode nomear sua variância 10, 20, 30, 40. Não os nomeie 1, 2, 3, 4, 5 porque você pode querer ter uma variante no meio ou algo mais claro ou algo mais escuro. Portanto, certifique-se sempre de que você tem um sistema que permite que algo seja adicionado mais tarde. Eu, pessoalmente, gosto de usar esse sistema que o design de material está me dando. Então eu uso essa anotação. E o que eu gosto de fazer é a cor que eu estou usando principalmente como minha cor principal é a 500. E desta forma eu posso subir e descer sem qualquer problema. Eu também gosto de entrar em um passo 100, então eu gosto de usar 300 e depois 100 e depois para cima, eu estou usando setecentos e novecentos. E só se eu notar que isso não está realmente me dando o resultado, eu ainda posso colocar lá oitocentos e quatrocentos. Você também pode adicionar sua cor secundária e criar sua variante. Ou você pode escolher uma cor complementar, cor análoga e, ou cor triádica, o que é um pouco mais complicado. Então, a menos que você seja muito bom com cores, eu realmente não iria lá. Agora vamos apenas adicionar essa cor secundária. Copiei o azul, a cor complementar que quero usar. Hum, e então o que você pode fazer é ir ver na ferramenta de cores, o que é realmente ótimo. E assim que lhe dá uma visão geral do que suas cores realmente se parecem em um design que é super legal. E então a parte importante aqui é que você verifica sua acessibilidade. E você pode verificar qual texto e quais cores você pode usar juntos em cima de suas variantes e em cima de sua cor principal. E isso é muito, muito importante que você sempre verifique isso. Então, uma vez que eu estou feliz com minhas cores e variantes, eu apenas escolher hexadecimal em vez disso. Eles me deram na minha ferramenta Google Material Design e, em seguida, transferiram isso para a minha folha de design. Então, na minha folha de estilo, eu anoto para baixo como minha cor principal é o 500. E a partir daí eu estou tendo uma versão mais clara e escura. Então, como você pode ver, eu usei 200 passos e no caso de eu querer uma cor 400 no meio aqui, bem mais tarde, eu posso apenas adicionar este final. Meu sistema ainda vai funcionar bem e será toda lógica para o meu secundário. Agora, eu só escolhi o azul. Não sei se preciso de uma variante agora. Então eu vou anotar isso ainda com os 500 no final. Sei que esta é a minha base para o secundário. E no caso de eu querer adicionar algumas variantes, quantas eu quiser mais tarde, eu posso simplesmente fazer isso. 9. Como naming cores no caminho adequado: É muito importante ter um sistema adequado ao nomear cores no design da interface do usuário. Então, uma vez que você escolher sua cor, você iria documentá-la na folha de estilo e no seu sistema de design. Então o que você costuma ver é que você dá uma visualização de sua cor, você dá um nome e você adiciona o código hexadecimal. Agora é muito importante que você não nomeie sua cor após a própria cor, como vermelho e azul e assim por diante. Mas deve ser algo genérico. Não importa qual nome exatamente você usa. O importante é que ele é descritivo e consistente. Então, por que isso é importante? Bem, as cores podem mudar com o tempo. Então, se você nomear sua cor, por exemplo, creme de hortelã, e então, no último minuto, é alterado para roxo simplesmente não é muito conveniente. Também é uma boa prática nomear suas cores acordo com a função que elas mantêm em seu design. Então, por exemplo, você teria algo como cores de fundo ou neutros para algo que é como grau ou bege, que você usa em segundo plano para criar um pouco mais dinâmico, mas não é realmente parte da sua marca. Para as cores da sua marca. Eu gosto de usar primário e secundário, mas eles poderiam ser tão bem ser chamado de marca e cor de destaque, por exemplo. Desta forma, você está dizendo imediatamente à sua equipe de design e à sua equipe de desenvolvimento que função esse colar detém. E é muito improvável que alguém use a cor chamada neutra para chamar à ação. Eles saberão que a cor de destaque é responsável por esse papel. Isso também vai ajudá-lo a ser muito organizado com suas cores. Uma pequena dica quando você tem variações de sua cor, como eu faço aqui com o meu primário, não chamá-los 1, 2, 3, 4. Porque mais tarde você pode querer ter algo um pouco mais leve ou você pode precisar de algo um pouco mais escuro ou apenas aquele tom no meio. Então eu estou usando 500 como minha cor padrão e então eu estou indo para cima e para baixo em 200. No entanto, você não tem que fazer isso dessa maneira. Você também pode chamá-lo de 10, 20, 30 a única coisa é ter certeza de que há algum espaço entre essas cores. E abaixo e acima do colarinho que você está usando. 10. Com de feedback: As chamadas cores de feedback não fazem parte da sua marca. Eles estão lá para dar feedback e interagir com o usuário. Você envia que o feedback pode ser dividido em perigo ou erro, aviso, informação e sucesso. Você pode usá-los como cores completas, como a escrita abaixo do campo de entrada que acabamos de ver. Ou você pode ter algum tipo de banner que tem um plano de fundo percentual da cor e, em seguida, usa a cor no topo com as informações. Apenas certifique-se de que quando você fizer isso você tem contraste suficiente entre o fundo e as informações no topo para tornar isso legível para todos. Às vezes gosto de usar variantes da minha marca quando se trata de informações e mensagens de sucesso. Aquele que você não deve mudar e sempre deixar em vermelho brilhante é o aviso de erro. Você ainda pode ajustar o tom de vermelho, mas deve sempre ficar em vermelho porque é muito importante que sejamos consistentes com nosso aviso árabe. 11. Documentando cores: Vamos falar sobre a documentação de nossas cores para nosso design de interface do usuário. Então, em vez de dizer que estas são as cores da marca, pegue-as e vá em frente. Quero mostrar-vos uma abordagem sistemática. Então, que elementos temos? Vamos quebrar isso. Temos nossa cor de fundo, então temos uma cor primária. Estou usando um tom escuro aqui. Isso pode ser algo completamente diferente para você. E então temos nossa cor secundária. Eu estou chamando eles primários e secundários neste exemplo, você também pode chamá-los de algo completamente diferente. Apenas certifique-se de que é genérico e descritivo. A quantidade de cores da marca que você precisa também depende de você. Você pode apenas escapar com uma primária e algumas versões disso. Ou você pode precisar de mais cores. Eu recomendaria ficar entre 23 cores. Isso geralmente dá um bom resultado. E, em seguida, para cada uma dessas cores que eu tenho aqui, uma variante geralmente são provavelmente adicionar um pouco mais, como eu diria entre 25 variante é geralmente o que eu uso. Mais uma vez, realmente depende do seu design e com variância, a grande coisa é que você pode totalmente adaptar isso mais tarde também. Além dos meus neutros e cores da minha marca, estou tendo algo chamado cores de feedback também. Para este exemplo, configurei uma cólera de erro em vermelho e uma cor de sucesso em verde. Agora você pode ter também uma cor para aviso, que geralmente é uma laranja, e informação que é azul. Estou adaptando isso com as cores da minha marca. O importante é que eles são um aviso de erro que precisa estar lá e que precisa estar em vermelho. E então esta é a parte importante, e esta é a parte inteligente sobre a nossa folha de cores. Vamos adicionar outra linha de cores, que chamamos de nossas próprias cores. Agora esta única cor definiu tudo o que vai em cima da nossa cor. Então isso significa textos que vão em cima dele ou coisas como ícones. Dri, então esta única cor é realmente ótima para adicionar à sua folha de estilo é porque faz você verificar novamente seu design para acessibilidade. E para evitar o chamado alcance lamacento, vou mostrar a vocês um pouco mais sobre como eu verifico isso. Então, o que eu gosto de usar é o Material Design. Eu vou para Material Design, cor e, em seguida, sistema de cores, e para as paletas de cores. E então aqui, por exemplo, você vê o intervalo de cores. E mostra a cor que fica por cima para garantir que você tenha uma legibilidade e acessibilidade perfeitas. E então você pode ir ao longo dessas cores aqui. Qualquer um que veja aqui é o intervalo onde o intervalo lamacento é onde ele começa a mudar. Então eu vou tentar evitar isso por ter, por exemplo, ícones colocados em cima de algo assim. Porque aqui em baixo você pode ver que fica muito mais claro e tem um resultado claro. Eu também posso colocar minha laranja, por exemplo aqui, e então eu posso ver que eu deveria usar um tom escuro em cima disso. Esta ferramenta é super grau, a propósito, também para encontrar suas cores complementares e cores análogas e tudo a ver com combinação de cores. O que eu estou levando na ferramenta de material do Google, no entanto, é apenas que eu estou usando branco ou um cinza muito escuro, cor enegrecida em cima de algo. Se você quiser combinar cores diferentes, o que você deve fazer é ir para um verificador de contraste. Estou, por exemplo, usando objetivo web aqui. E você pode apenas colocar em sua cor e ele irá dizer-lhe se sua combinação de cores está acessível. Então, digamos que esta laranja em cima do branco, você pode ver que ela se sente em todos os lugares. E então você pode apenas como brincar com ele aqui e mudar suas cores e você vai ver onde ele começa a analisar. Então o que você pode fazer é adaptar sua cor às suas necessidades ou você pode colocar as cores que você está tendo aqui e então ver quais você pode combinar e quais não pode. Então, verificando isso, notei que aqui, por exemplo, eu definitivamente deveria usar uma cor mais escura. Outro aspecto que eu realmente gosto sobre esta configuração é que ele mantém meus colegas têm muito flexível para mudar. Deixem-me dar-vos um exemplo. Nesta configuração, a cor primária é definida como um cinza escuro. Então, se eu apenas entregar cores, provavelmente meu texto também será definido nesta cor. E você provavelmente vai usar isso em seu arquivo de design também. Agora, se eu quiser mudar essa cor primária para, digamos um azul, então de repente todos os meus textos estarão em um azul também, que não é tão bom. Mas eu precisaria passar pouco a pouco para mudar isso de volta. A abordagem que estamos tendo com nossas próprias cores, eu posso mudar as cores da minha marca, e então eu posso mudar separadamente as cores em cima dos meus elementos. Por isso, é realmente dá-lhe uma grande flexibilidade com jogar com cores. E só para enfatizar novamente, é totalmente adaptável às suas necessidades. Você pode adicionar as variantes que você precisa e onde você precisa delas, e apenas adicionar uma cor para cada uma das cores que você está usando. 12. 60 30 10 da distribuição de cores: Agora, uma parte importante além das cores que você usa é como você as usa. A regra 1630 10 é uma grande regra. Basicamente, significa que você usa sua cor de base, que compõe 60% do seu design e, em seguida, 30% do seu design como sua cor primária. E apenas para destacar, use sua cor secundária para 10%. Agora, obviamente, não medimos exatamente uma cor. É mais uma sensação de distribuição. Então isso é ótimo porque ele também lhe dá espaço para brincar com variações como você vê no meu exemplo. Como você pode ver o que ele faz. Ele, ele dá-lhe uma base muito sólida e uma estrutura realmente grande e realmente recebe a atenção para onde você precisa para o seu chamado para ações. No caso de você precisar mudar as cores. Isso também funciona lindamente sem muito retoque. Como de costume, esta é apenas uma regra geral para você começar, usá-lo e torná-lo seu próprio. Há uma ferramenta bastante incrível, design biomaterial chamado ferramenta de cor. E o que ele faz é, ele mostra a vocês esta regra 1630 10 basicamente. Então você pode escolher uma cor primária, e então você pode simplesmente escolher qualquer cor secundária. E mostra muito bem o que isso vai parecer no seu design. E o design de material usa isso também, que você tem esse texto no primário, textos no secundário. Então, aqui, por exemplo, você pode definir uma cor de texto separada para qualquer coisa que você gosta. E, em seguida, na acessibilidade, você pode verificar se suas cores estão acessíveis se elas têm contraste suficiente. E aqui você pode simplesmente pular e ver diferentes versões do seu design. E você pode, claro, personalizar tudo sobre ele. 13. Resumo da cor no design de UI: Então vamos resumir tudo o que aprendemos sobre cores no design da interface do usuário. Então, geralmente, definimos cores em códigos hexadecimais. Geralmente usamos de duas a três cores, mas você é livre para usar quantas ou tão poucas quanto precisar para o seu design. Usamos variantes dessas cores para mais profundidade. Nomeado cores depois que eles usam. Então não nomeie laranja ou azul, mas primário, secundário ou algo como destaque. Seja como for, cabe a você, mas seja consistente. Documente suas cores do jeito certo. Verifique sempre o contraste para garantir que suas cores estejam acessíveis a todos. E usa 60, 30, 10 regras para equilibrar suas cores em seu design. 14. Obrigado: Bem feito para terminar este curso. Sinta-se à vontade para entrar em contato conosco na lua learning dot io, estamos sempre interessados em ouvir seus comentários. Você também faria como um grande favor se você pudesse apenas tirar um minuto e deixar um comentário aqui. Se você gostou deste curso e também certifique-se de que você tem uma olhada em nossos cursos adicionais. No ponto Moody Learning. Nós cobrimos todos os assuntos desde os fundamentos do design UX UI até Figma e até mesmo alguns conceitos básicos de código. Certifique-se de visitar nosso site na Moody Learning dot IO, onde você também pode se inscrever em nossa newsletter.