# Geometrisches Design: Raster, Formen und Musterideen

[Canonical HTML page](https://gradiently.design/de/guide/geometric-design)

Kreise, Quadrate, Streifen und Raster sind die ältesten Werkzeuge des Grafikdesigns und noch immer die verlässlichsten. Ein Praxisleitfaden zu Rastern, Formwahl und Musterideen, mit Code zum Einfügen.

## The short version

- Geometrisches Design baut Bilder und Layouts aus regelmäßigen Formen wie Kreisen, Quadraten, Dreiecken und geraden Linien, meist auf einem Raster angeordnet.
- Ein Raster mit gleichmäßigen Rändern, Spalten und Abständen lässt geometrische Layouts geordnet statt nur kantig wirken.
- Kreise wirken meist freundlich und vollständig, Quadrate stabil und Dreiecke gerichtet und energiegeladen.
- Streifen, Karos, Punkte, Strahlen und Ringe lassen sich alle mit CSS-Verläufen zeichnen, ganz ohne Bilddateien.
- Geometrische Muster funktionieren am besten in zwei oder drei Farben mit einem klaren Maßstab, damit sie den Inhalt unterstützen, statt mit ihm zu konkurrieren.

**Geometrisches Design** baut Visuals aus regelmäßigen Formen (Kreise, Quadrate, Dreiecke und gerade Linien) auf einem Raster. Es ist die Sprache des Bauhaus, der Schweizer Plakate, des Art déco und der meisten modernen Logos. Es wirkt geordnet, selbstsicher und zeitlos, weil die Regeln sichtbar sind: Dinge richten sich aus, wiederholen sich und stehen in Beziehung. Unten steht, wie du das Raster aufsetzt, Formen bewusst wählst und geometrische Muster erstellst, darunter einige, die du in reinem CSS zeichnen kannst.

## Beginne mit einem Raster-Layout

Formen allein machen ein Design nicht geometrisch, Ausrichtung tut es. Ein Raster gibt jedem Element einen Platz: Ränder am Bildrand, Spalten über das Bild und Abstände dazwischen. Sobald es existiert, rastet jeder Kreis, Block und jede Textzeile darin ein, und das ganze Design beginnt, gebaut zu wirken.

| Format | Größe | Rand | Raster |
| --- | --- | --- | --- |
| Instagram-Post | 1080×1350 | 72 px | 6 Spalten, 24 px Abstand |
| Quadratischer Post | 1080×1080 | 72 px | 6 Spalten, 24 px Abstand |
| Story | 1080×1920 | 72 px an den Seiten, 250 px oben und unten | 4 Spalten, 24 px Abstand |
| A4-Plakat mit 300 dpi | 2480×3508 | 177 px (15 mm) | 12 Spalten, 59 px Abstand |
| Website-Header | 1920×1080 | 120 px | 12 Spalten, 32 px Abstand |

Ausgangsraster für gängige Formate. Sie sind keine Vorgaben einer Plattform, nur sinnvolle Standardwerte: Passe sie an und bleibe dann in einer ganzen Serie dabei.

Die Meister dieses Ansatzes waren die Schweizer Designer der 1950er und 1960er Jahre, deren Plakate noch heute aktuell wirken. [Schweizer Design](https://gradiently.design/de/guide/swiss-design) behandelt ihre Methoden, und [Bauhaus-Design](https://gradiently.design/de/guide/bauhaus-design) zeigt, wo die Liebe zu Kreis, Quadrat und Dreieck begann.

## Formen bewusst wählen

Jede Grundform trägt Assoziationen, die in der Designlehre weit verbreitet sind, auch wenn keine absolut gilt. Nutze sie als Tendenzen und lass Farbe und Kontext den Rest tun.

- **Kreis:** vollständig, freundlich, fokussiert. Gut, um eine Sache hervorzuheben, etwa ein Datum oder ein Gesicht.
- **Quadrat und Rechteck:** stabil, ehrlich, strukturell. Der natürliche Behälter für Text und Bilder.
- **Dreieck:** gerichtet und energiegeladen. Lenkt den Blick, deutet Bewegung oder Spannung an.
- **Linie und Streifen:** Rhythmus und Tempo. Waagerecht wirkt ruhig, diagonal dynamisch.
- **Halbkreis und Viertelkreis:** mildern ein strenges Layout und bleiben dabei geometrisch, ein Liebling moderner Plakate.

Ein Plakat im Hochformat, vertikal in zwei Blöcke geteilt, mit einem Vortragstitel auf einer Seite ausgerichtet

Ein geteiltes Layout: eine starke vertikale Teilung, Text auf einer Seite am Raster verankert.

Ein Post im Hochformat mit großer Zahl, die 12 Spalten lautet, und einer kleinen, ausgerichteten Detailzeile

Eine große Zahl auf dem Raster. Größenkontrast zwischen Zahl und Detail ist ein geometrischer Klassiker.

## Ideen für geometrische Muster

Muster sind geometrisches Design in seiner sichtbarsten Form. Die Klassiker sind Streifen, Karos, Punkte, Strahlen, Ringe, Chevrons und Liniengitter. Bleibe bei zwei oder drei Farben, wähle einen Maßstab und entscheide, ob das Muster der Hauptdarsteller ist (ein Plakat, ein Geschenkpapier) oder ein ruhiger Hintergrund, dann senke seinen Kontrast deutlich.

- Diagonale Streifen: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Markisenstreifen: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Zielringe: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Sonnenstrahlen: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Geviertes Quadrat: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Linierte Zeilen: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Sechs geometrische Muster, komplett mit CSS-Verläufen gezeichnet. Harte Farbstopps (dieselbe Position zweimal) ergeben scharfe Kanten statt Übergängen.

Art déco nahm Strahlen, Fächer und gestufte Formen in Gold und Schwarz, Memphis sprengte das Raster mit Schnörkeln und Konfetti. [Art-déco-Design](https://gradiently.design/de/guide/art-deco-design) und [Memphis-Design](https://gradiently.design/de/guide/memphis-design) sind beide reiche Quellen, wenn du ein Muster mit Zeitgeschmack willst.

## Karos, Punkte und Raster in CSS

Manche Muster brauchen eine separate Kachelgröße mit `background-size`, damit sie sich über ein ganzes Element wiederholen. Diese drei sind am gefragtesten. Der Artikel [CSS-Muster](https://gradiently.design/de/guide/css-patterns) hat viele weitere, und [sich wiederholender linearer Verlauf](https://gradiently.design/de/guide/css-repeating-gradient) erklärt harte Stopps im Detail.

```css
/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}
```

Schachbrett, Punkte und Millimeterpapier. Ändere die Farben und die Kachelgröße, lass die Struktur in Ruhe. Der Unterschied von 1px bei den Punkten macht ihren Rand weicher.

## Geometrische Designideen für diese Woche

- **Ein großer Kreis:** ein einzelner Kreis, der ein halbes Plakat füllt, mit dem Eventdatum darin.
- **Streifenrand:** ein Band aus Markisenstreifen am oberen Rand einer Speisekarte oder Preisliste, sonst nichts gemustert.
- **Viertelkreis-Ecken:** ein Viertelkreis in jeder Ecke eines quadratischen Posts, in zwei abwechselnden Farben.
- **Zahl auf dem Raster:** eine riesige Zahl (ein Jahr, ein Preis, eine Anzahl Tage), an der linken Spalte ausgerichtet, kleiner Text daneben.
- **Sonnenstrahlen hinter einem Produkt:** kontrastarme Strahlen, die hinter einer Flasche oder Schachtel auf einem Shop-Banner ausstrahlen.
- **Millimeterpapier-Notizen:** ein Tipp-Karussell auf blassem Rasterhintergrund, jede Folie mit einer aufgeschriebenen Regel.

Jede Idee nutzt ein geometrisches Mittel und lässt den Rest schlicht. Das genügt meist, um einem Post einen klaren Standpunkt zu geben, und lässt sich leicht über eine ganze Serie wiederholen.

## Geometrische Designs lesbar halten

### Vermeide

- Kontrastreiches Muster direkt hinter Text
- Fünf Farben in einem Muster
- Formen, die fast, aber nicht ganz am Raster sitzen
- Feine Streifen, die auf Bildschirmen flimmern
- Drei unabhängige Mustermaßstäbe mischen

### Tu

- Eine ruhige oder einfarbige Fläche, wo Worte stehen
- Zwei oder drei Farben, eine dominant
- Alles am selben Raster eingerastet
- Streifen von mindestens 8 px Breite in Postgröße
- Ein Mustermaßstab, selbstbewusst wiederholt

Feine, kontrastreiche Streifen können auf Bildschirmen flackern und zu Moiré werden, wenn eine App dein Bild skaliert. Teste also in der Größe, in der Leute es wirklich sehen. Geometrische Ordnung verträgt sich auch gut mit einem weichen Element: Eine einzelne [organische Form](https://gradiently.design/de/guide/organic-shapes-design) auf strengem Raster bringt Wärme, ohne das System zu brechen. In Gradiently kann der Designer einen Post auf einem sauberen Raster im Mark deiner Marke anlegen und daraus jede andere Größe erstellen, sodass die Ausrichtung jedes Format übersteht.

## FAQ

### Was ist geometrisches Design?

Ein Grafikdesign-Stil aus regelmäßigen Formen wie Kreisen, Quadraten, Dreiecken und Linien, meist an einem Raster ausgerichtet.

### Wie erstelle ich ein geometrisches Muster in CSS?

Nutze sich wiederholende Verläufe mit harten Farbstopps, etwa `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` für Streifen. Für Karos und Punkte ergänze `background-size`, um die Kachel festzulegen.

### Welches Raster sollte ich für einen Instagram-Post nutzen?

Ein 1080×1350-Post funktioniert gut mit 72 Pixel Rand und sechs Spalten mit 24 Pixel Abstand. Nutze dasselbe Raster für jeden Post einer Serie.

### Welche Designströmungen nutzen geometrische Formen?

Das Bauhaus, der Schweizer oder Internationale Typografische Stil, Art déco und Memphis setzten alle stark auf geometrische Formen, jeweils in sehr unterschiedlichem Geist.