Orgaaniset muodot designissa: pehmeät kaaret ja hahmot

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 ruudukkoa typografialle ja asettelulle sekä yhtä orgaanista muotoa lämmöksi.

Missä orgaaniset muodot toimivat parhaiten

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 näyttää hyvän esimerkin: yksi kivi pullon takana voi kantaa koko ilmeen.

Näin piirrät harkitun möykkymuodon

1. 1

   Aloita ympyrästä tai pyöristetystä neliöstä

   Möykky on työnnetty ympyrä. Pyöreä alku pitää kokonaismassan tasapainossa.

2. 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. 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. 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. 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.

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 selittää sävytysvaihtoehdot.

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 ajatus, jota voi jäljitellä kerrostetuilla säteittäisillä liu’uilla.

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 selittää syntaksin.

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

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 sopii pehmeisiin muotoihin luontevasti.