# Organische Formen im Design: Blobs, Kurven, weiche Formen [Canonical HTML page](https://gradiently.design/de/guide/organic-shapes-design) Blobs, Kiesel, Bögen und weiche Kurven lassen ein Design menschlich und ruhig wirken. Hier steht, wo sie funktionieren, wie du eine zeichnest, die gewollt aussieht, und wie du Fotos damit rahmst. ## The short version - Organische Formen sind unregelmäßige, fließende Gebilde wie Blobs, Kiesel, Blätter und Wellen, im Gegensatz zu geometrischen Formen wie Quadraten und Kreisen. - Sie lassen Designs weicher, menschlicher und natürlicher wirken, was zu Wellness-, Food-, Beauty-, Kinder- und Lifestyle-Marken passt. - Ein guter Blob hat ein paar breite Kurven unterschiedlicher Größe und keine scharfen Spitzen oder winzigen Wackler. - Blob- und Bogenrahmen machen aus gewöhnlichen Fotos Markenbilder, ganz ohne Bildbearbeitungskenntnisse. - In CSS lässt sich ein einfacher Blob mit einem border-radius aus acht Werten bauen und durch langsames Ändern dieser Werte animieren. **Organische Formen** sind unregelmäßige, fließende Gebilde: Blobs, Kiesel, Blätter, Pfützen, Wellen und weiche Bögen. Anders als geometrische Formen, die Regeln folgen (ein Quadrat hat vier gleiche Seiten), sehen sie aus, als wären sie gewachsen oder gegossen worden. Im Design bringen sie Weichheit und Wärme und sind besonders nützlich als Fotorahmen, Hintergrundformen und Behälter für kurzen Text. Der Trick ist, sie gewählt statt zufällig wirken zu lassen. ## Organische Formen im Vergleich zu geometrischen Formen Geometrische Formen wirken präzise, gebaut und rational. Organische Formen wirken natürlich, entspannt und menschlich. Keine ist besser, sie sagen Verschiedenes. Viele gute Identitäten nutzen beide: ein strenges Raster aus [geometrischem Design](https://gradiently.design/de/guide/geometric-design) für Schrift und Layout, mit einer organischen Form für Wärme. ### Geometrisch - Quadrate, Kreise, Dreiecke, gerade Linien - Wirkt präzise, technisch, geordnet - Passt zu Finanzen, Technik, Architektur - Leicht auszurichten und zu wiederholen ### Organisch - Blobs, Kiesel, Blätter, Wellen, Bögen - Wirkt ruhig, natürlich, nahbar - Passt zu Wellness, Food, Beauty, Familie - Braucht Sorgfalt, damit sie nicht zufällig wirkt ## Wo organische Formen am besten wirken | Einsatz | Was sie bewirkt | Gut für | | --- | --- | --- | | Fotorahmen | Schneidet ein Foto als Blob oder Bogen zu | Porträts, Produkte, Essen | | Hintergrundform | Eine große weiche Form hinter dem Motiv | Produktfotos, Titelbilder | | Textbehälter | Ein Kiesel, der einen Preis oder ein kurzes Versprechen hält | Angebote, Labels, Sticker | | Abschnittstrenner | Ein welliger Rand zwischen Bereichen einer Seite | Websites, Speisekarten, Flyer | | Muster | Viele kleine Kiesel oder Blätter, wiederholt | Verpackung, Tapeten, Geschenkpapier | Fünf Aufgaben, die organische Formen gut erfüllen. Wähle ein oder zwei pro Entwurf, nicht alle fünf. Wellnessstudios, Hautpflegelabels, Bäckereien, Floristen, Therapeuten und Kindermarken setzen auf diese Formen, weil sie alles um sich herum weicher machen. [Design für Hautpflegemarken](https://gradiently.design/de/guide/skincare-brand-design) ist ein gutes Beispiel für die Kategorie, in der ein einzelner Kiesel hinter einer Flasche den ganzen Look tragen kann. ## So zeichnest du einen Blob, der gewollt aussieht 1. **Beginne mit einem Kreis oder abgerundeten Quadrat** Ein Blob ist ein Kreis, der verformt wurde. Mit einer runden Basis bleibt die Gesamtmasse ausgewogen. 2. **Schiebe drei oder vier Punkte** Bewege ein paar Randpunkte unterschiedlich weit nach innen und außen. Drei bis fünf Ausbuchtungen sind ideal, mehr sieht nach Klecks aus. 3. **Variiere die Kurvengrößen** Eine lange sanfte Kurve, eine engere, eine dazwischen. Gleiche Ausbuchtungen wirken mechanisch, wie eine Blume oder ein Zahnrad. 4. **Entferne scharfe Spitzen und winzige Wackler** Jede Kurve sollte glatt genug sein, um sie langsam mit dem Finger nachzufahren. Kleine Knicke wirken aus der Ferne wie Fehler. 5. **Nutze ihn wieder** Speichere deinen besten Blob und verwende denselben, gedreht oder skaliert, in der ganzen Marke. Eine wiedererkennbare Form wird Teil der Identität. Halte Blobs groß und wenige. Eine einzelne Form, die ein Drittel des Bildes füllt, wirkt selbstsicher, zehn kleine Blobs wirken wie in letzter Minute hinzugefügte Dekoration. > **Färbe den Blob leise** Fülle Hintergrund-Blobs mit einem Ton nahe am Grund, ein oder zwei Stufen heller oder dunkler, statt mit einer lauten Kontrastfarbe. Die Form bleibt sichtbar, aber das Foto oder die Überschrift davor behält die Aufmerksamkeit. ## Organische Fotorahmen: Blobs und Bögen Ein Foto in eine weiche Form zuzuschneiden ist der einfachste Weg, gewöhnliche Bilder gestaltet wirken zu lassen. Ein Bogen wirkt architektonisch und ruhig, ein Kreis persönlich, ein Blob entspannt und freundlich. Nutze eine Rahmenform konsequent, damit ein Raster aus Posts wie ein Set wirkt. - **Bogen**-Rahmen passen zu Interieurs, Keramik, Hochzeiten und allem, was gelassen wirken soll. - **Kreis**-Rahmen passen zu Gesichtern: Teamseiten, Kundenstimmen, Speaker-Karten. - **Blob**-Rahmen passen zu Essen, Pflanzen, Haustieren und Produkten mit unregelmäßiger Kontur. - Halte den Hintergrund um den Rahmen ruhig, damit die Form lesbar bleibt. Das Studio von Gradiently kann jedes Foto als Bogen, Kreis oder Blob zuschneiden und in den Farben des Mark im Hintergrund als Mono, Duotone oder sanfte Tönung einfärben, sodass das Foto und die Fläche dahinter zusammengehören. [Duotone-Foto](https://gradiently.design/de/guide/photo-duotone-in-mark-colours) erklärt die Tönungsoptionen. Ein Post im Hochformat für einen Yogakurs am Sonntagmorgen auf weichem, fließendem Hintergrund mit organischen Formen Ein Yogastudio-Post, in dem die weiche, fließende Fläche die Ruhe trägt und die Worte in ihrem ruhigsten Bereich sitzen. ## Organische Verläufe und weiche Formen Formen brauchen keine harten Kanten, um organisch zu wirken. Überlappende radiale Verläufe mit weichem Abfall wirken wie Farbpfützen, wie Tinte, die sich im Wasser ausbreitet. Das ist die Idee hinter [Mesh-Verläufen](https://gradiently.design/de/guide/mesh-gradients), und du kannst sie mit geschichteten radialen Verläufen annähern. - Pfirsichpfütze auf Creme: `radial-gradient(ellipse 60% 45% at 30% 35%, #f4a99a 0%, #f6e4d8 55%, #faf3ec 100%)` - Salbeikiesel auf Nebel: `radial-gradient(ellipse 55% 70% at 70% 60%, #8fb9a8 0%, #d6e6dc 50%, #f3f5ef 100%)` - Pflaumenglühen auf Nacht: `radial-gradient(ellipse 70% 50% at 50% 70%, #6b4fa0 0%, #2c2147 50%, #15111f 100%)` Weiche elliptische Pfützen. Außermittige, leicht gestreckte Ellipsen wirken weit natürlicher als ein perfekter Kreis in der Mitte. ## Eine CSS-Blob-Form zum Kopieren Im Web nutzt der einfachste Blob `border-radius` mit acht Werten: vier horizontale Radien, ein Schrägstrich, dann vier vertikale. Die Animation zwischen zwei Wertesätzen lässt die Form langsam atmen. Die [border-radius-Referenz](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) von MDN erklärt die Syntax. ```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; } } ``` Ein Blob, der auch als Fotorahmen funktioniert. Die langsame, abwechselnde Animation stoppt für alle, die reduzierte Bewegung bevorzugen. Für komplexere Konturen zeichne die Form als SVG-Pfad und nutze sie mit `clip-path`. Halte den Pfad auf eine Handvoll glatter Kurven, aus denselben Gründen wie beim Zeichnen von Hand. Wenn die Marke auch in Farbe und Schrift Wärme braucht, passt [verspieltes Branding](https://gradiently.design/de/guide/playful-design) von Natur aus zu weichen Formen. ## FAQ ### Was sind organische Formen im Design? Unregelmäßige, fließende Gebilde wie Blobs, Kiesel, Blätter, Wellen und Bögen, die natürlich wirken, statt nach Regeln wie Quadrate und Kreise gebaut zu sein. ### Was vermitteln organische Formen? Weichheit, Ruhe, Wärme und eine menschliche Note. Deshalb sind sie in Wellness-, Food-, Beauty- und Kindermarken so verbreitet. ### Wie erstelle ich eine Blob-Form in CSS? Gib einem Element gleiche Breite und Höhe und einen `border-radius` mit acht Werten, etwa `42% 58% 63% 37% / 41% 44% 56% 59%`. Animiere zwischen zwei Wertesätzen für eine langsame Verwandlung. ### Wie setze ich ein Foto in eine Blob-Form? Schneide es in deinem Designtool mit einer Blob-Maske zu oder gib dem Bild im Web denselben `border-radius` oder einen SVG-`clip-path`. Das Studio von Gradiently kann Fotos direkt als Blobs, Bögen und Kreise zuschneiden. ### Können organische und geometrische Formen zusammen verwendet werden? Ja. Ein geometrisches Raster für Schrift und Layout mit einer organischen Form für Wärme ist eine gängige, ausgewogene Kombination.