Formas orgânicas no design: blobs, curvas e formas suaves

As formas orgânicas são formas irregulares e fluidas: blobs, seixos, folhas, poças, ondulações e arcos suaves. Ao contrário das formas geométricas, que seguem regras (um quadrado tem quatro lados iguais), parecem ter crescido ou ter sido derramadas. No design trazem suavidade e calor, e são especialmente úteis como molduras de fotografia, formas de fundo e contentores de texto curto. O truque é fazê-las parecer escolhidas e não acidentais.

Formas orgânicas versus formas geométricas

As formas geométricas leem-se como precisas, construídas e racionais. As formas orgânicas leem-se como naturais, descontraídas e humanas. Nenhuma é melhor; dizem coisas diferentes. Muitas boas identidades usam ambas: uma grelha estrita de design geométrico para texto e composição, com uma forma orgânica para dar calor.

Onde as formas orgânicas funcionam melhor

Estúdios de bem-estar, marcas de cuidados de pele, padarias, floristas, terapeutas e marcas infantis apoiam-se nestas formas porque suavizam tudo à volta. O design de marcas de cuidados de pele é um bom exemplo da categoria, onde um único seixo atrás de um frasco pode carregar o visual inteiro.

Como desenhar um blob que pareça intencional

1. 1

   Parte de um círculo ou quadrado arredondado

   Um blob é um círculo que foi empurrado. Começar redondo mantém a massa geral equilibrada.

2. 2

   Empurra três ou quatro pontos

   Move alguns pontos do contorno para dentro e para fora em quantidades diferentes. Três a cinco saliências é o ponto ideal; mais parece um salpico.

3. 3

   Varia o tamanho das curvas

   Uma curva longa e suave, uma mais apertada, uma intermédia. Saliências iguais parecem mecânicas, como uma flor ou uma engrenagem.

4. 4

   Remove pontas afiadas e pequenas ondulações

   Cada curva deve ser suave o suficiente para a seguir devagar com um dedo. Pequenos vincos leem-se como erros à distância.

5. 5

   Reutiliza-o

   Guarda o teu melhor blob e usa o mesmo, rodado ou redimensionado, em toda a marca. Uma forma reconhecível passa a fazer parte da identidade.

Mantém os blobs grandes e poucos. Uma única forma a ocupar um terço do enquadramento parece confiante; dez pequenos blobs parecem decoração acrescentada à última hora.

Molduras de foto orgânicas: blobs e arcos

Cortar uma fotografia numa forma suave é a forma mais fácil de fazer imagens comuns parecerem desenhadas. Um arco parece arquitetónico e calmo, um círculo parece pessoal e um blob parece descontraído e simpático. Usa uma só forma de moldura de forma consistente, para que uma grelha de publicações se leia como um conjunto.

• As molduras em arco servem interiores, cerâmica, casamentos e tudo o que deva parecer sereno.
• As molduras em círculo servem rostos: páginas de equipa, testemunhos, cartões de oradores.
• As molduras em blob servem comida, plantas, animais e produtos de contorno irregular.
• Deixa o fundo à volta da moldura calmo, para a forma se ler.

O Studio do Gradiently pode cortar qualquer fotografia em arco, círculo ou blob e tingi-la com as cores do Mark de fundo em mono, duotone ou uma leve lavagem, para que a fotografia e a superfície por trás pertençam uma à outra. Fotografia duotone explica as opções de tingimento.

Gradientes orgânicos e formas suaves

As formas não precisam de arestas duras para parecerem orgânicas. Gradientes radiais sobrepostos com queda suave leem-se como poças de cor, como tinta a espalhar-se na água. É a ideia por trás dos gradientes em malha, e podes aproximá-la com gradientes radiais em camadas.

Uma forma blob em CSS para copiar

Na web, o blob mais simples usa border-radius com oito valores: quatro raios horizontais, uma barra e depois quatro verticais. Animar entre dois conjuntos de valores faz a forma respirar devagar. A referência de border-radius da MDN explica a sintaxe.

.blob {
  width: 320px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #f4a99a, #d9776a);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: breathe 12s ease-in-out infinite alternate;
}

.blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@keyframes breathe {
  to { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

Para contornos mais complexos, desenha a forma como um caminho SVG e usa-o com clip-path. Mantém o caminho com um punhado de curvas suaves, pelas mesmas razões de quando desenhas à mão. Se a marca também precisa de calor na cor e na tipografia, o branding brincalhão combina naturalmente com formas suaves.