Organiska former i design: blobbar, kurvor och mjuka former

Organiska former är oregelbundna, flödande former: blobbar, småstenar, blad, pölar, krusningar och mjuka valv. Till skillnad från geometriska former, som följer regler (en kvadrat har fyra lika sidor), ser de ut som om de växt eller hällts ut. I design ger de mjukhet och värme, och de är särskilt användbara som fotoramar, bakgrundsformer och behållare för kort text. Knepet är att få dem att se valda ut snarare än oavsiktliga.

Organiska former mot geometriska former

Geometriska former läses som precisa, byggda och rationella. Organiska former läses som naturliga, avslappnade och mänskliga. Ingen är bättre, de säger olika saker. Många bra identiteter använder båda: ett strikt geometriskt designrutnät för text och layout, med en organisk form för värme.

Där organiska former fungerar bäst

Välmåendestudior, hudvårdsetiketter, bagerier, blomsterhandlare, terapeuter och barnvarumärken lutar sig mot de här formerna eftersom de mjukar upp allt runt omkring. Design av hudvårdsvarumärke är ett bra exempel på kategorin, där en enda småsten bakom en flaska kan bära hela looken.

Så ritar du en blob som ser avsiktlig ut

1. 1

   Börja från en cirkel eller en rundad kvadrat

   En blob är en cirkel som har knuffats. Att börja rund håller den övergripande massan balanserad.

2. 2

   Knuffa tre eller fyra punkter

   Flytta några kantpunkter in och ut med olika mängd. Tre till fem utbuktningar är det bästa, fler ser ut som en klatt.

3. 3

   Variera kurvornas storlek

   En lång mjuk kurva, en snävare, en däremellan. Lika stora utbuktningar ser mekaniska ut, som en blomma eller ett kugghjul.

4. 4

   Ta bort skarpa spetsar och små vickningar

   Varje kurva ska vara så mjuk att man kan följa den långsamt med ett finger. Små knickar läses som misstag på avstånd.

5. 5

   Återanvänd den

   Spara din bästa blob och använd samma, roterad eller skalad, över hela varumärket. En igenkännbar form blir en del av identiteten.

Håll blobbarna stora och få. En enda form som fyller en tredjedel av bilden ser självsäker ut, tio små blobbar ser ut som dekoration som lagts till i sista stund.

Organiska fotoramar: blobbar och valv

Att beskära ett foto till en mjuk form är det enklaste sättet att få vanliga bilder att se designade ut. Ett valv känns arkitektoniskt och lugnt, en cirkel känns personlig och en blob känns avslappnad och vänlig. Använd en ramform konsekvent, så att ett rutnät av inlägg läses som en uppsättning.

• Valv-ramar passar interiörer, keramik, bröllop och allt som ska kännas stilla.
• Cirkel-ramar passar ansikten: teamsidor, omdömen, talarkort.
• Blob-ramar passar mat, växter, husdjur och produkter med oregelbundna konturer.
• Låt bakgrunden runt ramen vara lugn, så att formen går att läsa.

Studio i Gradiently kan beskära vilket foto som helst till ett valv, en cirkel eller en blob och tona det i bakgrundsMarkens färger som mono, duoton eller en mjuk lavering, så att fotot och ytan bakom hör ihop. Duotonfoto förklarar tonalternativen.

Organiska gradienter och mjuka former

Former behöver inte hårda kanter för att kännas organiska. Överlappande radiella gradienter med mjukt avtagande läses som pölar av färg, som bläck som sprider sig i vatten. Det är tanken bakom mesh-gradienter, och du kan approximera det med lagda radiella gradienter.

En CSS-blobform du kan kopiera

På webben använder den enklaste bloben border-radius med åtta värden: fyra horisontella radier, ett snedstreck och sedan fyra vertikala. Att animera mellan två uppsättningar värden får formen att andas långsamt. MDN:s border-radius-referens förklarar syntaxen.

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

För mer komplexa konturer, rita formen som en SVG-bana och använd den med clip-path. Håll banan till en handfull mjuka kurvor, av samma skäl som vid handritning. Om varumärket också behöver värme i färg och typografi passar lekfullt varumärke naturligt ihop med mjuka former.