Organiske former i design: klatter, kurver og myke former

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, med én organisk form som gir varme.

Hvor organiske former fungerer best

Velværestudioer, hudpleiemerker, bakerier, blomsterbutikker, terapeuter og barnemerker bruker disse formene fordi de myker opp alt rundt seg. Design for hudpleiemerker er et godt eksempel, der én småsteinform bak en flaske kan bære hele uttrykket.

Slik tegner du en gjennomtenkt klattform

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

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 forklarer fargevalgene.

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, og du kan nærme deg uttrykket med radiale gradienter i lag.

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 forklarer syntaksen.

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

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 naturlig sammen med myke former.