Noções básicas de seleção de cores para design de interface / usuário

1. Apresentação do curso: cor é uma das partes mais essenciais do design Eric porque a cor determina o humor dos seus espectadores. Ele determina a direção que eles vão tomar e também determina os valores da marca e a força da marca. Portanto, seus espectadores conectarão essas cores com essa marca em particular. Existem muitas maneiras diferentes de trabalhar com cores no design UI UX. Mas nesta classe vamos nos concentrar nas coisas mais importantes. Porque, de outra forma, essa aula poderia levar até 12 ou 13 horas ou algo assim. Ei designer e meu nome é Alex. E nesta classe vamos falar sobre cores no design UI UX. Fundador da web donut, recriamos ou 500 produtos de design. Também sou professor e até agora criei ou 30 cursos diferentes, desde UI, design UX, até mídias sociais e design. Nesta classe Skillshare, vamos abordar por que a cor é importante, quais cores existem e como você organiza as cores e como você escolhe suas colunas amina, secundária e terciária. Vamos falar sobre diferentes combinações de cores, quais combinações de cores existem e como você as usa em seus designs? E depois disso, vou mostrar algumas ferramentas incríveis de seleção de cores que você pode encontrar on-line, que ajudarão você massivamente escolha de cores para seus projetos de design de UI UX. Finalmente, vou mostrar a você como criar guias de estilo incríveis para desenvolvedores que usam o Adobe XD e como apresentar esses guias de estilo para seus clientes e desenvolvedores para uso posterior. Seu projeto de classe para essa classe é criar sua combinação de cores ideal usando a ferramenta que você gosta. Eu sugeriria que ficará animado porque há a ferramenta que estou usando, mas você pode usar qualquer ferramenta que quiser. E mais detalhes estão no vídeo do projeto de aula. Ao lado da tipografia, espaçamento e cor do ritmo é uma das coisas mais importantes no design a considerar. E nesta classe vamos abordar algumas coisas importantes nas quais você deve se concentrar quando estiver trabalhando como designer de UI UX. Então, espere vê-lo na sala de aula e vamos criar algumas combinações de cores incríveis. 2. Por que a cor é importante: Além da tipografia, ritmo, grades e muitos desses outros elementos, cor é um dos elementos mais importantes em cada design. Sem cor, os usuários não saberão para onde ir. Eles não saberão o que fazer. E não seria capaz de distinguir elementos um do outro porque todos os elementos ficariam iguais em preto e branco. Então, neste vídeo, vamos discutir por que a cor é importante e o que você deve estar pensando quando estiver escolhendo cores para seus projetos de design de UI UX. Ele define o tom do seu projeto. Então eu estou falando da maneira mais orientada para os negócios para seus espectadores, então você usará cores diferentes. Então, se você estiver falando de uma forma divertida de maneira amigável. Então você sempre tem que pensar sobre isso. Certifique-se de falar com seus clientes, certifique-se de compreendê-los profundamente, entender seu setor, entender o nicho e, portanto, quando você estiver escolhendo cores para esse cliente específico, certifique-se de definir o tom. Se o tom for comercial e, em seguida, use o negócio não, mas certifique-se de seguir esse tom em todo o seu design. Então, é bom e coerência. Assim, seus usuários sempre sabem qual é o tom do seu design onde quer que estejam em seu design, ele determina o modo de visualizadores. O que quero dizer com isso é que se as cores estiverem muito escuras, então os espectadores estarão de certo humor. Se as cores forem muito claras, elas estarão em um clima diferente. Se as cores forem muito fortes, talvez elas sejam fortes em seus olhos. Então, eles vão estar em diferentes humores. Então, certifique-se de prestar atenção a tudo isso e certifique-se de entender qual é o tipo de humor que você deseja criar para seus espectadores? Mais uma vez, é o brincalhão? É o negócio? É o aprendizado? É o clima de foco? De todas essas métricas diferentes, você precisa aprender sobre o humor deles. Portanto, quando você está escolhendo cores, você tem que ter esse humor em mente. Então, por exemplo, se eu quiser que eles fiquem calmos e relaxados, vou usar algumas cores da natureza, por exemplo, branco e verde e marrom e algo assim. Se quisermos mantê-los bombeados, se eu quiser ter energia subindo e mantê-la alta, então talvez eu queira usar algumas cores fortes como vermelho, como azul escuro, como verde, e algo assim. Portanto, certifique-se de prestar atenção ao humor de seus espectadores porque é extremamente importante em qualquer design. Ele enfatiza ações. Por exemplo, se você quiser que eles cliquem em um botão, você escolheria a cor desse botão para se destacar porque você quer que eles olhem para esse botão e, em seguida, façam uma ação, então clique nele. Ou se você quiser que eles enviem um formulário, se quiser que eles saiam do seu e-mail, você usará cores para enfatizar as áreas em que deseja que eles cliquem ou façam medidas. E, claro, dependendo da ação que você quer que ele tome, dependendo da indústria em que seu cliente está, você escolherá algumas cores diferentes e tons diferentes dessas cores, simplesmente guiando os olhos dos espectadores para isso ação específica que você quer que eles tomem. Isso ajuda com a legibilidade nisso é incrivelmente importante porque a visão é realmente prejudicada por quase duas décadas, porque todos nós temos esses dispositivos com telas e a maioria das pessoas por aí tem alguns problemas com sua visão. Portanto, certifique-se de que quando você estiver planejando, especialmente para o parágrafo, é especialmente para texto. Certifique-se de usar as cores que não serão prejudicadas nos olhos dos espectadores. O que quero dizer com isso é que eles não são muito fortes, mas também ao mesmo tempo que eles não são muito fracos, porque se a visão deles estiver bem no dia da semana, agora eles não serão capazes de lê-lo se as cores forem muito fracas e o contrário . Então você tem que encontrar esse meio termo feliz. Portanto, sua legibilidade será muito melhor e sua taxa de rejeição será muito menor porque eles ficarão na página por muito mais tempo e vão ler o texto e as informações que você colocar em seu design. E, finalmente, guia os olhos do usuário. O que quero dizer com isso é que se você quiser que eles olhem da esquerda para a direita, você pode posicionar estrategicamente suas cores nessa direção para que você possa guiá-las através do seu design. Você pode organizar essa sua experiência, como você quer que elas sejam. E então, quando eles olham da esquerda para a direita, eles podem procurar, por exemplo, cores mais brilhantes ou cores mais escuras ou algo assim. Você é o responsável pela experiência do usuário. Portanto, converta a experiência do usuário para uma melhor usando cores e navegando-as pelo seu design usando cores. Existem muitas teorias e técnicas diferentes para escolher as cores que são importantes para o seu design. Então, esses são poucos que descobri ao longo dos anos funcionam melhor para mim e para meus clientes. Portanto, certifique-se de navegar na Internet para algumas dicas e truques adicionais e misturas para entender quando você está projetando para manter todas essas coisas em mente. E apenas para criar a melhor experiência de usuário possível para seus usuários usando cores. Na próxima lição, vamos falar sobre quais cores existem. Então eu te vejo lá. 3. Quais cores existem: Existem muitas cores diferentes por aí, mas quando você está escolhendo cores para um design UI UX, você precisa pensar basicamente em três cores, que são cores principais, cores secundárias e cores terciárias. cor principal é a cor, que é a cor geral do seu design. A cor secundária é usada para, por exemplo, botões ou quatro links de texto, hiperlinks e algo parecido. E a cor terciária é basicamente a cor do acento. Agora isso não é verdade para todos os projetos. Às vezes, você só vai escolher duas cores, por exemplo, e vamos falar sobre isso um pouco mais tarde nesta aula. Mas o importante a ser observado como designer de UI UX é que você não usará a cor CMYK na maioria dos casos. O que isso significa é ciano, magenta, amarelo e chave. A razão para isso é que essas cores são usadas na maioria para design gráfico e para um trabalho de impressão. Como estamos fazendo o trabalho na tela, não vamos usar essas cores porque elas não se traduzem bem para exibir as cores que você vai usar. Na maioria dos casos, os projetos de design UI UX são códigos hexadecimais e cores RGB. Códigos hexadecimais são algo abreviado de hexadecimal. Basicamente, significa que no dia 16, não se incomode muito com isso. É apenas a contagem de pixels dentro da cor, mas lembre-se, as cores hexadecimais têm todos esses códigos diferentes. Você usará esses códigos hexadecimais na maioria dos casos. E, em alguns casos, você também usará a cor RGB. Rgb significa vermelho, verde e azul. E há também algumas outras cores como HSL, que é para saturação de matiz e leveza. Mas, dependendo do desenvolvedor depender do projeto, dependendo se o cliente já tiver suas combinações de cores e uma cor já criada para eles, você usará suas cores e as cores nesse código de cores específico que eles mencionaram em sua teoria. Então, basicamente neste vídeo, vou mostrar como tudo isso funciona e como você pode encontrar essas cores. Então, aqui estamos nos sites da Apple e a maioria de vocês sabe sobre a Apple. Basicamente, eles criam esses dispositivos tecnológicos em gadgets e também têm seu sistema operacional para seus dispositivos móveis e dispositivos desktop. Tudo isso não importa. O que importa, é que você pode clicar com o botão direito do mouse em seu navegador e você pode instalar este plugin chamado col beak, especialmente se você for um usuário do Google Chrome em grupo, como eu sou. Quando você clica lá, ele mostrará todas essas cores diferentes que são usadas em toda esta página específica. Agora, essas não são todas as cores da marca. Ele não vai extrair cores de todas as páginas desse site em particular. Mas se você der uma olhada aqui, você pode ver todas essas cores. Assim, você pode ver essa cor roxa rosa, por exemplo, a partir deste relógio e dos textos ao seu redor, você pode ver essa cor azul. Talvez seja este aqui. E se eu rolar para baixo, talvez possamos encontrar essa coluna. Aqui está. E se rolarmos mais, você pode ver que essa cor escura para o texto é, por exemplo, esta e esta. Assim, você pode entender facilmente quais cores a marca usou nesta página específica. Mais uma vez, menciono essa página em particular porque se mudarmos para a página do Mac, por exemplo, aqui eles estão usando cores completamente diferentes. Então, vamos voltar para a página inicial e vamos aqui. Mais uma vez, chamá-lo de grande é totalmente gratuito. Vou vinculá-lo em um PDF e você poderá acessá-lo. Você pode simplesmente instalá-lo em seu navegador. E por que isso importa é que você pode simplesmente provar cores como eu mostrei. Então, basta clicar com o botão direito do mouse em Cor, estilos de página Vai tirar essas cores desta página em particular e, em seguida, mostrar todas essas cores aqui. Mas você pode ver valores RGB para cada cor específica. Você pode remover essa cor se quiser terminar, você não quer vê-la aqui. Então, se clicarmos neste canto aqui, você pode ver que temos cores HEX. Então, se eu mudar para hexadecimal, você pode ver como isso funciona. Portanto, se um alternar entre RGB e hexadecimal, você pode ver claramente a diferença. Agora, cores hexadecimais são essas cores e esse é o código de cores. Vou mostrar isso um pouco mais tarde dentro do Adobe XD. Agora, cada ferramenta por aí tem esses códigos hexadecimais. Então, se você estiver usando o Photoshop, XD, sketch, Figma, isso não importa. Todos eles os têm, e todos eles geralmente têm RGB e alguns deles também têm HSL. Se mudarmos para HSL, que é saturação de matiz e leveza, você pode ver como isso se parece. Então, basicamente, você pode copiar isso, especialmente com códigos hexadecimais. Portanto, selecione esta cópia ou controle C, controle V e cole-o em uma ferramenta favorita de escolha. E então você pode ter essa cor e trabalhar com essa cor. Isso é especialmente importante se você estiver trabalhando com clientes que já tenham seus sites concluídos. Se eles tiverem seus aplicativos concluídos ou algo assim, e não soubessem quais cores eles usam, então você pode simplesmente puxar o site como eu deveria apenas mostrar, clique com o botão direito do mouse no bico colorido dos estilos de página e, em seguida, você pode simplesmente entenda quais cores eles usaram em seu design. Isso é importante porque se eles quiserem mudar sua paleta de cores, por exemplo, mais abaixo da linha, ou se você precisar ter uma cor específica, então você pode usar essa abordagem, copiar essa cor específica e depois use-o em seu design. A outra maneira de fazer isso é fazer uma captura de tela do design anterior. Arraste-o para sua ferramenta preferida, no meu caso, Adobe XD e, em seguida, simplesmente experimente essa cor do seu design. Isso não será uma boa abordagem de dívida porque você perderá alguns pixels quando fizer essas capturas de tela. E, portanto, essas cores serão um pouco diferentes do que se você usar essa abordagem porque isso está tirando de estilos de página. Então, se tomarmos de volta mais uma vez, aqui mesmo, se eu clicar com o botão direito do mouse na página e ir inspecionar, você pode ver que se passarmos pelo código, se formos aqui, você pode ver um , d1, d1, f. Então vamos para aqui, E1, D1, D1, F. Então você pode ver imediatamente, ele está puxando de estilos de página, então ele está puxando cores diretamente do código. Portanto, não há espaço para erros porque ele está puxando diretamente da cotação. Agora você pode estar pensando, sim, mas e essas imagens? Então, vamos pegar essa imagem, por exemplo. Clique com o botão direito em Inspecionar Aqui estamos e aqui temos o descolorido. Então, se clicarmos nele, você pode vê-lo aqui. Você pode estar se perguntando e se meu cliente não tiver nenhum site existente em que você formará a paleta de cores com base no que falamos anteriormente, com base no que vamos falar em algumas lições futuras neste classe. E principalmente do nicho na indústria em que estão. Por exemplo, se eles estiverem em um setor bancário, se estiverem no setor de TI, as chances dependem de quem é o público-alvo, o qual o site ou o aplicativo móvel vai conversar. provável que eles escolham cores específicas nesses casos e certifique-se de explorar a concorrência, certifique-se de ver o que estão fazendo e certifique-se de formar suas cores com base no nicho em que seu cliente está, com base na competição, e com base no modo de visualização em que você deseja colocá-los. Então, quero que eles comprem algo, queiram que eles aproveitem o conteúdo e fiquem por mais tempo. Quer ser sério, quer ser brincalhão. De todas essas coisas, você determinará a cor que escolherá em seu design. Finalmente, como eu disse, certifique-se de usar a cor grande porque é realmente bem simples. Basta clicar com o botão direito do mouse em qualquer página, mostrará todas essas cores. E basicamente você pode selecionar este carro, clicar em copiar e colar em seu design. No próximo vídeo desta classe, vamos falar sobre combinações de cores, por que elas são importantes em quais combinações de cores existem e como selecionar qual, qual é a certa para você. Então eu te vejo lá. 4. Combinações de cores: Existem muitas maneiras diferentes de combinar cores para seus projetos de design UI UX. Mas nesta aula e nesta lição, vou falar sobre apenas quatro dos quais são a forma de quatro principais e os quatro que são usados principalmente no design, além de um adicional, o que é um bônus sobre isso lição. Aqueles para nosso monocromático, análogo, complementar e triádico. Então, vamos explorar tudo isso e vamos ver o que eles são. Esquema de cores monocromático é o que o nome sugere. Você só vai pegar uma cor e escolher folhas diferentes dessa cor específica. Então, por exemplo, você está escolhendo a cor azul, que é realmente escura, e então você escolherá diferentes tons dessa cor azul para corresponder melhor com a cor azul escuro principal da dívida. Portanto, você usará esses tons mais claros, por exemplo, para seus botões ou para o contrário, você pode usar os tons mais claros para o texto ou os tons mais escuros para os botões dos links e coisas assim. análogas são cores que estão próximas umas das outras na roda de cores, você escolherá três cores que estão realmente próximas umas das outras. Então, quando você pega a roda de cores e, em seguida, você pode escolher diferentes tons dessas cores que estão próximas umas das outras. O que isso permitirá que você faça é que seu design será muito mais coerente porque parecerá que pertence um ao outro. Seus elementos serão de cores semelhantes, com ênfase semelhante a essas cores porque você não escolherá diferentes tons de suas cores, apenas as cores que estão próximas umas das outras na roda de cores. Cores complementares é o que o nome sugere. Você vai pegar duas cores que estão na escala oposta completa da roda de cores. E então você vai combiná-los. Você pode escolher sua cor principal daquela roda de cores. E, a partir da sua cor principal, você pode posicionar sua roda de cores dessa maneira para encontrar sua cor complementar no lado oposto completo da roda de cores. Você pode usar diferentes tons dessas cores, então cores médias e complementares. Mas eu sempre sugerirei que você escolha sua cor principal e essa é a coisa mais fácil de fazer se seu cliente já tiver algo como um logotipo, seu cartão de visita ou a cor que ele gosta. E então você pode simplesmente colocar essa cor na sua cor. Escolheremos a cor de cortesia e, portanto, você pode escolher diferentes tons dessas cores. E você pode saber qual cor é a cor complementar para essa cor. E, finalmente, temos cores triádicas. Agora, as cores triádicas são basicamente apenas três cores uniformemente espaçadas em sua roda de cores. Então você pode simplesmente imaginá-lo como um triângulo, e você pode girar seu triângulo para escolher a cor principal e as cores complementares que estão no lado oposto formando um triângulo, você pode escolher sua cor principal e portanto, você pode selecionar as outras duas cores que estão nos lados pares desse triângulo. E a abordagem de bônus é 60, 30, 10. Agora, essa abordagem requer três cores diferentes que você pode escolher como quiser. Mas certifique-se de escolher sua cor principal, que compreenderá 60% do seu design. 60% é a quantidade que você usará sua cor principal, 30% é sua cor secundária ou complementar e, em seguida, esses 10% são sua cor de destaque. Essa é uma abordagem que é comumente usada em UI, design UX e InDesign em geral. Então, basicamente, você pode usar qualquer um desses métodos que são mencionados para selecionar as três cores que você deseja. E você pode usar triádico se quiser, apenas para ver no retângulo como essas três cores vão se parecer. Mas certifique-se de formar essas cores de tal forma que elas não estejam esmagadoras umas às outras. Se sua cor principal for 60%, certifique-se de usar essa cor para 60% do seu design e, em seguida, 30% e 10 por cento compreendendo 100% de suas cores. Não use outras cores. Apenas certifique-se de que você está usando essa abordagem nesse método para usar apenas essas três cores. Então, essas são apenas algumas das principais combinações de cores. Como mencionei, existem muitas, muitas, muitas outras combinações de cores diferentes, mas essas quatro são o que eu achei melhor funcionar para mim ao longo dos anos. E descobri que a maioria dos designers no setor usa. No próximo vídeo, vou mostrar algumas ferramentas que ajudarão você a selecionar essas cores. Então eu te vejo lá. 5. Ferramentas de seleção de cores: Neste vídeo, vou mostrar algumas ferramentas de seleção de cores que venho usando nos últimos anos. E descobri que a maioria deles, especialmente a Adobe, é o que a maioria dos designers por aí usa. Porque uma vez que você conheça a ferramenta, quando estiver familiarizado com dois, você ficará preso a ela e usará tudo de novo porque se ela não estiver quebrada, não conserte. Então, como eu disse neste vídeo, vou dar apenas alguns exemplos. Se você não gosta de nenhum desses, você pode simplesmente navegar na Internet para encontrar aquele que funciona para você. Então aqui está o primeiro chamado Peloton. E você pode ver pelo design no site que é realmente bastante antigo. Agora, como tudo isso parece, você pode clicar aqui para selecionar o monocromático. Então, uma única cor, como acabamos de falar, cores adjacentes ou três cores, você pode ver cores triádicas. Então tríade de três cores, tetrads, assim para cores. E, finalmente, freestyle quatro cores e você pode selecionar duas cores, três cores como quiser. Então, como mencionei no vídeo anterior, dependendo do que você deseja criar aqui, você selecionará as cores monocromáticas, por exemplo, ou adjacentes, ou que são cores complementares ou algo parecido. Então, vamos para a tríade neste caso. Então você pode ver quando eu começo a girar isso, você pode ver a cor. Então, digamos que essa é a minha cor principal. E você pode ver que eles estão uniformemente espaçados neste triângulo e isso está me mostrando todas as folhas da minha cor principal. E você pode segurar a tecla Shift para mover as sombras individualmente. Então, se eu segurá-lo, e se eu selecionar essa forma, por exemplo, se eu selecionar esta, você pode ver que estamos recebendo cores completamente diferentes aqui. Então, se eu girá-lo para aqui, você pode ver que agora temos essa paleta de correspondência uniforme. Agora, você pode ir para Predefinições e escolher predefinições diferentes para essa cor triádica, o que é realmente útil se você não tiver tempo suficiente. E a partir das cores que você escolheu, ele está mostrando essas predefinições. Então, se voltarmos às cores, se girarmos para aqui, por exemplo, volte para as predefinições. Você pode ver que agora eles são completamente diferentes. Então você pode escolher essas cores, você pode fazer o que quiser com elas. E se nos escondermos daqui, você pode ver as tabelas exportadas. Se eu clicar ali, você pode ver, você pode exportá-los como HTML, CSS, Less sass, ACML e como textos, você pode exportar amostras de cores e exportar essas combinações de cores para as que criamos, o que eu acho que é realmente importante e realmente útil porque essa ferramenta é gratuita. E, a propósito, vou vincular todas essas ferramentas que estão mencionando neste vídeo dentro do PDF. Portanto, certifique-se de abri-lo, certifique-se de clicar nesses links se quiser acessar esses sites e todos os recursos e dicas que estão mencionando ao longo desta classe. Então, basicamente, esse é o pelotão para você. Você pode aleatorizar, redefinir, voltar para as cores originais. Então, aqui, e como eu disse, você pode escolher o que quer, o estilo que quiser. Em seguida, temos Color Hunt. Então você pode ver mais uma vez, agora temos algumas seleções diferentes aqui porque elas são pré-selecionadas. Então você pode acertar o aleatório, ele mostrará apenas cores aleatórias. Você pode ir com o popular mês, ano, velhos, ou você pode escolher por esses. Então, se eu bater em cores pastel, se essas são as cores que você quer para o seu projeto em particular, você tem luz vintage retro, escuro, especialmente escuro é importante e popular nos dias de hoje em que temos o modo escuro para design UI UX. Então, se você estiver projetando para o modo escuro, certifique-se de verificar isso. Então você pode ver tons de pele, especialmente importantes para marcas de beleza, por exemplo. Mais uma vez, voltando ao clima de seus espectadores, vamos voltar a esse nicho. Vamos voltar para esse cliente. Então, quando você coleciona todos esses pontos, quando você os conecta, você vai entender que tipo de combinações de cores e cores você realmente precisa para seu projeto específico? Então, se rolarmos todo o caminho para baixo, você pode ver que não os temos. Então, se voltarmos para aqui, não temos tríade de cores adjacentes monocromáticas, mas temos essas. Então esses são os humores, esses são os projetos. Esses são os, por exemplo, eu não sei, digamos que os setores em que seu cliente esteja. Então, vamos com o escuro, por exemplo. E você pode ver tudo isso. Você pode gostar deles se quiser. Você pode ver que ele foi publicado há 13 horas. Então, vamos escolher este. E se eu passar o mouse, você pode ver que eu tenho o código hexadecimal ali mesmo. Para cada uma dessas cores. Você pode gostar dessa paleta. Você pode baixá-lo como uma imagem. E você tem todas essas cores aqui como códigos hexadecimais e como RGB, que é o que eu mencionei anteriormente, maioria dos designers de UI UI está usando códigos hexadecimais e, em alguns casos, cores RGB porque são fáceis para seus desenvolvedores integrar. Entre aspas, é por isso que eles estão usando-os. E também cores HSL às vezes porque elas podem usar porcentagens. Portanto, não se esqueça de falar com seus desenvolvedores se você estiver apenas começando com essas cores, MY deve falar com eles. É o código hexadecimal certo para eles, ou é o RGB ou HSL, dependendo desses valores nessas informações de dados que você obterá de seus desenvolvedores. Você escolherá suas cores para esse projeto específico. Então, mais uma vez, você tem mais paleta escura para adultos aqui. E se você acha que essa cor não funciona, por exemplo, você pode escolher as verdes para brincar com esses carros. Em seguida, temos colors.com, para que você possa começar a gerá-lo. Mais uma vez, vou vincular todos esses sites em um PDF. E o que temos aqui é essa soma. Temos todas essas cores diferentes que você pode explorar, você pode ver, você pode ver, você pode ajustá-lo. Você pode ver para daltonismo como se parece. Então você pode escolher todos esses. E se o fecharmos. Você pode criar uma colagem e criar uma paleta a partir da foto. Portanto, se seu cliente estiver enviando esse logotipo ou a cor que ele gosta, você pode fazer o upload dessa foto aqui. Ele gerará a paleta de cores a partir dessa cor específica. Agora, você pode ver que está recebendo os nomes aqui, que é ótimo se você quiser usar esses nomes mais tarde dentro do seu design como tokens, por exemplo, quando você está definindo suas cores para seus desenvolvedores. E então eles vão entender facilmente qual cor você mencionou porque eles podem colocá-la dentro do código. Então, por exemplo, esse lobo de madeira, alabastro e culto, eles podem colocar todas essas palavras dentro do código, conectando-as no banco de dados principal. E, portanto, o banco de dados principal vai puxar os nomes dessas cores irá representá-los como um site ou um aplicativo móvel. Então, como você realmente trabalha com isso? Bem, temos todas essas opções aqui para que você possa remover a cor, você pode visualizar folhas. Então, digamos que eu queira usar este. Agora, tenha esse. Você pode salvar a cor no favorito, você pode arrastá-lo. Então posicione aqui para mudar a aparência da sua paleta de cores. Você pode copiar o código hexadecimal e bloqueá-lo. Então você pode escolher qualquer uma dessas cores diferentes. Você pode organizá-los. Então, se eu bloqueá-lo, e digamos que eu quero posicionar isso aqui vai ficar essa cor e não vai mudar para como você exporta daqui. Você tem essa palavra sólida que eu gosto dessa paleta de cores, mas deixe-me mostrar a vocês tão visores e ver este, mas eu não tenho certeza. Posso clicar ali mesmo. Então aqui. Escolha defeitos ou qualquer um desses. Deixe-me ir ao seletor e deixe-me selecionar, por exemplo, essa sombra escura aqui. Gosto e posso fechá-lo. E, portanto, posso explorar minhas cores mais longe dessa cor em particular ou simplesmente deixá-la como está. E, finalmente, se eu quiser exportá-lo, você pode usar o Control IEP. Você pode copiar, você está fora para enviá-lo aos desenvolvedores. Você pode exportá-lo como PDF, o que é ótimo como imagem. Você pode obter as cores CSS, o que é incrível para seus desenvolvedores. Obviamente, AAC, SVG, o que também é ótimo, e você pode obter o casaco se seus desenvolvedores quiserem no código também. Finalmente, você pode incorporar o código para essas cores específicas se quiser salvá-las dessa forma para que seus clientes não sejam desenvolvedores. Em seguida, temos o Adobe Color, que é um dos mais antigos do negócio. Mas, na minha opinião, talvez seja um dos melhores porque está integrado ao Adobe XD, com os produtos da Adobe, você pode abri-los em um aplicativo da Creative Cloud morte se for um usuário da Creative Cloud e, portanto, você pode simplesmente acessar essas cores e abri-las no software de sua escolha. Assim, você pode criar, explorar, ter tendências e, finalmente, você tem bibliotecas. Então, dentro das bibliotecas, você pode criar sua biblioteca e, em seguida, abrir a biblioteca no Adobe XD, por exemplo. Você pode simplesmente copiar essas cores, colá-las dentro do seu XD. É realmente tão simples assim. Se seu usuário da Adobe, também há uma integração com o Photoshop, integração com o Illustrator. Portanto, não importa qual ferramenta você esteja usando da família da Adobe, você terá essa integração. Portanto, temos equipe de extração, extrair ferramentas de acessibilidade de gradiente, o que também é ótimo. Então, se eu clicar ali, você pode ver a taxa de contraste, você pode ver a pontuação. Você pode ver alguns, você pode verificar sal para falha 17 pontos e abaixo. Então, temos que ajustar essa cor. Passe por 18 pontos e acima, depois de quatro ícones e gráficos acionáveis se você estiver usando essas cores. Então, basicamente, o que precisamos mudar é a cor do texto. Neste caso particular, a adobe nos dá m. Aqui à esquerda você tem todos aqueles que eu mencionei. Então, atualmente, ele está personalizado, mas se eu mudar para análogo, clique nele, você pode ver que só podemos escolher essa cor. Se formos com monocromático, você pode ver como isso parece triádico. Então, basicamente, três cores. E você pode ver esse triângulo que mencionamos. Então esta é a nossa cor principal, estas são nossas cores secundárias e terciárias. Você pode ter cortesia. Assim, nos lados opostos, na roda de cores dividida de cortesia. Então basicamente isso, e você pode escolher por mais perto ou longe que você queira que isso seja. E você pode dividi-los, você pode movê-los. Você pode mover esses tons diferentes para obter a melhor paleta de cores possível. E clique duas vezes em dividir gratuitamente. Então basicamente a mesma coisa, mas o dobro da cor. Você tem o quadrado, o composto e as sombras. Então, dependendo do que você quiser, que mencionei ao longo deste curso, você sempre pode ligar com Custom e você pode ajustá-lo como quiser. Por exemplo, se escolhermos complementares e se eu for personalizado e quiser ajustá-los, vamos usar este ou simplesmente aleatoriamente. Vamos com isso. E você também pode ajustar os tons aqui dessa cor específica. Então, se eu selecionar essa cor, posso ajustar os tons para essa cor específica como essa. Posso ajustar todas essas coisas. Posso copiar rapidamente esse código hexadecimal se quiser. E, finalmente, você pode salvá-lo como minha equipe de cores, por exemplo, posso nomeá-lo como eu e todo o meu projeto de site. Vamos ver. E você pode ver os códigos que você vai conseguir ali. Então, essas são tags. Você pode verificar a acessibilidade mais uma vez, apenas para ver se isso é bom o suficiente. A equipe é segura de cor cega, o que é ótimo. Então você pode salvá-lo se quiser. Ele aparecerá em suas bibliotecas do XD ou nas bibliotecas do Photoshop. Finalmente, você pode extrair a equipe. Assim, você pode extrair a cor da imagem e salvá-la como uma paleta de cores. Você pode extrair um gradiente ou a mesma coisa. Mais uma vez, ferramentas de acessibilidade, que mencionamos anteriormente e temos roda de cores, o que é ótimo. Então, finalmente, se você estiver usando isso, certifique-se de salvá-lo, ele aparecerá na sua ferramenta de escolha. Você também tem esses jogos de cores. Você trocou de equipe para poder escolhê-lo. Você tem o Explorer, para que você possa explorar diferentes combinações de cores. O que é tendência, o que não é. Então, se eles mudarem para tendências, você pode ver o que isso vai me dar. Então, por exemplo, isso vai me dar um monte de imagens que são tendências. E você pode ver as cores que são tiradas dessas imagens em particular. Então, se você gosta dessas cores, você pode baixar ou JPEG ou adicionar à biblioteca aparecerá novamente no seu XD ou Photoshop Illustrator ou no que quer que você esteja usando. E, finalmente, o pico de cores, que mencionamos anteriormente. Mais uma vez, é ótimo. Vou deixar os links para tudo o que mencionei no PDF. Mas eu realmente recomendo que você obtenha a cor rosa porque isso vai tornar sua vida muito mais fácil. Este é o Spotify, então você tem essas cores do Spotify. E, claro, você pode acessar o site de sua escolha se quiser escolher as cores desse site específico. E isso vai mostrar aqui dentro do bico de cor. Lá vamos nós. Essas são as cores, essas são as ferramentas que realmente espero que você as ache úteis. Mais uma vez, vou lhe dar todos esses links no PDF. Abra o PDF, clique no link, você deseja acessá-lo e certifique-se de começar a explorar essas cores. Certifique-se de explorar essas ferramentas para ver qual delas funciona melhor para você. E depois de encontrar essa missão, explorá-la mais fundo, certifique-se de, como você viu na missão Adobe Color, explorar as tendências, fazer upload de imagens, certifique-se de explorá-las, e apenas para ver e entender como escolher as cores para seus projetos da melhor maneira para você. No próximo vídeo, mostrarei como criar guias de estilo de exportação para os desenvolvedores do Adobe XD. Então eu te vejo lá. 6. Guias de estilos para desenvolvedores: O guia de estilo é uma parte muito importante dos seus designs de UI UX porque nele você apresentará todas as cores, ícones, imagens e todos os outros elementos que você usou em seus designs de UI UX. Você os mostrará aos seus clientes e, mais importante, para seus desenvolvedores. Porque a partir desse guia de estilo, eles podem extrair informações importantes, como cores, para usar em sua cotação. Então, vou mostrar um projeto que fiz anteriormente para um dos meus óculos mestre. E vou explorar o que é guia de estilo e mostrar algumas dicas e truques. Então, aqui estamos no Adobe XD, e este é o novo projeto do site do banco. E como eu disse, isso é da minha masterclass do Adobe XD. Vou vinculá-lo no PDF. Você pode verificar se estiver interessado. E aqui começamos a partir da arquitetura do site, mudamos para wireframes de papel, passamos para wireframes no Adobe XD, mais para design de sites, design de painel. E, finalmente, o design responsivo e o design responsivo do painel. Também fizemos a apresentação do projeto e, finalmente, guia de estilo. Então, se mudarmos de camadas para aqui, que são ácidos documentais, você poderá ver todas as cores e códigos de cores que são usados. Então, basicamente, esses são tokens coloridos. Quando você passa o mouse, você pode ver que o branco liso é FFF. Se você passar o mouse aqui, você pode ver valores RGB de capacidade 100. Então, se aumentarmos muito de perto, você pode ver que temos um guia de estilo de projeto aqui. Então, o que eu recomendo que você faça é quando você estiver criando esses guias de estilo de projetos, certifique-se de sempre incluir os códigos hexadecimais se esses forem os que seus desenvolvedores precisam, ou códigos RGB. Se, mais uma vez, esses são os que um desenvolvedor exige. Também o que você pode ver aqui é que temos branco liso, que é essa cor. E também incluí o código hexadecimal para que os desenvolvedores possam selecionar facilmente esse código hexadecimal, se quiserem. E avançando ainda mais, você pode ver todas essas outras cores. O que você pode fazer é dar a eles este arquivo XD. Eles podem então simplesmente pegar isso. Então eu vou aqui, posso copiar essa cor. Então clique com o botão direito e copie. Posso ir aqui, copiar essa cor, por exemplo, colada no meu editor de código. E, portanto, posso tê-lo no meu código ou posso selecioná-lo aqui e copiá-lo. Ou ainda melhor, você pode simplesmente Controlar ou Command E no teclado para exportar isso como PDF. Quando você clicar em Exportar, ele será exportado como PDF. E então, quando os abrirem mais tarde, eles podem simplesmente selecionar esse código hexadecimal do PDF, copiá-lo e colá-lo dentro. Também para tipografia, você pode ver a iconografia. Então, todos os ícones foram usados nesse projeto em particular. E todas as ilustrações e elementos adicionais que você usou você pode colocar aqui, mas você também pode fazer é aqui, onde está sua cor? Você sempre pode colocar, por exemplo, fundo mostra borrões ou basicidade, uma capa e todos esses outros elementos aqui , porque dentro de casa também contribuem como cor, porque todos esses fundos, sombras e borrões também têm cor neles. Então, outra coisa que você pode fazer com este guia de estilo é compartilhá-lo. Então, se eu apenas selecionar este quadro de arte, vá para Compartilhar. Você pode ver que é apenas um selecionado. Então, se eu desampliar, você pode ver que nada mais está selecionado porque acabei de selecionar esse aeroporto em particular. Então, o que ele pode fazer é compartilhá-lo. Posso criar o link, mas em vez de Design Review, vou usar o desenvolvimento para poder criar um link. E enquanto está criando, o que eu quero mostrar aqui é que os desenvolvedores podem obter esse link. Eles podem extrair todas essas cores desse link específico. E você também pode escolher esse compartilhamento para desenvolvimento para qualquer outro quadro de arte que você tenha em seu design. Por exemplo, temos design de sites aqui e temos muitos desses quadros de arte, para que você possa selecioná-los todos. Você pode compartilhá-los para desenvolvimento. E, portanto, seus desenvolvedores terão essa cor. Eles podem escolhê-lo. Então, se eu clicar aqui para o nosso guia de estilo, ele irá abri-los no meu navegador e mostrará no meu navegador como tudo isso se parece. Então, se mostrarmos aqui enquanto ele está abrindo, então temos um guia de estilo de projeto. Então, dependendo de como você nomeou sua prancheta, ela será exibida dessa maneira. Então, mais uma vez, temos todas essas cores diferentes. Então, se eu selecionar um deles, por exemplo, misturar este, e se eu mudar para o código aqui, você poderá ver todas as cores e todos os tons das minhas cores, que é puxado daqui. Então, se eu selecionar este, você pode ver que se chama Danger read imediatamente, temos propriedades CSS. Alguns, temos largura e altura no topo esquerdo, temos fundo, temos fundo aqui. Então esse código hexadecimal, e temos obesidade de 100. Então, basicamente, o que eles podem fazer daqui é que eles podem optar por copiar daqui. Eles podem clicar nessa cor. Aqui. Classificação copiada por cores. Deixe-me me esconder só para que você possa vê-lo. Então, se eu selecionar essa cor, clicar nela, você poderá ver a cor copiada, então ela é copiada. E eles podem colá-lo mais tarde dentro do código. Também podemos mudar para aqui. Então você pode ver o root para todas essas cores. Então, mais uma vez, branco liso, cinza claro, cinza escuro, verde principal, todas as cores que chamei de famílias estrangeiras. Portanto, temos famílias de fontes, o que também é ótimo para desenvolvedores, todas localizadas aqui dentro do nosso guia de estilo. E, finalmente. Para este estilo de personagem nove. Então, se rolarmos todo o caminho para baixo, que é este. Então, se eu selecionar exatamente isso e voltar para o código. Então deixe-me selecioná-lo mais uma vez. Você pode ver todos os estados que criei para esse design específico. Portanto, temos Visa, Preto e Branco devem ter concedido MasterCard preto e branco. Então, basta mudar todos esses logotipos. Basicamente, se eu clicar duas vezes dentro e ir com a aparência, sim, se escolhermos Controlar e clicar, você pode ver um gradiente linear. Então, todas as cores de um gradiente linear, você pode ver a direção do gradiente, obesidade e sombra. Este é o que eu mencionei anteriormente. Então, a sombra caiu descolorida e tem esses valores. Então, basicamente, seus desenvolvedores podem extrair esses valores diretamente daqui. Eles têm o código CSS aqui mais uma vez. E, finalmente, se eles mudarem para ouvir, eles podem selecionar isso. E então eles podem ver dentro do CSS raiz todas as coisas daqui. Então, basicamente, eles só precisam encontrar este cartão aqui e podem copiar o código CSS de lá. Então, se eu selecionar este, por exemplo, e você pode ver o estado padrão quase preto. Então, se eu segurar meu controle e clicar dentro, você poderá ver cinza claro. Se eu selecionar e clicar dentro. Então você pode ver essa cor, que é a cor de sua pele. E se aumentarmos um pouco mais perto aqui. Então, vamos com 100, por exemplo. Se ampliarmos e clicarmos nessa cor verde, por exemplo, você poderá ver a cor para que eles possam clicar, eles podem copiar para a área de transferência e basicamente com base no que quiserem. Finalmente, eles podem clicar aqui nos comentários e podem puxar esse giro, por exemplo aqui. E você pode dizer algo como Você gosta desses ícones, ou eles devem ser pretos e brancos? Se eles disserem sim, por exemplo, o que você pode fazer é clicar neste ícone. Você pode voltar ao código, localizar um desses. Então, por exemplo, digamos este. E se você tiver apenas o estado padrão para ele e, por exemplo, poderá criar estados diferentes para esses ícones. Por exemplo, temos o padrão, temos o mouse. Assim, você pode ver que ele muda a cor para o estado padrão e para o passar o mouse. Então, dependendo do que você fez com suas cores, ele reagirá dessa maneira específica. Então iconografia, cores, a mesma coisa, a mesma história. Então, quando a seleção, eles vão obter CSS, eles podem simplesmente clicar para copiar para a área de transferência e eles podem basear isso em seu código. Então, basicamente, é assim que é fácil trabalhar com o Adobe XD com cores, qual guia de estilo. E eu sempre recomendo que você exporte isso como um PDF porque seus desenvolvedores e podem estar em movimento. Às vezes, eles podem discutir isso com seu cliente. Portanto, certifique-se de enviar-lhes o link do próprio guia de estilo, para não confundi-los demais e certifique-se de enviar links separados. Muitas vezes, design de wireframes, de papel, wireframes, o que quer que você esteja fazendo, porque dessa forma eles podem inspecionar facilmente todas essas cores. Porque se você colocar todos eles em um link, o que você pode fazer, você vai simplesmente confundi-los. E descobri que essa abordagem funciona melhor com meus desenvolvedores. Mas não se esqueça de sempre falar com seus desenvolvedores antes de começar a trabalhar. Certifique-se de mencionar a mistura de cores hexadecimal ou RGB para ver se elas são boas com algumas dessas cores. E finalmente, que algo que eu não mostrei a você. Se eu selecionar essa cor, por exemplo, posso clicar aqui. Deixe-me me esconder. Então você pode ver que temos cor sólida, gradiente linear, gradiente radial e gradiente angular em XD, temos obesidade para a cor, temos diferentes tons coloridos aqui. Temos a serra de obesidade para o canal Alpha, para a cor em si. E, finalmente, temos o hex, o RGB e o HSB. Então, dependendo do que seus clientes e desenvolvedores desejam, você pode escolhê-lo aqui. Então, basicamente, é isso. É por isso que esses guias de estilo de projetos são realmente importantes porque em um único lugar, você tem todos esses elementos que você usou em seu design. E quando você estiver trabalhando em seus projetos, certifique-se de sempre criar os guias de estilo em paralelo com o que você está fazendo, porque será muito mais fácil exportá-lo para seus desenvolvedores darem uma olhada. Então, basicamente, é isso. Acho que Hume viu como os guias de estilo são importantes para os desenvolvedores. Não é tão importante para você, mas eles podem ser importantes para os outros designers que podem trabalhar nesse design específico depois de você. Porque na maioria dos casos, talvez você não esteja interessado em continuar trabalhando neste projeto específico. Talvez alguns outros designers tenham entrado em seus sapatos e continuem trabalhando neste projeto. Então, tendo algo como um guia de estilo, sempre será muito mais fácil para designer de dívidas continuar de onde você parou no mesmo estilo. E é claro que será muito mais fácil para os desenvolvedores trabalharem com guia de estilo, porque em um único lugar, eles têm todas as informações de que precisam para começar a codificar esse projeto. 7. Seu projeto de curso: Seu projeto de classe para essa classe é criar o guia de estilo ou a combinação de cores de sua escolha. Certifique-se de usar a marca que você realmente gosta. Você pode usar o pico de cores, que eu mostrei. Você pode selecionar essas cores e, em seguida, usar sua ferramenta preferida, seja Photoshop, fig., meu esboço do XD, seja lá o que for, certifique-se de criá-la e carregá-la como uma imagem para nossos projetos de classe. Mas você também pode fazer é o que eu mostro aqui dentro do guia de estilo do projeto. Assim, você pode criar algo que é complexo como este, ou você pode simplesmente ampliar aqui e apenas usar as cores. Certifique-se de usar os códigos hexadecimais porque estou realmente intrigado e interessado em ver o código hexadecimal que você usou e também certifique-se de nomear suas cores. E basta colocar esse pequeno texto aqui. Eu fiz. Só para que eu possa ver seu processo de pensamento e ver como seu nome, suas cores, você pode usar uma dessas ferramentas, que você viu em uma das lições anteriores. E essas ferramentas estão dando os nomes das cores. Então você pode usar esses nomes ou usar seus próprios nomes, fazer o que quiser. Apenas certifique-se de criar a combinação de cores. Você não precisa de tantas cores. Você pode usar três cores. Por exemplo, a dívida vai ser abundante. Apenas certifique-se de combiná-los, certifique-se de usar códigos hexadecimais e os nomes abaixo e carregue isso como uma imagem para seus projetos de classe. Estou ansioso para ver o que vocês podem criar. E eu realmente estou ansioso para interagir com vocês na seção de projetos de classe. 8. CONCLUSÃO: Lá vai você. Você chegou ao final desta aula. É apenas uma aula curta, como mencionei na introdução e no início desta aula, a cor é um assunto muito complexo e eles estão ensinando em escolas quatro semestres, até quatro anos. Portanto, é muito complexo se você quisesse ser, mas não precisa ser essa mistura complexa para seguir algumas dessas etapas que mencionei, certifique-se de explorar por conta própria. Deixe esta classe ser apenas o seu ponto de partida na exploração do mundo das cores. Certifique-se de escolher sua ferramenta favorita e explorá-la mais a partir daí, e certifique-se de verificar o PDF. Porque, como continuo mencionando nesta classe, todos os links que mencionei e todos os recursos que mencionei estão localizados nesse PDF. Certifique-se de clicar nos links para acessá-lo rapidamente e começar a explorar e começar sua jornada na faculdade. Mais uma vez, obrigado por assistir a esta aula. Eu realmente espero que você tenha achado perspicaz e útil. E mais uma vez, se você quiser um aprendizado mais profundo sobre cores, certifique-se de usar os cursos on-line que são realmente longos e aprofundem todos os assuntos que nós, que mencionamos nesta classe. Ou para ler livros sobre cores. Porque, como eu continuo mencionando, cor é um dos tópicos mais complexos no design porque abrange todas essas diferentes variedades. Portanto, é muito preciso, muito tempo para ser bom com cores, seleção de cores e teoria das cores. Então, mais uma vez, muito obrigado por assistir e estou ansioso para vê-lo em algumas das minhas outras aulas. Tome cuidado.