Fundos abstratos: formas, campos de cor 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, construídos com arestas vivas, riscas e padrões; fundos fluidos, construídos com misturas suaves e campos de cor em movimento; e fundos texturados, construídos com grão, ruído e matéria. Escolhe a família que corresponde à sensação de que precisas e mantém uma zona calma onde vão ficar as palavras.

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

Três tipos de fundo abstrato

Fundos abstratos geométricos

Os fundos geométricos usam arestas nítidas: divisões, riscas, anéis, cunhas e grelhas. Parecem intencionais e estruturados, e combinam naturalmente com layouts tipográficos fortes, como o estilo suíço. Em CSS, as paragens de cor vivas (duas cores na mesma posição) criam as arestas.

O segredo dos fundos geométricos é o tom. Riscas ou xadrezes de alto contraste vibram e tornam quase impossível ler o texto por cima. Mantém as cores do padrão próximas em luminosidade, como nas riscas e nos anéis tonais acima, e guarda o contraste forte para as zonas sem palavras. Os padrões CSS têm muitos mais.

Fundos abstratos fluidos

Os fundos fluidos não têm arestas: a cor acumula-se, desliza e dobra-se como a luz na água ou na seda. Incluem gradientes de malha, brilhos de aurora e fitas em movimento. Parecem mais calmos e requintados do que os geométricos e são os fundos abstratos mais fáceis de usar com 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%);
}

Os fundos fluidos têm estilos com nome: os gradientes de malha misturam vários pontos de cor numa superfície, e os gradientes de aurora fazem flutuar manchas luminosas sobre uma base escura. Ambos ficam melhor com um pouco de grão por cima.

Fundos abstratos texturados

A textura transforma a cor lisa numa superfície que quase se pode tocar. O grão fino lembra película, um relevo mais grosso lembra papel, fibras suaves lembram tecido, um desfoque baço lembra vidro. A textura pode ser o fundo todo, como num campo cor de papel, ou uma camada sobre um gradiente, que é como se fazem quase todos os fundos de gradiente com ar sofisticado.

Mantém a textura subtil quando há texto por cima: o suficiente para se sentir à distância de um braço, não tanto que as letras pareçam sujas. O fundo com textura trata em detalhe do grão, do papel, do tecido e do vidro, e os gradientes com grão explicam porque é que um pouco de ruído faz a cor parecer cara.

Como criar um fundo abstrato com as cores da marca

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

1. 1

   Escolhe duas ou três cores da marca

   Acrescenta um tom mais profundo da mesma família para dar profundidade. Se ainda não as tens, como escolher as cores da marca ajuda.

2. 2

   Escolhe uma família

   Geométrico se a tua marca é precisa ou enérgica, fluido se é calma ou requintada, texturado se é artesanal ou calorosa.

3. 3

   Pede uma forma emprestada à marca

   Uma curva do logótipo, o ângulo de uma letra, um círculo de um ícone. Repeti-lo no fundo une os dois.

4. 4

   Planeia a zona calma

   Decide onde vai o texto em cada formato e mantém essa área uniforme em luminosidade.

5. 5

   Acrescenta a textura no fim

   Um grão leve sobre tudo e depois confere-o no tamanho de telemóvel, com palavras a sério por cima.

Escolher um fundo abstrato para cada trabalho

Ajusta a abstração ao conteúdo. Um diapositivo cheio de dados pede um campo fluido ou tonal e discreto. Uma publicação de lançamento aguenta uma divisão geométrica ousada. Um menu ou um produto artesanal pede textura. E o que quer que escolhas, testa-o no tamanho real e com as palavras reais, porque os fundos abstratos que ficam lindos vazios costumam lutar com o texto quando ele chega.

Os Marks da Gradiently são abstrações fluidas e texturadas em simultâneo: cores, até três materiais sobrepostos, luz, grão e movimento, desenhados ao vivo atrás do teu design, com a zona mais calma deslocada para trás das palavras. Podes vê-los no Mercado ou criar um na Forge.