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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/organic-shapes-design)

Blobs, seixos, arcos e curvas suaves fazem um design parecer humano e calmo. Aqui ficam os sítios onde funcionam, como desenhar uma que pareça intencional e como enquadrar fotografias com elas.

## The short version

- As formas orgânicas são formas irregulares e fluidas como blobs, seixos, folhas e ondulações, em oposição às formas geométricas como quadrados e círculos.
- Fazem os designs parecer mais suaves, mais humanos e mais naturais, o que serve marcas de bem-estar, comida, beleza, infantis e de estilo de vida.
- Um bom blob tem algumas curvas largas de tamanhos diferentes e nenhuma ponta afiada nem pequenas ondulações.
- As molduras de fotografia em blob e arco transformam fotografias comuns em imagens de marca sem exigir qualquer perícia de edição.
- Em CSS, um blob simples faz-se com um border-radius de oito valores, e anima-se mudando esses valores devagar.

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](https://gradiently.design/pt-pt/guide/geometric-design) para texto e composição, com uma forma orgânica para dar calor.

### Geométricas

- Quadrados, círculos, triângulos, linhas retas
- Parecem precisas, técnicas, ordenadas
- Servem finanças, engenharia, arquitetura
- Fáceis de alinhar e repetir

### Orgânicas

- Blobs, seixos, folhas, ondas, arcos
- Parecem calmas, naturais, próximas
- Servem bem-estar, comida, beleza, família
- Pedem cuidado para não parecerem aleatórias

## Onde as formas orgânicas funcionam melhor

| Uso | O que faz | Bom para |
| --- | --- | --- |
| Moldura de foto | Corta uma fotografia num blob ou arco | Retratos, produtos, comida |
| Forma de fundo | Uma grande forma suave atrás do motivo | Fotografias de produto, imagens de destaque |
| Contentor de texto | Um seixo com um preço ou uma frase curta | Ofertas, etiquetas, autocolantes |
| Divisória de secção | Uma margem ondulada entre zonas de uma página | Sites, ementas, folhetos |
| Padrão | Muitos pequenos seixos ou folhas repetidos | Embalagens, papéis de parede, papel de embrulho |

Cinco tarefas que as formas orgânicas fazem bem. Escolhe uma ou duas por design, não as cinco.

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](https://gradiently.design/pt-pt/guide/skincare-brand-design) é 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. **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. **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. **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. **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. **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.

> **Colore o blob com discrição** Preenche os blobs de fundo com um tom próximo do fundo, um ou dois passos mais claro ou mais escuro, em vez de uma cor contrastante e berrante. A forma continua visível, mas a fotografia ou o título à frente dela ficam com a atenção.

## 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](https://gradiently.design/pt-pt/guide/photo-duotone-in-mark-colours) explica as opções de tingimento.

Uma publicação vertical para uma aula de ioga de domingo de manhã sobre um fundo suave e fluido com formas orgânicas

Uma publicação de estúdio de ioga em que a superfície suave e fluida carrega a calma, e as palavras ficam na sua zona mais sossegada.

## 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](https://gradiently.design/pt-pt/guide/mesh-gradients), e podes aproximá-la com gradientes radiais em camadas.

- Poça de pêssego sobre creme: `radial-gradient(ellipse 60% 45% at 30% 35%, #f4a99a 0%, #f6e4d8 55%, #faf3ec 100%)`
- Seixo de sálvia sobre névoa: `radial-gradient(ellipse 55% 70% at 70% 60%, #8fb9a8 0%, #d6e6dc 50%, #f3f5ef 100%)`
- Brilho de ameixa sobre noite: `radial-gradient(ellipse 70% 50% at 50% 70%, #6b4fa0 0%, #2c2147 50%, #15111f 100%)`

Poças elípticas suaves. Elipses fora do centro e ligeiramente esticadas parecem muito mais naturais do que um círculo central perfeito.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) da MDN explica a sintaxe.

```css
.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; }
}
```

Um blob que também funciona como moldura de foto. A animação lenta e alternada pára para quem prefere movimento reduzido.

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](https://gradiently.design/pt-pt/guide/playful-design) combina naturalmente com formas suaves.

## FAQ

### O que são formas orgânicas no design?

Formas irregulares e fluidas como blobs, seixos, folhas, ondas e arcos que parecem naturais, em vez de construídas com regras como quadrados e círculos.

### O que comunicam as formas orgânicas?

Suavidade, calma, calor e um toque humano. É por isso que são comuns em marcas de bem-estar, comida, beleza e infantis.

### Como faço uma forma blob em CSS?

Dá a um elemento largura e altura iguais e um `border-radius` de oito valores, como `42% 58% 63% 37% / 41% 44% 56% 59%`. Anima entre dois conjuntos de valores para uma transformação lenta.

### Como ponho uma fotografia numa forma blob?

Corta-a com uma máscara blob na tua ferramenta de design ou, na web, dá à imagem o mesmo `border-radius` ou um `clip-path` SVG. O Studio do Gradiently pode cortar fotografias em blobs, arcos e círculos diretamente.

### Posso usar formas orgânicas e geométricas em conjunto?

Sim. Uma grelha geométrica para texto e composição com uma forma orgânica para dar calor é uma combinação comum e equilibrada.