Teoria de cores de design de UI: crie paletas de cores acessíveis e impactantes no Figma e Adobe XD

1. Apresentação: Passe horas ajustando as cores apenas para obter uma paleta que ainda parece estranha Oi. Sou Ruben Suspez, principal designer de produto da Del Technologies e parceiro da Adobe 20 anos em design me ensinaram uma verdade. A cor faz ou destrói um produto. Qualquer teoria da cor branca, crie paletas acessíveis no Figma e no Adobe XD Você evitará a confusão e aprenderá um fluxo de trabalho repetível. Escolha uma tonalidade base, expanda-a para cores primárias, secundárias e de destaque. Em seguida, teste tudo em relação ao contraste WCAG em segundos. Vamos praticar ao vivo juntos, criando uma paleta e aplicando-a em títulos, botões, planos de fundo e no modo escuro Você verá por que pequenos ajustes na saturação e na temperatura podem guiar o olho para aumentar a usabilidade Você dominará gradientes, sobreposições de paradas e integração com a marca Em seguida, aborde uma pedra angular, redesenhe duas telas de qualquer aplicativo ou site com sua nova paleta Publique, receba meu feedback e suba de nível rapidamente. Quais ferramentas vamos usar? Depende de você. Você pode usar Figma ou Adobxt E como bônus, você receberá gratuitamente meu e-book de 100 páginas mais vendido, Conquering y Design. Então, você está pronto para começar a adivinhar e começar a projetar com confiança, sucesso e, em menos de uma tarde, enviará paletas de cores com ótima aparência e que também funcionarão para todos. Nos vemos na aula. Vamos fazer da cor sua arma secreta. 2. Noções básicas de teoria de cores: Olá e bem-vindo a esta lição sobre teoria das cores. A cor é um elemento essencial do design e entender como ela funciona é crucial para criar interfaces eficazes e visualmente atraentes. Nesta lição, abordaremos os fundamentos da teoria das cores, incluindo a roda de cores, cores primárias, secundárias e terciárias e o papel da tonalidade, saturação e valor. Primeiro, vamos falar sobre a roda de cores. A roda de cores é uma representação visual das cores do espectro dispostas em um círculo. É uma ferramenta útil para entender como as cores se relacionam entre si e para criar esquemas de cores. As cores primárias são vermelho, amarelo e azul. Essas cores não podem ser criadas misturando outras cores e elas formam a base de todas as outras cores na roda de cores. As cores secundárias são criadas pela mistura de duas cores primárias. Eles incluem laranja feito de vermelho e amarelo. Verde feito de azul e amarelo e roxo feito de azul e vermelho. As cores terciárias são criadas misturando uma cor primária e uma cor secundária. Eles incluem cores como amarelo, verde, vermelho, roxo e azul verde. Agora, vamos falar sobre matiz, saturação e valor. Matiz se refere à cor em si, como vermelho, azul ou amarelo. A saturação se refere à intensidade ou pureza da cor. Com cores mais saturadas parecendo mais vibrantes e cores menos saturadas parecendo mais suaves. valor se refere à claridade ou escuridão de uma cor. Quanto mais claras as cores parecerem mais claras, escuras as cores parecerão mais suaves. Ao entender esses conceitos básicos da teoria das cores, você terá uma base sólida para trabalhar com cores em seus projetos de design de interface de usuário. Na próxima lição, exploraremos os diferentes métodos de seleção de paletas de cores. Obrigado por assistir. 3. Como escolher uma paleta de cores: Nesta lição, exploraremos diferentes métodos para escolher uma paleta de cores para sua interface. Selecionar a paleta de cores certa é muito importante porque pode ter um grande impacto na aparência geral do seu design. Há várias abordagens diferentes que você pode adotar ao escolher uma paleta de cores. Vamos começar examinando os esquemas monocromáticos. Uma paleta monocromática é composta por diferentes tonalidades e tonalidades de uma única cor. Isso pode criar uma aparência coesa e harmoniosa, mas também pode parecer limitado se usado sozinho. Um esquema de cores análogo é composto por cores próximas umas das outras na roda de cores, como azul, azul, verde e verde. Eles podem criar uma aparência harmoniosa e coesa, mas também podem parecer seguros e desinteressantes se não forem usados de forma criativa. Um esquema de cores complementar é composto por cores opostas uma à outra na roda de cores, como azul e laranja. Isso cria uma aparência de alto contraste que pode ser muito impressionante. Mas ele também pode se sentir Jainista se não for usado com cuidado. Um esquema de cores triádico é composto três cores igualmente espaçadas ao redor da roda de cores, como vermelho, amarelo e azul. Isso cria um equilíbrio na aparência harmoniosa, mas ele também pode se sentir muito vibrante e caótico, se não for usado com moderação. Ao escolher uma paleta de cores, é importante considerar a finalidade da interface, o público-alvo e a estética geral do design. Você também deve prestar atenção à acessibilidade das cores e garantir que seu paladar seja legível e acessível a todos os usuários. Na próxima lição, exploraremos como as cores podem ser usadas para criar hierarquia e ênfase no design da interface do usuário. Obrigado por assistir. 4. Usando cor para criar hierarquia e ênfase: Nesta lição, exploraremos como as cores podem ser usadas para criar hierarquia. E ênfase no design da interface do usuário. Hierarquia se refere à importância relativa de diferentes elementos em uma página ou tela. E a ênfase é usada para chamar a atenção para um elemento específico. Uma técnica para criar hierarquia e ênfase é o contraste de cores. Ao usar cores com alto contraste, você pode fazer com que certos elementos se destaquem e chamem a atenção. Por exemplo, usar uma cor clara contra um fundo escuro pode criar uma aparência de alto contraste que chama a atenção. Saturação. É outra ferramenta que você pode usar para criar ênfase. Cores mais saturadas tendem a ser mais atraentes do que cores menos saturadas. Usar cores altamente saturadas pode ajudar a chamar a atenção para elementos importantes. O tamanho é outro fator importante na criação de hierarquia e ênfase. Elementos maiores tendem a ser mais proeminentes e chamar mais atenção. Portanto, usar elementos maiores para destacar informações importantes pode ser eficaz. É importante usar essas técnicas com moderação e considerar o design geral, estética e a finalidade da interface. Muita ênfase pode ser avassaladora e usar muitas cores contrastantes pode ser chocante. Na próxima lição, discutiremos a importância da acessibilidade de cores no design da interface do usuário. Obrigado por assistir. 5. Acessibilidade de cores: Nesta lição, discutiremos a importância da acessibilidade de cores no design da interface do usuário. Garantir que sua interface seja acessível a todos os usuários é crucial. Isso inclui design para usuários com daltonismo e outras deficiências visuais. O daltonismo é uma condição que afeta cerca de 8% dos homens e 0,5% das mulheres. Isso pode dificultar a diferenciação entre certas cores. E existem vários tipos de daltonismo. O mais comum é o daltonismo vermelho-verde, o que pode dificultar a distinção entre essas duas cores. Para projetar para daltonismo, é importante considerar o contraste de cores e usar combinações de cores com alto contraste e fáceis de diferenciar. Por exemplo, usar azul e amarelo ou preto e branco pode criar uma aparência de alto contraste que é mais fácil para pessoas com daltonismo enxergar. Também é importante considerar outras deficiências visuais, como baixa visão ou sensibilidade a determinadas combinações de cores. Usando texto grande e claro. Evitar combinações de cores difíceis de ler pode ajudar a tornar sua interface mais acessível para todos os usuários. Na próxima lição, exploraremos o papel da cor na marca e como incorporar essas cores de marca em nosso design de interface de usuário. Obrigado por assistir. 6. O papel da cor no Branding: Nesta lição, exploraremos o papel da cor na marca e como incorporar essas cores de marca em seu design de interface de usuário. A cor é uma ferramenta poderosa para a marca e pode ajudar a criar uma forte identidade visual e uma conexão emocional com os clientes. Cores diferentes podem evocar diferentes emoções e associações. Portanto, é importante considerar a mensagem que você deseja transmitir ao selecionar as cores da marca. Depois de estabelecer as cores da sua marca, é importante usá-las forma consistente em todos os materiais de marketing, incluindo seu site ou aplicativo. Isso ajuda a criar uma aparência coesa e reforça a identidade da sua marca. Ao incorporar as cores da marca em seu design de interface, é importante considerar a estética geral e a finalidade da interface. Você vai querer usar essas cores de uma forma que aprimore a experiência do usuário e ofereça suporte ao design geral. Também é importante considerar a acessibilidade das cores e garantir que as cores da sua marca sejam legíveis e acessíveis para todos os usuários. Usar cores com alto contraste para evitar combinações de cores difíceis de ler pode ajudar a tornar sua interface mais acessível. Na próxima lição, abordaremos técnicas avançadas para trabalhar com cores no design de interface do usuário, como gradiente, mesclagem e camadas. Obrigado por assistir. 7. Técnicas de cores avançadas: Nesta lição, abordaremos técnicas avançadas para trabalhar com cores no design de interface do usuário. Essas técnicas podem adicionar profundidade e interesse às suas interfaces e ajudar a criar uma aparência mais coesa. Uma técnica avançada é usar gradiente. Um gradiente é uma transição suave entre duas ou mais cores. Ele pode ser usado para adicionar profundidade e interesse a elementos planos, como botões ou planos de fundo. gradientes podem ser criados usando uma ferramenta de gradiente ou usando várias camadas de cores e ajustando essa transparência. Misturando. É outra técnica avançada que pode ser usada para criar transições perfeitas entre cores usando modos de mesclagem Você pode criar uma variedade de efeitos, como sobrepor uma cor sobre a outra ou criar um efeito holandês colorido. Estabelecimento de camadas. É outra técnica que pode ser usada para criar profundidade e interesses em sua interface. Ao colocar diferentes elementos em camadas, você pode criar uma sensação de profundidade e criar uma hierarquia visual. Você também pode usar camadas para adicionar textura e interesses a elementos planos, como usar uma sobreposição de padrão sobre uma cor sólida. Essas técnicas avançadas podem ajudar a abcdef e interessar suas interfaces, mas é importante usá-las com moderação e considerar a estética geral e o propósito de sua interface. Na próxima lição, daremos uma olhada nos estudos de caso do uso efetivo e ineficaz de cores no design de interface do usuário. Obrigado por assistir. 8. Analise estudos de caso do mundo real: Analisaremos estudos de caso de uso efetivo e ineficaz de cores no design de interface Exemplos reais de lisina podem ajudar você a ver como diferentes opções de cores podem impactar a aparência geral de uma interface. Primeiro, vamos dar uma olhada em um exemplo do uso efetivo da cor. Site oficial da Bmws. A marca de automóveis usa uma paleta de cores harmoniosa que inclui tons de azul, grau escuro e por quê. Essas cores funcionam bem juntas e criam uma aparência coesa e convidativa. O site também usa cores forma eficaz para criar hierarquia e ênfases. Usando elementos maiores e mais saturados para chamar a atenção e guiar o usuário. site da Bmws emprega esse esquema de cores ou regra de cores 603010, com 60% da cor primária, branca, compreendendo o fundo, 30% da cor secundária. Ótimo, é utilizado como uma sobreposição de fotografias em textos. Enquanto dez por cento da cor de destaque. Azul, aparece em ícones, gráficos e botões. Agora, vamos dar uma olhada em um exemplo de uso ineficaz da cor. O design da página inicial da NYU apresenta alguns desafios para os usuários. O uso de uma única cor, roxa, para navegação, seção corporal e rodapé cria uma falta de contraste que dificulta a distinção entre diferentes áreas do site que podem ser confusas e dificultar a navegação. Além disso, o layout da grade da seção do corpo, que é composto principalmente por blocos com uma única cor de fundo sólida em alguns textos, dá a impressão de que a página não está totalmente carregada. Para resolver isso, incorporar mais imagens ou usar cores de fundo diferentes para os blogs pode ajudar a fornecer contextos para tornar a página mais atraente visualmente. Esses estudos de caso ilustram a importância de considerar cuidadosamente as cores ao projetar uma interface Uma paleta de cores coesa e harmoniosa pode aprimorar a experiência do usuário e criar uma aparência coesa. Embora um paladar caótico ou mal pensado possa ser opressor e confuso. Na próxima lição, vamos praticar juntos como selecionar uma paleta de cores e aplicá-la a um site de maquete. É hora de liberar nossa criatividade e experimentar diferentes combinações de cores que serão misturadas e combinadas até encontrarmos uma paleta de cores harmoniosa e equilibrada para dar vida ao nosso site de maquetes. Você está pronto para uma experiência prática? Então, tão divertido quanto educativo? Então, vamos começar a próxima lição. Te vejo lá. Obrigado por assistir. 9. Aplicando uma Paleta de cores: vamos praticar juntos: Ei, bem vindo de volta. Nesta lição, vamos praticar o que você aprendeu até agora. Falamos sobre os fundamentos da teoria das cores. Falamos sobre a seleção de uma paleta de cores. Falamos sobre acessibilidade de cores, o que é muito importante. Falamos sobre trabalhar com cores de marca e também sobre técnicas avançadas, como gradientes, modos de mesclagem e camadas. Então, nesta execução prática, vamos selecionar uma paleta de cores. Vamos selecionar uma paleta de cores inteira. E vamos aplicá-lo a esse site incrível que criei para vocês. É um site de móveis e eu o chamei. Deixe-me ampliar o conforto aconchegante. Então, vamos criar essa paleta de cores, fazer algumas pesquisas, fazer alguns testes de acessibilidade de cores. E então vamos aplicar essa paleta de cores. Quando estivermos satisfeitos com nossa paleta de cores, vamos aplicá-la a este site. Dessa forma, você meio que gosta de aprender como podemos aplicar cores em seus designs de interface de usuário. Neste exemplo, usaremos a regra 603010, que é 60% de tudo isso. E vou esclarecer isso porque algumas pessoas se confundem com essa regra 603010. O que isso significa é que 60% de todo o design de sua interface terá essa cor, aquela cor primária, que geralmente são cores suaves , como brancos e tons claros , ou mesmo cores acima de 30%, será sua cor secundária. E então os 10% serão como sua cor de destaque, que às vezes é a cor primária, dependendo da sua marca. Mas vamos usar essa regra e eu vou te mostrar como, como podemos fazer isso. Então, primeiro de tudo, já que estamos criando um site de móveis, precisamos ir em frente e procurar ideias. Quando falamos sobre cores. Temos que pensar significado da cor por trás disso. Nesse caso, não estamos usando as diretrizes de marca. Nós apenas gostamos de criar nossa própria paleta de cores. Então, quando você pensa na faculdade, precisa pensar no significado por trás dela, como vermelho, que significa paixão, energia e perigo. Por exemplo, roxo significa espiritualidade, singularidade, realeza. Amarelo, meio que significa felicidade, amizade e energia. Preto, que significa poder e sofisticado na morte e no mistério. Por que a impureza e a limpeza, simplicidade e todas essas coisas divertidas. Quando pensamos em um site para móveis, pensamos em limpeza. Pensamos em quão limpos eles devem parecer, quão elegantes devem parecer porque é isso, é isso que estamos procurando. É isso que buscamos. Então, quando selecionamos uma paleta de cores, você vai pensar em um produto. Você tem que pensar no de um usuário. Você tem que pensar, tipo, qual é a intenção por trás disso em cores desempenha um papel muito importante. Quando se trata de tudo isso, um mobiliário, site ou produto, você pensa em como deve ser limpo , em tons de terra. Pense nos marrons e pensamos na cor branca, ou pensamos em alguns amarelos , laranjas e verdes , dependendo de qual é a sua intenção por trás disso? Então, vamos prosseguir e começar a experimentar. E é por isso que eu criei isso aqui ao lado para fazer algumas explorações. E é isso que vamos fazer agora. Vamos seguir em frente e procurar alguma inspiração. Isso é uma coisa. Vamos acessar behance.net e, como na pesquisa, vamos digitar site de móveis, certo? E só podemos ver o que está lá fora e o que, você sabe, você sabe, temos algumas verduras aqui. Temos alguns, temos um fundo muito claro. Como a maioria deles é muito parecida com um fundo claro, o que é bom porque é isso que estamos procurando, veja isso. Isso é super simples. É disso que estou falando quando você pensa em cores. Branco, é predominante aqui porque reflete a simplicidade e é reflete a simplicidade e isso que você está tentando almejar. E acho que vamos fazer algo assim. O que eu vou fazer agora é apenas tirar uma captura de tela de tudo aqui. Então, dessa forma, temos algo. Vou puxar isso e deixá-lo aqui. A propósito, estou usando o Adobe XD, mas você pode usar qualquer ferramenta com a qual se sinta confortável, seja Figma ou Sketch ou Adobe XD, até mesmo o Photoshop. Se você usa o Photoshop para criar seu site, isso não importa. Portanto, temos aqui alguma inspiração da qual definitivamente podemos obter inspiração. Você vê essas cores. Isso é muito bom. Isso também é muito bom. Eu adoro essas cores. E eu vou te mostrar um truque muito simples. Para. Criação de uma paleta de cores rápida quando se trata de design. Tudo bem, então, além disso, Joe, torne isso um pouco menor. Basta colocar isso aqui, mas isso aqui, eu só tenho isso como referência. Não há nada de especial nisso. É só que, eu gosto muito desse. E eu vou te mostrar um truque sobre como criar uma paleta de cores rápida, se você quiser. Vamos seguir em frente e escolher a ferramenta retangular. Vou fazer um retângulo e depois escolher uma cor aleatória. E eu vou fazer provavelmente quatro cores. Então, vou manter pressionada a tecla Option no Mac, alt em um PC. Estou apenas duplicando isso. Então, eu posso ter quatro diferentes para quadrados de cores diferentes. Então eu posso escolher, escolher algumas dessas cores que eu gosto. Eu gosto disso aqui. Então, o que eu vou fazer é apertar o conta-gotas. E eu vou começar a escolher algumas dessas cores como essa, por exemplo, eu gosto dessa. Vamos ver, esse. Também está lá. Então, provavelmente, como esse cinza claro e talvez eu possa, vou trocá-los agora e depois escolher este e colocá-lo aqui. É meio que uma maneira de escolher uma paleta de cores bem rápido. Claro que você tem que explorar e experimentar e , tipo, se quisesse tornar isso um pouco mais leve, basta entrar aqui e deixá-lo um pouco mais leve. Puxando isso para cima. Digamos que, por exemplo, se você gosta deste, por exemplo, faremos a mesma coisa. Vamos, vamos duplicar essa paleta de cores pressionando Alt. E então eu meio que gosto dessas cores juntas. Então, vou começar com a cor da luz primeiro. Veja como é leve. E a partir daí, vou me mudar para o sofá aqui. Talvez essa cor seja meio bonita. Isso é bom. É meio que tem aquele tom terroso que estamos procurando. Então provavelmente vamos desenhar esse aqui. E finalmente, provavelmente o verde, provavelmente algo parecido com esse. Veja como isso parece legal. Já criamos uma paleta de cores, duas paletas de cores diferentes apenas a partir de imagens, certo? E então o que eu sugiro que você faça é brincar com essas cores. Se você quiser fazer algo totalmente diferente, por exemplo, se quiser tornar isso um pouco mais ecológico e ter muito mais força. E você pode simplesmente deixá-lo no chão, talvez algo parecido com isso. Talvez você queira um mais verde, talvez esse você queira que seja super leve. Então você pode ir em frente e torná-lo um pouco mais leve. Adoro esse tom terroso, esse marrom e esse cinza claro é ótimo. É assim que você pode criar uma paleta de cores simples e direta. Agora, vou mostrar outra maneira de usar seus sites incríveis que podem ajudá-lo a criar e gerar paletas Carlo. O que eu mais gostei, eu diria, é o Adobe Color. E você pode ir até color.adobe.com, barra para frente, criar barra, roda de cores. E aqui você pode experimentar e fazer como Analog Monocromatic. Já falamos sobre isso nas lições anteriores. Mas o que vamos fazer é entrar na seção de exploração. E então o que vamos fazer aqui é digitar o que estamos projetando para ela, que é uma empresa de móveis. Então, vamos fazer móveis. Pressione Enter e, em seguida , veremos muitas opções diferentes. Como falamos sobre. Há muitos tons marrons e terrosos, mas falamos sobre alguns verdes também, o que é incrível. E a melhor coisa sobre o Adobe Color é que você pode realmente adicionar essas paletas de cores. Digamos que, por exemplo , se você gosta desta , queira adicioná-la à sua biblioteca. Você pode adicioná-lo à sua biblioteca de cores. Obviamente, você precisa ter sua conta da Adobe configurada para isso. E então, quando você entra em suas bibliotecas, pode encontrar essas cores já pode encontrar essas cores em sua biblioteca, o que é incrível. E você pode usá-lo em várias plataformas na Adobe, várias plataformas na Adobe como você pode fazer: Express, Photoshop, Illustrator, InDesign, qualquer que seja a plataforma em que você esteja projetando. Então você pode ver que há tantos Browns. Esse é o que mais parece predominante, como se eu realmente gostasse desse. Isso é muito bom. Então, vamos escolher um. Só que esse parece meio bom. Você também pode baixar, fazer uma captura de ou simplesmente baixar o JPEG. E depois de baixar o JPEG, vamos mostrar no Finder. Eu vou voltar para nossa exploração e simplesmente deixá-la aqui. Veja o que esse programa faz por você. Ele fornece o código hexadecimal com tudo nele. E você também pode provar essas cores usando o conta-gotas, se quiser. Então eu vou colocar isso aqui, algo como ali. E então, o que eu vou fazer, na verdade, é trazer isso à tona e começar a explorar diferentes opções para nossa paleta de cores aqui. Então, o que eu sou, o que eu gosto de fazer é colocar um pouco de verde lá de alguma forma, talvez esse tipo de verde. Então eu vou escolher uma dessas cores e ir em frente e escolher esse verde. Eu vou ter, na verdade, gosto dessa cor que escolhemos aqui, que é meio bonita. Então, o que eu vou fazer é parar com isso. Vou simplesmente copiar essa cor lá. E então precisamos adicionar algumas dessas cores, como a cor clara, talvez essas, essas cores creme que temos lá. E então queríamos adicionar mais cores. Definitivamente, podemos fazer isso. K. Então essa pode ser nossa cor primária, mas a cor primária para a marca, mas não necessariamente para nossa página. Então, digamos que este, eu quero uma versão mais leve desse, então provavelmente ele faz algo assim. Talvez para este eu faça uma versão mais escura. Talvez eu vá para as verduras e goste de descer um pouquinho. Talvez por aí, como em volta do cabelo, talvez. E, para este, também usaremos superleves, se precisarmos. Tudo bem, o problema é isso é bom o suficiente. E então temos, ótimo. Vamos ver. Podemos ficar ainda mais neutros com essa cor. Perfeito. Acho que estou feliz com essa paleta de cores. E o que eu vou fazer é, na verdade, pegar todas essas cores e adicioná-las aos meus estilos aqui para que eu possa usá-las imediatamente. Então, vou simplesmente clicar em Mais. Isso vai somar todos eles. Agora eu acho que é hora de começar a adicionar algumas cores e alguns gráficos aqui. Dessa forma, podemos aplicar essa paleta de cores em nosso novo site de móveis. Uma coisa que eu queria mencionar é acessibilidade a cores é muito, muito importante. E eu vou te mostrar um truque rápido e como testar suas cores. Digamos, por exemplo que temos essa cor e queremos testá-la contra o fundo branco. Então, o que você vai fazer é simplesmente copiar essa cor. Vamos copiar essa cor. Vamos acessar nosso site e entrar aqui, que são os recursos de corte do webaim.org para seu último verificador de contraste. E vamos comparar nossa cor de fundo, que é branca. E então vamos colocar nossa nova cor, que é o marrom. E vamos testar isso. E isso é o que eu meio que forneço a você é dizer que textos normais como esse passam pela acessibilidade do WA WA. Isso é o que ele fará, fornecerá se suas tags em seus elementos gráficos passam pela acessibilidade. E podemos ver aqui que o Double, o Double é passado, mas o AAA não passa porque não há contraste suficiente para isso. Mas se você quiser deixá-lo um pouco mais escuro, você pode ir em frente e fazer isso até conseguir o passe. Se isso é algo que exige que você faça, é muito importante que você teste o contraste de cores de todas as suas cores. Porque é muito importante para a acessibilidade. Você quer ter certeza de que é um designer universal e oferece acessibilidade para pessoas com deficiência visual. E você vai garantir que todas as suas cores funcionem. E às vezes há algumas desvantagens, é claro. Mas, como você pode ver, nossa cor na maioria das vezes passa. E até mesmo os elementos gráficos do objeto como botões e coisas assim. Eles passam, o que é bom. E eles até passam por alguns dos textos. Então, isso é muito bom. Portanto, certifique-se de entender a acessibilidade de cores. Falamos sobre isso nas lições anteriores, onde falamos sobre a importância da acessibilidade. E como você pode trabalhar com contraste de cores e trabalhar com outras técnicas avançadas para garantir que você tenha tudo pronto quando se trata de criar um site, criar para um aplicativo móvel ou criar um software ou aplicativo web. Então, vamos voltar ao nosso design e começar a experimentar uma adenina, algumas dessas cores, para garantir que todas funcionem. Tudo bem, então, primeiro de tudo, temos um fundo branco aqui, um fim de semana, fazemos algo louco desde o início. E vamos começar adicionando, tipo, obtemos essa cor, por exemplo , desculpe, vamos voltar novamente. Eu selecionei a pasta errada. Então, vamos clicar no plano de fundo real. E então vamos arrastar essa cor se quisermos. Uma coisa é fazer isso. Podemos deixá-lo um pouco mais escuro se você quiser. Se quiséssemos ter certeza de que todas as cores funcionam. Mas já que estamos fazendo isso, acho que precisamos trazer algumas fotos aqui. Então, vou seguir em frente e entrar no Photoshop. Eu já recortei essa cadeira incrível. Então, vou pegar isso. Quando eu copiar isso, vou voltar para aqui. Vou colar isso. E eu vou brincar e colocar essa aqui. Vemos como a cor está entrando. Não me sinto muito confiante com essa cor no momento porque acho que o contraste está um pouco baixo demais. Mas o que eu vou fazer é ir em frente e selecionar essa cor, que já temos aqui. E então temos alguns impostos e outras coisas que precisamos transferir ou usar um código de cor diferente para isso. O que eu vou fazer é usar o conta-gotas. E então eu vou escolher esse tipo de que o verde fará a mesma coisa aqui, talvez. Também para a navegação, podemos escolher aquele provavelmente verde escuro. Dessa forma, temos mais contraste. E então aqui talvez adicionemos um pouco de cinza escuro. Talvez possamos ir em frente e ter algo parecido com algo violento lá. Ok. Eu vejo, eu entendo. Talvez para os textos. Talvez eu não goste disso. O cinza. Desculpe. Eu não gosto do verde para os textos. Talvez eu possa adicionar uma nova cor para o texto. E então o que eu vou fazer é provavelmente escolher essa cor, talvez. Vamos ver se isso funciona. Ok, vou adicioná-lo à minha paleta aqui. E vou editar essa cor porque ainda não gosto da aparência. Muito escuro. Talvez. Então talvez ele não seja casado. Vá um pouco melhor assim. Apenas certifique-se de testar isso contra branco ou qualquer outra cor. Se você tiver um plano de fundo e um teste de uso do disco, defina que ele passe nos testes de acessibilidade. Ok, acho que estou feliz com isso. Então, vamos ver como fica no TX. Ok. Tudo bem, não é ruim. Talvez eu queira adicionar um pouco mais de preenchimento. K, isso está funcionando. Acho que vou acrescentar, vou fazer, vou adicionar algo nisso atrás dessa cadeira. E eu vou seguir em frente e provavelmente usar uma dessas cores. Dissemos que vamos fazer isso 603010. Então é isso que eu vou fazer. Talvez esteja muito escuro, mas podemos deixá-lo um pouco mais claro. Essa cor está aqui. Então, vamos editar essa cor e vamos deixá-la um pouco mais clara, só um pouquinho mais ou menos ali. Veja como isso mudou aqui, para que tenhamos mais contraste. Isso é muito, muito importante. Então, tudo bem, eu gosto disso. Então, vamos adicionar algumas coisas. Não sei, talvez alguns gráficos na parte de trás para torná-lo mais dinâmico. Vou usar essa cor. Talvez. Vou apenas trazê-lo de volta, provavelmente apenas diminuí a opacidade. Não quero que seja demais. Talvez algo em torno das pessoas que estão por aí. Isso é ótimo. Vamos apenas adicionar um botão aqui para que tenhamos alguma cor de destaque. Então, vamos seguir em frente e escolher a ferramenta retangular. É disso que estou falando quando dizemos que tem uma cor de destaque lá. Ou podemos escolher essa cor que é boa, ou podemos escolher essa cor para obter mais contraste. Esse é meio legal. Então, vamos testar este em. Vamos testar isso no verificador de contraste de cores. Vou seguir em frente e digamos que temos um plano de fundo dessa cor, e então os textos significam branco, 123456. Vamos testá-lo e veremos que ele passa em tudo, o que é bom. Não é aprovação do AAA. Mas o que você pode fazer é torná-lo um pouco mais escuro, se quiser. Você pode ir em frente e empurrá-lo para a esquerda até acertar, até conseguir aquele passe. Relação de contraste, que é sete, o que é bom. Mas às vezes não é. Temos algumas restrições e você tem algumas compensações, e tudo bem. Você pode ir em frente e , por isso, vamos continuar assim. Essa cor é nossa cor de destaque. E então nós podemos, eu não sei, talvez só por isso, digamos compre agora ou algo parecido. Não importa neste momento, provavelmente vamos tornar isso ousado. E vamos ver. K, vamos para o centro, isso é um pouco maior. Talvez possamos tornar isso um pouco menor. Então, dessa forma, não é isso na sua cara. Mais ou menos como lá. E então vamos apenas agrupar isso e colocá-lo aqui. Então, temos isso como nossa cor de destaque, o que é meio legal. Em seguida, vamos passar para a próxima seção, que é nossa filosofia. Vamos seguir em frente e, na verdade, usar essa é a cor que escolhemos em quatro cores para nossos textos, mas acho que para nossos títulos podemos usar a mesma cor. Então, vamos fazer isso. faremos isso para dar as boas-vindas. Perfeito. Então lembre-se, nós vamos fazer isso. Eu vou fazer isso 603010. Então, o que eu vou fazer é escolher esse que é o 60. Vou colocá-lo aqui nas laterais. Então, do jeito que você vê, nós temos esses 60. Então nós vamos, nós vamos pegar aquele que é o que é o 30%. E então vamos pegar esse que é o dez, que é a cor de destaque. E então vamos torná-lo menor. Então é isso que estamos fazendo. Para que você veja um pouco melhor. Vou colocá-lo aqui. Então, isso é o que fazemos em 60% de todo o nosso design. Será essa cor clara e super clara. Então 30%, que serão compostos por nossos provavelmente nossos textos, talvez em alguns gráficos ou outras coisas, serão com esse cinza escuro. E depois a cor de destaque. São 10%, o que provavelmente serão nossos títulos em alguns elementos gráficos como botões e coisas assim. Então você meio que gostaria de ter uma ideia de onde vamos com isso. Então, vamos continuar criando essas coisas divertidas para esses ícones. O que poderíamos fazer, bem, pelo texto. Em primeiro lugar, vamos colocar isso em maiúsculas. E então, para o imposto, eu, eu vou usar essa cor que é nossa secundária. Você pode renomear isso. Dessa forma, você pode, você sabe, como se essa fosse minha secundária ou essa fosse minha primária, essas são minhas cores terciárias como você pode chamá-las do que quiser. Então, vamos seguir em frente e realmente adicionar um pouco de cor a esses ícones. Então, esses ícones, esse, podemos fazer as 30, quero dizer, as cores de destaque. Então, vamos fazer isso verde. Vamos fazer a mesma coisa com este e com este também. Dessa forma, vemos alguma implementação, nossa, dos nossos 30%, que é o cinza escuro, e depois nossa cor de destaque, que é esse verde. Isso está parecendo muito bom. Eu acho que é bom. Tudo bem, para esses serviços, eu quero fazer algo realmente dramático e fazer algo totalmente diferente e usar algo como provavelmente super escuro, talvez algo assim seja incrível. Talvez quiséssemos trazer um pouco disso. Algumas dessas cores bronzeadas claras, como aquela cor creme, de alguma forma aqui. Então, para isso, provavelmente vou usar este. Eu vou fazer a mesma coisa com este. E para este. Podemos usar a luz verde que criamos, mas não é necessária. Então, vamos transformá-lo, transformá-lo novamente em branco. E eu vou apenas, para os ícones, provavelmente usar nossa cor de destaque. E então, para esses, vamos usar nossa próxima cor, que é aquela ativada. E então, para esses bad boys, não há contraste suficiente, como você pode ver aqui. Então, vamos tentar algo aqui. Tudo gira em torno do nosso experimento, certo? Então, temos essa cor e nossa paleta de cores podemos usar, mas você pode ver que ela não é boa o suficiente. Não há contraste suficiente. É difícil de ver. Se voltarmos e vermos isso. É muito difícil de ver. Como se você mal conseguisse ver. Nós não queremos isso. Quero ter certeza, como se tivéssemos contraste suficiente. Isso é muito ruim. Se testarmos isso. Não vai passar. E eu posso te mostrar agora, bem rápido. Então eu vou pegar essa cor. Vou entrar no meu testador de cores e colocar a cor de fundo, que é aquela. Então eu vou pegar a cor da fonte, que é essa cópia. Vou colocá-lo em primeiro plano. Você vê tudo. Ele falha porque você não consegue ler isso. Para que você possa ler isso, você também precisa ter um alto contraste. Então, o que vamos fazer é, por exemplo aumentar isso como nossa cor de fundo. Você vê como ele muda, certo? Então, o que estamos tentando fazer aqui, sempre haverá restrições e compensações. Então, o que vamos fazer aqui é tentar torná-lo mais escuro, como este provavelmente, aquele provavelmente passa. Tudo depende. Se quisermos testar isso, vamos fazer isso de novo. Bem rápido. Vou copiar essa cor. Vou colá-lo aqui. Então essa cor, acho que vamos mudá-la. Então, vamos voltar. Então, não estamos trapaceando. Eu não acho que ele vai passar até o fim. É por isso que você precisa testar a acessibilidade de cores. Ele passa pelo primeiro. Ela é boa. Alguns gráficos, elementos gráficos como aquele , estão flutuando lá dentro e, por impostos, estão passando. Então, estamos bem se você precisar passar porque é necessário para seu site, passar 33 A, então você precisa fazer com que os contratos funcionem para isso. Por enquanto, vamos deixar como está agora. E faremos com esses dois ícones. O que eu gostaria de fazer é provavelmente trazer um pouco desse marrom para lá só para ver como fica. Eu meio que gosto de não gostar porque é meio que demais. Então, ou eu vou, vamos ver. Para usar o mesmo. Nós poderíamos, se quiséssemos. O único problema aqui é que talvez eu tenha que fazer este e este um pouco mais leves. Dessa forma, temos mais contraste, contraste suficiente. Então veja isso. Então, nós temos alguma, você sabe, alguma diferença entre esses dois e esses dois. Mas eu quero mais. Eu quero mais. Talvez eu vá em frente e faça isso de novo. Talvez. Talvez eu não saiba, talvez eu possa usar este tão bem quanto este. É por isso que é muito importante experimentar. Porque quando você experimenta, você pode ver o que funciona e o que não funciona. No momento, provavelmente essas duas cores não funcionam. Mas isso é mais do que isso. E então isso é exatamente o que é mais importante, o imposto e o ícone real. Então, se você tiver contraste suficiente aqui, isso é bom o suficiente. Então, vamos deixar isso lá fora agora. Provavelmente precisamos de algum plano de fundo, alguma textura ou algo que esteja por trás disso. Dessa forma, temos alguma dinâmica acontecendo em segundo plano. Mas vamos deixar as coisas assim agora. Em seguida, vamos para a próxima seção, que é nossa coleção. Talvez tenhamos vindo desse supervisor. Seção escura, talvez agora essa precise ser mais clara. Então, vamos usar nossa cor de destaque. E então vamos usar a cor do nosso texto. Então, para esta seção, provavelmente usaremos isso de uma forma muito mais leve. Vamos seguir em frente e torná-lo super mais leve. Talvez. Provavelmente vou seguir em frente e fazer algo assim. E eu acho que isso não está perfeitamente centrado. Então, eu vou seguir em frente. Vou tirar esses dois da pasta. E eu vou para o centro, isso está perfeitamente centralizado. Ok? Meus olhos estão me enganando. Agora mesmo. 36, vamos fazer 42, talvez um pouco mais de espaço. Acho que precisamos de algumas, algumas outras imagens aqui. Talvez nós, talvez tenhamos deixado de alinhar isso. Talvez façamos isso. Talvez possamos ir em frente e fazer, e trazer alguns móveis aqui. Então, vamos entrar em unsplash.com e procurar por algo mais limpo. Vamos escolher um que, você sabe, vamos escolher este. Já que estamos lidando com esse tipo de verde. Vá em frente para o Photoshop. Vamos simplesmente colar essa mobília nova. E eu vou fazer algo bem rápido. Vou duplicá-lo, entrar no assunto selecionado. Ele vai selecionar um assunto. Vejo que há alguma loucura acontecendo aqui. Então, vamos limpar isso bem rápido. Então, vou simplesmente remover esta seção aqui. Ok, eu acho que isso é bom. Talvez movamos esta seção para talvez torná-la plana. cana também é boa. Vamos ver, temos alguns outros aqui que precisamos mover. Ok? Ok. Acho que temos uma seleção muito boa. Está faltando alguma coisa aqui no meio. Então, vamos usar o mágico e incluí-lo lá. Opa, espere um pouco. Aí está. E estamos perdendo essa parte aqui. Então, eu vou seguir em frente e esperar. Vou usar a ferramenta de laço. Vai ser muito mais rápido. Se eu fizer isso. Eu vou apenas selecionar aqui, ir em frente e selecionar esta, e então eu vou selecionar a máscara. Vamos ver se está tudo bem, isso é bom. Eu gosto de fazer é brincar um pouco com isso. Estamos no Photoshop agora, apenas obtendo algumas imagens para nossas coisas. Vamos seguir em frente. E eu não gosto dessa parte, então vou simplesmente remover essa parte da foto real. Eu não gosto dessa parte aqui. Então, vou em frente e remover essa parte. Tenha paciência comigo. Vou simplesmente deletar isso de lá. Não importa. Tudo bem, então eu vou copiar isso. Vou trazê-lo para o XD. Vou colá-lo aqui. Opa, acho que colou tudo. Espere 1 s. Quando eu removo isso e volto para o Photoshop, acho que é muito grande. Provavelmente. Vamos ver. É muito grande. Então, provavelmente vou redimensionar tudo isso nos anos 2000. Vou selecionar tudo. E eu vou colar isso aqui. Aí está. Oh, aí está. E olha essa cor. Essa é uma ótima combinação vinda daqui com a mesma cor. E depois vindo para cá. Perfeito. Isso funcionou muito bem. Então, eu vou tornar isso um pouco maior, talvez e talvez como por aí. Talvez eu vá em frente e faça isso lá. Excelente. Gostei muito até agora, perfeitamente no centro. Então, a partir daqui, entraremos em contato conosco. Eu ainda estou em dúvida com essas cores. Não estou gostando dessas cores novamente, dessa cor. Talvez possamos fazer algo a respeito, mas vamos cuidar disso daqui a pouco. Portanto, a última seção agora é a Fale conosco. Então, o que vamos fazer é realmente selecionar Vamos entrar em nossos estilos de cores e selecionaremos nossa cor e, em seguida, nossa cor de texto. E então, para esses botões e outras coisas, estamos usando essa mesma cor de destaque. Então, vamos seguir em frente e fazer todas essas seções. Eles têm uma linha externa para o TextField. Então, vamos escolher nossa cor de destaque. E então, para os textos, lembre-se de que temos os 30%, que é esse imposto de cores. Então, vamos garantir que tenhamos isso lá. Talvez este seja o córtex, mas esse é na verdade nossa cor de destaque. Ok, perfeito. Ok, eu acho que isso funciona muito bem. Talvez para este sofá, precisemos ter algum tipo de sombra, talvez por trás dele. Então eu vou seguir em frente e fazer essa sombra. Agora mesmo. Então essa sombra provavelmente será nossa cor de destaque. Com certeza. Traga isso de volta. E vamos desfocar algo assim por aí. E então vamos simplesmente diminuir a opacidade, como muito, muito, muito, muito, muito, muito atrás. Ou você usa apenas um pouco de sombra. Então, temos alguma sombra lá dentro. Perfeito. Então, lembre-se de como começamos e meio que implementamos, começamos a implementar nossa paleta de cores 603010, muito bem balanceada. Nós temos alguns. Nossa cor de destaque é esse verde, esse verde oliva. Temos cerca de 30%, o que é como cobrir os 30% de todo o nosso design , ou seja, basicamente, o estamos usando no TX. Usamos em nossa cor de destaque. E então estamos usando algumas outras cores que suportam essa paleta de cores, que é esse creme super leve, tipo dez, estamos usando aqui também. Você precisa garantir que, ao usar cores, o pneu, todos os campos de design sejam coesos e se sintam bem. Você tem que experimentar, é claro, como eu disse, eu não sou um grande fã desse. Por exemplo, e eu vou simplesmente duplicar todo esse layout e experimentar. Porque você precisa experimentar. Talvez não precisemos usar essa cor. Ou talvez o façamos porque eu gosto desta seção entrando nesta seção, o que é meio bom. É como aqui, essas cores não estão funcionando para mim. Então, vamos tentar algo diferente aqui. Vamos ver o que isso fará se fizermos algo como se fizermos algo como duplicarmos esse plano de fundo? É disso que estou falando quando se trata de explorar. E eu vou duplicar esse plano de fundo. Vou usar essa que vou fazer é na verdade escolher outra cor, talvez daqui. Talvez eu vá até lá e escolha essa cor só para testar as coisas. Basta testá-lo para enviá-lo, só para ver o que funciona. Faça isso, podemos até deixá-lo um pouco mais escuro, se você quiser. se quiséssemos torná-la mais escura, como esta seção, isso poderia funcionar. É claro que temos mais informações, mas quando fazemos combinações de cores, garantimos que as cores funcionem. E isso é o que eu vou fazer. Eu vou apenas fazer isso mais ou menos assim. Talvez, talvez, talvez, eu não sei, estamos apenas testando as coisas. De novo. Experimentar é a chave. E se usarmos essa cor de destaque aqui? Só para testar as coisas. Tudo bem, talvez possamos mudar isso de volta para branco, talvez. Dessa forma, temos mais contraste. E talvez os ícones também. Quero dizer, agora eles passam porque são elementos gráficos. Mas vamos ficar com o branco, para que tenhamos mais contraste. Tudo bem, então veja isso, não é nada ruim. Eu diria que isso é muito próximo do imposto. Talvez para os textos, talvez não precisemos de toda essa cópia. Talvez possamos nos livrar de alguns e também tornar o texto um pouco menor. Talvez por aí. Talvez precisemos, talvez precisemos de um botão. Então, vamos duplicar esse botão. E então esse botão vamos inverter. O fundo provavelmente será branco. E então o texto dentro do botão provavelmente será nossa cor de destaque, que é essa. E então provavelmente vamos mudar isso para Eu não sei. Eu não sei. Estou recebendo contato com algo parecido por aí. Perfeito. Podemos mover isso de um lado para o outro. O acolchoamento é muito importante, portanto, certifique-se de ter preenchimento suficiente. Então você pega seus três elementos. Aqui, 12312 Em três. Simplesmente perfeitamente centralizado. Isso, talvez isso funcione, talvez não funcione para mim, está funcionando agora. Novamente, você precisa experimentar e garantir que as combinações de cores que você usa funcionem. No momento, parece que não é grande coisa. Mas essas duas cores não estão funcionando nem um pouco porque não há contraste suficiente elas não funcionam juntas. Mas aqui, é claro, estamos adicionando uma versão mais escura dessa cor. E então você tem mais contraste e há mais harmonia. Quando aqui, não há harmonia suficiente. E é disso que estou falando quando se trata de criar harmonia entre cores e também trabalhar com cores. Na mesma hora. Então, por causa deste exemplo, vou simplesmente duplicar isso novamente. Ou mesmo como aqui, eu não preciso duplicar. Vamos fazer algo totalmente diferente aqui no topo só para, você sabe, fazer algo divertido com isso. Em vez de usar essa cor cinza claro, vamos usar essa cor bronzeada clara. Vamos usar essa cor clara, essa cor bronzeada, mas vamos deixá-la mais clara, como uma superleve. Então, vá em frente e vamos fazer essa superleve como aquela , pois temos contraste suficiente, como lá. E então talvez para a cor primária ou a cor de destaque, vamos usar algo totalmente diferente. Em vez de usar esse verde oliva, vamos usar esse marrom e ver como tudo funciona e se sente. Tudo bem, então eu acho que todo esse conteúdo tem o verde. Então, vamos transformá-lo nisso. Talvez isso agora se torne branco. Talvez isso o tornasse um pouco mais leve. Talvez possamos fazer o que provavelmente podemos fazer como uma sombra ou algo assim. Para acrescentar algo mais drástico. Talvez possamos usar o escuro. Vamos usar esse. Gramado. Vai ser linear. Então. Para este, vamos usar aquele. E para a versão ao vivo, vamos usar essa versão leve desse verde. Ok, e então eu estou apenas experimentando, pessoal. Isso é algo que eu gosto de fazer quando estou trabalhando com algumas coisas. Eu quero duplicar isso e torná-lo um pouco maior e simplesmente diminuí-lo. E então eu vou abaixar totalmente , os dois. Então, vou entrar nas minhas camadas e vou recusá-las juntas. Então, eu tenho algum tipo de coisa que vem lá. Veja a diferença em quando você está usando cores. Aqui usamos um verde azeitona. Deixe-me seguir em frente. E aqui usamos um tom mais parecido com um marrom terroso. Garante, você sabe, que seu contraste seja alto o suficiente. Também podemos seguir em frente e apenas por causa dessa prática. E apenas faça primeiro, deixe o primeiro ainda mais escuro. Vamos usar uma dessas técnicas que usamos nas aulas anteriores, que é trabalhar com gradientes e outras coisas. Então, vou seguir em frente e usar um gradiente para a seção superior do cabeçalho. Então, vou usar um 10. Seu projeto do curso: Prepare-se para aproveitar sua criatividade e adicionar um pouco de cor ao mundo digital. Para o projeto da aula, você criará uma paleta de cores para nosso site de música e aplicativo móvel. Em seguida, você adicionará a nova paleta de cores ao provedor. Com wireframes de baixa fidelidade, a paleta de cores deve ser visualmente atraente e complementar a estética geral do design do site e do aplicativo móvel. As possibilidades são infinitas. Vá até a guia Projeto e recursos para baixar os arquivos iniciais, se você preferir Figma ou Adobe XD. Eu tenho tudo o que você precisa. Mal posso esperar para ver as obras-primas que você criará. E não se esqueça de mostrar seu trabalho cardíaco na galeria do projeto. Vamos surpreender a comunidade com seus designs. 11. Isso é tudo!: Esse é um resumo da nossa aula sobre o uso de cores no design de interface do usuário. Espero que você tenha aprendido muito e se sinta mais confiante em sua capacidade de criar um visual atraente em interfaces incríveis e fáceis de usar. Lembre-se de que a principal conclusão, por exemplo , a cor pode afetar muito a experiência do usuário. E é importante entender a psicologia da cor. A teoria das cores é uma ferramenta essencial para criar uma paleta de cores agradável, coesa e visualmente atraente. Número três, brinque com diferentes combinações de cores e tente criar algo único. Agora, é hora de testar suas novas habilidades. Publique seus projetos na galeria de projetos e deixe a comunidade ver seu coração trabalhar. E não se esqueça de me deixar um comentário e me seguir no Skillshare para obter mais dicas e truques sobre design de interface de usuário.