O processo de seleção de cores para a interface pode ser complexo, especialmente quando se considera vários estados de botões, fontes e outros elementos da interface do usuário. Neste artigo, compartilharei meus métodos e princípios que ajudarão você a escolher com sucesso um esquema de cores para o seu projeto.  1. Definindo a Cor Primária  Ao projetar um site, muitas vezes é necessário escolher um esquema de cores. Às vezes, o cliente já possui uma cor de marca primária. Nesse caso, sua tarefa é selecionar cores e tonalidades adicionais que complementem a cor primária. Além da cor principal, cores adicionais são utilizadas no site para diversos fins, como indicar estados de erro, links, ilustrações, ícones ou para uso em gráficos e painéis.  2. Usando Harmonia de Cores  Para garantir que as cores se harmonizem bem, é benéfico usar vários esquemas de harmonia de cores, como monocromático, complementar, triangular e outros. Eles podem ajudar a criar uma paleta de cores harmoniosa que complemente a cor primária do projeto. Atualmente vivemos em um mundo onde a tecnologia avança rapidamente e existem serviços especiais que geram facilmente um esquema de cores. Por exemplo, eu uso  color.adobe.com.   Veja como eu faço isso:    Selecione o esquema desejado na lista suspensa.  um.    Insira o valor da cor necessária no campo indicado como cor base  dois.    Determine quais cores atendem às minhas necessidades. três.    Transfira-os para minha área de trabalho, no meu caso, usando Figma. quatro.  3. Seleção de tons  A seguir, precisamos determinar as tonalidades de cada uma das cores selecionadas. Para selecionar tonalidades para as cores escolhidas, você pode utilizar serviços específicos que podem auxiliar nesse processo. Existem duas maneiras de determinar tons para suas cores:  O primeiro método envolve uma fórmula mais complexa:  Escolha a cor do cabeçalho (não necessariamente preto).  Mude para o modo HLS.  Pule a primeira célula, diminua o valor em 2 para a segunda célula e aumente em 5 para a terceira célula.   O segundo método é usar o serviço (fácil e rápido)   cores.dopely.top    Insira o valor da cor desejada.  um.    Selecione as tonalidades e o número de etapas (usei 5).  dois.    Escolha as tonalidades e o número de etapas.  três.    . Como resultado, para uma cor, criei a seguinte tabela quatro    = Primário, P    = esta é a nossa cor primária, P 60    = esses são os tons claros que coletamos em Tints, de P 10 a P 50    = esses são os tons escuros que coletamos no painel Shades.  de P 60 a P 100  Repita o mesmo processo para outras cores e textos e estados de erro!  4. Verificando a acessibilidade das cores  É importante garantir que as cores escolhidas sejam acessíveis a todos os usuários, inclusive aqueles com habilidades limitadas. Existem diretrizes, como as Diretrizes de Acessibilidade para Conteúdo da Web (   ), que podem ser seguidas ao criar uma interface. Para verificar a acessibilidade de suas cores, você pode utilizar ferramentas específicas como plugins ou serviços web que irão verificar o contraste e a acessibilidade das cores selecionadas. WCAG  Plug-in Figma –  Contraste  Serviço Web –    Coolors  5. Definindo cores para diferentes estados de interface  Na fase final de criação da paleta de cores do seu projeto web, é necessário determinar o número de etapas necessárias para estados de elementos específicos. Normalmente, identificamos quatro estados principais:  Habilitado (estado calmo e normal do elemento)  Passe o mouse (mouseover)  Ativo (clicando em um botão ou outro controle)  Desativado (elemento bloqueado)   Para determinar o número de etapas, utilizamos o painel de cores, onde fixamos nosso valor de cor principal (principal). Em seguida, contamos o número de etapas para os estados de foco e ativo. Depois disso, testamos diferentes estados de acessibilidade para garantir que nossos botões e o texto dentro deles sejam facilmente legíveis.  Por exemplo, as   descrevem a seguinte abordagem: o estado de foco está a um passo e meio da cor inicial, enquanto o estado ativo está a dois passos da cor principal. Da mesma forma, o estado selecionado estará um passo além da cor principal. Este método permite-nos definir a paleta de cores e garantir a sua acessibilidade a um público vasto, incluindo utilizadores com capacidades limitadas. A mesma abordagem é aplicada a textos, onde os estados de foco e ativos são identificados. diretrizes da IBM   Estados de foco  Se a sua cor principal estiver   – você deve subir meio passo para tons mais claros.  entre o preto e o 70  Se a sua cor principal estiver   e branco você deve descer meio passo para tons mais escuros.  entre 60   Pressione / Estados ativos  Para valores de   o estado ativo torna-se dois passos completos mais leve 100 a 70,  Para valores de   o estado ativo torna-se dois passos completos mais escuro  60 a 10,   Estados selecionados  Para valores de 100 a 70, o estado selecionado fica um passo mais leve   Para valores de 60 a 10, o estado selecionado fica um passo mais escuro   Também é importante testar seus designs e textos para garantir que sejam legíveis e exibidos corretamente. Depois de concluir o trabalho, certifique-se de que os diferentes estados e textos da interface tenham aparência e funcionem corretamente.  Lembre-se que são dicas baseadas na minha experiência, você pode adicionar seus próprios passos, alterar a sequência, mas não se esqueça de fazer testes de acessibilidade para que o contraste do seu texto e os diferentes estados da interface possam ser bem lidos por qualquer usuário.  A escolha certa de um esquema de cores desempenha um papel fundamental na criação de uma interface de usuário amigável e atraente. Seguindo estes passos simples e utilizando as ferramentas disponíveis, você poderá selecionar e otimizar cores para o seu projeto.  Espero que você tenha gostado do meu artigo. Se você tiver alguma dúvida ou precisar de mais informações, fique à vontade para deixar um comentário.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Boost your HackerNoon story @ $159.99! 🚀

Como selecionar cores e determinar tonalidades para diferentes estados: Passe o mouse, Ativo, Pressione, Desative

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Modelo Bitcoin UTXO, alimentando um ecossistema único

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Telegram: a ponte da Crypto Island para o continente

Modelo Bitcoin UTXO, alimentando um ecossistema único

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Telegram: a ponte da Crypto Island para o continente

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps