# Organiske former i design: klatter, kurver og myke former

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

Klatter, småstein, buer og myke kurver får et design til å føles menneskelig og rolig. Her ser du hvor de fungerer, hvordan du tegner en gjennomtenkt form, og hvordan du bruker dem rundt bilder.

## The short version

- Organiske former er ujevne, flytende former som klatter, småstein, blader og krusninger, i motsetning til geometriske former som kvadrater og sirkler.
- De får design til å føles mykere, mer menneskelige og naturlige, noe som passer merkevarer innen velvære, mat, skjønnhet, barn og livsstil.
- En god klattform har noen få brede kurver i ulik størrelse, uten skarpe spisser eller små ujevnheter.
- Klatt- og bueformede bilderammer gjør vanlige bilder til merkevarebilder uten at du trenger redigeringsferdigheter.
- I CSS kan du lage en enkel klattform med åtte verdier i border-radius og animere den ved å endre verdiene langsomt.

**Organiske former** er ujevne, flytende former: klatter, småstein, blader, dammer, krusninger og myke buer. Geometriske former følger regler, som at et kvadrat har fire like sider. Organiske former ser derimot ut som om de har vokst eller blitt helt ut. I design tilfører de mykhet og varme. De er særlig nyttige som bilderammer, bakgrunnsformer og flater for kort tekst. Trikset er å få dem til å virke valgt fremfor tilfeldig.

## Organiske former og geometriske former

Geometriske former virker presise, konstruerte og rasjonelle. Organiske former virker naturlige, avslappede og menneskelige. Ingen er bedre enn den andre. De sier ulike ting. Mange gode identiteter bruker begge: et stramt rutenett for tekst og layout fra [geometrisk design](https://gradiently.design/nb/guide/geometric-design), med én organisk form som gir varme.

### Geometrisk

- Kvadrater, sirkler, trekanter og rette linjer
- Virker presist, teknisk og ordnet
- Passer finans, ingeniørfag og arkitektur
- Lett å justere og gjenta

### Organisk

- Klatter, småstein, blader, bølger og buer
- Virker rolig, naturlig og imøtekommende
- Passer velvære, mat, skjønnhet og familie
- Krever omtanke for ikke å virke tilfeldig

## Hvor organiske former fungerer best

| Bruk | Hva formen gjør | Passer til |
| --- | --- | --- |
| Bilderamme | Beskjærer et bilde til en klatt eller bue | Portretter, produkter og mat |
| Bakgrunnsform | Én stor, myk form bak motivet | Produktbilder og hovedbilder |
| Tekstflate | En småsteinform med en pris eller kort påstand | Tilbud, etiketter og klistremerker |
| Seksjonsskille | En bølget kant mellom områder på en side | Nettsider, menyer og brosjyrer |
| Mønster | Mange små steiner eller blader som gjentas | Emballasje, bakgrunnsbilder og gavepapir |

Fem oppgaver organiske former løser godt. Velg én eller to per design, ikke alle fem.

Velværestudioer, hudpleiemerker, bakerier, blomsterbutikker, terapeuter og barnemerker bruker disse formene fordi de myker opp alt rundt seg. [Design for hudpleiemerker](https://gradiently.design/nb/guide/skincare-brand-design) er et godt eksempel, der én småsteinform bak en flaske kan bære hele uttrykket.

## Slik tegner du en gjennomtenkt klattform

1. **Start med en sirkel eller et avrundet kvadrat** En klatt er en sirkel som har blitt skjøvet på. En rund start holder den samlede formen i balanse.
2. **Flytt tre eller fire punkter** Flytt noen punkter langs kanten inn og ut i ulik grad. Tre til fem utbulinger er passe. Flere får formen til å ligne en sprut.
3. **Varier størrelsen på kurvene** Én lang, myk kurve, én strammere og én imellom. Like store utbulinger virker mekaniske, som en blomst eller et tannhjul.
4. **Fjern skarpe spisser og små ujevnheter** Hver kurve bør være jevn nok til at du kan følge den langsomt med en finger. Små knekk ser ut som feil på avstand.
5. **Bruk den om igjen** Lagre den beste klattformen og bruk den samme, dreid eller skalert, gjennom hele merkevaren. En gjenkjennelig form blir en del av identiteten.

Bruk få, store klatter. Én form som fyller en tredel av bildet, virker trygg. Ti små klatter ser ut som pynt lagt til i siste liten.

> **Gi klatten en rolig farge** Fyll bakgrunnsklatter med en tone nær bakgrunnen, ett eller to trinn lysere eller mørkere, fremfor en sterk kontrastfarge. Formen forblir synlig, men bildet eller overskriften foran den beholder oppmerksomheten.

## Organiske bilderammer: klatter og buer

Å beskjære et bilde til en myk form er den enkleste måten å få vanlige bilder til å se gjennomarbeidet ut. En bue virker arkitektonisk og rolig, en sirkel personlig, og en klatt avslappet og vennlig. Bruk samme rammeform konsekvent, så innleggene oppfattes som en serie.

- **Bueformede** rammer passer interiør, keramikk, bryllup og alt som skal føles fredelig.
- **Sirkelformede** rammer passer ansikter: teamsider, kundeuttalelser og foredragsholderkort.
- **Klattformede** rammer passer mat, planter, kjæledyr og produkter med ujevne omriss.
- Hold bakgrunnen rundt rammen rolig, så formen er tydelig.

Studioet i Gradiently kan beskjære alle bilder til en bue, sirkel eller klatt, og tone dem i fargene til Marken i bakgrunnen med Monokrom, Duotone eller et mykt Fargeslør. Da hører bildet og flaten bak det sammen. [Duotonebilder](https://gradiently.design/nb/guide/photo-duotone-in-mark-colours) forklarer fargevalgene.

Et stående innlegg for en yogatime søndag morgen på en myk, flytende bakgrunn med organiske former

Et yogastudioinnlegg der den myke, flytende flaten skaper ro, og ordene ligger i det roligste området.

## Organiske gradienter og myke former

Former trenger ikke skarpe kanter for å føles organiske. Overlappende radiale gradienter med myk utfading ligner fargeansamlinger, som blekk som sprer seg i vann. Dette er tanken bak [meshgradienter](https://gradiently.design/nb/guide/mesh-gradients), og du kan nærme deg uttrykket med radiale gradienter i lag.

- Ferskendam på krem: `radial-gradient(ellipse 60% 45% at 30% 35%, #f4a99a 0%, #f6e4d8 55%, #faf3ec 100%)`
- Salviestein på tåke: `radial-gradient(ellipse 55% 70% at 70% 60%, #8fb9a8 0%, #d6e6dc 50%, #f3f5ef 100%)`
- Plommeglød i natten: `radial-gradient(ellipse 70% 50% at 50% 70%, #6b4fa0 0%, #2c2147 50%, #15111f 100%)`

Myke, elliptiske fargeansamlinger. Litt strukne ellipser utenfor sentrum virker langt mer naturlige enn en perfekt sirkel i midten.

## En CSS-klattform du kan kopiere

På nettet bruker den enkleste klattformen `border-radius` med åtte verdier: fire vannrette radier, en skråstrek og deretter fire loddrette. Når du animerer mellom to sett med verdier, puster formen langsomt. [MDNs dokumentasjon for border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) forklarer syntaksen.

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

En klattform som også fungerer som bilderamme. Den langsomme, vekslende animasjonen stopper for alle som foretrekker redusert bevegelse.

For mer sammensatte omriss tegner du formen som en SVG-bane og bruker den med `clip-path`. Begrens banen til noen få jevne kurver, av samme grunner som når du tegner for hånd. Trenger merkevaren også varme i farger og skrift, passer [leken merkevarebygging](https://gradiently.design/nb/guide/playful-design) naturlig sammen med myke former.

## FAQ

### Hva er organiske former i design?

Ujevne, flytende former som klatter, småstein, blader, bølger og buer. De virker naturlige fremfor regelstyrte, slik kvadrater og sirkler er.

### Hva kommuniserer organiske former?

Mykhet, ro, varme og et menneskelig preg. Derfor er de vanlige hos merkevarer innen velvære, mat, skjønnhet og barn.

### Hvordan lager jeg en klattform i CSS?

Gi et element lik bredde og høyde, og en `border-radius` med åtte verdier, for eksempel `42% 58% 63% 37% / 41% 44% 56% 59%`. Animer mellom to sett med verdier for en langsom formendring.

### Hvordan legger jeg et bilde i en klattform?

Beskjær det med en klattformet maske i designverktøyet, eller gi bildet samme `border-radius` eller en SVG-basert `clip-path` på nettet. Studioet i Gradiently kan beskjære bilder direkte til klatter, buer og sirkler.

### Kan organiske og geometriske former brukes sammen?

Ja. Et geometrisk rutenett for tekst og layout, med én organisk form som gir varme, er en vanlig og balansert kombinasjon.