Fundos abstratos: formas, campos e fluxo

Um fundo abstrato é feito de cor, forma e textura, e não de uma cena reconhecível. Quase todos pertencem a uma de três famílias: fundos geométricos, feitos de bordas duras, listras e padrões; fundos fluidos, feitos de misturas suaves e campos que fluem; e fundos texturizados, feitos de grão, ruído e material. Escolha a família que combina com a sensação que você quer e mantenha uma área calma onde o texto vai ficar.

Este guia percorre cada família com exemplos ao vivo e códigos, mostra quando usar cada uma e como impedir que um fundo abstrato ofusque o conteúdo. Para os tipos de gradiente que estão por baixo de muitos deles, veja os tipos de gradiente.

Três tipos de fundo abstrato

Fundos abstratos geométricos

Fundos geométricos usam bordas nítidas: divisões, listras, anéis, cunhas e grades. Parecem intencionais e estruturados, e combinam naturalmente com layouts tipográficos fortes, como o estilo suíço. No CSS, paradas de cor duras (duas cores na mesma posição) criam as bordas.

O segredo dos fundos geométricos é o tom. Listras ou xadrezes de alto contraste vibram e deixam o texto por cima quase ilegível. Mantenha as cores do padrão próximas em luminosidade, como nas listras e nos anéis tonais acima, e reserve o alto contraste para áreas sem palavras. O guia de padrões CSS traz muitos outros.

Fundos abstratos fluidos

Fundos fluidos não têm bordas: a cor se acumula, escorre e se dobra como luz sobre a água ou a seda. Incluem gradientes mesh, brilhos de aurora e fitas que fluem. Parecem mais calmos e sofisticados que os geométricos, e são os fundos abstratos mais fáceis de receber texto, porque um campo suave tem grandes áreas uniformes.

.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}

Fundos fluidos vêm em estilos com nome: os gradientes mesh misturam vários pontos de cor numa superfície, e os gradientes aurora fazem poças luminosas flutuarem sobre uma base escura. Os dois ficam melhores com um pouco de grão por cima.

Fundos abstratos texturizados

A textura transforma a cor chapada numa superfície que você quase pode tocar. Um grão fino lembra filme, uma trama mais áspera lembra papel, fibras suaves lembram tecido, um desfoque fosco lembra vidro. A textura pode ser o fundo inteiro, como num campo cor de papel, ou uma camada sobre um gradiente, que é como a maioria dos fundos de gradiente com ar sofisticado é feita.

Mantenha a textura sutil quando houver texto por cima: o suficiente para sentir à distância de um braço, mas não tanto que as letras pareçam sujas. O guia de textura de fundo trata de grão, papel, tecido e vidro em detalhe, e o de gradientes com grão explica por que um pouco de ruído faz a cor parecer cara.

Como fazer um fundo abstrato com as cores da marca

Os melhores fundos abstratos parecem abstratos, mas pertencem a alguém. Partir das suas próprias cores e formas, e não de um pacote pronto, é o que faz isso acontecer.

1. 1

   Pegue duas ou três cores da marca

   Acrescente um tom mais profundo da mesma família para dar profundidade. O guia como escolher as cores da marca ajuda se você ainda não as tem.

2. 2

   Escolha uma família

   Geométrico se a sua marca é precisa ou enérgica, fluido se é calma ou sofisticada, texturizado se é artesanal ou acolhedora.

3. 3

   Pegue uma forma emprestada da marca

   Uma curva do logo, o ângulo de uma letra, um círculo de um ícone. Repeti-la no fundo une os dois.

4. 4

   Planeje a zona de silêncio

   Decida onde o texto vai ficar em cada formato e mantenha essa área uniforme em luminosidade.

5. 5

   Deixe a textura para o fim

   Um grão leve sobre tudo, e depois confira no tamanho de celular, com palavras de verdade por cima.

Escolhendo um fundo abstrato para cada trabalho

Combine a abstração com o conteúdo. Um slide cheio de dados pede um campo fluido ou tonal e silencioso. Um post de lançamento aguenta uma divisão geométrica ousada. Um cardápio ou um produto artesanal pede textura. E, seja qual for a escolha, teste no tamanho real, com as palavras reais por cima, porque fundos abstratos lindos vazios costumam brigar com o texto quando ele chega.

Os Marks do Gradiently são abstrações fluidas e texturizadas em um só: cores, até três materiais empilhados, luz, grão e movimento, renderizados ao vivo atrás do seu design, com a área mais calma deslocada para trás das palavras. Você pode explorá-los no Mercado ou criar um na Forge.