Cor na Web II: design para clareza e conformidade

1. Trailer: Na segunda parte desta série de Color on the Web, aprenderemos como adicionar cor de forma eficaz a um design de Website. Trabalharemos para uma empresa fictícia chamada Bike Book, uma empresa de aluguer de bicicletas com uma reviravolta. Primeiro, aprenderemos tudo sobre daltonismo. O que é? O que parece? E como projetar para isso? Então, entraremos e aplicaremos a paleta de cores que projetamos na Classe 1 ao modelo do site Bike Book. Porque nos concentraremos apenas na cor, o design será fornecido para você. Finalmente, aprenderemos como adicionar nossas opções de cores a um guia de estilo para facilitar a entrega de trabalhos aos desenvolvedores. Tudo o que você precisa é de uma cópia do Photoshop ou do Illustrator para acompanhar as lições. Esta aula é destinada a iniciantes que desejam melhorar suas habilidades de cores e designers experientes que desejam aperfeiçoar seu fluxo de trabalho de cores. No final da aula, você terá uma maquete colorida para compartilhar com a comunidade Skillshare, juntamente com uma sólida compreensão de como escolher e aplicar cores ao seu próprio trabalho no futuro. Vamos começar. 2. Apresentação: Ei pessoal, bem-vindos à minha segunda aula de Skillshare sobre fluxo de trabalho de cores. Então, se você acabou de terminar minha primeira aula e enviar seu projeto, você deve ter um único piloto escolhido antes de passar para essas lições. Nesta aula, vamos implementar nossa paleta de cores, mas não antes de aprender um pouco sobre outro tópico importante. Então, aqui está uma citação que eu realmente amo de Josef Albers, “Na percepção visual, uma cor quase nunca é vista como realmente é... Esse fato torna a cor o meio mais relativo na arte.” Albers foi um pintor abstrato e professor da Alemanha, e ele publicou um curso muito influente sobre teoria das cores em 1963. Ele estava completamente certo. A cor é muito relativa, não apenas da forma como aparece de forma diferente em diferentes dispositivos e telas, mas também pode ser vista de forma diferente por pessoas diferentes. E isso é algo que realmente precisamos estar mais atentos ao projetar. Quando você pensa sobre os tipos de deficiências que podem afetar como as pessoas usam a tecnologia, as primeiras coisas que podem vir à sua mente são provavelmente mais extremas. Então, você pode pensar em uma pessoa sendo totalmente cega, ou você pode pensar em alguém que tem uma deficiência grave e que só é capaz de usar um teclado ou mouse. Você provavelmente é ainda mais provável pensar em pessoas mais velhas e considerar tamanhos de fonte apropriados para pessoas que têm problemas para ler pequenos textos nas telas. Mas a cegueira de cor, também é um tipo de deficiência que afeta uma porcentagem surpreendentemente grande da população. Não se fala muito sobre isso. Então, cegueira de cor muito raramente significa que você não pode ver nenhuma cor. Não significa que as pessoas vejam coisas em escala de cinza. Na verdade, é uma diminuição da capacidade de ver a cor, ou uma diminuição da capacidade de diferenciar as cores umas das outras. cegueira de cor é uma característica ligada ao sexo, e é muito mais comum nos homens do que nas mulheres. No geral, ocorre em oito por cento dos machos, mas apenas 0,5 por cento das fêmeas. Pense nisso por um segundo. Isso é quase cinco por cento da população total. Não podemos ignorar que muitas pessoas estão no nosso trabalho. Vou falar mais sobre o porquê na próxima lição. 3. Como isso afeta as pessoas: Tenho muita sorte de ter uma boa visão colorida, mas não vou mentir. Como qualquer outra pessoa com boa visão de cor, é definitivamente algo que eu tomei como garantido. Nunca considerei os efeitos da daltonismo até conhecer alguém que aprendeu a viver com isso. Acho que a primeira pessoa que conheci que falou abertamente sobre ser daltônico foi meu instrutor de fotografia da faculdade, e alguns anos atrás, entrei em contato com ele de novo e ele me contou como descobriu que tinha. O meu professor de design, John Solowski, apontou-me no meu primeiro ano e na Universidade Ryerson. Eu realmente era bastante inútil como uma impressora colorida. Acho que foi por isso que a fotografia a preto e branco me atraiu tanto. Então, para o meu instrutor, isso significava que ele decidiu trabalhar menos em fotografia colorida e mais em preto e branco. Mas para outras pessoas, pode ter consequências muito mais devastadoras. Muitas indústrias realmente realizam testes de triagem para carreiras onde a visão de cores é um requisito absoluto. Então, as pessoas que esperavam se tornar pilotos, eletricistas, engenheiros e técnicos de laboratório, eles geralmente têm que completar um teste antes de serem contratados, e às vezes, é depois que gastam muito dinheiro e muito tempo em sua educação. Muitas destas pessoas sentem que enfrentam discriminação depois de falharem nos testes de revisão, quando, na realidade, não têm absolutamente nenhum problema em executar qualquer uma das tarefas do seu trabalho. Então, uma vez li uma história pessoal de um homem que recebeu um diploma associado em ciências de laboratório médico. Quando ele foi avaliado para um emprego em potencial, ele falhou no teste de cor e o médico realmente lhe disse que era hora de encontrar uma nova carreira. Então, mesmo que ele fosse mais do que capaz de cumprir os deveres e ele obteve notas muito altas em suas clínicas, ele foi considerado um risco para o hospital no papel. Alguns de vocês podem estar pensando, “Bem, estamos apenas projetando sites, certo? O que isso tem a ver conosco?” Bem, a resposta simples é que todos nós devemos nos esforçar para tornar nosso trabalho o mais acessível possível por respeito aos nossos leitores, e eu acho que é a coisa certa a fazer. Mas se você ainda não está convencido, isso também contribui para um caso de negócios útil. Então, se uma pessoa achar impossível ou uma dor total para navegar no seu site por causa de um problema de cor, só vai encontrar uma alternativa. Se você se lembrar que 5% da população total é afetada, é muito fácil ver como esse tipo de problema pode se traduzir em leitores perdidos e vendas, e ninguém quer que isso aconteça com seus negócios. Em uma nota mais séria, problemas de acessibilidade podem colocá-lo em alguma água muito quente no mundo legal. Em 2011, três mulheres cegas da Califórnia e Kansas receberam permissão de um juiz para apresentar uma ação coletiva. Foi arquivado contra a Walt Disney Company por ter um site que era inacessível para aplicativos de leitura de tela, e as mulheres realmente ganharam. Eles chegaram a um acordo fora do tribunal com a Disney antes de irem a julgamento. Não quero assustá-los, pessoal, mas pensem nisso. Estaria preparado para enfrentar as consequências se esse tipo de coisa acontecesse com você? Provavelmente não. Mas, felizmente, daltonismo não é difícil de entender e não é difícil de projetar, então não há absolutamente nenhuma razão para que você não possa fazer essa parte de cada fluxo de trabalho. 4. O que isso parece?: Então, vamos falar um pouco sobre como daltonismo realmente acontece. Vamos olhar dentro do olho humano para ver como funciona. Então, esta é uma ilustração transversal do interior da retina humana típica. Há dois tipos de células receptoras no interior: varas e cones. As hastes são as células que nos permitem ver escuridão e luz, e forma e movimento. Os cones são as células que nos permitem perceber a cor. Existem três tipos de cones; cada um é responsável por absorver comprimentos de onda azul, vermelho e verde no espectro. Problemas com a visão de cores ocorrem quando um ou mais desses tipos de cones estão defeituosos ou ausentes inteiramente. Esses defeitos podem ser herdados através da genética ou realmente adquiridos através de coisas como trauma, exposição à luz ultravioleta, degeneração com a idade e diabetes eficaz ou outros vários fatores. Eu mencionei anteriormente sobre o Dr. Jay Neitz, o pesquisador de visão colorida da Faculdade de Medicina de Washington, e embora ele tenha dito que uma pessoa com visão colorida totalmente funcional pode distinguir até um milhão de cores diferentes, uma pessoa faltando um tipo de cone é limitada a apenas 10 mil cores. Então, com esse tipo de defeito, é muito mais provável que uma pessoa não tenha um tipo de cone esteja completamente ciente de sua condição. Então, há três tipos principais de daltonismo. Vou mostrar imagens simuladas das versões mais severas. Pessoas com os tipos mais comuns de daltonismo como protanopia e deuteranopia têm dificuldade em discriminar tons vermelhos e verdes. Então, uma imagem de uma roda de cores pode parecer assim, para alguém com cegueira de cor tipo protanopia e pode parecer assim para alguém com deuteranopia. Embora, os problemas de cor vermelho-verde sejam os mais comuns, também existem formas de cegueira de cor como a tritanopia, que afetam os tons azul e amarelo. O que significa que a nossa roda de cores pode parecer algo assim. Nas próximas lições, falaremos sobre alguns passos simples que você pode fazer para criar designs mais acessíveis sem sacrificar a estética. 5. Nomes de cores: Assim, embora certas combinações de cores devam ser evitadas sempre que possível, como vermelho e verde. Não devemos gastar todo o nosso tempo nos preocupando em alcançar a paleta perfeita. Há toneladas de outras dicas e truques que podemos usar para melhorar a experiência de um usuário daltônico. Então, a primeira coisa a ter em mente é garantir que você inclua rótulos de nome de cor, ao lado de qualquer amostra de cor que você usa em um site. Então, aqui estão alguns caras vestindo alguns fatos azuis realmente elegantes. Certo? Não, isso é exatamente o que uma pessoa com protanopia severa pode ver. Então, em uma situação mais prática, digamos que você tenha um site que vende T-Shirts, se você mostrar apenas uma foto da T-Shirt, pode ser impossível para uma pessoa dizer qual a cor da camisa realmente é. Então, para ajudar a evitar qualquer confusão, certifique-se de referenciar o nome da cor na descrição do produto. Os trabalhadores da United Pixel vendem camisetas online e fazem um ótimo trabalho seguindo essa regra em seu site. Então, eu sou de St. John's e esta é nossa camiseta e a paleta de cores é baseada em nossa bandeira local, que é uma bandeira não-oficial rosa, branca e verde. Essa é uma combinação de cores que eu posso imaginar algumas pessoas não gostando muito. Mas a descrição é clara, há uma Torre Cabot rosa em uma camisa Kelly Green. Isso significa que não deve haver surpresas se uma pessoa daltônica ver isso. Como os caras do terno rosa, há uma grande diferença aqui. Talvez andar de bicicleta rosa não seja grande coisa, mas você também precisa ter cuidado ao escolher nomes de cores. Se a cor é roxa, chame-a de roxo em vez de algo como uva. Se você pensar sobre isso, as uvas podem ser verdes ou amarelas, há uvas vermelhas claras, vermelhas escuras, e se a cor é cinza, na verdade chamá-lo de cinza claro em vez de fumaça. fumaça pode ser praticamente qualquer cor marrom, preto, azul ou o que seja. Fique com poucos nomes, tanto quanto possível. Há uma maior chance de que o espectador realmente vai entender que uma camisa roxa é roxa, em vez de qualquer outro número de cores, e isso não vai forçá-los a pedir a outra pessoa para esclarecer para eles. Então, aqui no nosso site Bike Book, você notará que a opção de cor para escolher sua bicicleta é verde claro em vez de hortelã ou azul-petróleo ou espuma do mar ou qualquer cor que você queira chamá-la. Este é definitivamente o caminho a seguir. Na próxima lição, falaremos sobre instruções específicas de cores e como evitar usá-las em seu trabalho. 6. Instruções específicas para cores: Então, a próxima coisa que eu vou falar é sobre nossas instruções específicas de cor. Então, o que eu quero dizer com isso é, não diga a uma pessoa para fazer coisas como clicar no botão verde para comprar um produto ou clicar no botão vermelho para cancelar seu pedido. Porque as pessoas daltônicas provavelmente vão ter problemas, na verdade encontrar esse botão em sua página. Vou mostrar-vos alguns exemplos. Este é um bom exemplo do que não fazer ao projetar formulários. Evite rotular campos obrigatórios apenas com texto colorido. Se você é uma pessoa daltônica, provável que você não seja capaz de dizer quais rótulos estão destacados. Todos vão parecer pretos. É mais seguro usar um símbolo q como um asterisco, que é independente de cor. Mas você também deve ter em mente que, alguns leitores de tela usados por pessoas com deficiência não vão realmente ler asterisco em voz alta. Então, uma solução ainda melhor é usar uma referência de texto diretamente no rótulo dos fóruns. Não importa qual daltonismo uma pessoa tem, você sabe que ela vai ser capaz de lê-lo.Outro problema que surge com o InDesign colorido está em infográficos e gráficos. Então, estamos usando qualquer inforgraphics ou gráficos no site do livro de bicicletas. Mas ainda é realmente importante entender como isso pode ser um grande problema para uma pessoa com deficiência visual. Dê uma olhada neste gráfico. Se você não conseguir rotular diretamente suas regiões de dados, não confie apenas na codificação de cores como esta. Você deve tentar usar uma combinação de cor com textura ou um padrão juntamente com rótulos precisos e refletir isso na chave, como a aqui no topo. Quando você combina o fundo com um padrão único, ele sempre dará ao usuário duas informações para trabalhar. A mesma coisa se aplica com gráficos de linhas. Gráficos de linha pode ser bastante difícil de ler se eles continham caminho de interseção. À direita, você pode ver como os caminhos se misturam completamente para uma pessoa com Deuteraopia. Então, neste caso, você pode tentar aumentar a espessura de uma linha e dar-lhe um estilo diferente. Você pode ver aqui que este exemplo é muito mais óbvio e mais fácil de ler. Aqui está um exemplo de um gráfico bem projetado do Google Analytics. No lado esquerdo está a chave, e no lado direito está o gráfico de pizza com cada fatia diretamente rotulada. Então, mesmo nesta simulação daltônica, você ainda pode entender a informação. Infelizmente, os gráficos não são realmente consistentes. Em outra área do mesmo tamanho, o gráfico está em rótulos e pode parecer bastante confuso, especialmente quando as partes do gráfico são semelhantes em tamanho. Mapas podem ser outro grande problema. Eu uso este exemplo uma lavagem, do sistema de metrô de Londres. Infelizmente, o design do mapa subterrâneo tem muitas cores nele que são basicamente indistinguíveis entre si para uma pessoa com um problema de visão, como nesta imagem estimulada. Isso é verdade não só para o London Underground, mas também para qualquer outro sistema de busca que se baseia na codificação de cores como a única chave em uma lenda. Na verdade, há uma versão imprimível do mesmo mapa disponível no site Transport for London em preto e branco. Este usa padrões e tons nas linhas, mas o ponto é que não haveria necessidade desse tipo de mapa se fosse projetado com acessibilidade em mente desde o início. Então, lembre-se, combine cor com padrão ou textura, rotule seus campos e suas informações serão muito mais fáceis de ler para todos. 7. Conformidade e testes: Então, há muitas ferramentas lá fora para simular diferentes tipos de daltonismo, e é realmente importante verificar seu design para detectar quaisquer problemas potenciais na frente. Não se esqueça que nem todas as pessoas daltônicas verão as mesmas cores que aparecem no simulador de cores, porque os simuladores são feitos apenas para imitar a visão das pessoas mais fortemente afetadas. Então, minha ferramenta favorita absoluta para testar daltonismo está disponível no macOS, Windows e Linux, e é chamada Color Oracle, e é grátis. Quero que baixem isto imediatamente e vejam no Colororacle.org. Este aplicativo simula os tipos mais comuns de daltonness como você usa aplicativos em sua própria tela. Então, é basicamente um filtro de tela cheia que funciona em todo o sistema operacional e não importa qual aplicativo você usa. Você também pode provar os dois tipos mais comuns de daltonness diretamente no Photoshop ou no Illustrator enquanto está projetando, e você pode encontrar essa opção no menu Exibir e Configuração de prova. O contraste de cores também é incrivelmente importante para testar, e isso pode infectar qualquer pessoa, não apenas pessoas com daltonismo. Eu acho que muitos de nós designers, nós realmente podemos ser culpados de baixo contraste projetado muitas vezes. O que podemos pensar como um efeito sutil e bonito, pode ser impossível para, digamos, sua avó ver. Alguns de vocês podem estar familiarizados com o W3C. Eles são uma organização internacional e desenvolvem padrões para a web para ajudar a alcançar todo o seu potencial. O W3C realmente desenvolveu diretrizes de acessibilidade de conteúdo da web, que são recomendações para tornar o conteúdo na web mais acessível aos usuários com deficiência. Há três níveis de conformidade. Um sendo o mais baixo, AA sendo o segundo melhor, e AAA sendo o mais alto e mais rigoroso. A taxa mínima de contraste de cor no nível AA para texto e imagens de texto deve ser de 4,5 a 1. Em outras palavras, a cor da letra em um par deve ter quatro vezes e meia mais luminância que a cor mais escura. A conformidade com o nível AAA requer uma taxa de contraste de sete para um. Dê uma olhada no texto no rodapé deste site. Mesmo para uma pessoa com boa visão, é incrivelmente sutil e difícil de ler. A taxa de contraste realmente parece ser 2,36, o que é inaceitavelmente baixo e não atende a nenhum dos níveis de conformidade. Pessoalmente, eu recomendaria que todo o corpo do texto seja compatível com AAA, com manchetes maiores e cópias menos importantes atendendo à conformidade AA. Esses caras devem tentar fazer o contraste do rodapé pelo menos 4,5. Então, o desenvolvedor Leaver Rue surgiu com esta ótima ferramenta, onde você pode inserir um código de cor para texto e um código de cor para um fundo e ele irá dizer-lhe se a taxa de contraste de cor é suficiente. Eu amo essa ferramenta porque ele suporta qualquer cor CSS que o navegador suporta, não apenas códigos hexadecimais. Ele também suporta transparências que podem realmente vir a calhar. Então, podemos digitar praticamente qualquer cor aqui e a taxa de contraste será atualizada imediatamente. Você também pode copiar o URL, marcá-lo e enviá-lo para outra pessoa para ver. Então, se você tiver uma cor que não passe no teste, talvez queira conferir essa ferramenta antes de voltar e ajustar sua paleta. Eu só descobri isso há algumas semanas. Chama-se “Localizador de Contrastes Tanaguru”. Então, eu vou verificar a paleta que eu fiz para o livro de bytes. Então, eu só vou para o Illustrator aqui e eu vou testar a tela. Então, eu imaginei que esta cor poderia ser boa para uma cor de fundo para um botão. Então, eu vou pegar o código hexadecimal aqui e visitar este site. Então, aqui eu vou aparecer na cor do primeiro plano. Então, se vai ser texto branco, eu vou fazer isso esbranquiçado, e então eu vou pegar o código de fundo, e lá está ele. Então, se ele precisa ser editado, eu posso alterar o componente para editar aqui. Então, eu queria editar a cor de fundo, obviamente, e a proporção mínima deve ser 4,5. Então, aqui você tem duas opções e eu vou deixar esta em uma gama de cores válidas só para ver o que está disponível para nós. Então nós rolamos para baixo, e aqui vamos realmente mostrar que a proporção agora desse texto branco nessa cor é 2,8, que é muito baixo e todas essas cores abaixo, todas são aprovadas e têm proporções acima de 4,5. Então, eu posso simplesmente rolar para baixo e selecionar qual cor eu acho que é a melhor correspondência. Claro, muitos destes parecem bastante diferença e alguns deles vão completamente nada como o que eu escolhi, mas o mais próximo ao topo não é realmente muito ruim. Então, eu posso ir aqui, e selecionar essa nova cor, e colocá-la de volta no Illustrator. Eu vou fazer uma nova amostra embora porque eu posso manter essa cor antiga para ilustrações e coisas que não são importantes ou coisas que não precisam de texto sobre eles. Então, essa pode ser a minha nova cor e uma nova adição à paleta. Agora, quero que vocês testem sua paleta para qualquer problema de contraste. Se você encontrar algum dos principais, veja se você pode ajustá-los até encontrar a taxa de contraste correta. Depois disso, estaremos prontos para implementá-los em nosso design. 8. Primeiros passos: Então, vocês chegaram até aqui e estou muito feliz que tenham ficado com ele. Você provavelmente já percebeu quanto trabalho de fundação realmente vai para a escolha de esquemas de cores eficazes. Então, todas as informações que você aprendeu sobre teoria de cores e mensagens, significado e acessibilidade, podem parecer completamente esmagadoras no início, mas quanto mais você faz isso, mais fácil fica, e eventualmente você será capaz de misturá-lo em seu fluxo de trabalho de forma bastante natural. Eu sei que a primeira vez que eu comecei a aprender sobre daltonismo, eu sempre testo absolutamente tudo o que eu fiz, mas eventualmente ele acabou se tornando segunda natureza e agora eu tenho um olho muito melhor para detectar problemas antecipadamente em vez de encontrá-los no final, e você vai chegar lá também. Agora, é hora de entrar na parte realmente divertida e acetar nossa paleta e realmente implementá-la no site do BikeBook. Na verdade, implementar sua paleta em um design pode ser a parte mais difícil para muitos designers, mas como sempre, há truques que podemos usar. Um dos truques mais fáceis de usar é a regra 60, 30, 10, que é usada por um monte de designers de interiores e você pode fazer este trabalho em web design também e até mesmo funciona em colocar roupas juntas. Então, se você não é o melhor em se vestir, você não terá mais nenhuma desculpa. Então, eu vou mostrar a vocês um design de página sem cor aplicada semelhante ao nosso modelo BikeBook escala cinza e minha paleta ali à direita. Primeiro, 60 por cento da cor é adicionada às paredes ou, no nosso caso, o fundo da página. Isso também pode incluir branco ou preto, se é assim que você deseja que sua página seja exibida. Trinta por cento da cor é adicionada às cortinas e coberturas de piso. Então, no nosso caso, isso seria o banner da página e o rodapé da página. Dez por cento da cor é dada a acessórios e obras de arte e para nós isso significa botões, links e outras cores de destaque. Vou demonstrar isso ainda mais usando minha paleta e o site do BikeBook. Então, como antes, eu vou usar o Illustrator já que como o que eu me sinto confortável e é o que eu prefiro mostrar aos desenvolvedores para a direção se eu estiver projetando wireframes, mas eu também incluí um arquivo do Photoshop se você quiser para trabalhar com isso em vez disso. Então, eu vou abrir o Illustrator e meus wireframes BikeBook. Agora, eu quero mostrar a vocês isso primeiro, se vocês olharem para a paleta de camadas, vocês notarão que todas as camadas de cada seção da página estão aqui. Então, você pode fazer drill-down dentro deles para ver quaisquer objetos ou formas que você gostaria de alterar a cor. Então, vou me certificar de que minha paleta de amostras está aberta aqui. O que eu fiz foi colocar minha paleta final aqui em cima. Então, o que eu vou fazer é selecionar todas as minhas cores, vir para a paleta de amostras, o menu suspenso e criar um novo grupo de cores. Vou mantê-lo como Arte Selecionada, Converter Processo para Global e vou chamá-lo de BikeBook. Isso nos permite ter todas essas cores como parte de nossas amostras. Nós podemos excluir estes e apenas ir em frente e começar a aplicar cor. Então, eu desenvolvi esta paleta baseada na fotografia da estrada. Então eu vou em frente e colocar essa foto em meus wireframes. Vou cortá-lo e posso posicioná-lo como eu quiser. Então, sinta-se livre para mover este texto se precisar, se você sentir que ele não funciona com sua fotografia. Então, vou começar aplicando o roxo mais escuro a alguns desses painéis na página e o primeiro após a foto ajudará a definir o tom para o esquema de cores para o resto da página. Na verdade, é uma das primeiras cores que um usuário verá quando visitar um site. Então, vai causar uma grande impressão. Você realmente não quer enterrar suas principais cores de marca muito abaixo na página. Então, eu fiz meu texto branco para ter certeza de que eu tenho um bom contraste e agora vamos rolar para baixo e fazer o mesmo para isso como painel. Quebrar a cor ajudará a desenhar seus olhos de cada seção para a próxima e evitar que pareça muito chato. Então, obviamente, não se preocupe muito com nenhum dos elementos cinzentos no topo ainda. Queremos estabelecer as bases e deixar tudo se encaixar no final, e se não acontecer, podemos sempre ajustá-lo mais tarde até que estejamos felizes. Novamente, vou pular esta seção com os formulários. Acho que quero isso no branco. Então, eu vou aplicar esse roxo novamente a este painel de localização. Então, basicamente, temos três seções principais com o mesmo roxo. Temos o que é, como funciona e onde você pode encontrá-lo. Então, em seguida, eu vou aplicar 30 por cento da minha cor para o cabeçalho da página e o rodapé da página. Então, neste caso, nosso cabeçalho vai ser a barra de navegação. Quero dizer, o cabeçalho inclui a foto também, mas como já tem na cor, preciso de algo para fazer essa navegação se destacar. Então, um truque que eu gosto de tentar é adicionar um peso visual ao cabeçalho e rodapé escolhendo uma cor mais escura. Ele ajuda a atuar como uma âncora para fazer a navegação se destacar sem olhar para fora do lugar. Então, eu só vou escolher o roxo mais escuro da minha paleta que é quase preto. Eu acho que o preto puro será muito duro na minha página, modo que o roxo mais escuro realmente funciona muito bem. Então eu vou rolar todo o caminho até o rodapé e eu vou fazer a mesma coisa. Então, neste ponto, devemos ter nossas duas primeiras cores de paleta no lugar. Como eu mencionei antes, não se preocupe muito se você não estava feliz com ele ainda, você vai chegar lá. Ainda temos nossas cores de acento para adicionar, o que discutiremos mais na próxima lição. 9. Mantendo a consistência: Portanto, uma coisa importante a lembrar quando você está implementando cores em seu design é manter sua cor consistente. Basicamente, o que isso significa é não ficar muito louco com sua paleta e fazer cada botão e link na página uma cor diferente. Quando um visualizador vê uma mudança de cor, pode interpretá-la como sendo também uma mudança na mensagem ou no significado. Então, uma boa regra geral é se você tiver propriedades compartilhadas, usar uma cor semelhante e se seus elementos de design tiverem idéias diferentes, talvez usar cores diferentes. É a mesma coisa que codificação de cores. Mantenha a cor consistente das mensagens de erro. Mantenha links sua própria cor e se você tem algo que realmente deve se destacar em uma página como um botão de call-to-action, um que diz comprá-lo agora ou inscrever-se agora, você pode querer considerar fazer que uma cor toda a sua própria. Vou demonstrar no nosso site. Então, para nossos links de texto, vamos tentar escolher uma cor e ficar com ela. Vou experimentar o nosso roxo médio aqui. Não há muitos links nesta página, apenas aqui no banner do Instagram. Vou manter meus links sublinhados para ajudá-los a se destacar para que não haja dúvidas de que esses são links. Em seguida, vou trabalhar nas manchetes da página. Então, eu vou escolher um roxo mais escuro e aplicá-lo a qualquer coisa que eu acho que deve ser uma manchete, desde que esteja em um fundo branco. Eu também vou fazer esses passos da mesma cor. Ele vai ajudar o leitor ao longo e quebrar o local e torná-los passos claros. É uma diferença sutil, mas você quer mantê-la consistente. Em seguida, eu vou trabalhar provavelmente na coisa mais chata em web design e que são formas. Formulários definitivamente não são os mais divertidos do mundo, mas eu acho que dar-lhes um pouco de TLC extra pode realmente fazer uma enorme diferença na aparência geral do seu site. Então, eu vou puxar um pouco do meu roxo aqui, mas eu vou torná-lo realmente sutil. Então, eu vou usar o mais recente roxo que eu tenho e eu vou adicionar um pouco mais escuro roxo para a borda e eu vou repetir isso para o resto dos elementos do formulário. Eu vou desvanecer todos esses textos de calendário bem e eu vou acenar as áreas de cabeçalho do nosso calendário para o mesmo roxo escuro que usamos em nossa navegação. Tudo bem. Como podem ver, mantive tudo bem consistente, mas está tudo muito roxo. Mudei estes para roxo e também dei alguns detalhes roxos aqui em baixo. Então, vamos rolar de volta para o topo da página e vamos dar uma olhada no nosso botão de call-to-action. Então, eu realmente quero que isso se destaque. Quando um cliente em potencial chega a esta página, queremos que ele a veja imediatamente, especialmente se já souber que quer reservar uma bicicleta e só querem fazê-lo. Então, eu vou adicionar o meu cerco mais escuro aqui e eu vou deixar meu texto branco, que eu acho que parece muito bom em cima desta foto e vamos mover para baixo a página. Você deve ter notado que eu tenho ignorado essas ilustrações e nós vamos fazer isso por último. Então, aqui no calendário, vamos fazer este seletor de intervalo de datas cerco também. Ele definitivamente precisa se destacar, pois precisa ser claro quais datas o usuário está escolhendo. Seguimos em frente novamente e agora vamos mudar o botão do livro agora. Finalmente, o último botão enviar mensagem. Outra dica aqui para ter em mente é se você tem um site com um monte de páginas diferentes, tente não alterar a cor da página inteira, o fundo de página para página como se o seu fundo é vermelho em uma página e, em seguida, azul e, em seguida, outra página roxo. Eu vi muitos sites fazer isso e apenas alguns têm realmente puxado para fora. Eu acho que na maioria das vezes ele pode apenas enfraquecer as impressões dos espectadores de sua marca. Se você é uma empresa realmente estabelecida, você pode conseguir se safar disso, mas se você estiver apenas trabalhando em um site para uma startup e cada página tiver uma cor diferente, você está tirando mais uma coisa que seus espectadores vão lembrar de você por. É como revistas que obscurecem tanto o logotipo fora do modelo de capa que você nem consegue ler mais. Eu acho que eles podem se dar ao luxo de fazer isso porque seus leitores já sabem o que eles estão procurando. Então, lembre-se de tentar manter isso consistente. 10. Cor nos ícones: Então, pessoal, estamos quase lá. A última coisa a terminar em nossa página é como ilustrar ícones. Então, vou editar minhas cores aqui no modelo de página inteira, mas criei arquivos separados do Illustrator e do Photoshop para esses arquivos se você preferir trabalhar neles um de cada vez. Eu gosto de editar o meu contra o fundo real que eles vão ser usados apenas para ver como tudo funciona em conjunto, mas realmente depende de você. Então, eu vou me certificar de que minha amostra é aberta novamente, e eu vou aplicar a cor de maneiras semelhantes antes. Mas desta vez, acho que vou começar com o cerco. Nós realmente não temos muito disso em nossa página agora, e eu acho que esta é uma boa desculpa para começar a usar alguns. Eu gosto de ter certeza de que eu tenho pelo menos uma instância de cada cor em minha paleta em meus ícones se eu puder. Acho que isso realmente ajuda a amarrar tudo junto com o esquema de cores se você pode refleti-lo aqui nos ícones, também. Também é ótimo porque pense no potencial de ilustrações na estrada, retroceder ou planeja expandir. Todas essas ilustrações poderiam ser puxadas aqui e usadas em publicidade ou cartazes ou o que quer que seja, e elas já terão todas as cores da marca lá dentro. Então, aqui está o meu projeto acabado. Fiz alguns ajustes conforme necessário. Eu adicionei um pequeno destaque aqui para mostrar em que seção estamos. Eu adicionei uma pequena borda preta sutil em torno dessas ilustrações apenas para torná-lo destacar-se do fundo um pouco mais. Eu também puxei para trás o contraste de texto de um 100 por cento preto para cerca de 80 por cento preto, como eu mencionei anteriormente na primeira classe, apenas para torná-lo um pouco menos tenso sobre os olhos. Ele ainda vai ter uma boa taxa de contraste que é a parte mais importante. Tudo é consistente e tudo está acabado. Lembre-se de que você pode ter que fazer testes de cor de arquivo no navegador. Estamos essencialmente fazendo uma maquete para desenvolvedores ou outros designers para seguir, e você só pode fazer muito em programas destinados a design de impressão como Illustrator ou Photoshop. Então, verifique todas as suas cores, especialmente as cores de texto no protótipo de trabalho no navegador apenas para ser seguro. Quero que verifiquem o seu design, façam uma verificação final com oráculo de cores para daltonismo, e verifiquem todas as áreas que possam ter um potencial problema de contraste de cores. Quando estiver pronto, faça o upload de uma versão final do site do livro de bytes para revisão. Eles não podem esperar para ver o que vocês vão inventar. 11. Guias de estilo: Então, pessoal, vocês entregaram seu projeto, mas ainda temos algumas coisas para conversar. O que acontece com sua paleta depois de terminar seu design pode ser tão importante quanto o que acontece antes e durante sua tomada de decisão. Então, quantos de vocês trabalharam com outro designer ou um desenvolvedor e acabaram de entregar uma maquete acabada para eles, e vocês voltam duas semanas depois e todas as suas escolhas de cores estão completamente erradas? Soa familiar? Eu acho que todos nós já estivemos lá em um momento ou outro, mas há algumas maneiras de você ajudar a evitar que esse tipo de coisa aconteça. O mais importante é criar um guia de estilo para outras pessoas envolvidas no seu projeto seguirem. Um guia de estilo tradicional é geralmente produzido por uma agência de publicidade e destina-se a cobrir as regras e diretrizes de como toda a sua filial deve ser usada. Isso pode incluir qualquer coisa, desde o tamanho do logotipo até a colocação do logotipo, como usar a fotografia, que tipo de fontes você deve usar e como a cor deve ser usada. Normalmente, esses documentos acabam sendo uma enorme pilha de papel. Uma vez recebi um guia de estilo de 50 páginas na minha mesa para uma única marca. Os guias de estilo estão se tornando muito mais comuns no web design nos dias de hoje, mas eles geralmente são bem diferentes dos guias tradicionais para impressão. Muitos guias de estilo têm coisas como módulos reutilizáveis, trechos de código e padrões que os desenvolvedores podem se referir, para usar em todo um site. Este é realmente famoso da Starbucks que saiu há alguns anos. Eu poderia falar sobre guias de estilo em detalhes para sempre, mas isso provavelmente vai ocupar toda uma nova classe de Skillshare. Então, se algum de vocês é realmente sério sobre web design, eu recomendo ler um livro de Anna Debenham chamado Guia de Bolso para Front-End Style Guides. É um livrozinho incrível. Ela ensina praticamente tudo o que você quer saber sobre a criação de guias de estilo para a web. Mas, para esta aula, vamos apenas falar sobre como preparar suas escolhas de cores para outros desenvolvedores e designers. Então, aqui está um arquivo muito básico que eu inventei e que eu poderia enviar para um desenvolvedor. Não é excessivamente detalhado, mas pode ser suficiente se você estiver trabalhando em um pequeno site como BikeBook. Gosto de incluir valores RGB e códigos hexadecimais para cada amostra. Se você sabe que suas cores serão usadas em impressões e você não precisa de tintas especiais como tintas Pantone, você pode incluir valores de cores CMYK aqui também. Eu também gosto de rotular as cores se eles têm funções muito específicas. Então, este é para ser usado para itens de navegação. Este é usado para estados flutuantes, e qualquer outra coisa que você precisa. Você também pode exportar sua amostra como um arquivo ASE e enviá-la junto com sua maquete para que outros designers e desenvolvedores baixem. Então, você pode abrir sua paleta de amostras aqui no Illustrator. Se você selecionar esta pasta de suas amostras e ir para a Biblioteca de Amostras Salvas como ASE, você pode então chamá-la de BikeBook.ase, e você pode adicionar um link para esse arquivo no seu guia de estilo, você pode enviá-lo para outros designers ou o que quiser. Se você não tiver uma simulação, poderá usar o site colorido da Adobe para exportar sua paleta. Tenha em mente que os desenvolvedores realmente, realmente apreciá-lo se você apenas dar-lhes os números de valor de cor. Isso tornará as coisas muito mais rápidas para eles, para que eles não precisem entrar no Photoshop, no Illustrator ou em qualquer aplicativo que você usou e obter os números de cores para eles mesmos. Spectrum pode realmente lidar com isso para você também. Tente exportar sua paleta e salvá-la como um arquivo CSS. Existem diferentes opções aqui para CSS, para Sass, PNG. Nós arrastamos este arquivo para o nosso editor de texto. Você pode ver que todas as cores estão prontas para usar. Além disso, se você conhece HTML e CSS básicos, você pode simplesmente construir seu próprio guia de estilo funcional, que é a melhor opção. Você pode colaborar no guia com outros desenvolvedores e mantê-lo atualizado sempre que algo mudar ou novas cores da marca forem adicionadas. Eu realmente gosto deste guia básico do MailChimp, que eles tornaram público em seu site. É simples, mas faz o trabalho. Todas as cores estão listadas. Você pode copiar o código de cor ou fazer o download do ASE para carregar no Illustrator ou no Photoshop. Então, espero que agora vocês já tenham aprendido muito sobre cores, e não apenas para a web, mas para o trabalho de design e ilustração que vocês podem estar fazendo também. Uma das maiores coisas que eu posso enfatizar depois de fazer essa aula é que, escolher cor é mais uma arte do que uma ciência. A menos que você já tenha um olho incrível para escolher paletas que simplesmente combinam, vai precisar de muita prática para melhorar, assim como qualquer outra coisa no design. Joseph Alvarez também acreditava muito nisso. Costumava fazer com que os alunos aprendessem fazendo isso. Na verdade, colocando cores próximas umas das outras e vendo como elas interagiam. Não basta apenas aprender a ciência e a teoria por trás disso. Você só tem que fazer isso. Se você não tiver a chance de trabalhar com cores que muitas vezes, tente encaixá-lo em seu dia de outras maneiras, mesmo que isso signifique pensar muito sobre jogar uma roupa juntos. Pense nisso quando você estiver fazendo reformas em casa, decorando seus apartamentos, ou quando você vai a uma loja. Pensa nisso o tempo todo. Comece um pouco placa Pinterest de inspiração cor. Basta pegar fotos de esquemas de cores que você realmente gosta e, em seguida, dar uma olhada nele e tentar entender por que ele fica bem juntos. Não se esqueça que não há problema em usar ferramentas para ajudá-lo. É para isso que eles estão lá. Se você não estiver satisfeito com seu projeto, volte a ele em uma data posterior. Volte a ele novamente em uma semana, ou um mês, e olhe novamente com uma mente clara. Você pode ver exatamente por que uma certa cor estava incomodando você, e você pode ser capaz de corrigi-lo imediatamente. Isso é tudo parte do processo criativo. Então, eu espero que você se divirta com suas novas habilidades de cor, e obrigado por acompanhar. 12. Explore o Design no Skillshare: maneira.