Criando um Style Guide no Sketch App ver no navegador
Aula 3
7 minutos de leitura
Cores dentro do Style Guide

Há diversas formas de documentar cores dentro do seu style guide. Alguns designers colocam apenas as cores principais, outros já elaboram variações de tons e outros preferem fazer tudo isso e também adicionar escalas de cinza.

Na UI Lab nós costumamos documentar as cores da marca e no mínimo uma variação clara e escura dela. Além de 3 tons de cinza claro e 3 tons de cinza escuro.

Isso nos garante uma flexibilidade maior na hora de utilizar as cores dentro da interface.

Paleta de Cores da Portabilis - Cliente da UI Lab

Cores da Portabilis - Cliente da UI Lab

Passo 1 - Setando nossa paleta

Crie um retângulo de 160px de largura por 80px de altura com alguma cor presente na sua marca. E faça 2 cópias desse retângulo conforme a imagem a seguir.

Passo 1 - Criando a base para a paleta de cor e suas variações

Passo 2 - Variação clara e escura

Agora vamos criar uma variação clara e escura das nossa cor base. Pra fazer isso mexeremos somente na saturação e no brilho da nossa cor.

Se seu Sketch não estiver com a opção HSB ativa, basta dar um clique em cima de RGB no campo Fill na barra lateral direita para mudar o padrão de cor.

Para achar a variação clara nós sempre vamos diminuir a saturação e aumentar o brilho. Já para descobrir a escura faremos o oposto, aumentaremos saturação e diminuiremos o brilho.

Caso sua cor já tenha algum dos valores em 100 altere apenas o que ainda não está no máximo.

Passo 2 - Encontrando as variações clara e escura da cor principal

Observações importantes:

  1. Nesse método dificilmente será necessário mexer no H (hue). Porque queremos uma variação correta da cor.
  2. Mas se você estiver trabalhando com amarelo ou verde muito claro será necessário diminuir o seu hue. Caso contrário você não terá variações bonitas e harmônicas.
  3. Mude o nome da sua cor e o hexadecimal também. Se você quiser, pode adicionar outras informações dentro do seu retângulo, como: valor HSB, variável no css, valor RGB, etc. 
  4. Faça o mesmo processo em todas as cores da sua paleta.

Passo 3 - Tons de Cinza

Agora que já temos nossas cores da marca devidamente definidas dentro do style guide, vamos trabalhar os nossos tons de cinza.

A forma para encontrar as variações clara e escura dos tons de cinza é um pouco diferente do passo anterior. Vamos começar com a cor branca (#FFFFFF) e mexeremos apenas em seu brilho.

Para os tons claros, nós costumamos usar essas porcentagens: 95%, 93% e 91%. Já para os escuros usamos as seguintes porcentagens:  25%, 20%, 15%.

Passo 3 - Escalas de cinza claro e escuro

Caso você não queira utilizar a variação pura do branco, podemos "sujar" nossos tons de cinza com alguma das cores principais. 

No exemplo a seguir nós pegamos o mesmo valor do H (hue 213) do nosso azul e aplicamos onde estava 0. Também colocamos a saturação (S) em 5, porque é ela que vai "sujar" nossos tons cinzas de azul.

Passo 3.1 - Escalas de cinza claro e escuro

Passo 4 - Criando Layer Styles no Sketch

Para facilitar a aplicação das nossas cores em diversos tipos de componentes dentro do Sketch é interessante que criamos seus Layers Styles

Utilizaremos o mesmo princípio visto na aula de tipografia para renomear e criar os estilos.

Renomeando as layers

Conforme você pode ver na imagem a seguir, eu separei cada cor e seus tons dentro de pastas para organizar melhor a estrutura.

Depois disso, selecionei a layer em que a cor está aplicada e usei a seguinte lógica para renomear cada cor: 

Colors / Color Name / Color Tone.

Todas as layers das cores renomeadas seguindo o padrão

Criando os estilos

Agora vamos selecionar todos as nossas layers de cores que foram renomeadas no passo anterior e iremos em: Plugins > Styles Generator >  Generate Shared Styles.

Pronto, você vai ter um resultado igual a esse:

Cores nos estilos compartilhados

Conclusão

Se você seguiu todos os passos corretamente vai acabar com um resultado parecido com o nosso. Além do azul nós também colocamos verde e laranja na nossa paleta. 

Disponha isso lado a lado conforme na imagem e você já terá suas cores documentadas no style guide

Resultado final da paleta de cores

Ao final do curso teremos uma aula com dicas de como deixar todo o documento melhor organizado, então não se preocupe com isso agora.

Se ficou qualquer dúvida hit me up! Até amanhã. 

⚠️ 👨🏻‍🏫

Se surgir alguma dúvida e você for inscrito no Plano Topzera 💎 , basta responder esse email para receber meu suporte em até 24 horas de segunda à sexta.

Willian Matiola
Grande abraço!
Willian Matiola, Co-fundador da UI Lab
Instagram: @willianmatiola
UI Lab

Tv. Germano Magrin, 100 Ed. Pathernon Sala 501, Caixa Postal 136, Criciúma - Brasil

O melhor lugar para ser um UI Designer melhor!

⚠️Não receber mais emails (Unsubscribe) ⚠️