Motivos Para Projetar Interfaces em Tons de Cinza

Lenine
UI Lab
Published in
3 min readSep 3, 2019

Crie suas telas com escala de cinza.

Criar telas com escala de cinza antes de dedicar toda atenção no design ajuda a manter o foco na UX — falo por experiência própria.

Por que isso é bom para sua produtividade?

1 — Você se concentra nos aspectos “invisíveis” do projeto

Quando você começa a projetar com restrição na paleta de cores, a maior parte do seu tempo é dedicado a descobrir como melhorar os aspectos “invisíveis” do projeto. Ex.: arquitetura, legibilidade (tipografia, line height, kerning, etc.), interação, usabilidade, tamanho dos botões, agrupamento de tarefas, espaçamentos, etc.

2 — O usuário faz perguntas “cirúrgicas”

Planejar um design adequado leva tempo, no início de cada projeto essa parte SEMPRE está incompleta. O usuário — normalmente — não passa um feedback construtivo, então, uma solução prática é exibir uma versão mais sofisticada do sistema — gerado a partir de um wireframe — assim eles conseguem assimilar/entender o processo e fazem perguntas mais cirúrgicas.

O discurso muda a nosso favor, perguntas como: “Por que você escolheu o azul para esse botão?”, são substituídas para algo como: “Qual cor você vai usar/funciona nesse botão?”.

3 —Sugestão de interface limpa

Montar um design simples e limpo — minimalista — não é uma tarefa fácil, dependendo do contexto. Quando o projeto está em preto/cinza, a primeira versão do seu design pode ser apresentado com diferentes tons, para exibir a hierarquia e peso visual dos elementos. Nesse contexto, fica mais fácil de apresentar/sugerir uma solução mais minimalista.

Off: No projeto que estou envolvido, usei essa abordagem e deu MUITO certo.

4 — Consistência

Particularmente falando, essa é a dica mais importante e “salva seu dia”.

Ter muitas cores no layout pode confundir o usuário ou chamar a atenção para áreas menos importantes. Quando se utiliza muitas cores, os pedidos de alterações desnecessárias “ganham escala”. Dependendo da situação, o seu usuário pode ficar preso a um determinado aspecto do layout — aí já era!. Quando você utiliza apenas 3 ou 4 tons de preto/cinza no seu design, o risco disso acontecer é muito baixo— normalmente utilizo 3.

Off: Normalmente eu utilizo poucas cores nas minhas interfaces. Isso torna mais fácil a montagem do Design System e também no gerenciamento de cores — caso eu queria remover ou adicionar novas cores.

Observações

Normalmente eu não passo “receitas de bolo” — por questões óbvias (cultura das empresas, contexto, aspectos dos projetos, etc). MAAAAAS, acredito que essas “receitas” citadas possam funcionar muito bem, por que são muito simples de serem implementadas e alguns problemas apresentados são comuns no dia-a-dia de quem trabalha com UX.

Utilizo bastante a escala de cinza sugerida pelo Material Design na montagem dos meus layouts.

Referência

O texto original que serviu de base é 4 Reasons Why You Should Design Without Color First. Não é uma tradução literal, mas as abordagens descritas nesse artigo refletem exatamente o que acontece no meu dia-a-dia.

Stuff

www | linkedin | twitter | instagram

Gosto de ouvir opiniões, se tiver alguma; estamos aí!

No bullshit. ​No gimmicks​. You got it! I make money not art.

--

--

Lenine
UI Lab

Product Designer. Devido a minha prática constante de cinismo e desapego, consigo evitar debates acalorados sem noção e "mimimi". No bullshit.