Organische vormen in ontwerp: blobs en zachte rondingen

Organische vormen zijn onregelmatige, vloeiende vormen: blobs, kiezels, bladeren, plassen, rimpelingen en zachte bogen. Anders dan geometrische vormen, die regels volgen (een vierkant heeft vier gelijke zijden), lijken ze gegroeid of gegoten. In ontwerp brengen ze zachtheid en warmte, en ze zijn vooral nuttig als fotokader, achtergrondvorm en houder voor korte tekst. De truc is ze gekozen te laten lijken in plaats van toevallig.

Organische vormen versus geometrische vormen

Geometrische vormen lezen als precies, gebouwd en rationeel. Organische vormen lezen als natuurlijk, ontspannen en menselijk. Geen van beide is beter; ze zeggen iets anders. Veel goede identiteiten gebruiken beide: een strak raster voor geometrisch ontwerp voor tekst en layout, met één organische vorm voor warmte.

Waar organische vormen het best werken

Welzijnsstudio’s, huidverzorgingslabels, bakkerijen, bloemisten, therapeuten en kindermerken leunen op deze vormen omdat ze alles eromheen verzachten. Ontwerp voor huidverzorgingsmerken is een goed voorbeeld van die categorie, waar één kiezel achter een flesje de hele look kan dragen.

Zo teken je een blob die bewust oogt

1. 1

   Begin bij een cirkel of afgeronde vierkant

   Een blob is een cirkel die is ingedeukt en opgeduwd. Rond beginnen houdt de massa in balans.

2. 2

   Duw drie of vier punten

   Verplaats een paar randpunten met verschillende afstanden naar binnen en buiten. Drie tot vijf uitstulpingen is de gulden middenweg; meer lijkt op een spat.

3. 3

   Varieer de grootte van de rondingen

   Eén lange zachte ronding, een strakkere en eentje daartussen. Gelijke uitstulpingen ogen mechanisch, als een bloem of tandwiel.

4. 4

   Haal scherpe punten en kleine wiebels weg

   Elke ronding moet zo glad zijn dat je hem langzaam met een vinger kunt volgen. Kleine knikjes lezen van een afstand als fouten.

5. 5

   Gebruik hem opnieuw

   Bewaar je beste blob en gebruik dezelfde, gedraaid of geschaald, binnen het hele merk. Een herkenbare vorm wordt onderdeel van de identiteit.

Houd blobs groot en weinig. Eén vorm die een derde van het beeld vult oogt zelfverzekerd; tien kleine blobs lijken op decoratie die op het laatste moment is toegevoegd.

Organische fotokaders: blobs en bogen

Een foto bijsnijden tot een zachte vorm is de makkelijkste manier om gewone foto’s ontworpen te laten lijken. Een boog voelt architectonisch en rustig, een cirkel voelt persoonlijk en een blob voelt ontspannen en vriendelijk. Gebruik steeds dezelfde kadervorm, zodat een raster van berichten als een set leest.

• Boog-kaders passen bij interieurs, keramiek, bruiloften en alles wat sereen moet voelen.
• Cirkel-kaders passen bij gezichten: teampagina’s, referenties, sprekerkaarten.
• Blob-kaders passen bij eten, planten, huisdieren en producten met een onregelmatige omtrek.
• Houd de achtergrond rond het kader rustig, zodat de vorm leesbaar is.

In de Studio van Gradiently kun je elke foto bijsnijden tot een boog, cirkel of blob en inkleuren in de kleuren van de Mark op de achtergrond, als mono, duotoon of een zachte waas, zodat de foto en het vlak erachter bij elkaar horen. Duotoonfoto legt de kleuropties uit.

Organische verlopen en zachte vormen

Vormen hebben geen harde randen nodig om organisch te voelen. Overlappende radiale verlopen met zachte uitloop lezen als plassen kleur, zoals inkt die zich in water verspreidt. Dit is het idee achter meshverlopen, en je kunt het benaderen met gelaagde radiale verlopen.

Een CSS-blobvorm om te kopiëren

Op het web gebruikt de simpelste blob border-radius met acht waarden: vier horizontale stralen, een schuine streep en dan vier verticale. Tussen twee sets waarden animeren laat de vorm langzaam ademen. De border-radius-referentie van MDN legt de syntaxis uit.

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

Voor complexere contouren teken je de vorm als SVG-pad en gebruik je hem met clip-path. Houd het pad bij een handvol gladde rondingen, om dezelfde redenen als bij handtekenen. Heeft het merk ook warmte nodig in kleur en tekst, dan past speels branden vanzelf bij zachte vormen.