A versão curta
- A cor lisa ganha onde contam a clareza, a reprodução exata e os tamanhos pequenos, como ícones, controlos de interface, fundos de texto corrido e impressão a uma cor.
- Os gradientes ganham onde uma superfície precisa de ambiente, profundidade ou distinção, como fundos, capas, cabeçalhos, publicações de redes sociais e campos de marca.
- O contraste de um gradiente muda ao longo da superfície, por isso o texto sobre ele tem de ser verificado no pior ponto e não na média.
- A maioria das identidades visuais fortes usa um gradiente como assinatura e uma cor lisa tirada dele como reserva do dia a dia.
- Os ecrãs passaram de estilos brilhantes e texturados para o design plano no início da década de 2010 e voltaram depois a gradientes mais suaves, por isso nenhum é simplesmente moderno ou datado.
Nesta página
Na questão gradiente ou design plano, nenhum lado ganha em todo o lado. A cor lisa é mais clara, reproduz-se com exatidão e sobrevive a tamanhos minúsculos e à impressão a uma cor. Os gradientes trazem ambiente, sugerem luz e profundidade e dão a uma marca muito mais espaço para ser distintiva. A resposta prática para a maioria das marcas é usar os dois: um gradiente onde a superfície é grande e expressiva, e uma cor lisa, tirada do gradiente, onde a tarefa é pequena, funcional ou impressa numa só tinta.
Onde a cor lisa ganha
- Tamanhos pequenos: favicons, emblemas de aplicações e ícones perdem o detalhe de um gradiente, enquanto uma cor lisa se mantém nítida
- Controlos de interface: botões, interruptores e estados lêem-se com mais clareza quando cada estado é uma só cor
- Por trás de texto longo: o contraste constante faz com que todas as linhas sejam igualmente legíveis
- Impressão a uma cor: bordado, serigrafia, gravação, carimbos e trabalhos de uma só tinta não reproduzem uma mistura
- Correspondência exata: uma única cor direta pode ser igualada entre materiais com muito mais fiabilidade do que uma mistura
- Gráficos e dados: as cores lisas mantêm as categorias distintas e comparáveis
Onde os gradientes ganham
- Superfícies grandes: fundos, capas, cabeçalhos e cartazes onde a cor lisa parece vazia
- Ambiente e luz: uma mistura sugere uma hora do dia, um material ou um brilho que uma só cor não consegue
- Distinção: só há um certo número de tons únicos distinguíveis, e a maioria está tomada em qualquer categoria
- Feeds de redes sociais: um campo de gradiente bem construído destaca-se num scroll de fotografias e modelos lisos
- Profundidade em interfaces: um gradiente subtil num cabeçalho ou num cartão principal separa camadas sem sombras
- Movimento: os gradientes podem derivar e respirar; vê fundos de gradiente animados
Gradiente ou liso, fator a fator
| Fator | Cor lisa | Gradiente |
|---|---|---|
| Legibilidade | Contraste constante em todo o lado | O contraste varia; verifica o pior ponto |
| Reconhecimento | Forte se fores dono de um tom raro | Forte se a receita se mantiver consistente |
| Distinção | Limitada pelo número de tons | Um espaço enorme de combinações |
| Tamanhos pequenos | Excelente | Muitas vezes baço ou perdido |
| Impressão | Exata, mesmo numa só tinta | Pede cor completa; pode formar faixas ou mudar |
| Estados de interface | Claros e previsíveis | Melhor reservado a uma ou duas zonas de destaque |
| Ambiente e profundidade | Limitados | Excelentes |
| Tamanho do ficheiro e esforço | Trivial | Pequeno em CSS, maior como imagens e vídeo |
A questão da legibilidade
Sobre um fundo liso, se uma palavra passa no contraste, todas passam. Sobre um gradiente, o contraste muda com a cor, por isso um título pode ler-se na perfeição numa ponta e desaparecer na outra. Mede sempre o contraste no ponto mais claro por trás de texto claro, ou no ponto mais escuro por trás de texto escuro. O método completo está em texto sobre gradiente e em contraste de cor e acessibilidade.
Um gradiente a passar diretamente pelas palavras: o contraste muda letra a letra.
O mesmo gradiente a abrir espaço para as palavras: a expressão fica, a legibilidade volta.
Uma breve história: plano, e depois gradientes outra vez
Ao longo dos anos 2000, os ecrãs eram brilhantes: botões com bisel, realces vítreos e texturas a imitar couro e papel. No início da década de 2010, os principais sistemas operativos passaram ao design plano, com cores lisas, ícones simples e sem profundidade falsa, e grande parte da web seguiu-os. A partir de meados da década de 2010, os gradientes mais suaves regressaram, agora como misturas lisas de duas ou três cores e não como efeitos brilhantes, e alguns ícones de marca muito visíveis passaram a gradientes. Mais em a história dos gradientes.
A lição é que nenhum estilo é moderno para sempre. O que data um design é o tratamento específico: o brilho excessivo data um gradiente, e uma paleta por defeito data a cor lisa.
Como decidir para cada superfície
- 1
Pergunta para que serve a superfície
Se ajuda as pessoas a agir, ler ou comparar, inclina-te para o liso. Se cria um ambiente ou apresenta a marca, inclina-te para o gradiente.
- 2
Verifica o tamanho
Abaixo de mais ou menos o tamanho de um ícone, usa liso. Os gradientes precisam de espaço para mostrar a mistura.
- 3
Verifica como vai ser reproduzido
Uma só tinta, fio ou gravação significa liso. Os ecrãs e a impressão a cores podem levar um gradiente.
- 4
Verifica as palavras
O texto longo pede uma base lisa ou muito calma. Um título pode assentar num gradiente se o contraste se mantiver no pior ponto.
- 5
Mantém-nos relacionados
Tira as tuas cores lisas do teu gradiente para os dois parecerem sempre uma só marca.
Escolhe liso para
- Favicons, emblemas de aplicações e ícones pequenos
- Botões, interruptores, separadores e estados de formulários
- Páginas de texto corrido e tabelas de dados
- Bordado, carimbos e impressão a uma só tinta
Escolhe gradiente para
- Capas, cartazes e publicações de redes sociais
- Cabeçalhos de sites e páginas de lançamento
- Campos de marca por trás de logótipos e títulos
- Ciclos, papéis de parede e aberturas de apresentações
Usa os dois: um gradiente com uma reserva lisa
Os sistemas mais fortes tratam o gradiente como a assinatura e escolhem uma ou duas cores lisas de dentro dele para as tarefas do dia a dia. O tom mais profundo passa a ser a cor do texto ou dos ícones, um tom médio passa a ser a cor dos botões, e o próprio gradiente aparece em capas, cabeçalhos e publicações. É assim que tens expressão e função sem duas paletas sem relação. Branding com gradientes explica o processo.
Cada Mark da Gradiently é um gradiente com a sua própria paleta incorporada, por isso as cores lisas para texto, botões e tamanhos pequenos vêm da mesma receita que o fundo.
Perguntas frequentes
O design plano é melhor do que os gradientes?
Nenhum é melhor em todo o lado. A cor lisa é melhor para tamanhos pequenos, interfaces e impressão a uma cor; os gradientes são melhores para superfícies grandes e expressivas e para a distinção.
Os gradientes estão ultrapassados?
Não. Os gradientes brilhantes e pesados parecem datados, mas os gradientes suaves de duas ou três cores são muito usados em identidades de marca e interfaces atuais.
O meu logótipo deve ter gradiente ou cor lisa?
Muitos logótipos usam uma versão com gradiente para uso grande em ecrã e uma versão lisa para tamanhos pequenos e impressão a uma cor. Precisas da versão lisa de qualquer forma.
O texto é mais difícil de ler sobre um gradiente?
Pode ser, porque o contraste muda ao longo do gradiente. Verifica o contraste no pior ponto por trás do texto, ou mantém uma zona calma para as palavras.
Posso usar gradientes e cores lisas em conjunto?
Sim, e a maioria das marcas fortes fá-lo. Tira as cores lisas de dentro do gradiente para tudo condizer.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
