Geometrisches Design: Raster, Formen und Musterideen

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.

Die Meister dieses Ansatzes waren die Schweizer Designer der 1950er und 1960er Jahre, deren Plakate noch heute aktuell wirken. Schweizer Design behandelt ihre Methoden, und 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.

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.

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 und 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 hat viele weitere, und sich wiederholender linearer Verlauf erklärt harte Stopps im Detail.

/* 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;
}

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

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