# Geometrisk design: rutenett, former og mønsterideer

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

Sirkler, kvadrater, striper og rutenett er de eldste verktøyene i grafisk design, og fortsatt de mest pålitelige. En praktisk guide til rutenett, formvalg og mønsterideer, med kode du kan lime inn.

## The short version

- Geometrisk design bygger bilder og oppsett av regelmessige former som sirkler, kvadrater, trekanter og rette linjer, som regel ordnet på et rutenett.
- Et rutenett med faste marger, kolonner og mellomrom er det som får geometriske oppsett til å føles ordnet og ikke bare kantete.
- Sirkler oppleves gjerne som vennlige og hele, kvadrater som stabile og trekanter som retningsbestemte og energiske.
- Striper, ruter, prikker, stråler og ringer kan alle tegnes med CSS-gradienter, uten en eneste bildefil.
- Geometriske mønstre fungerer best i to eller tre farger med én tydelig skala, slik at de støtter innholdet i stedet for å konkurrere med det.

**Geometrisk design** bygger bilder av regelmessige former (sirkler, kvadrater, trekanter og rette linjer) plassert på et rutenett. Det er språket til Bauhaus, de sveitsiske plakatene, art deco og de fleste moderne logoer. Det føles ordnet, selvsikkert og tidløst fordi reglene er synlige: ting står på linje, gjentas og henger sammen. Her ser du hvordan du setter opp rutenettet, velger former med vilje og lager geometriske mønstre, blant annet flere du kan tegne i ren CSS.

## Start med et rutenett

Former alene gjør ikke et design geometrisk; det er justeringen som gjør det. Et rutenett gir hvert element en plass: marger rundt kanten, kolonner over flaten og mellomrom mellom dem. Når det først finnes, festes hver sirkel, hver blokk og hver tekstlinje til det, og hele designet begynner å føles bygget.

| Format | Størrelse | Marg | Rutenett |
| --- | --- | --- | --- |
| Instagram-innlegg | 1080×1350 | 72 px | 6 kolonner, 24 px mellomrom |
| Kvadratisk innlegg | 1080×1080 | 72 px | 6 kolonner, 24 px mellomrom |
| Story | 1080×1920 | 72 px på sidene, 250 px topp og bunn | 4 kolonner, 24 px mellomrom |
| A4-plakat i 300 dpi | 2480×3508 | 177 px (15 mm) | 12 kolonner, 59 px mellomrom |
| Toppbilde på nettside | 1920×1080 | 120 px | 12 kolonner, 32 px mellomrom |

Rutenett å starte med for vanlige formater. De er ikke regler fra noen plattform, bare fornuftige utgangspunkt: juster dem, og hold deg til dem gjennom en hel serie.

Mesterne i denne tilnærmingen var de sveitsiske designerne på 1950- og 1960-tallet, og plakatene deres ser fortsatt aktuelle ut. [Sveitsisk design](https://gradiently.design/nb/guide/swiss-design) forklarer metodene deres, og [Bauhaus-design](https://gradiently.design/nb/guide/bauhaus-design) viser hvor kjærligheten til sirkel, kvadrat og trekant begynte.

## Velg former med vilje

Hver grunnform har assosiasjoner som brukes mye i designundervisning, selv om ingen av dem er absolutte. Se på dem som tendenser, og la fargen og sammenhengen gjøre resten.

- **Sirkel:** hel, vennlig, fokusert. Fin for å fremheve én ting, som en dato eller et ansikt.
- **Kvadrat og rektangel:** stabil, ærlig, strukturell. Den naturlige rammen for tekst og bilder.
- **Trekant:** retningsbestemt og energisk. Leder blikket og antyder bevegelse eller spenning.
- **Linje og stripe:** rytme og fart. Vannrett føles rolig, diagonalt føles dynamisk.
- **Halvsirkel og kvartsirkel:** myker opp et strengt oppsett og forblir likevel geometrisk, en favoritt på moderne plakater.

En stående plakat delt loddrett i to blokker, med en forelesningstittel justert på den ene siden

Et delt oppsett: én kraftig loddrett deling, med teksten låst til rutenettet på den ene siden.

Et stående innlegg med et stort tall som sier 12 kolonner og en liten detaljlinje på linje med det

Et stort tall satt på rutenettet. Skalakontrast mellom tall og detalj er et klassisk geometrisk grep.

## Ideer til geometriske mønstre

Mønstre er geometrisk design på sitt mest synlige. Klassikerne er striper, ruter, prikker, stråler, ringer, sikksakk og linjenett. Hold deg til to eller tre farger, velg én skala, og bestem om mønsteret er hovedpersonen (en plakat, et gavepapir) eller en stille bakgrunn, og i så fall senker du kontrasten kraftig.

- Diagonale striper: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Markisestriper: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Blinkringer: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Solstråler: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Firedelt kvadrat: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Linjert papir: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Seks geometriske mønstre tegnet helt med CSS-gradienter. Harde fargestopp (samme posisjon to ganger) gir skarpe kanter i stedet for overganger.

Art deco tok i bruk stråler, vifter og trappeformer i gull og svart; Memphis brøt rutenettet med krusseduller og konfetti. [Art deco-design](https://gradiently.design/nb/guide/art-deco-design) og [Memphis-design](https://gradiently.design/nb/guide/memphis-design) er begge rike kilder hvis du vil ha et mønster med preg av en bestemt epoke.

## Ruter, prikker og rutenett i CSS

Noen mønstre trenger at flisstørrelsen settes for seg med `background-size`, slik at de gjentas over hele elementet. Disse tre er de mest etterspurte. Artikkelen om [CSS-mønstre](https://gradiently.design/nb/guide/css-patterns) har mange flere, og [repeterende lineære gradienter](https://gradiently.design/nb/guide/css-repeating-gradient) forklarer harde stopp i detalj.

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

Sjakkbrett, prikker og millimeterpapir. Bytt farger og flisstørrelse, men la strukturen være. Forskjellen på 1px i prikkene myker opp kanten deres.

## Geometriske designideer å prøve denne uken

- **Én stor sirkel:** en enkelt sirkel som fyller halve plakaten, med datoen for arrangementet satt inni.
- **Stripekant:** et bånd med markisestriper langs toppen av en meny eller prisliste, og ikke noe annet mønster.
- **Kvartsirkler i hjørnene:** en kvartsirkel i hvert hjørne av et kvadratisk innlegg, i to vekslende farger.
- **Tall på rutenettet:** et enormt tall (et årstall, en pris, et antall dager) justert til venstre kolonne, med liten tekst ved siden av.
- **Solstråler bak et produkt:** stråler med lav kontrast som stråler ut bak en flaske eller eske på et nettbutikkbanner.
- **Notater på millimeterpapir:** en karusell med tips på en svak rutenettbakgrunn, med én regel skrevet på hvert bilde.

Hver idé bruker ett geometrisk grep og lar resten være enkelt. Det er som regel nok til å gi et innlegg et tydelig ståsted, og det er lett å gjenta gjennom en hel serie.

## Hold geometrisk design lesbart

### Unngå

- Mønster med høy kontrast rett bak teksten
- Fem farger i ett mønster
- Former som nesten står på linje, men bommer på rutenettet
- Tynne striper som flimrer på skjermen
- Tre mønsterskalaer som ikke har noe med hverandre å gjøre

### Gjør

- En ensfarget eller rolig blokk der ordene står
- To eller tre farger, én dominerende
- Alt festet til det samme rutenettet
- Striper på minst 8 px i innleggsstørrelse
- Én mønsterskala, gjentatt med selvtillit

Tynne striper med høy kontrast kan flimre på skjermen og bli til moiré når en app skalerer bildet ditt, så test i den størrelsen folk faktisk ser det. Geometrisk orden passer også godt sammen med ett mykt element: én enkelt [organisk form](https://gradiently.design/nb/guide/organic-shapes-design) på et strengt rutenett gir varme uten å bryte systemet. I Gradiently kan Designer sette opp et innlegg på et rent rutenett i merkevarens Mark og lage alle de andre størrelsene ut fra det, så justeringen overlever hvert format.

## FAQ

### Hva er geometrisk design?

En stil innen grafisk design bygget av regelmessige former som sirkler, kvadrater, trekanter og linjer, som regel justert etter et rutenett.

### Hvordan lager jeg et geometrisk mønster i CSS?

Bruk repeterende gradienter med harde fargestopp, for eksempel `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` for striper. For ruter og prikker legger du til `background-size` for å angi flisen.

### Hvilket rutenett bør jeg bruke til et Instagram-innlegg?

Et innlegg på 1080×1350 fungerer godt med marger på 72 piksler og seks kolonner med 24 piksler mellomrom. Bruk det samme rutenettet til alle innleggene i en serie.

### Hvilke designretninger bruker geometriske former?

Bauhaus, sveitsisk eller internasjonal typografisk stil, art deco og Memphis lente seg alle tungt på geometriske former, hver i en helt egen ånd.