Forme organiche nel design: blob, curve e forme morbide

Le forme organiche sono forme irregolari e fluide: blob, ciottoli, foglie, pozzanghere, increspature e archi morbidi. A differenza delle forme geometriche, che seguono regole (un quadrato ha quattro lati uguali), sembrano cresciute o versate. Nel design portano morbidezza e calore, e sono particolarmente utili come cornici per foto, forme di sfondo e contenitori per testi brevi. Il trucco è farle sembrare scelte e non casuali.

Forme organiche e forme geometriche

Le forme geometriche sembrano precise, costruite e razionali. Quelle organiche sembrano naturali, rilassate e umane. Nessuna è migliore: dicono cose diverse. Molte buone identità le usano entrambe: una rigorosa griglia di design geometrico per testi e impaginazione, con una sola forma organica per dare calore.

Dove le forme organiche funzionano meglio

Centri benessere, etichette di cosmesi, panetterie, fioristi, terapeuti e brand per l’infanzia si appoggiano a queste forme perché ammorbidiscono tutto ciò che hanno intorno. Il design del brand di cosmesi è un buon esempio della categoria, in cui un solo ciottolo dietro a un flacone può reggere tutto l’aspetto.

Come disegnare un blob che sembri voluto

1. 1

   Parti da un cerchio o da un quadrato arrotondato

   Un blob è un cerchio che è stato spinto. Partire da una forma tonda mantiene equilibrata la massa complessiva.

2. 2

   Spingi tre o quattro punti

   Sposta alcuni punti del bordo verso l’interno e l’esterno di quantità diverse. Da tre a cinque rigonfiamenti è il punto ideale; di più sembra una macchia.

3. 3

   Varia la dimensione delle curve

   Una curva lunga e dolce, una più stretta, una intermedia. Rigonfiamenti uguali sembrano meccanici, come un fiore o un ingranaggio.

4. 4

   Elimina punte aguzze e minuscole ondulazioni

   Ogni curva deve essere abbastanza liscia da poterla seguire lentamente con un dito. Le piccole pieghe da lontano sembrano errori.

5. 5

   Riusalo

   Salva il tuo blob migliore e usa lo stesso, ruotato o scalato, in tutto il brand. Una forma riconoscibile diventa parte dell’identità.

Tieni i blob grandi e pochi. Una sola forma che riempie un terzo del quadro sembra sicura di sé; dieci blob piccoli sembrano una decorazione aggiunta all’ultimo minuto.

Cornici organiche per foto: blob e archi

Ritagliare una foto in una forma morbida è il modo più semplice per far sembrare progettate delle immagini comuni. Un arco dà un’aria architettonica e calma, un cerchio è personale, un blob è rilassato e amichevole. Usa sempre la stessa forma di cornice, così una griglia di post si legge come una serie.

• Le cornici ad arco vanno bene per interni, ceramiche, matrimoni e tutto ciò che deve sembrare sereno.
• Le cornici tonde vanno bene per i volti: pagine del team, testimonianze, schede dei relatori.
• Le cornici a blob vanno bene per cibo, piante, animali e prodotti dal profilo irregolare.
• Lascia calmo lo sfondo intorno alla cornice, perché la forma resti leggibile.

Lo Studio di Gradiently può ritagliare qualsiasi foto in un arco, un cerchio o un blob, e tingerla con i colori del Mark di sfondo in mono, duotone o come velatura morbida, così la foto e la superficie dietro di essa stanno bene insieme. La foto in duotone spiega le opzioni di tinta.

Gradienti organici e forme morbide

Le forme non hanno bisogno di bordi netti per sembrare organiche. Gradienti radiali sovrapposti con una dissolvenza morbida sembrano pozze di colore, come inchiostro che si allarga nell’acqua. È l’idea dei gradienti mesh, e puoi avvicinarti con gradienti radiali a più livelli.

Una forma blob in CSS da copiare

Sul web il blob più semplice usa border-radius con otto valori: quattro raggi orizzontali, una barra, poi quattro verticali. Animare tra due serie di valori fa respirare lentamente la forma. Il riferimento border-radius di MDN spiega la sintassi.

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

Per contorni più complessi, disegna la forma come tracciato SVG e usala con clip-path. Limita il tracciato a una manciata di curve lisce, per le stesse ragioni del disegno a mano. Se il brand ha bisogno di calore anche nel colore e nei caratteri, il branding giocoso si abbina naturalmente alle forme morbide.