# Orgaaniset muodot designissa: pehmeät kaaret ja hahmot

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

Möykyt, kivet, holvikaaret ja pehmeät kaaret tekevät designista inhimillisen ja rauhallisen. Tässä niiden käyttökohteet, harkitun muodon piirtäminen ja valokuvien kehystäminen.

## The short version

- Orgaaniset muodot ovat epäsäännöllisiä, virtaavia hahmoja, kuten möykkyjä, kiviä, lehtiä ja väreitä, vastakohtana neliöiden ja ympyröiden geometrialle.
- Ne tekevät designista pehmeämmän, inhimillisemmän ja luonnollisemman, mikä sopii hyvinvointi-, ruoka-, kauneus-, lasten- ja lifestylebrändeille.
- Hyvässä möykkymuodossa on muutama erikokoinen laaja kaari eikä teräviä kärkiä tai pientä mutkittelua.
- Möykky- ja holvikaarikehykset tekevät tavallisista kuvista brändikuvia ilman kuvankäsittelytaitoja.
- CSS:ssä yksinkertainen möykkymuoto syntyy kahdeksan arvon border-radius-määrityksellä ja animoituu arvoja hitaasti vaihtamalla.

**Orgaaniset muodot** ovat epäsäännöllisiä, virtaavia hahmoja: möykkyjä, kiviä, lehtiä, lammikoita, väreitä ja pehmeitä holvikaaria. Geometriset muodot noudattavat sääntöjä, kuten neliön neljä yhtä pitkää sivua. Orgaaniset näyttävät kasvaneilta tai kaadetuilta. Ne tuovat pehmeyttä ja lämpöä sekä toimivat erityisen hyvin valokuvakehyksinä, taustamuotoina ja lyhyen tekstin alustoina. Tärkeintä on harkittu, ei sattumanvarainen vaikutelma.

## Orgaaniset ja geometriset muodot

Geometriset muodot tuntuvat täsmällisiltä, rakennetuilta ja järkeviltä. Orgaaniset luonnollisilta, rennoilta ja inhimillisiltä. Kumpikaan ei ole parempi, ne vain viestivät eri asioita. Moni hyvä identiteetti käyttää molempia: tiukkaa [geometrista](https://gradiently.design/fi/guide/geometric-design) ruudukkoa typografialle ja asettelulle sekä yhtä orgaanista muotoa lämmöksi.

### Geometriset

- Neliöt, ympyrät, kolmiot, suorat viivat
- Täsmällinen, tekninen, järjestelmällinen
- Sopii talouteen, tekniikkaan ja arkkitehtuuriin
- Helppo kohdistaa ja toistaa

### Orgaaniset

- Möykyt, kivet, lehdet, aallot, holvikaaret
- Rauhallinen, luonnollinen, lähestyttävä
- Sopii hyvinvointiin, ruokaan, kauneuteen ja perheisiin
- Vaatii huolellisuutta satunnaisuuden välttämiseksi

## Missä orgaaniset muodot toimivat parhaiten

| Käyttö | Tehtävä | Sopivat kohteet |
| --- | --- | --- |
| Kuvakehys | Rajaa valokuvan möykyksi tai holvikaareksi | Muotokuvat, tuotteet, ruoka |
| Taustamuoto | Yksi suuri pehmeä muoto kohteen takana | Tuotekuvat, pääkuvat |
| Tekstialusta | Kivimuoto hinnalle tai lyhyelle väitteelle | Tarjoukset, etiketit, tarrat |
| Osioiden jakaja | Aaltoileva reuna sivun alueiden välissä | Verkkosivut, ruokalistat, lehtiset |
| Kuvio | Monia pieniä toistuvia kiviä tai lehtiä | Pakkaukset, taustakuvat, käärepaperit |

Viisi orgaanisten muotojen vahvuutta. Valitse designiin yksi tai kaksi, älä kaikkia viittä.

Hyvinvointistudiot, ihonhoitobrändit, leipomot, kukkakaupat, terapeutit ja lastenbrändit käyttävät muotoja, koska ne pehmentävät ympäristöään. [Ihonhoitobrändin design](https://gradiently.design/fi/guide/skincare-brand-design) näyttää hyvän esimerkin: yksi kivi pullon takana voi kantaa koko ilmeen.

## Näin piirrät harkitun möykkymuodon

1. **Aloita ympyrästä tai pyöristetystä neliöstä** Möykky on työnnetty ympyrä. Pyöreä alku pitää kokonaismassan tasapainossa.
2. **Työnnä kolmea tai neljää pistettä** Siirrä muutamaa reunapistettä sisään ja ulos eri verran. Kolmesta viiteen pullistumaa toimii parhaiten, useampi näyttää roiskeelta.
3. **Vaihtele kaarien kokoa** Yksi pitkä loiva kaari, yksi tiukempi ja yksi välimuoto. Samankokoiset pullistumat näyttävät mekaaniselta kukalta tai hammasrattaalta.
4. **Poista terävät kärjet ja pienet mutkat** Jokaisen kaaren pitäisi olla niin sileä, että voit seurata sitä hitaasti sormella. Pienet taitteet näyttävät etäältä virheiltä.
5. **Käytä uudelleen** Tallenna paras muotosi ja käytä sitä käännettynä tai skaalattuna koko brändissä. Tunnistettavasta muodosta tulee osa identiteettiä.

Pidä muodot suurina ja harvoina. Kolmanneksen kuvasta täyttävä hahmo näyttää varmalta, kymmenen pientä viime hetkellä lisätyltä koristelulta.

> **Väritä muoto hiljaisesti** Täytä taustamuodot pohjan läheisellä sävyllä, yhtä tai kahta askelta vaaleammalla tai tummemmalla, voimakkaan vastavärin sijaan. Muoto näkyy edelleen, mutta sen edessä oleva valokuva tai otsikko säilyttää huomion.

## Orgaaniset kuvakehykset: möykyt ja holvikaaret

Valokuvan rajaaminen pehmeään muotoon on helpoin tapa tehdä tavallisesta kuvasta suunnitellun näköinen. Holvikaari tuntuu arkkitehtoniselta ja rauhalliselta, ympyrä henkilökohtaiselta ja möykky rennolta ja ystävälliseltä. Käytä samaa kehystä johdonmukaisesti, jotta julkaisuruudukko näyttää sarjalta.

- **Holvikaari** sopii sisustukseen, keramiikkaan, häihin ja levolliseen ilmeeseen.
- **Ympyrä** sopii kasvoille: tiimisivuihin, asiakaspalautteisiin ja puhujakortteihin.
- **Möykky** sopii ruokaan, kasveihin, lemmikkeihin ja epäsäännöllisiin tuotteisiin.
- Pidä kehyksen ympäristö rauhallisena, jotta muoto erottuu.

Gradientlyn Studio rajaa minkä tahansa kuvan holvikaareksi, ympyräksi tai möykyksi ja sävyttää sen taustan Markin väreillä yksiväriseksi, kaksiväriseksi tai pehmeäksi laveeraukseksi. Näin kuva ja sen takainen pinta kuuluvat yhteen. [Kaksivärinen valokuva](https://gradiently.design/fi/guide/photo-duotone-in-mark-colours) selittää sävytysvaihtoehdot.

Sunnuntaiaamun joogatunnin pystyjulkaisu pehmeällä virtaavalla taustalla, jossa on orgaanisia muotoja

Joogastudion julkaisu, jossa pehmeä virtaava pinta luo rauhan ja sanat ovat sen hiljaisimmalla alueella.

## Orgaaniset liukuvärit ja pehmeät muodot

Muodot eivät tarvitse kovia reunoja tuntuakseen orgaanisilta. Päällekkäiset, pehmeästi hiipuvat säteittäiset liukuvärit näyttävät värilammikoilta, kuin veteen leviävä muste. Tämä on [verkkoliukuvärien](https://gradiently.design/fi/guide/mesh-gradients) ajatus, jota voi jäljitellä kerrostetuilla säteittäisillä liu’uilla.

- Persikkalammikko kermalla: `radial-gradient(ellipse 60% 45% at 30% 35%, #f4a99a 0%, #f6e4d8 55%, #faf3ec 100%)`
- Salviakivi sumulla: `radial-gradient(ellipse 55% 70% at 70% 60%, #8fb9a8 0%, #d6e6dc 50%, #f3f5ef 100%)`
- Luumun hehku yöllä: `radial-gradient(ellipse 70% 50% at 50% 70%, #6b4fa0 0%, #2c2147 50%, #15111f 100%)`

Pehmeät elliptiset lammikot. Sivuun siirretyt, hieman venytetyt ellipsit näyttävät täydellistä keskitettyä ympyrää luonnollisemmilta.

## Kopioitava CSS-möykkymuoto

Verkossa yksinkertaisin muoto käyttää kahdeksan arvon `border-radius`-määritystä: neljä vaakasädettä, vinoviiva ja neljä pystysädettä. Kahden arvojoukon välinen animaatio saa muodon hengittämään hitaasti. MDN:n [border-radius-ohje](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) selittää syntaksin.

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

Muoto toimii myös kuvakehyksenä. Hidas edestakainen animaatio pysähtyy kaikille, jotka suosivat vähennettyä liikettä.

Monimutkaisempaan ääriviivaan piirrä SVG-polku ja käytä sitä `clip-path`-määrityksessä. Pidä polussa vain muutama sileä kaari samoista syistä kuin käsin piirtäessä. Jos brändi tarvitsee lämpöä myös väriin ja typografiaan, [leikkisä brändäys](https://gradiently.design/fi/guide/playful-design) sopii pehmeisiin muotoihin luontevasti.

## FAQ

### Mitä orgaaniset muodot ovat designissa?

Epäsäännöllisiä, virtaavia hahmoja kuten möykkyjä, kiviä, lehtiä, aaltoja ja holvikaaria, jotka näyttävät luonnollisilta neliöiden ja ympyröiden sääntöjen sijaan.

### Mitä orgaaniset muodot viestivät?

Pehmeyttä, rauhaa, lämpöä ja inhimillisyyttä. Siksi ne ovat yleisiä hyvinvointi-, ruoka-, kauneus- ja lastenbrändeissä.

### Miten teen möykkymuodon CSS:llä?

Anna elementille sama leveys ja korkeus sekä kahdeksan arvon `border-radius`, esimerkiksi `42% 58% 63% 37% / 41% 44% 56% 59%`. Animoi kahden arvojoukon välillä hitaaksi muodonmuutokseksi.

### Miten sijoitan kuvan möykkymuotoon?

Rajaa se suunnittelutyökalun maskilla. Verkossa käytä kuvassa samaa `border-radius`-määritystä tai SVG:n `clip-path`-polkua. Gradientlyn Studio rajaa kuvat suoraan möykyiksi, holvikaariksi ja ympyröiksi.

### Voiko orgaanisia ja geometrisia muotoja käyttää yhdessä?

Kyllä. Geometrinen ruudukko tekstille ja asettelulle sekä yksi orgaaninen muoto lämmöksi on yleinen ja tasapainoinen yhdistelmä.