# Geometrisch ontwerp: rasters, vormen en patroonideeën

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

Cirkels, vierkanten, strepen en rasters zijn het oudste gereedschap van het grafisch ontwerp en nog altijd het betrouwbaarst. Een werkgids met rasters, vormkeuzes en patroonideeën, met code om te plakken.

## The short version

- Geometrisch ontwerp bouwt beelden en layouts uit regelmatige vormen zoals cirkels, vierkanten, driehoeken en rechte lijnen, meestal op een raster geschikt.
- Een raster met consistente marges, kolommen en goten maakt dat geometrische layouts geordend voelen en niet alleen hoekig.
- Cirkels lezen meestal als vriendelijk en compleet, vierkanten als stabiel en driehoeken als richtinggevend en energiek.
- Strepen, ruiten, stippen, stralen en ringen kun je allemaal met CSS-kleurverlopen tekenen, zonder afbeeldingsbestanden.
- Geometrische patronen werken het best in twee of drie kleuren met één duidelijke schaal, zodat ze de inhoud ondersteunen in plaats van ermee te concurreren.

**Geometrisch ontwerp** bouwt beelden uit regelmatige vormen (cirkels, vierkanten, driehoeken en rechte lijnen) die op een raster staan. Het is de taal van het Bauhaus, Zwitserse posters, Art Deco en de meeste moderne logo’s. Het voelt geordend, zelfverzekerd en tijdloos omdat de regels zichtbaar zijn: dingen lijnen uit, herhalen en hangen samen. Hieronder staat hoe je het raster opzet, bewust vormen kiest en geometrische patronen maakt, waaronder een aantal die je in pure CSS tekent.

## Begin met een rasterlayout

Vormen alleen maken een ontwerp niet geometrisch, uitlijning wel. Een raster geeft elk element een plek: marges rondom, kolommen over het beeld en goten ertussen. Zodra het bestaat, klikt elke cirkel, elk blok en elke tekstregel erin, en begint het hele ontwerp gebouwd te voelen.

| Formaat | Maat | Marge | Raster |
| --- | --- | --- | --- |
| Instagram-post | 1080×1350 | 72 px | 6 kolommen, goten van 24 px |
| Vierkante post | 1080×1080 | 72 px | 6 kolommen, goten van 24 px |
| Story | 1080×1920 | 72 px zijkanten, 250 px boven en onder | 4 kolommen, goten van 24 px |
| A4-poster op 300 dpi | 2480×3508 | 177 px (15 mm) | 12 kolommen, goten van 59 px |
| Website-hero | 1920×1080 | 120 px | 12 kolommen, goten van 32 px |

Beginrasters voor gangbare formaten. Het zijn geen regels van een platform, alleen verstandige standaarden: pas ze aan en houd ze dan aan voor een hele serie.

De meesters van deze aanpak waren de Zwitserse ontwerpers van de jaren vijftig en zestig, wier posters nog steeds actueel ogen. [Zwitsers ontwerp](https://gradiently.design/nl/guide/swiss-design) behandelt hun methoden en [Bauhaus-ontwerp](https://gradiently.design/nl/guide/bauhaus-design) laat zien waar de liefde voor cirkel, vierkant en driehoek begon.

## Bewust vormen kiezen

Elke basisvorm draagt associaties die veel in ontwerponderwijs worden gebruikt, al is geen enkele absoluut. Gebruik ze als neigingen en laat kleur en context de rest doen.

- **Cirkel:** compleet, vriendelijk, gefocust. Goed om één ding te benadrukken, zoals een datum of een gezicht.
- **Vierkant en rechthoek:** stabiel, eerlijk, structureel. De natuurlijke houder voor tekst en afbeeldingen.
- **Driehoek:** richtinggevend en energiek. Wijst het oog, suggereert beweging of spanning.
- **Lijn en streep:** ritme en snelheid. Horizontaal voelt rustig, diagonaal voelt dynamisch.
- **Halve en kwartcirkel:** verzachten een strenge layout terwijl ze geometrisch blijven, een favoriet van moderne posters.

Een staande poster, verticaal in twee blokken gesplitst, met een lezingtitel aan één kant uitgelijnd

Een gesplitste layout: één sterke verticale verdeling, tekst aan één kant op het raster vastgezet.

Een staande post met een groot cijfer dat 12 kolommen zegt en een kleine uitgelijnde detailregel

Een groot getal op het raster gezet. Schaalcontrast tussen cijfer en detail is een klassieke geometrische zet.

## Ideeën voor geometrische patronen

Patronen zijn geometrisch ontwerp op zijn zichtbaarst. De klassiekers zijn strepen, ruiten, stippen, stralen, ringen, chevrons en rasters van lijnen. Houd het bij twee of drie kleuren, kies één schaal en bepaal of het patroon de held is (een poster, inpakpapier) of een rustige achtergrond, waarbij je het contrast flink verlaagt.

- Diagonale strepen: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Luifelstrepen: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Schietschijfringen: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Zonnestralen: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Vierkant in vieren: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Gelinieerde lijnen: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Zes geometrische patronen, volledig met CSS-kleurverlopen getekend. Harde kleurstops (dezelfde positie twee keer) geven scherpe randen in plaats van overgangen.

Art Deco nam stralen, waaiers en getrapte vormen in goud en zwart over, Memphis brak het raster met krullen en confetti. [Art-decoontwerp](https://gradiently.design/nl/guide/art-deco-design) en [Memphis-ontwerp](https://gradiently.design/nl/guide/memphis-design) zijn allebei rijke bronnen als je een patroon met een tijdsgebonden smaak wilt.

## Ruiten, stippen en rasters in CSS

Sommige patronen vragen dat je de tegelgrootte apart met `background-size` instelt, zodat ze over een heel element herhalen. Deze drie worden het vaakst gevraagd. Het artikel [CSS-patronen](https://gradiently.design/nl/guide/css-patterns) heeft er veel meer en [herhalend lineair kleurverloop](https://gradiently.design/nl/guide/css-repeating-gradient) legt harde stops in detail uit.

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

Dambord, stippen en ruitjespapier. Verander de kleuren en de tegelgrootte, laat de structuur met rust. Het verschil van 1 px bij de stippen verzacht hun rand.

## Ideeën voor geometrisch ontwerp om deze week te proberen

- **Eén grote cirkel:** een enkele cirkel die een halve poster vult, met de datum van het evenement erin.
- **Streeprand:** een band van luifelstrepen langs de bovenkant van een menukaart of prijslijst, verder niets met patroon.
- **Kwartcirkelhoeken:** een kwartcirkel in elke hoek van een vierkante post, in twee afwisselende kleuren.
- **Getal op het raster:** een enorm cijfer (een jaartal, een prijs, een aantal dagen) uitgelijnd op de linkerkolom, kleine tekst ernaast.
- **Zonnestralen achter een product:** stralen met laag contrast die van achter een fles of doos uitwaaieren op een winkelbanner.
- **Notities op ruitjespapier:** een tipcarrousel op een vage rasterachtergrond, met op elke dia één regel.

Elk idee gebruikt één geometrisch middel en laat de rest gewoon. Dat is meestal genoeg om een post een duidelijk standpunt te geven, en het is makkelijk te herhalen over een hele serie.

## Geometrische ontwerpen leesbaar houden

### Vermijd

- Een patroon met hoog contrast direct achter tekst
- Vijf kleuren in één patroon
- Vormen die bijna uitlijnen maar het raster missen
- Fijne strepen die op schermen schitteren
- Drie niet-verwante patroonschalen mengen

### Doe

- Een effen of rustig blok waar woorden staan
- Twee of drie kleuren, één dominant
- Alles op hetzelfde raster vastgezet
- Strepen van minstens 8 px breed op postformaat
- Eén patroonschaal, zelfverzekerd herhaald

Fijne strepen met hoog contrast kunnen op schermen flikkeren en moiré worden als een app je afbeelding verkleint, dus test op het formaat dat mensen echt zien. Geometrische orde combineert ook goed met één zacht element: een enkele [organische vorm](https://gradiently.design/nl/guide/organic-shapes-design) op een streng raster voegt warmte toe zonder het systeem te breken. In Gradiently kan de Designer een post op een schoon raster in de Mark van je merk opmaken en elk ander formaat daaruit maken, zodat de uitlijning elk formaat overleeft.

## FAQ

### Wat is geometrisch ontwerp?

Een stijl van grafisch ontwerp opgebouwd uit regelmatige vormen als cirkels, vierkanten, driehoeken en lijnen, meestal op een raster uitgelijnd.

### Hoe maak ik een geometrisch patroon in CSS?

Gebruik herhalende kleurverlopen met harde kleurstops, zoals `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` voor strepen. Voor ruiten en stippen voeg je `background-size` toe om de tegel in te stellen.

### Welk raster gebruik ik voor een Instagram-post?

Een post van 1080×1350 werkt goed met marges van 72 pixels en zes kolommen met goten van 24 pixels. Gebruik hetzelfde raster voor elke post in een serie.

### Welke ontwerpstromingen gebruiken geometrische vormen?

Het Bauhaus, de Zwitserse of Internationale Typografische Stijl, Art Deco en Memphis leunden zwaar op geometrische vormen, elk in een heel andere geest.