Geometrisch ontwerp: rasters, vormen en patroonideeën

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.

De meesters van deze aanpak waren de Zwitserse ontwerpers van de jaren vijftig en zestig, wier posters nog steeds actueel ogen. Zwitsers ontwerp behandelt hun methoden en Bauhaus-ontwerp 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.

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.

Art Deco nam stralen, waaiers en getrapte vormen in goud en zwart over, Memphis brak het raster met krullen en confetti. Art-decoontwerp en Memphis-ontwerp 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 heeft er veel meer en herhalend lineair kleurverloop legt harde stops in detail uit.

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

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

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