Resumindo
- A cor chapada vence onde importam clareza, reprodução exata e tamanhos pequenos, como ícones, controles de interface, fundos de texto corrido e impressão em uma cor.
- Os gradientes vencem onde uma superfície precisa de clima, profundidade ou distinção, como fundos, capas, heroes, posts sociais e campos de marca.
- O contraste de um gradiente muda ao longo da superfície, então o texto sobre ele precisa ser conferido no pior ponto, e não na média.
- A maioria das identidades visuais fortes usa um gradiente como assinatura e uma cor chapada tirada dele como reserva do dia a dia.
- As telas passaram de estilos brilhantes e texturizados ao design chapado no início dos anos 2010 e voltaram depois a gradientes mais suaves, então nenhum dos dois é simplesmente moderno ou datado.
Nesta página
Na questão gradiente ou design chapado, nenhum lado vence em todo lugar. A cor chapada é mais clara, reproduz-se com exatidão e sobrevive a tamanhos minúsculos e à impressão em uma cor. Os gradientes carregam clima, sugerem luz e profundidade e dão a uma marca bem mais espaço para ser distintiva. A resposta prática para a maioria das marcas é os dois: um gradiente onde a superfície é grande e expressiva, e uma cor chapada, tirada do gradiente, onde o trabalho é pequeno, funcional ou impresso em uma tinta só.
Onde a cor chapada vence
- Tamanhos pequenos: favicons, selos de app e ícones perdem o detalhe de um gradiente, enquanto uma cor chapada continua nítida
- Controles de interface: botões, interruptores e estados se leem com mais clareza quando cada estado é uma cor
- Atrás de texto longo: o contraste constante faz cada linha ser igualmente legível
- Impressão em uma cor: bordado, serigrafia, gravação, carimbos e trabalhos de uma tinta não reproduzem uma mistura
- Correspondência exata: uma única cor especial pode ser igualada entre materiais com muito mais confiabilidade que uma mistura
- Gráficos e dados: cores chapadas mantêm as categorias distintas e comparáveis
Onde os gradientes vencem
- Superfícies grandes: fundos, capas, heroes e cartazes onde a cor chapada parece vazia
- Clima e luz: uma mistura sugere uma hora do dia, um material ou um brilho que uma cor não sugere
- Distinção: há um número limitado de matizes únicos distinguíveis, e a maioria já tem dono em qualquer categoria
- Feeds sociais: um campo de gradiente bem construído se destaca em uma rolagem de fotos e de templates chapados
- Profundidade em interfaces: um gradiente sutil em um hero ou em um card principal separa camadas sem sombras
- Movimento: gradientes podem derivar e respirar; veja fundos de gradiente animados
Gradiente ou chapado, fator por fator
| Fator | Cor chapada | Gradiente |
|---|---|---|
| Legibilidade | Contraste constante em toda parte | O contraste varia; confira o pior ponto |
| Reconhecimento | Forte se você tem um matiz raro | Forte se a receita se mantém consistente |
| Distinção | Limitada pelo número de matizes | Um enorme espaço de combinações |
| Tamanhos pequenos | Excelente | Muitas vezes sujo ou perdido |
| Impressão | Exata, mesmo em uma tinta | Exige cores completas; pode formar faixas ou mudar |
| Estados de interface | Claros e previsíveis | Melhor limitado a uma ou duas áreas de ênfase |
| Clima e profundidade | Limitados | Excelentes |
| Tamanho de arquivo e esforço | Trivial | Pequeno em CSS, maior como imagem e vídeo |
A questão da legibilidade
Em um fundo chapado, se uma palavra passa no contraste, todas passam. Em um gradiente, o contraste muda conforme a cor muda, então um título pode se ler perfeitamente em uma ponta e desaparecer na outra. Meça sempre o contraste no ponto mais claro atrás de um texto claro, ou no mais escuro atrás de um texto escuro. O método completo está em texto sobre gradiente e em contraste de cor e acessibilidade.
Um gradiente passando direto pelas palavras: o contraste muda letra a letra.
O mesmo gradiente abrindo espaço para as palavras: a expressão fica, a legibilidade volta.
Uma breve história: chapado e, depois, gradientes de novo
Ao longo dos anos 2000, as telas eram brilhantes: botões chanfrados, reflexos de vidro e texturas imitando couro e papel. No início dos anos 2010, os grandes sistemas operacionais passaram ao design chapado, com cores sólidas, ícones simples e nenhuma profundidade falsa, e boa parte da web foi atrás. A partir de meados dos anos 2010, gradientes mais suaves voltaram, agora como misturas lisas de duas ou três cores em vez de efeitos brilhantes, e alguns ícones de marca muito visíveis passaram a usar gradientes. Mais em a história dos gradientes.
A lição é que nenhum dos estilos é moderno para sempre. O que data um design é o tratamento específico: o brilho pesado data um gradiente, e uma paleta de fábrica data a cor chapada.
Como decidir para cada superfície
- 1
Pergunte para que serve a superfície
Se ela ajuda as pessoas a agir, ler ou comparar, incline-se para o chapado. Se define um clima ou apresenta a marca, incline-se para o gradiente.
- 2
Confira o tamanho
Abaixo mais ou menos do tamanho de um ícone, use chapado. Gradientes precisam de espaço para mostrar a mistura.
- 3
Confira como será reproduzido
Uma tinta, uma linha de bordado ou uma gravação significam chapado. Telas e impressão em cores completas podem levar um gradiente.
- 4
Confira as palavras
Texto longo pede um fundo chapado ou muito calmo. Um título pode ficar sobre um gradiente se o contraste se mantiver no pior ponto.
- 5
Mantenha-os relacionados
Tire suas cores chapadas do seu gradiente para os dois sempre parecerem uma só marca.
Escolha chapado para
- Favicons, selos de app e ícones pequenos
- Botões, interruptores, abas e estados de formulário
- Páginas de texto corrido e tabelas de dados
- Bordado, carimbos e impressão de uma tinta
Escolha gradiente para
- Capas, cartazes e posts sociais
- Heroes de sites e páginas de lançamento
- Campos de marca atrás de logos e títulos
- Loops, papéis de parede e aberturas de apresentação
Use os dois: um gradiente com uma reserva chapada
Os sistemas mais fortes tratam o gradiente como assinatura e escolhem uma ou duas cores chapadas de dentro dele para os trabalhos do dia a dia. O tom mais profundo vira a cor do texto ou dos ícones, um tom médio vira a cor dos botões, e o gradiente em si aparece em capas, heroes e posts. É assim que se tem expressão e função sem duas paletas sem relação. O branding com gradiente mostra o caminho.
Todo Mark do Gradiently é um gradiente com a sua própria paleta embutida, então as cores chapadas para texto, botões e tamanhos pequenos vêm da mesma receita do fundo.
Perguntas frequentes
O design chapado é melhor que os gradientes?
Nenhum é melhor em todo lugar. A cor chapada é a melhor para tamanhos pequenos, interfaces e impressão em uma cor; os gradientes são os melhores para superfícies grandes e expressivas e para a distinção.
Os gradientes estão ultrapassados?
Não. Gradientes brilhantes e pesados parecem datados, mas gradientes suaves de duas ou três cores são muito usados em identidades de marca e interfaces atuais.
Meu logo deve ser um gradiente ou uma cor chapada?
Muitos logos usam uma versão em gradiente para telas grandes e uma versão chapada para tamanhos pequenos e impressão em uma cor. Você precisa da versão chapada de qualquer jeito.
O texto é mais difícil de ler sobre um gradiente?
Pode ser, porque o contraste muda ao longo do gradiente. Confira o contraste no pior ponto atrás do texto ou mantenha uma área calma para as palavras.
Posso usar gradientes e cores chapadas juntos?
Sim, e a maioria das marcas fortes faz isso. Tire as cores chapadas de dentro do gradiente para tudo combinar.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
