Crie esquemas de cores incríveis para seus projetos de UI/UX

1. Introdução: Por que é tão difícil trabalhar com cores? Se você é um designer de UI/UX, você está bem ciente da importância da cor. Você sabe que, às vezes, criar a paleta de cores certa torna-se uma tarefa assustadora. Mas porquê? Porque você precisa saber como criar uma ótima combinação de cores e como aplicar ao seu design. Se você não tem idéia de como fazer isso, e você está lutando para criar esquemas de cores incríveis, não se preocupe, você está no lugar certo. Oi, eu sou Arash Ahadzadeh, e eu sou um designer UI/UX. Eu também ensino design UI e UX na Universidade de Economia e Ciências Humanas em Varsóvia e neste curso, você e eu vamos percorrer todos os detalhes sobre cores. Vamos começar com os fundamentos mais básicos da cor e, em seguida, passar para tópicos avançados como harmonias de cores, psicologia de cores, e muito mais. Se você é uma daquelas pessoas que pensam que criar a paleta de cores cinza requer talento e habilidades artísticas, provavelmente é hora de mudar sua mentalidade porque a cor é tudo sobre ciência. Sim, você ouviu direito. Quando você aprende a ciência por trás das cores, você pode facilmente criar suas próprias paletas de cores harmoniosas em nenhum momento. Além de criar paletas de cores, você também aprenderá a aplicar cores ao seu design, não importa se é um site ou um aplicativo. Além disso, falaremos sobre a importância da acessibilidade de cores no design UI/UX e você aprenderá a criar paletas de cores bonitas e acessíveis através de exercícios simples. Por último, mas não menos importante, vou compartilhar com você algumas dicas pessoais e truques para trabalhar com cores que aceleram seu processo de design dramaticamente. Este curso é projetado para lhe dar os conjuntos de habilidades teóricas e práticas necessários para escolher e aplicar cores corretamente. Ele também ajuda você a se tornar um designer mais confiante e melhor apenas praticando diferentes técnicas. Então, se você estiver pronto para dominar cores e criar esquemas de cores incríveis, te vejo na aula. 2. Estrutura do curso: Ei, todo mundo. Neste vídeo, vamos falar sobre a estrutura deste curso. Esta unidade curricular está dividida em duas partes diferentes, a teórica e a prática. Na parte teórica, você aprenderá todos os fundamentos da cor, como teoria das cores, psicologia das cores, harmonias de cores e muito mais. Na parte prática, você vai praticar como aplicar o conhecimento que você adquiriu na parte teórica a projetos do mundo real. Vamos criar diferentes paletas de cores e aplicá-las a um site e a um aplicativo móvel. Dessa forma, você entenderá verdadeiramente o processo de criação e aplicação de paletas de cores às interfaces do usuário. Vejo você no próximo vídeo. 3. A importância das cores no design UI/UX: Quando falamos de design, não importa se é design UI/UX, design gráfico ou mesmo design de interiores, as cores desempenham um papel mais branco em qualquer um deles. Sem dúvida, as cores são um dos aspectos mais importantes do seu design UI/UX. Sem cores, é quase impossível dar nossos personagens e sentimentos de design. Não importa o quão boa seja sua composição, se você não usar cores apropriadamente, garanto que seu design não se destacará. Ao projetar um projeto, seja um site ou um aplicativo móvel, é essencial transmitir a mensagem e os sentimentos corretos ao usuário final escolhendo as cores adequadas. Mas por que a cor é importante no design UI/UX? A série abreviada, a primeira impressão visual importa. Você está convencido? Se não, deixe-me elaborar mais sobre isso. Quando os usuários iniciam um aplicativo móvel ou um site, eles levam cerca de 50 milissegundos para decidir se querem permanecer ou não. Suas decisões dependem de fatores diferentes e um desses fatores é o uso de cores. Você pode ver como é importante usar cores adequadas em seu design? Escolher cores cinza parece complexo à primeira vista, mas confie em mim, quando você aprende os fundamentos das cores e a ciência por trás disso, garanto que você pode criar esquemas de cores incríveis para seus projetos em nenhum momento. Nos vídeos a seguir, você aprenderá sobre os conceitos básicos de cores para o design UI/UX. Vi você então. 4. Modos de cores: Quando queremos usar cores, existem diferentes modos de cores que podemos escolher, como CMYK, RGB, Tons de Cinza, etc., mas os mais dominantes são CMYK e RGB. Os modos de cores podem afetar a forma como as imagens são apresentadas aos usuários. Deixe-me separá-los para você. CMYK significa ciano, magenta, amarelo e preto. Ele é usado com mais freqüência para impressão colorida. RGB significa vermelho, verde e azul. É melhor para o trabalho digital porque essas cores são as cores primárias usadas em telas de computador, telas de dispositivos móveis, etc. Portanto, se você é um designer gráfico que quer projetar obras de arte para impressão, você deve usar CMYK, e se você é um designer UI/UX que quer projetar para telas digitais, você deve usar RGB. Deixe-me mostrar rapidamente como o RGB difere do CMYK. Dê uma olhada nesta foto. O modo de cor desta imagem é RGB. Mas veja o que acontece se eu convertê-lo em CMYK. Você viu isso? Qual é a razão por trás dessa diferença? Aqui está o diagrama de cromaticidade, e esta é a gama de cores que nossos olhos poderiam processar e reconhecer. Esta é a gama de cores que podemos alcançar no modo RGB, e esta é a gama de cores que podemos alcançar no modo CMYK. Como você pode ver, o intervalo ou gama RGB é muito maior do que o intervalo CMYK. É por isso que as cores do modo RGB parecem mais vibrantes do que as cores no modo CMYK. Espero que agora você tenha uma melhor compreensão dos diferentes modos de cores. Vejo você no próximo vídeo. 5. Os ingredientes coloridos: Podemos dividir cada cor em três ingredientes principais: matiz, saturação e valor. tonalidade é basicamente a origem da cor que vemos como vermelho, azul, roxo ou qualquer outra cor. A segunda propriedade de uma cor é a saturação, e é a intensidade de uma tonalidade. Tome verde, por exemplo. Aumente a saturação e a intensidade aumenta. Pelo contrário, se você diminuir essa saturação, a intensidade diminui. O último atributo de uma cor é o valor. É basicamente o brilho de uma cor. Agora, podemos dividir o valor em dois termos diferentes: matiz e sombra. Uma tonalidade é uma versão mais brilhante de uma tonalidade, e podemos criar uma se misturarmos a tonalidade com o branco. Por outro lado, uma sombra é uma versão mais escura de uma tonalidade. Como você pode imaginar, podemos criar um adicionando preto à nossa tonalidade. Também podemos criar um tom de nossa cor adicionando cinza a ele. Em vídeos futuros, você aprenderá a criar diferentes tons e tons de uma cor para seus projetos. 6. Domine o volante de cores: Você já se perguntou como alguns designers de interface criam as paletas de cores perfeitas para seus projetos? Eles não usam apenas suas habilidades artísticas para este assunto. Eles usam ciência, e isso é chamado de teoria da cor. Para aprender essa ciência, você deve entender o que é uma roda de cores e como você pode usá-la. Esta é uma roda de cores, e assim como você aprendeu na escola, é feita de cores primárias, secundárias e terciárias. As cores primárias são vermelho, azul e amarelo. Se misturarmos essas cores juntas, elas fazem as cores secundárias, e elas são verdes, laranja e roxas. Finalmente, quando misturamos as cores secundárias e primárias, elas fazem as cores terciárias, amarelo-laranja, vermelho-laranja, vermelho-violeta, azul-violeta, azul-verde e amarelo-verde. Estes compõem a roda de cores, inventada por Sir Isaac Newton, e simplifica como podemos trabalhar com cores diferentes. A roda de cores pode ser dividida em dois grupos principais com base na temperatura da cor, cores frias e quentes. Mas como podemos usar a roda de cores para criar paletas de cores incríveis para nossos projetos? Bem, podemos usar algumas fórmulas básicas conhecidas como harmonias de cores para escolher cores diferentes da roda de cores harmoniosamente. Vamos falar sobre harmonias de cores em vídeos futuros. 7. Diferentes tipos de cores: Como mencionei no vídeo anterior, temos dois grupos de cores, cores frias e quentes. Mas como devemos saber qual grupo é mais adequado para o nosso projeto de design de interface do usuário? Cada grupo de cores tem algumas características que nos ajudam a decidir se é uma boa escolha ou não. Por exemplo, cores frias representam água, neve, céu e são calmas, calmantes e refrescadas. Por outro lado, cores quentes representam calor, luz solar e simpatia. Eles são enérgicos, emocionantes e acolhedores em geral. Dependendo das características da marca, podemos decidir qual grupo de cores é adequado para o nosso projeto. Por exemplo, se a marca oferece atividades emocionantes e divertidas, você pode ir com as cores quentes. Por outro lado, você pode usar cores legais se a marca é tudo sobre confiança , segurança, profissionalismo, etc. As cores que usamos devem refletir a personalidade da marca. Além desses dois grupos, temos outro grupo de cores chamadas cores neutras, branco, preto, marrom e cinza. As cores neutras não aparecem na roda de cores. Nós geralmente os usamos para fundos porque eles complementam e destacam outras cores muito bem em nosso design. Mas usar uma cor cinza ou branca como fundo nem sempre parece interessante e estético para os olhos do usuário. Então, o que podemos fazer? Para tornar o nosso design ainda melhor, podemos adicionar uma tonalidade e um pouco de saturação às cores neutras. Graças a esta técnica, as cores neutras parecem mais interessantes para os olhos do usuário. 8. Harmonias de cores: Agora que você aprendeu sobre a roda de cores e a cor em geral, é hora de aprender a usar a roda de cores para criar esquemas de cores com aparência profissional. Existem algumas fórmulas básicas baseadas em harmonia de cores que podem nos ajudar a escolher cores harmoniosas facilmente. Vamos começar com a fórmula mais fácil, que é chamada monocromática. Ele usa apenas uma cor ou matiz. Basta escolher uma cor na roda de cores e criar variações usando a saturação e o valor. O que eu gosto sobre esquemas de cores monocromáticas é o fato de que eles são garantidos para trabalhar bem juntos. A próxima fórmula de cor é complementar. Leva duas cores de lados opostos da roda de cores, como azul e laranja, ou amarelo e roxo. É um ótimo esquema de cores quando você quer usar cores de alto contraste em seu design. Um esquema de cores complementar divide as cores em ambos os lados dos complementos. Ele oferece cores diferentes para trabalhar, mantendo o mesmo nível de contraste. Um esquema de cores análogo leva cores que estão próximas umas das outras na roda de cores, como amarelos e verdes, ou azuis e roxos. Um esquema de cores triádico usa três cores uniformemente espaçadas e formam um triângulo na roda de cores. Essas combinações de cores geralmente são vibrantes, então certifique-se de usá-las com sabedoria em seus projetos. O esquema de cores tetradic leva dois conjuntos de cores complementares e forma um retângulo na roda de cores. Essas cores funcionam muito bem quando você deixa uma cor agir como a cor principal e as outras como um acento. Você pode criar vários temas, tons e tons dentro de cada paleta de cores. Se você está um pouco sobrecarregado, não se preocupe. Quando você começar a aplicar esses métodos, você ganhará confiança e poderá facilmente reconhecer se algumas cores funcionam juntas ou não. 9. Contrates das cores: contraste de cor é a diferença de luz entre o primeiro plano e o plano de fundo. Isso soa estranho? Deixe-me mostrar-lhe um exemplo. Aqui está um fundo afiado, e se adicionarmos um elemento com uma cor saturada em cima dele, obteremos essa terrível peça de arte. Quem me dera poder fingir que nunca vi um desenho tão horrível. Felizmente, podemos consertar isso. Muitas vezes, você pode obter uma taxa de contraste melhor apenas modificando os tons, matizes ou saturação de suas cores. Uma taxa de contraste é apenas um valor atribuído à diferença de luz entre primeiro plano e plano de fundo. Quanto maior a proporção, mais fácil fica ler o conteúdo na tela. Aqui estão algumas dicas que podem levar sua qualidade de design de bom para ótimo. Dica número 1, nunca use preto puro e branco puro e vice-versa. Isso faz com que o trem digital do olho e machuque os olhos dos usuários. Em vez disso, você pode usar um cinza muito escuro em um cinza muito claro e vice-versa. Dica número 2, não use uma cor brilhante em uma cor brilhante. Não deixa seus elementos se destacarem. Em vez disso, você pode usar uma cor brilhante em uma sombra escura. Dica número 3, sempre verifique suas cores em fundos claros e escuros. Às vezes, você pode precisar ajustá-los para obter uma boa taxa de contraste em fundos escuros. Por último, mas não menos importante, dica número 4, sempre valide suas cores verificando a taxa de contraste. Acredite em mim, há belos projetos de interface de usuário em Dribbble e Behance que falham no teste de taxa de contraste. Você aprenderá a verificar a taxa de contraste mais adiante neste curso. 10. Exemplos do mundo real: Agora que você aprendeu como as combinações de cores funcionam, vamos ver alguns exemplos de cada harmonia de cores para ver como você pode aplicá-las ao seu design. Esquema de cores monocromáticas. Como você pode ver, este site usa um esquema de cores monocromático. Por quê? Porque só usa uma única cor aqui. Mas Aresh, temos muitas cores aqui, por que você está dizendo que ele usa apenas uma única cor? À primeira vista, pode parecer que há muitas cores aqui. No entanto, temos uma única cor e diferentes tons, tons e tons dessa cor. A cor primária é este azul, e eles usaram um tom escuro dessa cor para este grande título e também os links na parte superior e para o botão de inscrição, como você pode ver, eles usam a cor primária e uma tonalidade clara de Essa cor. Basicamente, a tonalidade é a mesma, mas o valor e a saturação são diferentes. Vamos dar uma olhada em outro exemplo. Este site chamado Orbit também usa um esquema de cores monocromático, e aqui eles também usam apenas uma cor e eles aplicam perfeitamente essas cores ao seu design para criar uma grande hierarquia visual. Esquema de cores complementar. Aqui está um site popular, Reserva, e como você pode ver, ele usa um esquema de cores complementar. Por quê? Porque aqui temos azul e laranja. Estas duas cores são colocadas nos lados opostos da roda de cores. Eles também usaram uma cor neutra para o fundo, e esta é a razão pela qual as cores laranja e azul se destacam aqui. É muito importante escolher a cor do fundo com sabedoria. Existem algumas outras cores, como verde ou vermelho aqui, mas estas são cores semânticas e falaremos sobre elas mais tarde. Vamos dar uma olhada neste aplicativo móvel. Também é uma empresa muito popular, e como você pode ver, ela usa a mesma combinação aqui, azul e laranja. É uma combinação de cores muito popular que você pode ver no design de interiores, no design gráfico e no design UI/UX. cores complementar dividido. Este site usa um esquema de cores complementar dividido, e como você pode ver, é enérgico e divertido. A razão é, estas são cores de alto contraste, geralmente as usamos em ilustrações. Agora vamos dar uma olhada neste site. Aqui, eu também usei um esquema de cores complementar dividido, e como você pode ver, eu usei para os padrões no lado direito, não para o resto dos elementos no lado esquerdo. É muito importante saber quais cores são adequadas para qual conteúdo. cores análogo. Este site usa um esquema de cores análogo e, como você pode ver, o designer aplicou perfeitamente essas cores à ilustração e apenas usou uma cor branca para o conteúdo de primeiro plano. Portanto, temos uma taxa de contraste muito alta aqui. Este site também usa um esquema de cores análogo. Como você pode ver, eles usam a cor principal como fundo, e eles usam duas outras cores que são colocadas nos lados direito e esquerdo da cor na roda de cores, e eles usam para o CTA ou chamada à ação, como você pode ver, e também para o título, estas são as cores de acento e eles devem obter a maior atenção. cores triádico. Este site usa um esquema de cores triádico, e como você notou, essas cores são emocionantes e divertidas. Este é também outro exemplo de esquema de cores triádicas. Como você pode ver aqui, o designer usou algumas cores dessaturadas para deixar o conteúdo e informações como seu texto e essas imagens aparecerem nesses fundos, e o resultado é ótimo. cores tetradic. Aqui está um exemplo de esquema de cores tetradic usado no design da interface do usuário. Como você pode ver aqui, maioria das cores são usadas para a ilustração. ilustração aqui tem muitas cores como verde, laranja, vermelho, rosa, roxo escuro, etc. Não é realmente uma boa idéia usar este esquema de cores para os principais elementos do seu projeto, como texto, botões, etc. A menos que você seja um designer experiente e saber o que você está fazendo, eu não sugeriria usar este esquema de cores no design UI/UX. Este site é outro exemplo de um esquema de cores tetradic. Aqui novamente, temos uma ilustração, e é óbvio que o designer não usou toda a paleta de cores para o conteúdo. 11. Introdução à psicologia de cores: Saber como emparelhar cores é crucial para qualquer designer. No entanto, não é suficiente para criar um design significativo. Vejamos o significado de cores individuais. No entanto, qualquer cor pode transmitir um sentimento positivo ou negativo aos usuários. Portanto, você quer se certificar de usar as cores certas para se comunicar com os usuários corretamente. Cada cor pode ter sentimentos positivos e negativos. Portanto, é importante usá-los no lugar certo para evitar qualquer mal-entendido. Vermelho. Vermelho implica excitação, amor, poder e energia. Também pode transmitir perigo, erro e agressão. Então certifique-se de esclarecer o intenso com uma breve descrição ao lado da cor. Amarelo. Amarelo representa criatividade, felicidade, otimismo e simpatia. É por isso que a McDonalds o usa como cor da marca. Laranja. Laranja poderia fornecer aos usuários uma sensação de calor. É convidativo e mostra sucesso e confiança. Verde. Verde é uma cor dominante na natureza que pode evocar emoções poderosas. Representa saúde, frescura e crescimento. Se você quiser projetar um projeto para um produto ecológico, essa é provavelmente a melhor cor que você poderia usar. Azul. Azul significa confiança, calma e paz. Para algumas pessoas, é um sinal de tristeza e depressão. Você pode ter reconhecido que a maioria dos sites corporativos e tecnológicos usam o azul para oferecer uma sensação de confiança, calma e respeito. Alguns hospitais também usam azul em seu site. De longe, azul é a cor mais preferida por todos os usuários. É por isso que você vê muitos aplicativos móveis e sites por aí usando azul como sua cor dominante. Violeta. Violeta é uma cor que simboliza a realeza e a riqueza. Como o corante violeta era escasso no passado, foi reservado para a realeza. É também a cor favorita de muitos usuários do sexo feminino, e proporciona uma sensação de criatividade. Rosa. Rosa é uma cor de compaixão e positividade. Enquanto rosa tem sido usado para produtos femininos há anos. Pode ser neutro de gênero, bem como, mas certifique-se de pensar duas vezes quando você quiser usar rosa para um site de loja de madeira. Castanho. Assim como o verde, marrom está associado à natureza, mesmo que possa proporcionar uma sensação de aconchego, também pode ser aborrecido e sujo. Certifique-se de verificar diferentes formas marrons antes de aplicá-las ao seu design. Porque um castanho claro pode fazer limpo e um escuro pode parecer sujo. Preto. Preto implica elegância, luxo e sofisticação. Certifique-se de usá-lo corretamente, pois ele pode fornecer uma sensação de tristeza e tristeza também. Embora seja comumente usado para texto, você pode usá-lo para o plano de fundo, desde que você coloque cores brancas da marca em primeiro plano. Branco. Vemos branco em quase qualquer design, e isso é porque simboliza limpeza e simplicidade. Se você quiser projetar uma página web minimalista ou um aplicativo móvel, certifique-se de usar muito branco. Você pode estar familiarizado com o termo espaço em branco, e isso significa deixar algum espaço vazio que o usuário não se sente sobrecarregado. Sem mencionar que permite que outras cores apareçam em seu design também. A partir de agora, eu quero que você pense sobre o significado das cores que você está usando seus projetos que você pode atualizar seu design de bom para incrível. 12. As diferenças na preferência de cores: Ao projetar um aplicativo ou um site, é essencial saber quem é seu público-alvo. Por quê? Porque, com base nos dados demográficos dos usuários, você pode decidir quais cores funcionam melhor para o projeto e potencialmente aumentar a taxa de conversão. Nos últimos anos, diferentes projetos de pesquisa mostraram que homens e mulheres preferem cores diferentes. Só porque sabemos o significado das cores, isso não significa necessariamente que devemos usá-las todas. Vamos comparar as cores mais preferidas por homens e mulheres lado a lado. Como você pode ver, o azul é a cor mais popular para homens e mulheres. Agora você entende por que tantos sites e aplicativos usam azul como sua cor dominante. Roxo é apreciado principalmente pelas mulheres, enquanto homens e mulheres gostam de vermelho e verde. Agora vamos comparar as cores mais desgostadas por homens e mulheres. Como você pode ver, marrom e laranja são as cores menos favoritas para homens e mulheres. Então da próxima vez que você quiser criar uma paleta de cores, você pode primeiro fazer um pouco de pesquisa para descobrir quem seu público-alvo realmente é, e com base no que você encontrou, você pode escolher suas cores facilmente. 13. Cores exigidas para design UI: Não importa em que tipo de projeto de interface do usuário você trabalha, você precisará das seguintes cores para trabalhar com: cores uma, primária e secundária. A cor primária é uma cor dominante que é usada com mais freqüência na interface do usuário. Normalmente, você deve usar a cor da marca como a cor primária. Considere essa imagem como um exemplo; Qatar Airways usa sua cor de marca púrpura como cor primária. Opcionalmente, você pode criar um conjunto de cores secundárias para tornar seu design mais interessante. Tenha em mente que você deve usar cores secundárias se e somente se elas forem necessárias para o seu design pop. Suponha que você deseja projetar um menu com diferentes opções. Para distinguir entre a opção selecionada e as opções não selecionadas, você pode usar uma cor secundária. Dois; cores de acento. A cor de acento é usada para enfatizar ações e realçar informações como texto, botões ou chamada à ação, controle deslizante, links, barra de progresso, etc. Uma vez que você escolher sua cor primária, você pode usar as harmonias de cores que falamos prestes a criar a cor do acento. Vou mostrar-lhe como criar uma paleta de cores passo a passo no próximo vídeo. Considere a página inicial do Lyft. Ele usa roxo como a cor de acento e como você pode ver, ele tem sido usado para a chamada à ação e links. Três; cores semânticas. Eles são usados para aviso, erro, sucesso e informações. Use amarelo para aviso, vermelho para erro, verde para sucesso e azul para informações. Essas cores são sugeridas com base na psicologia da cor. Você é livre para usar diferentes tons, tons e tons dessas cores. Certifique-se de não usar essas cores semânticas intercambiável porque elas podem transmitir a mensagem errada para o usuário. Cores neutras: esquemas brancos, pretos ou cinza. Essas cores são usadas principalmente para texto e fundo. Eles deixam todas as outras cores aparecerem no seu design. Quase todas as paletas de cores exigem cores neutras para criar uma alta taxa de contraste de cores entre o plano de fundo e o primeiro plano. Como você pode ver, este site usa uma cor neutra clara para o fundo. Por último, mas não menos importante, número 5, gráfico e cores de visualização de dados. Assim como as cores secundárias, ter essas cores também são opcionais dependendo do tipo de seu projeto. Se você precisar ter gráficos, mapas de calor ou mapa de árvore em sua interface do usuário, considere criar um conjunto de 10 a 20 cores em uma ordem específica. Você pode criar essas cores usando as seguintes diretrizes. Você pode criar um esquema de cores categórico feito de várias cores que contrastam entre si em uma determinada ordem. É bom para gráficos de linhas, gráficos de barras, etc. Como estas são cores contrastantes, use este esquema de cores quando você precisar apresentar dados distintamente. O outro tipo de esquema de cores que você pode criar é sequencial. É uma transição gradual de cores da luz para o escuro e vice-versa. É adequado para treemap e mapa de calor. O último tipo de esquema de cores que você pode criar é divergente. Cores divergentes são úteis quando você tem valores negativos e positivos para apresentar. Não use essas cores para escalas categóricas. 14. Como criar uma paleta de cores para o seu projeto?: Agora que você ganhou todo o conhecimento necessário sobre cor, vamos colocá-los em prática e criar uma paleta de cores passo a passo. Você está pronto? Vamos começar. Não importa o software que você está usando, altere o modelo de cores para HSB. Eu uso Figma. Então deixe-me mostrar como funciona. Primeiro, eu vou para a seção Preenchimento, e neste menu suspenso, eu escolho HSB. Como você pode ver, temos três valores diferentes aqui H para matiz, S para saturação e B para brilho. Quando queremos aumentar a intensidade da nossa cor, devemos aumentar a saturação aqui. Se você quiser criar uma sombra, devemos diminuir o brilho para adicionar preto à nossa cor base. Passo 1, escolha sua cor base. É a cor primária da sua interface do usuário. Você pode escolher a cor da marca para ele, se houver alguma. Etapa 2, aplique a cor para moldar na tela. Pode ser um círculo ou retângulo. Passo 3, duplique a forma cinco vezes para obter seis formas idênticas. Estas são as suas amostras. Passo 4, escolha as amostras perto da cor base e modifique apenas a saturação ou brilho para obter dois tons escuros de suporte da sua cor. Não mude a tonalidade. Essas cores são usadas para diferentes estados de elementos acionáveis, como botões ou links. Por exemplo, quando projetamos um botão, queremos criar todos os estados do botão como padrão, ativo, inativo, etc Passo 5, agora escolha duas cores neutras adicionando cinza e branco à sua cor. Passo 6, finalmente, crie um tom escuro da sua cor adicionando mais cinza à sua cor. Estamos acabados. Como você pode ver, apenas usando uma única cor de base, você pode projetar uma interface completa. Tenho uma pergunta para você. Que tipo de harmonia de cores usamos para criar esta bela paleta? Se sua resposta é monocromática, você está absolutamente certo. Usamos uma cor e criamos variações adicionando tons, tons e tons à nossa paleta de cores. Agora vamos criar um esquema de cores análogo. Vou usar a roda de cores como referência. Vamos escolher roxo como nossa cor base. Agora eu vou mover o controle deslizante de matiz para a esquerda e direita ligeiramente para escolher mais três cores. Tenha em mente que, para criar variações para o seu esquema de cores, você não precisa de grandes alterações de matiz. Você só precisa modificar ligeiramente a tonalidade e criar variações ajustando a saturação e o brilho. Neste caso, vou escolher uma tonalidade desta cor rosa como minha cor de acento. Agora que nossas cores primárias e de destaque estão prontas, é hora de adicionar duas cores neutras adicionando cinza à nossa cor principal. Agora vamos ver como essa paleta se parece em uma interface. Parece incrível, não é? Dependendo do tipo de projeto, você pode adicionar cores semânticas à sua paleta de cores. As cores semânticas são usadas para aviso, erro, sucesso e informações. Como mencionei no vídeo anterior, você deve usar amarelo para aviso, vermelho para erro, verde para sucesso e azul para mostrar informações. Uma nota rápida aqui, ter essas cores é uma obrigação se você quiser projetar um painel. Porque em painéis, geralmente apresentamos dados importantes e é essencial usar cores semânticas para transmitir claramente o propósito e o significado de todos os dados aos usuários. 15. Como escolher sua cor base?: Neste vídeo, vamos falar sobre o processo de escolher uma cor base para suas paletas de cores. A cor base é a cor dominante em seu projeto. Para escolher a cor base, verifique primeiro as cores da marca. Se você quiser projetar um site ou um aplicativo móvel para KFC, qual seria a melhor cor base para suas paletas de cores? Sim, você está certo. Vermelho. Por quê? Porque os clientes das marcas estão familiarizados com a cor da marca e podem se conectar com seu design instantaneamente. Se você precisa escolher a cor primária da marca, primeiro, liste as características da marca e, em seguida, pense sobre qual cor se conecta à idéia por trás da marca de acordo com a psicologia das cores. É essencial usar cores que se comunicam com os usuários. Suponhamos que você queira escolher uma cor primária para uma empresa que oferece produtos orgânicos. Nesse caso, o verde pode ser uma boa opção porque se sente natural e fresco. Quando você decidir qual cor é adequada para a marca, você pode jogar com os atributos dessas cores, como saturação, brilho e valor. Na maioria das vezes, você escolhe uma cor e você diz que parece legal. No entanto, quando você tenta combinar essa cor com outras cores, ela pode não parecer tão boa quanto você espera. Verifique a cor primária em relação outras cores para ver se essa é a escolha certa para o seu projeto. Falaremos sobre a acessibilidade das cores mais adiante neste curso. 16. Como escolher uma cor acentuada?: As cores de acento são usadas para links, call-to-actions, barra de progresso, etc. Eles geralmente são brilhantes e saturados. Você pode criar uma cor de acento escolhendo a cor base ou primária e usando diferentes harmonias de cores como monocromáticas, análogas ou complementares. Se você ainda não tiver certeza de como escolher uma ótima cor de acento, deixe-me mostrar meu processo. Escolha sua cor primária e aumente ou diminua a tonalidade em 30-40 pontos. Agora aumente o brilho em 5-10 pontos. Voilá, a cor do seu sotaque está pronta. Esta fórmula funciona com qualquer cor. Você pode ver como é fácil criar uma cor de acento agora? 17. Como escolher cores de fundo?: Não importa o quão bonitas e vibrantes suas cores de acento sejam, se você não tiver uma boa cor de fundo, elas não recebem atenção suficiente. Portanto, é crucial escolher sua cor de fundo com sabedoria. Quando se trata de fundo, você não está limitado a usar apenas cores claras. Às vezes, podemos usar a cor primária para o fundo, desde que não seja muito vibrante para fazer com que os usuários saiam do seu site ou aplicativo. Também podemos selecionar sua cor primária e criar uma tonalidade muito clara diminuindo a saturação e aumentando o brilho. Como você pode ver, eu usei essa técnica para esta interface. Por exemplo, você pode definir o valor de saturação entre 2-8 pontos e definir o valor de brilho entre 95-100 pontos. As cores neutras são garantidas para funcionar melhor para fundos. 18. Cores Semantic no design UI: Como mencionei antes, as cores semânticas são usadas para status e feedback, como aviso , erro, sucesso e informações. Embora você deva usar amarelo, vermelho, verde e azul como suas cores semânticas, você não está limitado a apenas uma cor. A melhor prática é que você crie diferentes tons e matizes dessas cores para poder aplicá-las de forma flexível. Uma vez que suas quatro cores estejam prontas, você pode usar a harmonia de cores monocromática para criar variantes. Isso lhe dá flexibilidade suficiente para aplicar essas cores ao seu design. Vamos supor que você queira projetar um aviso. Se você usar apenas uma cor, seria assim. Agora, vamos dar um passo adiante e adicionar um tom de amarelo às nossas cores semânticas. Agora, o resultado parece muito melhor. A mesma técnica pode ser aplicada a todas as outras cores semânticas. 19. O que é uma escala de cores?: O que é uma escala de cores? Você se lembra dos três atributos da cor? Sim, estou falando de matiz, saturação e valor. Uma escala de cores é uma transição gradual de uma determinada cor da luz para a escuridão ou vice-versa. Qual atributo de cor está mudando em uma escala de cores? Você está certo, valor. Muitos artistas e designers acreditam que o valor é o atributo mais importante da cor. Mas por quê? Porque você não precisa de cor para projetar um projeto bonito e acessível. Tudo o que você precisa é de uma escala de cinza que você poderia usar para criar uma grande hierarquia visual usando cores contrastantes. Como designer, você deve entender que se você não acertar os valores, o resto de suas cores não ficará certo. Quando se trata de acessibilidade de cores, os valores desempenham um papel importante. Vamos dar uma olhada nas paletas de cores Material Design. Caso você não saiba, Material Design é uma linguagem de design desenvolvida pelo Google. Ele oferece um conjunto de diretrizes para aprimorar seu processo de design. Aqui estão algumas escalas de cores criadas pelo Material Design. Essas cores são escolhidas para trabalhar em conjunto harmoniosamente. Como você pode ver, cada cor corresponde a um número, entre 50-900. Valores mais altos representam cores mais escuras e valores mais baixos representam os mais claros. Ter diferentes valores de uma cor ajuda-nos a cumprir os padrões de acessibilidade. O que eu quero dizer com acessibilidade? Vamos ver este roxo, por exemplo. Como você pode ver, a cor do texto usada em alguma variação é branca, e em outras é preta. Isso significa que você deve usar uma cor de texto claro e algumas cores, e em outras, você deve usar uma cor de texto escuro para que o texto seja legível. Exploraremos a acessibilidade de cores mais adiante neste curso. 20. O que é a escala de is: O que é escala de cinza? cinza é simplesmente feita de diferentes tons de cinza. Muitos artistas e designers começam seu design usando uma escala de cinza. Mas por quê? A razão é que quando você trabalha com apenas tons diferentes de cinza, você pode se concentrar em outras coisas importantes, como espaçamento, tamanhos, hierarquia visual, o peso de seus elementos e muito mais. Você pode apenas se concentrar em como seus elementos como botões, texto, controles deslizantes ou cartões devem ser dispostos. Quando você usa o modo de cor em tons de cinza, você pode facilmente notar se você tem contraste suficiente entre os elementos ou não. Por exemplo, essa interface tem uma ótima hierarquia visual. Como você pode ver, a informação mais importante é mais escura do que a informação menos importante. Agora quero que se concentre na coluna de prioridade. Você pode ver que quanto maior for o nível de prioridade, mais escura fica a cor? Vamos analisá-lo ainda mais. Aqui temos três níveis de prioridade: alto, médio e baixo. Agora vamos mudar para o modo de escala de cinza. Como você pode ver, a maior prioridade tem a sombra mais escura aqui. É por isso que normalmente não usamos amarelo para o botão Excluir em uma interface. Agora dê uma olhada neste cartão. As cores são harmoniosas e você está pronto para adicionar o cartão ao seu design, exceto que você não é. Vamos mudar para o modo de cor em tons de cinza por um segundo. Consegue ver o problema? Como podem ver, não temos uma boa hierarquia visual aqui, tornando nosso design menos acessível. Como podemos consertar isso? Bem, eu usaria uma cor mais clara para a descrição e o botão de cancelar. Mas por quê? Devido à importância da hierarquia visual. Nossos elementos mais importantes, que são o título e o botão de confirmação, devem chamar mais atenção. Portanto, o botão cancelar e a descrição devem ter uma tonalidade mais clara de nossas cores. Agora vamos compará-lo com o modo de escala de cinza. Obviamente, parece muito melhor agora em termos de acessibilidade e hierarquia visual. Se você quiser ter um processo de design eficiente, certifique-se de começar com tons de cinza e, em seguida, aplique cores ao seu design. 21. Como aplicar uma paleta de cores ao seu design?: Agora que você aprendeu a escolher suas cores com base em harmonias de cores e psicologia de cores, na verdade é hora de aplicá-las ao seu design. Mas espere, você não pode aplicar cores aos seus elementos aleatoriamente? Claro que não pode. A não ser que queiras que o teu design fique assim. É doloroso, não é? Imagine que você está cozinhando uma porção de comida deliciosa e bonita para o almoço. Você tem todos os ingredientes à sua disposição e você só precisa saber quanto de cada ingrediente deve ser adicionado à sua panela. Se você usar os ingredientes desproporcionalmente, você pode acabar com uma refeição salgada ou uma refeição insípida. Se não é essa a sua intenção, você precisa ter uma receita. Mas temos uma receita para aplicar cores também? Felizmente, temos sim. Existe uma regra bem conhecida chamada 60-30-10 que é tirada do design de interiores. Vamos ver como funciona. Com base nessa regra, você precisa usar 60% de sua cor dominante ou primária, 30% de sua cor secundária e 10% de sua cor de acento. Primeiro, vamos verificar esse design de interiores. Como você pode ver, a cor primária é usada para 60% do ambiente, a cor secundária é usada para 30% do ambiente e a cor de destaque é usada para 10% do ambiente. Agora é hora de tentar. Esta é uma interface projetada no modo escala de cinza. Vamos começar a usar apenas três cores primeiro. Um primário, um secundário e uma cor de acento. Vou usar a cor primária para o fundo, a cor secundária para o texto e esses cartões, e a cor de acento para o CTA, que são esses botões e também para essas barras no gráfico de barras. Você pode ver como este design é equilibrado? Agora podemos até reorganizar nossas proporções de cor. Vamos substituir a cor primária pela nossa cor secundária e ver como ela acaba. Ainda parece bom, não é? Mas normalmente não temos mais cores em nossa paleta de cores? Sim, nós temos. Ainda podemos aplicar essa regra mesmo se tivermos diferentes tons de nossa cor primária ou mais cores secundárias e de acento. Só precisamos mantê-los na mesma proporção. Vamos considerar esta paleta de cores. Podemos querer usar essas cores de nêutrons claras e esta cor primária azul principalmente em nosso design. Então ambos devem tomar 60 por cento do nosso rácio. Essas duas cores agora serão nossas cores secundárias, então elas levam 30 por cento da nossa proporção. Por último, mas não menos importante, essas duas cores de acento devem levar 10 por cento da nossa proporção. Agora vamos ver como podemos aplicá-los à nossa interface. Poderíamos começar com nossa seção de heróis. Escolhemos uma das cores da nossa proporção primária, que leva 60% do nosso design no total e a usamos como fundo das seções de herói. A outra cor primária também é usada como a outra parte do nosso plano de fundo. Agora, para o conteúdo, podemos usar nossas cores secundárias. Para os botões CTA, precisamos usar uma cor que chame a atenção do usuário, então devemos usar nossas cores de acento para esse propósito. Vou usar amarelo para os botões CTA e laranja para o botão deslizante e indicador. Lembre-se de que você deve sempre verificar suas cores umas contra as outras para ver se há uma boa relação de contraste entre elas ou não. Uma cor de acento pode parecer incrível em fundos escuros, enquanto a outra pode ser legível apenas em fundos ao vivo. Isso é basicamente como você pode alocar cores diferentes para diferentes elementos do seu design. Uma das coisas que você pode fazer para garantir que sua relação de cores funcione bem é criar variância para diferentes partes do seu design e compará-las entre si em termos de legibilidade de conteúdo e acessibilidade. 22. Como nomear suas cores apropriadamente?: Convenções de nomenclatura. Um dos tópicos mais importantes quando se trata de criar sistemas de design. Como designer único, você pode considerar nomear cores como o fator menos importante que você pode pensar quando você trabalha em um projeto. É compreensível, mas deixe-me dar-lhe um exemplo para entender a importância de nomear convenções verdadeiramente. Suponhamos que você esteja trabalhando em um projeto com uma pequena paleta de cores que inclui 4-10 cores. Estas são as suas cores. Como é que lhes dá o nome? Bem, a maioria de vocês pode nomeá-los: azul, luz azul, verde e amarelo, e é totalmente bom se você estiver trabalhando em um pequeno projeto como um único designer. Agora vamos imaginar que você trabalha em um projeto em grande escala, com mais cores para trabalhar, e você deve colaborar com outros designers. Você pode usar a mesma abordagem aqui? Claro que não. Mas por quê? Quando você nomeia cores em um sistema de design, o objetivo principal é tornar o papel das cores o mais vívido possível. Por que você acha azul/luz/2 é um nome lógico, não faz sentido para outros colaboradores. A menos que você queira ir e explicar suas convenções de nomenclatura para todos os outros designers, desenvolvedores e profissionais de marketing em sua equipe, você deve usar uma abordagem, que funcione para todos, sem a necessidade de Explique a lógica por trás disso. Vamos supor que você tenha uma cor primária, e três tons desta cor para diferentes estados de seus elementos, como padrão, ativo, pressionado, etc. Qual é a melhor maneira de nomear essas cores? Primeiro, comece com o uso desta cor. Neste caso, é primário. Em seguida, use um hífen ou uma barra, e escreva as variações como, ativo, inativo, padrão, etc. Desta forma, poderíamos descrever cores, sem sequer mencionar seus nomes. Isso é chamado de convenção de nomenclatura funcional. Não importa quem usa nosso sistema de design, se essa pessoa é um designer daltônico ou um novo membro de sua equipe, ele ou ela pode facilmente entender, como essas cores devem ser usadas no projeto. Essa abordagem é clara, escalável e universal. Claro, existem diferentes convenções de nomenclatura, mas esta é a que funciona bem para projetos de pequena, média e grande escala. 23. Como criar grandes gradientes?: Agora que você sabe como criar uma ótima paleta de cores para seus projetos, é hora de falar sobre gradientes. O que é um gradiente? Um gradiente é uma transição gradual de uma cor para outra cor. Embora o uso de gradientes em seu design seja opcional, ele adiciona caráter e personalidade ao seu design. É por isso que a maioria dos designers hoje em dia usa gradientes em seu design. Temos basicamente quatro tipos diferentes de gradientes: linear, radial, angular e diamante, mas o mais popular é o gradiente linear. Agora deixe-me mostrar como você pode criar ótimos gradientes para seus projetos. Primeiro, abra Coolers.co. Agora clique no menu Mais na parte superior e clique no botão Criar um gradiente. Aqui podemos criar nossos gradientes. Como podem ver, temos cores diferentes aqui. Se eu passar o mouse sobre esses controles deslizantes e clicar em algum lugar, posso adicionar uma nova cor a esse controle deslizante. Se eu quiser remover uma cor, eu posso clicar neste botão remover assim. Agora que temos duas cores diferentes, deixe-me dizer-lhe como você pode chegar a grandes gradientes, porque obviamente nem todas as cores ficam ótimas quando as misturamos. Deixe-me selecionar minha 1ª cor e eu vou mudá-la para azul, por exemplo, este azul. Agora vou mostrar-vos um mau exemplo. Deixe-me selecionar a 2ª cor e mudá-la para, por exemplo, laranja, assim. Como você pode ver, este gradiente não parece muito bom porque não temos uma transição suave aqui, embora estejamos usando uma harmonia de cores, o resultado não é bom. Lembre-se, algumas harmonias de cores são boas apenas para cores sólidas, não gradientes, mas como podemos torná-la melhor? Aqui está minha técnica e eu recomendo que você deve usar isso também, porque é tão simples e vai tornar sua vida muito mais fácil. Primeiro, selecione sua 1ª cor, copie o código de cor hexadecimal e cole-o para a 2ª cor. Aqui temos duas cores idênticas. Agora, usando o seletor de cores, eu vou mover o controle deslizante para a direita e para a esquerda, a fim de escolher cores análogas assim. Agora você pode ver o quão incrível e suave essa transição de cores é? Agora vamos tentar outro exemplo. Eu vou mover o controle deslizante de matiz para o lado esquerdo um pouco, você pode ver como é bonito? Você também pode modificar o brilho de suas cores, se desejar, é totalmente até você. Esta técnica sempre funciona. Para criar grandes gradientes, você precisa lembrar apenas uma regra, e que é usar a harmonia de cores análoga. Se você quiser vir acima com gradientes aleatórios, você pode facilmente clicar sobre estes botão aleatório e Coolers cria gradientes aleatórios para você apenas assim. A outra coisa que você pode fazer é usar harmonia de cores monocromáticas. Apenas usando uma cor e diferentes tons e matizes dessa cor, você pode criar grandes gradientes assim. 24. O que é acessibilidade acessibilidade?: Quando se trata de design UI/UX, acessibilidade é muito importante. Afinal, os designers estão lá para resolver problemas, não para fazê-los. É importante projetar de forma que todos, independentemente de suas deficiências físicas, auditivas ou visuais, possam usar o produto. A acessibilidade de cores permite que pessoas com deficiência visual usem o produto que projetamos como todos os outros. Você se lembra do exemplo sobre cores semânticas? Isso é tudo sobre acessibilidade de cores. Aqui temos três imagens de perfil com o indicador de status no canto superior direito. Verde significa que o usuário está on-line, azul indica que o usuário está off-line e roxo significa que o usuário está ocupado. Mas vamos ver como as pessoas com visão monocromática vêem esse design. Como você pode ver, as cores são difíceis de distinguir umas das outras. É por isso que escolher o direito de valor para cada cor importa muito. Agora vamos modificar essas cores para tornar este design mais acessível. Vamos usar cores semânticas para esses indicadores. Agora está muito melhor. Você pode ver por que a acessibilidade é importante agora? Pessoas que sofrem de visão monocromática não podem distinguir matizes. Eles só podem ver diferentes tons de cinza. É por isso que eu já mencionei que o valor das cores é mais importante do que outros atributos de cor. Podemos criar um bom contraste entre os nossos tons apenas mudando o valor de uma cor que até mesmo pessoas com visão monocromática poderiam reconhecer nossa hierarquia de elementos. Claro, há muitas deficiências de visão de cor, mas o ponto que estou tentando fazer é que nem todos percebem as cores da maneira que nós fazemos. Vamos considerar esse design e ver como pessoas diferentes com deficiências de visão de cores podem processar essas cores. Visão monocromática ou daltonismo completo. Como mencionei antes, pessoas com visão monocromática só podem ver diferentes tons de cinza. Cegueira da Protanopia. Pessoas com essa deficiência de visão de cor percebem as cores vermelhas como cores mais escuras do que o normal e geralmente vermelho torna-se um verde escuro. Se você escolher vermelho como sua cor de primeiro plano e preto como sua cor de fundo, seria muito escuro para eles lerem o texto. Monocromacia cone azul ou BCM para curto. As pessoas com BCM não conseguem ver as cores vermelha e verde corretamente, enquanto percebem o azul. Existem outras deficiências de visão de cores também, mas o importante é que nós, como designers, devemos nos certificar de escolher nossas cores de uma forma que melhore a funcionalidade dos produtos que projetamos. Coloque sempre o usuário no centro do seu design. 25. Validar sua paleta de cores com base na proporção de contraste: Um dos fatores que devemos sempre verificar relação à acessibilidade de cores é a taxa de contraste. De acordo com as Diretrizes de Acessibilidade de Conteúdo da Web, ou WCAG, para resumir, existem dois níveis diferentes de taxa de contraste, AA para contraste mínimo ou AAA para contraste aprimorado. O nível AA requer uma taxa de contraste mínima de 4, 5:1 para texto normal e 3:1 para texto grande ou negrito. Por outro lado, o nível AAA requer uma taxa de contraste mínima de 7:1 para texto normal e 4. 5:1 para texto grande ou negrito. Mas espere, como podemos medir a taxa de contraste de nossas cores? Bem, podemos usar verificadores de contraste on-line para este assunto. Existe um site chamado Coolors para criar paletas de cores e verificar a taxa de contraste. Vamos tentar e ver como funciona. Vá para coolors.co/contrast-checker. Aqui, devemos especificar uma cor de fundo, e aqui devemos especificar a cor do texto que vamos usar em nosso plano de fundo. Como você pode ver, eu tenho um número bastante alto e é fantástico. Também indica que essa combinação de cores funciona bem para texto pequeno e grande. Agora, vamos verificar outro par de cores. Você pode ver isso? Ainda é legível, mas funciona apenas para texto grande. Por isso, verifique sempre a taxa de contraste das suas cores para ver o quão acessíveis elas são. 26. Ferramentas úteis para acessibilidade: Neste vídeo, vou apresentar algumas ferramentas úteis para a acessibilidade. Você está pronto? Vamos começar. Número 1, Stark. É um plugin Figma, Sketch e Adobe XD. Ele permite que você verifique sua taxa de contraste de cor e simule diferentes deficiências de visão de cor. Você só precisa selecionar uma prancheta e executar o plugin e Stark lida com o resto. Número 2, Contraste. É um plugin Figma que permite que você verifique a taxa de contraste de suas cores. Ao contrário do Stark, que permite que você verifique a taxa de contraste apenas três vezes com o plano gratuito, Contraste não tem limite a este respeito, e também tem um recurso legal que escaneia todo o seu design para encontrar problemas de contraste de texto . Número 3, whocanuse.com. É um site incrível que não só verifica a taxa de contraste de cores, mas também mostra como combinações de cores podem afetar diferentes pessoas com deficiências visuais. Vamos dar uma chance. Primeiro, especificamos a cor do plano de fundo, depois definimos a cor do texto e especificamos o tamanho e o peso da fonte. Aqui podemos ver a taxa de contraste, que é bastante alta, e uma classificação que é AAA. Além disso, podemos ver como pessoas diferentes podem processar essa combinação de cores, então temos a Visão Regular, as deficiências de cegueira de cor mais populares e alguns outros problemas de visão. Também temos os eventos de situação ou visão, que é bastante interessante porque podemos ver o quão acessível é nossa combinação de cores simulando o efeito da luz solar direta, um modo noturno em um telefone ou tela. 27. Inspiração com cores: Como designers, sempre procuramos inspiração em todos os lugares para acompanhar as tendências de design, criar novas ideias e assim por diante. Ser inspirado faz parte da nossa vida. É uma coisa muito boa porque nos ajuda a abrir nossas mentes e tentar coisas novas. Podemos obter inspiração para nosso layout de design ou até mesmo para criar nossas paletas de cores. Fontes inspiradoras estão por toda parte. Poderíamos nos inspirar pela natureza, pelas cores das suas flores, ou até mesmo pelo seu item pessoal. Vou fazer-te uma pergunta. Que harmonia de cores temos aqui? Você está certo. Complementares. Que tal aqui? Se sua resposta é monocromática, você está totalmente certo. Temos harmonia monocromática de cores aqui também. Você também pode visitar alguns sites para se inspirar como Dribble, onde você pode escolher uma cor e ver como outros designers usam isso em suas obras de arte. Você pode verificar outro site chamado Color Hunt, onde você pode encontrar muitas paletas de cores diferentes para seus projetos. O próximo site chama-se Muzli. Você pode ir para colors.muz.li, escolher sua paleta de cores desejada, e ele mostrará como seu esquema de cores realmente parece em uma interface. 28. Ferramentas online para criação de paletas com cores: Existem muitas ferramentas diferentes lá fora permitindo que você crie suas paletas de cores harmoniosas. Neste vídeo, vou mostrar a vocês alguns sites que geram paletas de cores úteis. Você está pronto? Vamos começar. Número 1, Coolors. Como já mencionei, esta é a ferramenta que eu uso para encontrar combinações de cores harmoniosas para meus projetos. Você pode tentar também. Deixa-me mostrar-te como funciona. Depois de abrir o site, você pode clicar no botão Gerar no menu e aqui está o gerador de paleta. Se você pressionar a barra de espaço no teclado, toda essa paleta muda. Depois de encontrar uma cor que você gosta, você pode gostar dessa cor clicando no ícone de cadeado. Agora continue pressionando a barra de espaço até encontrar uma 2ª cor. É divertido, não é? Devo mencionar que agora, apenas as melhores cores correspondentes são escolhidas com base nas cores que você gostou. Você deve continuar fazendo esse processo até selecionar todas as cores. Agora você pode exportar sua paleta de cores e usá-la em seu software de design. Se você tiver uma cor principal específica, basta colar o código de cor hexadecimal aqui, bloqueá-lo e pressionar a barra de espaço para gerar sua paleta de cores. Uma vez que sua paleta de cores está pronta, você pode usar outros recursos legais deste site. Por exemplo, você pode ajustar os atributos de todas as cores de uma só vez usando a opção Ajustar paleta. Você também pode verificar a acessibilidade de sua cor usando a opção colorblindness. Mas e se você quiser criar uma paleta de cores usando uma harmonia de cores específica? Não se preocupe, você pode fazer isso também. Basta ir para o menu Mais e clicar em Gerar método. A partir deste menu, você pode especificar a harmonia de cores que deseja usar para criar paletas de cores. Você quer ver suas paletas de cores no modo tons de cinza? Basta clicar no mapa de luminância Ver. Você também pode criar uma paleta a partir de uma foto. Para fazer isso, clique no botão da câmera e carregue sua imagem aqui. Sua paleta de cores está pronta. Se você está procurando gradientes, você pode simplesmente ir para a seção Explorar gradientes e você pode encontrar inúmeros gradientes para seus projetos aqui. Vamos falar sobre a 2ª ferramenta que você pode usar para criar suas próprias paletas de cores, MyColor.space. É outro ótimo site que oferece todas as cores que você precisa com base em sua cor primária. Basta escolher sua cor aqui e clicar em “Gerar”. Como você pode ver, ele mostra diferentes categorias de cores que você pode escolher com base em sua necessidade. A próxima ferramenta é chamada de Adobe Color. É uma ferramenta avançada que permite criar paletas de cores facilmente escolhendo diferentes harmonias de cores e ajustando-as no seletor de cores, assim como este. Você também pode ir para a seção Explorar e navegar por inúmeras paletas de cores tiradas de fotos. Se você for para a seção de tendências, você pode descobrir tendências de cores atuais em diferentes setores, como moda, design gráfico, ilustração, etc. Na guia Ferramentas de acessibilidade, você pode verificar a acessibilidade do seu cores também. Você gosta de usar inteligência artificial ou IA para criar suas paletas de cores? Se o fizeres, tenho boas notícias para ti. O próximo site que vamos falar é chamado Khroma e ele usa inteligência artificial para treinar um algoritmo alimentado por rede neural para criar paletas de cores personalizadas. Bem, como funciona? Primeiro, você deve escolher suas 50 cores favoritas para treinar o algoritmo do gerador. Depois de escolher suas cores, clique no botão “Iniciar treinamento” para iniciar o processo de treinamento. Uma vez feito, você será apresentado com centenas de pares de cores diferentes e paletas de cores. É tão legal, não é? 29. Aplique uma paleta de cores em um site - Parte 1: Ei a todos, bem-vindos de volta a outro vídeo deste tutorial. Neste vídeo, vou mostrar como você pode criar uma paleta de cores para aplicar cores a uma página de destino. Se você não tem certeza de como você pode criar as cores primárias , secundárias e de acento, não se preocupe. Vou orientá-lo por todos os passos necessários para criar uma paleta de cores bonita e harmoniosa. Além disso, vou mostrar-lhe como você pode aplicá-lo a uma página de destino. Para este projeto, eu já projetei uma página de destino em Figma. O que eu quero que você faça é baixar o arquivo inicial da página de destino da seção de recursos e importá-lo para o seu painel Figma. Se você não está familiarizado com Figma, deixe-me dizer-lhe que Figma é um popular aplicativo baseado em navegador que permite projetar interfaces de usuário. Vamos usá-lo para aplicar todas as coisas que você aprendeu até agora a um projeto do mundo real. Para importar um arquivo inicial da página de destino, basta clicar neste botão “Importar” no canto superior direito e escolher o arquivo em seu computador. Uma vez importado, basta clicar duas vezes sobre ele para abri-lo. Deixe-me ampliar. Lá vamos nós. Aqui está um projeto conceitual que eu projetei para este exercício. Como você pode ver, eu preparei isso no modo de cor escala de cinza, exceto para o logotipo e imagens, esses são coloridos. Esta página de destino é para uma empresa imaginária chamada Draft, e eles fornecem serviços de seguros on-line para empresários. Tudo vai ser feito sob um aplicativo chamado Draft. Deixe-me visualizá-lo para que possamos ver toda a página de destino. No topo, temos uma barra de navegação comum e, em seguida, aqui está a nossa seção de heróis. No lado esquerdo temos o conteúdo, o título, o subtítulo e um Call to Action, este botão. No lado direito, temos algumas cartas e também esta marca para cima. Agora vou rolar para baixo. Aqui está a seção de clientes. Como você pode ver, estas são coloridas porque nós não vamos modificar suas cores de qualquer maneira, então eu as mantive coloridas. Deixe-me rolar para baixo. Esta é a seção de recursos. Como você pode ver, temos seis cartas diferentes e cada cartão representa uma característica. O conteúdo aqui não é real e eu uso textos Lorem Ipsum aqui. Você pode modificá-los, mas para o propósito deste tutorial, não importa porque vamos nos concentrar em cores. Na parte inferior, temos um botão Explorar tudo. Deixe-me rolar para baixo. Aqui temos uma seção de depoimentos. Mais uma vez, os logotipos são coloridos. Vou rolar para baixo. Aqui, há outra seção que fornece ao usuário os serviços mais importantes que ele pode obter desta empresa. Temos algumas imagens e o conteúdo do lado direito. Deixe-me rolar para baixo. Esta seção é a seção CTA. É aqui que pedimos ao usuário para instalar o aplicativo em seu telefone. Deixe-me rolar para baixo. Por último, mas não menos importante, temos o rodapé. Como você pode ver, temos algumas categorias, alguns links, as informações de contato, e também uma breve descrição do rascunho. Também temos um botão Call to Action aqui. Na parte inferior, temos um aviso de isenção de direitos autorais e os ícones de mídia social. Deixa-me dizer-te o que vamos fazer. Primeiro de tudo, precisamos criar uma paleta de cores e, em seguida, precisamos aplicar essa paleta de cores a esta página de destino, aos elementos desta página de destino. Para fazer isso, vou usar o site chamado Coolors que eu já apresentei a vocês. Deixe-me ir em frente e clicar em “Gerar”. Qual é o primeiro passo? Tens razão, precisamos de uma cor primária ou de uma cor base. Mas como esta marca não tem nenhuma cor primária, nós, como designers, devemos criar a cor primária. O que você acha? Qual cor é mais apropriada para uma companhia de seguros? Você acha que precisamos usar cores legais ou cores quentes? Qual harmonia de cores devemos usar para criar esta paleta de cores? Estas são as perguntas típicas que você deve fazer si mesmo sempre que quiser criar uma paleta de cores para seus projetos. Vamos dar uma olhada no conteúdo. Em primeiro lugar, para chegar à cor primária, precisamos pensar na marca. Qual é a idéia por trás disso, quem é o público-alvo e o que os usuários esperam da marca? Primeiro, vamos pensar sobre as características desta marca. Esta é uma companhia de seguros e os usuários devem sentir que eles estão seguros e seus ativos estão seguros, e também eles esperam atitudes profissionais da marca. Uma vez que estamos a falar de profissionalismo e confiança, penso que o azul é a melhor opção porque o azul é popular entre homens e mulheres, portanto, não há obstáculo a esse respeito. Acho que podemos usar azul para a cor primária. Legal. Agora vamos em frente e escolher nossa cor primária. Mas que tipo de harmonias de cores devemos usar? Uma vez que não temos ilustrações e eu não quero obter cores altas contrastantes, eu acho que a melhor opção seria escolher análogo. Poderíamos usar monocromático também, mas eu não acho que cortesia cortesia ou split seria uma boa opção. Eu vou com análogo, para que possamos escolher cores que estão próximas umas das outras na roda de cores. Vou selecioná-lo e deixe-me pressionar a “Barra de espaço” no meu teclado para obter uma boa cor azul. Aqui temos diferentes tipos de azul. Vou selecionar um deles e modificá-lo manualmente para obter minha cor primária. Acho que esta é uma boa opção. Vou clicar neste código de cor e me deixar mudar o modelo de cor para HSB. Deixe-me mudar a tonalidade um pouco para ver se consigo obter uma cor de base melhor ou não. Este azul é legal; no entanto, é muito brilhante. Então eu vou diminuir o brilho de 85 para cerca de 30, talvez 31. A saturação é boa. Talvez eu possa aumentar para 84. Perfeito. É legal. Agora que nossa cor primária está pronta, deixe-me trancá-la e eu vou arrastá-la para o lado esquerdo, exatamente assim. Agora vou continuar pressionando a barra de espaço no meu teclado para obter outras cores. Eu gosto desta cor azul claro também. Eu vou trancá-lo também e deixe-me pressionar “Space Bar” de novo. Esta cor do meio também parece agradável, mas está um pouco dessaturada, então eu vou modificá-la de alguma forma. Primeiro de tudo, deixe-me mover ligeiramente o controle deslizante de matiz para o lado direito para ver se consigo obter uma cor de base melhor ou não. Acho que 227 é bom. Como você pode ver, a saturação está definida para 78, e eu vou aumentá-la para obter uma cor saturada. Oitenta e sete parece bom. Mas e o brilho? Está muito escuro. Deixe-me aumentar o brilho também. Vou definir para talvez 74. Perfeito. Vou trancá-lo e continuar pressionando a barra de espaço. Agora, estou procurando uma cor de sotaque. Pode ser uma cor verde ou uma cor roxa, já que estamos usando uma harmonia de cores análoga. Vamos ver se podemos usar essa cor verde ou não. Eu acho que parece bom; no entanto, ele precisa ser modificado um pouco. Vou clicar no código de cor hexadecimal aqui. Como você pode ver, está muito saturado e seria um problema em termos de contraste de cores e acessibilidade. Eu vou fazer isso dessaturado um pouco. Deixe-me definir para 88. Além disso, vou mudar a cor da base. e sessenta e um parece bom; no entanto, é muito escuro para ser uma cor de acento. Vou aumentar um pouco o brilho. Acho que 82 parece bom. Eu gosto disso. Deixe-me trancá-lo e eu vou pressionar “Espaço” no meu teclado. Agora, estou procurando duas cores neutras. Não gosto destas cores. O que eu vou fazer é copiar o código de cor principal aqui. Vou para Hex. Vou copiá-lo e deixar-me colá-lo aqui. Temos a cor primária. Agora usando o seletor de cores. Eu posso criar um tom aqui para obter a minha cor neutra desejada. Deixe-me mover o seletor de cores para o lado esquerdo para adicionar cinza à nossa cor base. É assim que criamos um tom, se você se lembra, assim. Agora deixe-me ir para HSB para ver os atributos da minha cor. A saturação é boa; no entanto, vou torná-la um pouco dessaturada. Deixe-me diminuir a quantidade de saturação para 20. Além disso, para o brilho, vou aumentá-lo para talvez 44. Parece bom. - Legal. Deixe-me trancá-lo. Agora vou adicionar mais uma cor neutra, mas uma clara. Se eu passar o mouse sobre esta seção, eu posso clicar neste ícone “Adicionar cor”. Deixe-me colar esse código de cor aqui, assim. Agora vou modificar a cor. Deixe-me ir para o modelo de cores HSB. A tonalidade vai ser a mesma, mas eu vou torná-la dessaturada para criar uma tonalidade desta cor. Deixe-me fazer isso dessaturado assim. Acho que se eu diminuir para seis, seria ótimo. Além disso, vou aumentar o brilho para 99. Legal. Esta é uma ótima cor neutra. Eu vou trancá-lo e eu preciso de mais uma cor, e isso vai ser branco porque nós vamos usar isso para nossos cartões. Deixe-me mudar para branco. Perfeito. Legal. Nossa paleta de cores está pronta. Agora é hora de exportá-lo. Eu vou clicar no botão “Exportar” e você pode usar qualquer formato que você quiser, mas eu prefiro SVG, então deixe-me baixá-lo. Agora eu vou para Figma e deixe-me arrastar e soltar a paleta de cores exportada aqui. Lá vamos nós. Eu vou ampliá-lo. Legal. Deixe-me movê-lo para cá. Tudo bem, pessoal, isso é tudo para a primeira parte deste projeto. No próximo vídeo, começaremos a aplicar nossas cores ao nosso design. Vejo você então. 30. Aplique uma paleta de cores em um site - Parte 2: Agora que nossa paleta de cores está pronta, precisamos definir a proporção de nossas cores porque vamos usar a regra 60-30-10. Permitam-me que vá em frente e remova este texto. Quais cores serão nossas cores primárias em termos de proporção? Este azul definitivamente vai ser a nossa cor primária. Estas duas cores também serão nossas cores primárias em termos de proporção. As três primeiras cores serão aplicadas a 60% do nosso design. Essas três cores são nossas cores secundárias e serão aplicadas a 30% do nosso design, e por último, mas não menos importante, a tela funcionará como nossa cor de destaque, e ela cobre 10% do nosso design. Legal. Normalmente, precisamos criar estilos de cores antes de aplicar cores ao nosso projeto. No entanto, como não é necessário para este tutorial, vou pular essa etapa e vamos começar a aplicar nossas cores aos nossos elementos. Sem mais delongas, vamos começar. Primeiro, vamos começar com o fundo. Para o fundo, podemos usar uma dessas três cores. Eu acho que esta cor neutra clara vai ser uma boa opção para a nossa cor de fundo. Eu vou ir em frente e copiar o código de cor hexadecimal, e deixe-me selecionar o meu quadro de arte e colá-lo para o fundo. Além disso, preciso me candidatar a outras seções também. Para a barra de navegação, vou aplicá-la aqui, e também para a seção de clientes, deixe-me colá-la. Vou rolar para baixo. Como você pode ver, para a seção de depoimentos, precisamos usar um fundo escuro. Por quê? Porque aqui, temos uma sombra escura. Então, qual cor pode ser usada para esta seção? Acho que uma das nossas cores secundárias seria uma boa opção. Eu vou usar este azul médio, deixe-me copiar o código de cor, e eu vou aplicar a este fundo. Legal. Como você pode ver, temos um bom contraste entre as cartas e nosso fundo. Legal. Que tal aqui? Como você pode ver aqui, também precisamos usar uma cor escura. Para esta seção, vou usar nossa cor primária. Deixe-me copiar o código de cor hexadecimal e eu vou aplicar a ele, apenas assim. Lá vamos nós. Nossas cores de fundos foram aplicadas com sucesso. Agora é hora de passar para outras seções. Vamos começar do início. Para estes links, vou usar a minha cor secundária, esta. Eu vou copiar o código de cor hexadecimal e deixe-me selecionar todos esses links, e também este ícone de seta, e eu vou aplicá-lo a todas essas camadas de texto. Eles parecem ótimos. Mas e sobre o conteúdo da seção herói para essas duas camadas de texto, eu acho que a cor primária seria bom porque nós vamos criar uma alta taxa de contraste entre nosso fundo e nosso primeiro plano, então eu vou com isso cor primária. Deixe-me copiá-lo e selecionar essas duas camadas de texto, e eu vou colá-lo. Legal. A última coisa que precisamos modificar aqui é o botão CTA ou call to action. Como você sabe, para CTA, geralmente usamos uma cor de acento porque ela precisa chamar a atenção do usuário para ela. Vou copiar o código de cor hexadecimal da nossa cor de sotaque, e deixe-me colá-lo aqui. Para o texto, vou usar branco por enquanto. Não tenho certeza sobre a taxa de contraste, mas por enquanto, não precisamos nos preocupar com isso, porque mais tarde, validaremos nossas cores em termos de taxa de contraste e acessibilidade de cores. Como precisamos ser consistentes em todo o nosso projeto, vou usar a mesma cor para este texto também. Deixe-me copiá-lo, e eu vou colá-lo para essas duas camadas de texto. Aqui também. Além disso, vamos aplicar a mesma cor a todas essas camadas de texto. Vou selecionar todos eles e colar a cor. Agora vamos ver quais cores devem ser usadas para nossos cartões aqui. As cartas vão ser brancas. Como você pode ver aqui nós temos cartões brancos, e aqui, nós também temos dois cartões brancos, e eles parecem limpos e incríveis. Mas as coisas que precisamos para modificar nossos ícones, as camadas de texto, e também este botão Explorar. Para esses ícones, como você pode ver, temos três tons diferentes, portanto, precisamos usar três cores diferentes. Vou usar nossas cores secundárias e de acento para esses ícones. Deixe-me ir em frente e copiar o código de cor da cor secundária. Agora, em vez de mudar a cor desses ícones um por um, no lado direito, sob as cores de seleção, você pode ver que temos três tons diferentes. Vou selecionar o primeiro e colar o código de cor. Lá vamos nós. Aplicamos a primeira cor. Agora é hora de aplicar a segunda cor, que é esta. Vou em frente e copiar o código de cor da minha outra cor secundária. Vou selecionar a lista de recursos, e a próxima sombra será esta, então deixe-me colá-la. Lá vamos nós. Eles já parecem incríveis. Para a última cor, vou usar a cor do acento. Deixe-me copiar o código de cor, selecionar os cartões, e eu vou clicar em ver todas as cinco cores. Lá vamos nós. Vou colá-lo. Eles parecem incríveis, não é? Como você pode ver, a cor do nosso botão Explorar também foi alterada. Porque o mesmo tom já foi usado para isso antes, então não precisamos modificá-lo. Para o texto, eu vou ir em frente e copiar a cor primária e colá-la aqui. Legal. Você pode ver como esta seção é bonita e limpa? A razão é que usamos uma harmonia de cores para criar essas paletas de cores, e também usamos a regra 60-30-10. Agora é hora de modificar nosso botão Explorar tudo aqui. Para este botão, vou usar a nossa cor de sotaque, que é este verde. Para o texto e este ícone de seta, vou usar branco por enquanto. Que tal aqui? As cartas estão bem, mas precisamos modificar a cor do texto. Vou selecioná-los e me deixar aplicar nossa cor primária a todos esses textos. Para este texto, vou usar a cor neutra que criamos antes. Deixe-me ir em frente e copiar seu código de cor. Agora vou aplicar as mesmas cores a todo esse conteúdo. Deixe-me avançar este processo para poupar seu tempo. Está feito. Agora, deixe-me modificar a cor deste grande título. Acho que nossa cor neutra clara seria ótima para isso. Deixe-me escolher isso. E quanto a estas aspas? Bem, obviamente, precisamos usar nossa cor secundária para isso. Mas o azul claro, este aqui. Vou copiar o código de cor hexadecimal, e deixe-me colá-lo aqui. É muito brilhante, então vou diminuir a opacidade para 20%. Agora parece muito melhor. Esta seção também é feita. Agora podemos avançar para outra seção. Aqui, como você pode ver, temos três círculos diferentes atrás dessas fotos e eles são tons claros. Devemos diminuir a opacidade de nossas cores aqui também. Para o primeiro, eu vou usar nossa cor primária para ele, e deixe-me diminuir a opacidade para 20%. Para o segundo, vou usar nossa cor secundária azul e vou diminuir a opacidade para 20% também. Para o último, vou usar nossa cor de acento, e também diminuir a opacidade para 20%. Uma vez que estes títulos carro, escritório e casa , correspondem a estas fotos, vou modificar a cor destes marcadores logo antes destes títulos. O primeiro terá nossa cor primária, mas não precisamos diminuir a opacidade aqui. O segundo vai ter a nossa cor secundária, e o último vai ter a nossa cor de acento. Esta seção parece ótima também. Espero que goste. Agora vamos passar para a próxima seção. Isso é chamado de seção CTA. Aqui, precisamos modificar apenas a cor do texto. Para o texto, vou usar nossa cor neutra que usamos para nosso fundo, assim como isso. Por último, mas não menos importante, precisamos aplicar cores ao nosso rodapé também. Para este texto e estas categorias no topo, vou usar a nossa cor neutra, que é esta, então deixe-me escolher essa. Legal. Como você pode ver, ele foi aplicado a todas essas camadas de texto. Para estes botão CTA, eu vou usar a cor do acento, este, e também para o texto, eu vou usar branco. Para estes links, vou usar a nossa cor primária, esta aqui. E sobre este divisor, este aviso de isenção de responsabilidade, e também esses ícones de mídia social? Acho que se usarmos nossa cor neutra, seria ótimo, a que usamos para este texto. Vou copiá-lo e colá-lo para todos esses elementos, e também para esses ícones. Como você pode ver, esquecemos de mudar a cor desta palavra, rascunho. Vou usar a nossa cor secundária para isso. Legal. Nossa página de aprendizado está pronta. Criamos com sucesso uma paleta de cores e aplicamos todas essas cores ao nosso design de acordo com a regra 60-30-10. Vamos pré-visualizar. Nossa seção de herói parece bom, a barra de navegação parece limpa, temos a barra de CTA usando a cor de acento, nossos cartões aqui são brancos, esses carros também parece ótimo, temos usado o análogo esquema de cores para esses ícones, a seção de depoimento parece limpa também. Para esta seção, usamos a cor primária e algumas tonalidades de nossas cores secundárias e de acento. Para esta seção, usamos nossa cor primária como fundo e uma cor neutra para nosso conteúdo em primeiro plano. Por último, mas não menos importante, usamos nossas cores primárias, secundárias e de acento para o rodapé. Tudo parece legal. No entanto, agora precisamos verificar nossas cores e ver se elas passam no teste de taxa de contraste ou não. Vou começar do topo e depois passar para outras seções. Primeiro de tudo, deixe-me selecionar um desses links, por exemplo, sobre, e então eu vou clicar com o botão direito do mouse sobre isso. Vou rodar o plugin de contraste. Como você pode ver, essas cores passaram no teste de taxa de contraste para níveis de duplo a e triplo a, e é fantástico. Mas e quanto a esses textos? Ele também passou em todos os testes e é ótimo. Agora eu vou selecionar estes, começar o texto. Como você pode ver, embora pareça muito bom em nossa interface, ele falhou no teste de taxa de contraste. Precisamos consertar isso. Temos duas opções. Podemos modificar nossa cor de acento, o que não é uma boa idéia na minha opinião, ou podemos modificar nossa cor do texto. Em vez de branco, vou em frente e escolher nossa cor primária para esses textos. Agora, como você pode ver, ele passou no teste de taxa de contraste. Você pode ver como é importante validar suas cores em termos de taxa de contraste. Deixe-me ir em frente e modificar todos os outros botões, como aqui, e também aqui. Legal. Mas e que tal aqui? Se eu selecionar esses textos, você pode ver que ele passou no teste de taxa de contraste. Que tal este botão Explorar? Ele também passou um teste de taxa de contraste. Aqui, como você pode vê-lo após o teste de taxa de contraste. Nós já verificamos essas cores em nosso plano de fundo para que saibamos que ele passou no teste de taxa de contraste e para esses textos também. Mas e que tal aqui? Deixe-me selecioná-lo. Como você pode ver, ele passa o nível AA para texto normal e os níveis AA e AAA para texto grande, então não é um problema. Aqui, nós já verificamos essa cor em nosso plano de fundo, e basicamente isso é tudo. Agora que validamos nossas cores com base na taxa de contraste, é hora de validar nossas cores com base nas deficiências de daltonismo. Vou selecionar minha prancheta. Não é mais o modo de escala de cinza. Então eu vou executar um plugin chamado filtros de cor. Se eu clicar na escala de cinza, podemos ver que temos um modo de escala de cinza novamente. Temos diferentes tons de cinza, então a hierarquia visual parece muito boa. Temos uma boa taxa de contraste aqui para o nosso conteúdo e os nossos botões. Tudo parece ótimo. Agora vamos tomar outra deficiência de cor. Vou desfazer o processo, Command+Z ou Control+Z, e deixe-me executar esse plugin mais uma vez e escolher, por exemplo, red blind. Temos bons tons também, então tudo parece limpo para as pessoas que sofrem dessa deficiência de visão de cor. Por último, mas não menos importante, vamos verificar se há outra deficiência de cor. Por exemplo, monocromacia de cone azul. Claramente, temos tons acinzentados, para que as pessoas não enfrentem nenhum problema ao usar este site. Vamos visualizar nossa página de aprendizado pela última vez. Consegues ver como estas páginas de aprendizagem são limpas? As cores são harmoniosas e também acessíveis a todos. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 31. Aplique uma paleta de cores em uma paleta de cores em uma aplicação — parte 1: Ei, todo mundo. Bem-vinda de volta. Neste vídeo, vamos criar outra paleta de cores e aplicá-la a um aplicativo móvel. Mas primeiro, faça o download do Projeto Iniciante de Aplicativos Móveis na seção Recursos e importe-o para o painel do Figma. Você pode arrastá-lo e soltá-lo neste ambiente ou você pode clicar no botão “Importar” no canto superior direito e escolhê-lo no seu computador. Deixe-me abrir. Este é o projeto que já tínhamos preparado para você. Vamos criar uma paleta de cores passo a passo e aplicá-la ao nosso design de acordo com a regra 60-30 e 10. Se você está pronto, vamos começar. Como você pode ver aqui, eu preparei uma prancheta, chamada Cores, para você com muitas amostras. Por exemplo, temos gráfico semântico primário e neutro e visualização de dados. Precisamos modificar a cor de todas as amostras, mas antes de tudo, deixe-me mostrar o projeto. O projeto em que vamos trabalhar é um aplicativo de finanças pessoais e permite que os usuários gerenciem suas finanças facilmente. Eu projetei todas as páginas no modo de cor escala de cinza que poderíamos facilmente distinguir as sombras e aplicar nossas cores a todos esses elementos. Como você pode ver aqui, temos três páginas de entrada diferentes. Basicamente, o design é o mesmo, no entanto, este é o sinal principal na página. A segunda é a página de login, mas temos o nome de usuário e senha, e também um erro aqui. Na terceira página, temos este ícone de aviso como você pode ver, deixe-me ampliar que você pode ver claramente isso, e um CTA ou chamada à ação, e alguns links. Na página inicial, temos um título grande, dois cartões de crédito diferentes, e um diálogo que apresenta as três últimas transações ao usuário. Por último, mas não menos importante, temos a página das finanças. Nesta página, temos um gráfico de pizza no topo. Logo abaixo disso, temos algumas informações sobre as despesas. Além disso, aqui, temos os dados relacionados a este gráfico de pizza. Que tipo de cores precisamos para este projeto? Primeiro de tudo, precisamos criar uma cor primária e, também, poderíamos ter cores secundárias, mas eu não acho que seja necessário. Desta vez, não vamos usar Coolors ou qualquer outro site para criar nossa paleta de cores. Vou te mostrar como você pode fazer isso sozinho manualmente. Uma vez que é um aplicativo financeiro e os usuários precisam confiar neste aplicativo, novamente, vamos usar azul como a cor primária. Mas desta vez, em vez de usar uma harmonia de cores análoga, vou usar uma harmonia de cores monocromática. Você está pronto para começar a criar nossa paleta de cores? Vamos começar. Deixe-me ampliar aqui. Vou selecionar minha primeira amostra e deixar-me ir até a seção Preenchimento e clicar nessa cor para abrir o seletor de cores. Como eu mencionei, vou usar azul como a cor primária. Vou mover o controle deslizante para a seção azul. Acho que este azul parece bom. Talvez eu possa mudar a tonalidade para 217, algo assim. Parece muito melhor agora. Para a cor primária, vou torná-la um pouco dessaturada. Deixe-me diminuir a saturação de 94 para cerca de 90 ou talvez 89. Parece bom. Além disso, o brilho vai ser em torno de 70 ou talvez 75. Parece legal. Nossa cor primária está pronta. Agora, é hora de passar para outras cores. Uma vez que vamos usar uma harmonia de cores monocromática, nossa cor base será a mesma. Vou selecionar todas estas amostras. Mantenha pressionada a tecla Shift no teclado e selecione todas as amostras e altere a cor para a cor primária. Agora, eu vou selecionar a segunda amostra e deixe-me criar um tom escuro de nossa cor primária porque nós vamos precisar disso para nossas camadas de texto. Primeiro de tudo, deixe-me aumentar a intensidade ou saturação da minha cor de 90 para 100 assim. Além disso, vou diminuir o brilho para adicionar preto à minha cor base. Se eu mover meu seletor de cores para baixo assim, posso facilmente adicionar preto a ele. Mas eu acho que se eu definir para cerca de 45 ou talvez 43, seria ótimo. Parece legal. Nossa segunda cor também está pronta, mas e a última cor? Este vai ser usado como nossa cor de acento, então ele precisa ser vibrante e brilhante. Deixe-me ir em frente e modificar a saturação e o brilho. Uma vez que esta cor é de alguma forma brilhante, podemos facilmente torná-la mais brilhante se definirmos a saturação e o brilho para 100 por cento. Agora, precisamos de três cores neutras. Deixe-me selecionar esta amostra e então eu vou criar um tom de nossa cor base. Se você se lembrar, para criar um tom, precisamos adicionar cinza à nossa cor base. Se eu mover meu seletor de cores para a área cinza, posso criar um tom. Como você pode ver, estamos recebendo uma cor maçante, e isso é exatamente o que queremos, mas deixe-me torná-lo um pouco mais brilhante aumentando o brilho. Neste momento, o brilho está definido para 43. Deixe-me definir para talvez 49. Parece bom. A segunda cor neutra será uma tonalidade da nossa cor base, então precisamos adicionar branco à nossa cor base. Deixe-me passar para a seção branca assim. Eu vou definir a saturação para cinco e o brilho vai ser 100%. Como podem ver, temos uma grande cor neutra. A última cor neutra será branca pura. Por que precisamos disso? Porque vamos usá-lo como uma cor de primeiro plano, por exemplo, para ícones e também para algumas de nossas cores de textos. Eu mostro-te mais tarde. Legal. Nossas cores primárias e neutras estão prontas. Agora, precisamos passar para a próxima seção, cores semânticas. Como você sabe ter cores semânticas em sua paleta de cores é opcional. No entanto, como eu mostrei, aqui temos as páginas de sinal, e temos um erro aqui, e também um aviso aqui. Para esses dois estados, precisamos ter cores semânticas. Deixe-me ir em frente e selecionar a primeira amostra aqui. Vou até a seção Preenchimento para abrir nosso seletor de cores. Uma vez que precisamos de uma cor vermelha, certifique-se de definir o H, ou matiz, para zero, porque é assim que poderíamos obter uma cor vermelha pura. Mas como você pode ver, é muito brilhante e vibrante, então vamos consertar isso. Deixe-me selecioná-lo. Se eu passar para a seção do seletor de cores, eu posso facilmente diminuir a intensidade baixando a saturação para talvez 60, deixe-me verificar, ou talvez 65. Além disso, eu vou definir o brilho para 95 para torná-lo um pouco mais escuro, apenas assim. Agora, vou criar duas tonalidades desta cor. Primeiro de tudo, deixe-me selecionar a segunda amostra. Eu vou usar esta cor, então, eu vou adicionar branco a ela. Para o último, vou movê-lo ainda mais para obter uma tonalidade muito clara da nossa cor. Às vezes, se você quiser criar um cartão ou um ícone, essas tonalidades seriam muito úteis para criar uma boa relação de contraste entre seus elementos de primeiro plano e de fundo. Agora, vamos passar para a segunda cor semântica que precisamos. O primeiro é necessário para a mensagem de erro, mas o segundo é necessário para o ícone de aviso. Para aviso, como você sabe, precisamos usar amarelo. Deixe-me ir em frente e escolher um amarelo usando o seletor de cores. Acho que esta é uma cor fixe. Agora, vou selecionar a segunda amostra e obter a nossa cor amarela, mas desta vez, em vez de ter duas tonalidades, vou criar uma tonalidade e uma sombra da nossa cor base. Para criar uma sombra, vou adicionar preto à minha cor. Se eu diminuir o brilho assim, eu poderia criar uma grande sombra. No entanto, eu acho que ele precisa ser um pouco dessaturado, então deixe-me diminuir a saturação para cerca de 70 ou talvez 68. Sim, parece bom. Agora você pode pensar que não é uma boa combinação de cores, no entanto, quando começamos a usá-lo, você pode ver como essas cores seriam harmoniosas. Para a última amostra, novamente, vou escolher a nossa cor base, e desta vez vou criar uma tonalidade da nossa cor. Deixe-me adicionar branco a ele, apenas assim. A saturação vai ser 40 e o brilho vai ser 100. Perfeito. Nossas cores semânticas também estão prontas. Mas como você pode ver, temos mais uma seção para preencher, que é gráficos e visualização de dados. Por que precisamos dessas cores? Bem, porque temos gráficos e dados aqui. Quando você está trabalhando em um aplicativo móvel financeiro ou um aplicativo web financeiro, é quase inevitável usar essas cores porque precisamos apresentar dados de uma forma que seja distinta e clara de reconhecer. Se você se lembrar para visualização de gráficos e dados, poderíamos usar três esquemas de cores diferentes, categóricos, sequenciais e divergentes. Normalmente, quando queremos apresentar dados sem qualquer valor numérico como neste gráfico, usamos esquema de cores categórico. Por quê? Porque usando o esquema de cores categórico, poderíamos chegar a cores de alto contraste que os usuários poderiam distinguir entre elas facilmente. Vamos em frente e terminar esta seção também. Primeiro de tudo, vou selecionar a minha primeira amostra aqui e deixar-me ir em frente e escolher a minha primeira cor. Para a primeira cor, vou usar azul. Pode ser qualquer azul. Não precisa necessariamente ser um dos blues primários. No entanto, como este azul parece bom, eu vou copiar o código de cor hexadecimal e usá-lo para nossos gráficos e visualização de dados também, então eu vou colá-lo aqui. No entanto, eu acho que eu poderia modificar isso de alguma forma porque esta cor está tão saturada. Deixe-me diminuir a saturação de 90 para cerca de 80 ou talvez 82. Parece bom, e também, vou aumentar o brilho de 73-78. Legal. Mas e a próxima cor? Tenha em mente que a ordem dessas cores importa muito. Por quê? Porque as pessoas com deficiências de visão de cores devem processar facilmente essas cores quando elas são colocadas ao lado da outra. Se não é compreensível agora, está tudo bem. Uma vez que a nossa paleta de cores esteja pronta, vou mostrar-lhe um exemplo de que você poderia obtê-lo perfeitamente. Mas, por enquanto, vamos em frente e completar nossa paleta de cores. Para o segundo, vou usar uma cor verde. Deixe-me ir para a seção verde. Acho que este verde parece bom. Talvez eu pudesse diminuir a tonalidade para 150 e agora deixe-me diminuir a saturação e brilho para fazer esta cor parecer um pouco mais escura. Legal. Parece legal. Agora, deixe-me ir em frente e selecionar minha terceira amostra, e para esta, eu vou usar amarelo. Deixe-me escolher minha cor semântica amarela, esta, e apenas modificar a saturação e brilho. Para o brilho, eu acho que 100 está bom. Talvez pudéssemos modificá-lo para 99, mas para a saturação, eu vou torná-lo muito dessaturado. Agora está definido para 90, mas eu vou fazer 60 ou talvez 66. Sim, parece legal. Consegues ver o padrão que estou a usar aqui? Para a primeira cor, como você pode ver, o brilho era 77, que é o valor da nossa cor. Para o próximo, o brilho é 63, então tornamos mais escuro. Para o próximo, o brilho é 97, por isso tornámo-lo mais leve. É por isso que eu disse que a ordem dessas cores importa porque se alguém com, por exemplo, visão monocromática quer processar essas cores, eles podem facilmente distinguir entre elas. Deixe-me selecionar a próxima amostra. Para a próxima, eu vou usar minha cor semântica vermelha, e deixe-me modificá-la um pouco. Talvez pudéssemos diminuir a saturação para 60 ou talvez 62, algo assim. O brilho parece bom. Por último, mas não menos importante , para este, vou usar uma cor azul escuro. Deixe-me mover o controle deslizante de matiz para a seção azul. Acho que esta cor parece boa. Talvez eu possa diminuir a tonalidade para 247, e para a saturação, eu vou fazer isso em torno de 65 ou talvez 61. No entanto, ele precisa ser muito escuro, então deixe-me diminuir o brilho de 74 para cerca de 30 ou 35. Deixe-me ver como fica, 36 parece bom. Legal. Nosso esquema de cores de visualização de gráficos e dados também está pronto. Agora, é hora de mostrar por que a ordem dessas cores importa. Primeiro de tudo, deixe-me ir em frente e selecionar esta prancheta, e eu vou clicar com o botão direito aqui para executar um plugin que eu já mostrei em vídeos anteriores, que é chamado de filtros de cores. Se eu for para simulações daltônicas, eu posso escolher a monocromacia, por exemplo, e agora, você pode ver que o valor dessas cores muda continuamente e nós não temos dois tons escuros próximos um do outro. Por exemplo, não temos essa cor aqui porque seria muito difícil para o usuário distinguir entre elas. É por isso que a ordem das cores importa aqui. Deixe-me desfazer o processo. Isso é tudo para a primeira parte deste projeto. Espero que tenha gostado e te vejo na próxima parte. 32. Aplique uma paleta de cores em uma paleta de cores em uma aplicação — parte 2: Agora é hora de aplicar nossas cores ao nosso design. Se você está pronto, vamos começar. Primeiro de tudo, vou começar com essas páginas de login. Para o fundo, primeiro eu vou selecionar esta prancheta, e no lado direito sob as cores de seleção, eu vou clicar em ver todas as nove cores, assim como isso. Aqui temos nove tons diferentes de cinza, e precisamos modificá-los um por um. Este é o nosso passado. Para o fundo, vou usar a nossa cor neutra clara. Deixe-me usar o conta-gotas e escolher nossa cor neutra, assim. Se você não sabe quais cores são correspondidas a quais elementos, você pode clicar neste ícone para encontrar os elementos específicos para os quais essas cores são usadas. Por exemplo, vou clicar nisso. Aqui, você pode ver que temos uma sombra usando essas cores. Agora deixe-me ir em frente e modificar a cor do nosso título. Para o título, como você pode ver, é muito escuro, então temos uma sombra escura. Portanto, precisamos usar nossa sombra escura que criamos aqui. Deixe-me modificar sua cor, assim mesmo. Mas e os campos de texto? Os campos de texto serão brancos, então vamos deixá-los como estão. No entanto, os elementos aqui como esses ícones e essas camadas de texto precisam ser alterados. Para estes ícones, vou usar a nossa cor de acento. Deixe-me ir em frente e modificar a cor deles assim. Mas e essas duas camadas de texto? Para essas camadas de texto novamente, precisamos de uma sombra escura. Mas em vez de usar a nossa cor primária, vou usar a nossa cor neutra, esta aqui. Deixe-me ir em frente e escolher nossa cor neutra, assim. Nossos campos de texto estão quase prontos. No entanto, como você pode ver, temos um traço em torno deles e precisamos modificar sua cor também. Para o traço, temos uma cor, mas com 50 por cento de opacidade. Para esta cor, vou usar a nossa cor neutra novamente. Deixe-me diminuir sua opacidade para 50% para este também. Deixe-me fazer o mesmo processo. Agora nossos campos de texto estão prontos. Mas há mais três elementos que precisamos modificar, este link esquecido de senha, este CTA, e este link. Primeiro de tudo, deixe-me selecionar esses dois links e eu vou usar nossa cor de acento para eles. Vou escolher a cor do nosso sotaque assim. Mas e o nosso CTA? Como você sabe, para o CTA, também usamos nossa cor de acento. Vai ser tão fácil. Deixe-me escolher nossa cor de sotaque. No entanto, lembre-se de modificar a cor da nossa sombra também, porque não é uma boa prática usar um Black Drop Shadow para elementos coloridos. Vou escolher a camada de sombra. Deixe-me escolher a mesma cor e diminuir sua opacidade para 32%. Como você pode ver, nossa primeira página de login está pronta e parece agradável e limpa. Espero que você goste também. Agora precisamos ir em frente e aplicar as mesmas cores a todas essas páginas de login. Vou avançar com este processo para poupar tempo. Nossas páginas de login estão prontas. Eu apliquei as mesmas cores a todos esses elementos exceto esta mensagem de erro e este ícone de aviso, porque nós vamos fazer isso juntos. Para esta mensagem de erro, precisamos usar uma cor semântica. Deixe-me ir em frente e escolher a cor semântica. Vou copiar o código de cor hexadecimal e colá-lo aqui. Parece bom, mas mais tarde precisamos validar nossas cores em termos de taxa de contraste também. Mas, por enquanto, vamos deixar como está. Mas e quanto a este ícone? Para este ícone de aviso, como você pode ver, temos duas cores diferentes. Temos uma tonalidade clara e uma sombra preta. Para esta tonalidade clara, vou usar a nossa tonalidade clara que criámos aqui. Vou copiar o código de cor hexadecimal e deixar-me colá-lo para o círculo. Para estes dois elementos, vou usar a nossa sombra escura, esta que criámos antes. Deixe-me colá-lo aqui e ali está. Você pode ver como belas e harmoniosas essas cores são agora? É por isso que é sempre uma boa idéia criar diferentes tons e diferentes matizes de suas cores semânticas. As nossas páginas de início de sessão estão perfeitamente concluídas. Agora podemos passar para a próxima página, que é a nossa página inicial. Aqui temos muitos elementos. Temos um título, dois cartões de crédito, um diálogo e algumas transações. Deixe-me começar com o título. Qual cor deve ser usada para isso? Se a sua resposta é a sombra preta da nossa cor primária, você está 100% certo. Precisamos usar cores consistentemente em todo o nosso projeto. Vou copiar esta cor e deixar-me colá-la para este título. Mas e quanto ao fundo? Para o fundo, eu vou usar a mesma cor neutra clara, exatamente assim. Agora vamos aplicar cores aos nossos cartões de crédito. Para o cartão principal, eu vou usar minha cor de acento, este, mas certifique-se de escolher a camada correta na lista de camadas. Como uso a máscara, chama-se retângulo sete. Eu vou escolher isso. Deixe-me usar nossa cor de sotaque para isso. Lá vamos nós. Estes textos vão ser brancos e também este logotipo MasterCard vai ficar branco. Mas e quanto a essas linhas? Para este, vou usar a sombra escura da nossa cor primária, a que usamos para o nosso título, esta aqui. Este vai ser branco. Parece ótimo. Mas e quanto a este cartão? Como você pode ver aqui, temos uma tonalidade da nossa cor. É um pouco mais brilhante. A cor que vamos usar vai ser a mesma que a nossa cor de acento. No entanto, como você pode ver, é mais brilhante porque eu diminuir a opacidade da placa principal, aqui MasterCard dois, para 50 por cento. Se eu aumentar para 100 por cento, você pode ver que não temos uma boa hierarquia visual. Uma vez que o cartão principal não é selecionado aqui, é melhor torná-lo 50 por cento. Mas e quanto a esses cartões? O diálogo em si vai ser branco. No entanto, estes cartões vão usar a nossa cor neutra, a que usamos para o nosso fundo. Essa cor já foi aplicada a esses cartões porque usamos a seção de cores de seleção, então não precisamos modificá-los. Mas e quanto a esse indicador? Para este, eu vou usar minha cor primária, que é esta, e então eu vou diminuir sua opacidade para 15%. Agora precisamos passar para os nossos elementos. Como você pode ver, esses quadrados não têm um tom muito preto como este tom preto, como você pode ver aqui. Portanto, vou usar nossa cor de sotaque para eles. Se você comparar as cores desses elementos uns com os outros, você pode ver que todos eles usam a mesma sombra, exceto este. Se eu apenas selecionar a minha prancheta inicial, eu posso facilmente escolher esta cor e eu posso usar a cor de acento apenas assim. Todas essas sombras foram mudadas imediatamente. Mas e quanto a essas datas? Para estas datas, vamos usar a nossa cor neutra. Eu vou selecionar todos eles, e deixe-me ir em frente e escolher nossa cor neutra escura, exatamente assim. Eles parecem ótimos. Agora precisamos passar para nossa última página, que é a página das finanças. Bem no topo, temos uma barra de navegação. Os elementos desta barra de navegação devem usar a mesma cor. Eu vou selecionar todos eles, e eu vou usar a cor primária para eles, este aqui. Usando o conta-gotas, posso selecionar minha cor primária. Lá vamos nós, a cor foi aplicada a todos eles. Aqui tínhamos um gráfico de pizza, e para esses gráficos precisamos usar um esquema de cores de visualização de gráficos e dados. Portanto, não estamos limitados a usar nosso esquema de cores monocromáticas mais. Tudo bem. Vamos começar com estas grandes formas. Eu vou selecionar isso, e eu vou escolher nossa cor azul aqui. Deixe-me mover estas cores quadro de arte aqui, deixe-me selecionar este e usando o conta-gotas, eu vou selecionar esta cor. Fantástico. Mas essa forma também tem uma sombra, então se você escolher esta camada azul, a que está sob nossa forma principal na lista de camadas, você pode modificar a cor da nossa sombra, assim como esta e diminuir a opacidade para 30%. Agora, para a próxima forma, vou usar verde. Certifique-se de manter o pedido igual, por exemplo, não use vermelho e coloque-o ao lado do nosso azul, porque as pessoas que sofrem de deficiências de visão de cor podem enfrentar dificuldades nesse caso. Para a próxima forma, eu vou usar verde, e deixe-me modificar a cor da sombra também. Vou selecionar verde e diminuir a opacidade para 30 por cento e para a próxima forma, vou usar este, amarelo. Eu já modifiquei o nome das camadas que você pode facilmente entender qual forma deve usar qual cor. Agora deixe-me modificar a cor das sombras e diminuir a opacidade para 30%. A próxima forma vai usar nossa cor vermelha, também a sombra precisa ser vermelha com uma opacidade de 30%, e por último, mas não menos importante, deixe-me usar nossa última cor e não precisamos ter uma sombra aqui. Parece muito bom, não é? Agora é hora de aplicar cores a essas camadas de texto. Aqui temos dois tons diferentes. Um é muito escuro, e estes dois são um pouco mais brilhantes. Eu vou selecionar esta camada e esta, e eu vou usar nossa cor neutra para eles exatamente assim. No entanto, para este, precisamos usar uma sombra mais escura, portanto, a sombra escura da nossa cor primária parece boa aqui. Você pode ver como é fácil aplicar cores ao nosso design quando já projetamos nosso projeto no modo escala de cinza? Mas e quanto a esses dados? Para esses círculos, precisamos usar as mesmas cores que usamos para nosso gráfico. Então este, que é o maior, vai ser azul. Eu vou selecionar este círculo e apenas usar este azul e esta linha vai usar o mesmo azul também. Para o segundo, que é a próxima grande despesa, vai ser amarelo, então eu vou usar este, o mesmo amarelo aqui. A próxima será verde, então eu vou selecionar essas duas formas ao mesmo tempo, e deixe-me escolher nossa cor verde. Este aqui, compras on-line vai ser vermelho, então eu vou selecionar vermelho, e por último, mas não menos importante, o grupo de outros precisa usar a nossa sombra mais escura, que é esta cor. Mas e quanto a essas camadas de textos? Para os títulos, por exemplo, aluguel, mantimentos, restaurantes, etc. Eu vou usar nossa cor primária escura, a que usamos para este valor, então deixe-me usar este. Para essas transações e esses valores, vou usar nossa cor neutra. Vou selecionar todos eles, manter pressionada a tecla Shift e clicar neles um por um e, finalmente, escolher nossa cor neutra. Eles estão fantásticos, não é? O último é o nosso CTA, o botão Download Statement. Para este, eu vou usar nossa cor de acento, que é este, e também para a sombra, eu vou usar a mesma cor, no entanto, com uma opacidade de 32 por cento. - Legal. Uma coisa que nos esquecemos de mudar é o fundo desta página. Então deixe-me selecionar o quadro de arte, e apenas modificar a cor de fundo para a nossa cor azul neutra. Você pode ver como essas páginas são lindas? Espero que goste. Agora deixe-me ir em frente e visualizá-los um por um. Aqui está a nossa primeira página de login, esta é a segunda página de login com esses estados de erro. Este tem um ícone de aviso com nossas cores semânticas, e aqui usamos nosso esquema de cores monocromático para os cartões de crédito e todos os outros elementos. último, mas não menos importante, para a tela de finanças, uma vez que tínhamos um gráfico categórico, usamos um esquema de cores categórico chamado para eles. Estamos quase terminando. A única coisa que precisamos fazer agora é validar nossas cores com base na taxa de contraste de cores. Deixe-me selecionar o título de sinal, por exemplo, e eu vou executar um plugin chamado contraste, o que usamos antes. Assim, como você pode ver, ele passou todos os testes de taxa de contraste para todos os níveis, o duplo A e triplo A níveis. E quanto a esta mensagem? Ele passou quase todos os testes, no entanto, ele falhou para o nível A triplo para o texto normal, mas é totalmente bom porque ele já passou o nível A. E esta, a nossa cor semântica? Como você pode ver, ele falhou para o texto normal, entanto, se você olhar para a taxa de contraste, que é 3, 1:1, você pode ver que não é tão baixo e é aceitável usar esta cor para esta camada de texto, por quê? Porque para esta camada de texto, usamos um peso semi negrito. Se eu mudá-lo para normal, agora, não é aceitável, mas para texto semi negrito ou negrito, esta cor é aceitável, desde que a taxa de contraste não seja inferior a 3. 1:1. E quanto a este? Ele também passar no teste necessário, e este aqui, fantástico. Mas e que tal aqui? Para o título já verificamos isso. Deixe-me selecionar as camadas de texto nestes cartões. Como você pode ver, passou em todos os testes. Que tal aqui, a cor do sotaque contra esta cor neutra? Ele passou todos os testes, e também nossa cor neutra maçante contra nossa cor neutra clara, novamente passou todo o teste. Deixe-me verificar o contraste destes textos também, eu vou executar o plugin mais uma vez. Como você pode ver, passou em todos os testes. Não vamos validar outras cores, por exemplo, estas porque já as verificamos. Tudo bem, pessoal. Isso é tudo para este vídeo, espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 33. O que fazer a seguir?: Tudo bem pessoal, isso é tudo para este curso. Eu realmente espero que você tenha gostado e aprendido habilidades úteis para sua jornada de design. Agora é sua vez de praticar o que aprendeu e se tornar um designer melhor. Eu adoraria ouvir seus comentários sobre este curso para torná-lo cada vez melhor para você. Se você quiser ser notificado sobre uma atualização de curso ou meus novos cursos, você também pode me seguir no Skillshare. Se você quer se tornar um designer de UI UX e não sabe por onde começar, confira meu curso Figma sobre Skillshare, onde ensinarei tudo o que você precisa saber para se tornar uma UI Designer de UX. Se você quiser saber mais sobre design de UI UX e aprimorar suas habilidades de design. Tenho boas notícias para você. Eu tenho um canal no YouTube onde eu posto toneladas de coisas gratuitas que você pode achar interessante. Portanto, certifique-se de se inscrever no meu canal para não perder meus próximos tutoriais. Por último, mas não menos importante, gostaria de agradecer por assistir a este curso e mal posso esperar para ver suas paletas de cores e obras de arte. Te vejo e tchau.