# Geometrisk design: gitre, former og mønsterideer

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

Cirkler, firkanter, striber og gitre er grafisk designs ældste værktøjer og stadig de mest pålidelige. En praktisk guide til gitre, formvalg og mønsterideer med kode, du kan kopiere.

## The short version

- Geometrisk design bygger billeder og layouts af regelmæssige former som cirkler, firkanter, trekanter og lige linjer, som regel placeret på et gitter.
- Et gitter med ensartede marginer, kolonner og mellemrum gør, at geometriske layouts føles ordnede og ikke bare kantede.
- Cirkler læses ofte som venlige og komplette, firkanter som stabile og trekanter som retningsgivende og energiske.
- Striber, tern, prikker, stråler og ringe kan alle tegnes med CSS-gradienter uden billedfiler.
- Geometriske mønstre virker bedst i to eller tre farver og med én tydelig skala, så de understøtter indholdet i stedet for at konkurrere med det.

**Geometrisk design** bygger billeder af regelmæssige former (cirkler, firkanter, trekanter og lige linjer) placeret på et gitter. Det er Bauhaus' sprog, de schweiziske plakaters, art deco's og de fleste moderne logoer. Det føles ordnet, selvsikkert og tidløst, fordi reglerne er synlige: tingene flugter, gentages og hører sammen. Her er, hvordan du sætter gitteret op, vælger former med vilje og laver geometriske mønstre, bl.a. flere du kan tegne i ren CSS.

## Start med et gitterlayout

Former alene gør ikke et design geometrisk, det gør flugtning. Et gitter giver hvert element sin plads: marginer langs kanten, kolonner henover billedet og mellemrum imellem. Når det først er der, falder hver cirkel, blok og tekstlinje på plads efter det, og hele designet begynder at føles bygget.

| Format | Størrelse | Margen | Gitter |
| --- | --- | --- | --- |
| Instagram-opslag | 1080×1350 | 72 px | 6 kolonner, 24 px mellemrum |
| Kvadratisk opslag | 1080×1080 | 72 px | 6 kolonner, 24 px mellemrum |
| Story | 1080×1920 | 72 px i siderne, 250 px foroven og forneden | 4 kolonner, 24 px mellemrum |
| A4-plakat ved 300 dpi | 2480×3508 | 177 px (15 mm) | 12 kolonner, 59 px mellemrum |
| Hero til websted | 1920×1080 | 120 px | 12 kolonner, 32 px mellemrum |

Startgitre til almindelige formater. De er ikke regler fra nogen platform, bare fornuftige standarder: tilpas dem, og hold dig så til dem gennem en hel serie.

Mestrene i denne tilgang var de schweiziske designere i 1950erne og 1960erne, hvis plakater stadig ser aktuelle ud. [Schweizisk design](https://gradiently.design/da/guide/swiss-design) gennemgår deres metoder, og [Bauhaus-design](https://gradiently.design/da/guide/bauhaus-design) viser, hvor kærligheden til cirkel, firkant og trekant begyndte.

## Vælg former med vilje

Hver grundform bærer på associationer, som ofte bruges i designundervisning, selv om ingen af dem er absolutte. Brug dem som tendenser, og lad farve og sammenhæng klare resten.

- **Cirkel:** komplet, venlig, fokuseret. God til at fremhæve én ting, som en dato eller et ansigt.
- **Firkant og rektangel:** stabil, ærlig, struktureret. Den naturlige ramme om tekst og billeder.
- **Trekant:** retningsgivende og energisk. Leder øjet, antyder bevægelse eller spænding.
- **Linje og stribe:** rytme og fart. Vandret virker rolig, diagonal virker dynamisk.
- **Halvcirkel og kvartcirkel:** blødgør et strengt layout og forbliver geometrisk, en favorit på moderne plakater.

En plakat i højformat delt lodret i to blokke, med en foredragstitel placeret på den ene side

Et delt layout: én kraftig lodret deling og tekst, der er låst til gitteret på den ene side.

Et opslag i højformat med et stort tal, der lyder 12 kolonner, og en lille flugtende detaljelinje

Et stort tal sat på gitteret. Skalaforskellen mellem tal og detalje er et klassisk geometrisk greb.

## Ideer til geometriske mønstre

Mønstre er geometrisk design på sit mest synlige. Klassikerne er striber, tern, prikker, stråler, ringe, chevrons og net af linjer. Hold dig til to eller tre farver, vælg én skala, og beslut, om mønsteret er helten (en plakat, gavepapir) eller en rolig baggrund, og sænk i så fald kontrasten kraftigt.

- Diagonale striber: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Markisestriber: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Skiveringe: `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)`
- Linjepapir: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Seks geometriske mønstre tegnet udelukkende med CSS-gradienter. Hårde farvestop (samme position to gange) giver skarpe kanter i stedet for overgange.

Art deco brugte stråler, vifter og trappeformer i guld og sort, mens Memphis brød gitteret med snirkler og konfetti. [Art deco-design](https://gradiently.design/da/guide/art-deco-design) og [Memphis-design](https://gradiently.design/da/guide/memphis-design) er begge rige kilder, hvis du vil have et mønster med præg af en bestemt tid.

## Tern, prikker og gitre i CSS

Nogle mønstre kræver, at flisens størrelse sættes for sig med `background-size`, så de gentages over hele elementet. Disse tre efterspørges mest. Artiklen om [css-mønstre](https://gradiently.design/da/guide/css-patterns) har mange flere, og [repeating linear gradient](https://gradiently.design/da/guide/css-repeating-gradient) forklarer hårde stop i detaljer.

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

Skakternet, prikker og ternet papir. Skift farver og flisestørrelse, men lad strukturen være. Forskellen på 1 px i prikkerne blødgør deres kant.

## Geometriske designideer at prøve i denne uge

- **Én stor cirkel:** en enkelt cirkel, der fylder halvdelen af en plakat, med begivenhedens dato inde i den.
- **Stribekant:** et bånd af markisestriber langs toppen af et menukort eller en prisliste, og intet andet med mønster.
- **Kvartcirkelhjørner:** en kvartcirkel i hvert hjørne af et kvadratisk opslag, i to skiftende farver.
- **Tal på gitteret:** et kæmpe tal (et årstal, en pris, et antal dage) flugtet til venstre kolonne, med lille tekst ved siden af.
- **Solstråler bag et produkt:** lavkontrast-stråler, der stråler ud bag en flaske eller æske på et butiksbanner.
- **Noter på linjepapir:** en karrusel med tips på en svag gitterbaggrund, hvor hvert slide har én regel skrevet på.

Hver idé bruger ét geometrisk greb og lader resten være enkelt. Det er som regel nok til at give et opslag et klart udtryk, og det er nemt at gentage gennem en hel serie.

## Hold geometriske designs læsbare

### Undgå

- Mønster med høj kontrast lige bag tekst
- Fem farver i ét mønster
- Former, der næsten flugter, men rammer ved siden af gitteret
- Fine striber, der flimrer på skærme
- Tre urelaterede mønsterskalaer blandet sammen

### Gør

- En ensfarvet eller rolig blok, hvor der står tekst
- To eller tre farver, hvor én dominerer
- Alt lagt ind på det samme gitter
- Striber på mindst 8 px i opslagets størrelse
- Én mønsterskala, gentaget med selvtillid

Fine striber med høj kontrast kan flimre på skærme og blive til moiré, når en app skalerer dit billede, så test i den størrelse, folk faktisk ser. Geometrisk orden passer også godt sammen med ét blødt element: en enkelt [organisk form](https://gradiently.design/da/guide/organic-shapes-design) på et strengt gitter giver varme uden at bryde systemet. I Gradiently kan Designer lægge et opslag ud på et rent gitter i dit brands Mark og lave alle de andre størrelser ud fra det, så flugtningen overlever hvert format.

## FAQ

### Hvad er geometrisk design?

En stil inden for grafisk design bygget af regelmæssige former som cirkler, firkanter, trekanter og linjer, som regel flugtet efter et gitter.

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

Brug gentagne gradienter med hårde farvestop, for eksempel `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` til striber. Til tern og prikker tilføjer du `background-size` for at sætte flisen.

### Hvilket gitter skal jeg bruge til et Instagram-opslag?

Et opslag på 1080×1350 fungerer godt med 72 pixel marginer og seks kolonner med 24 pixel mellemrum. Brug samme gitter til alle opslag i en serie.

### Hvilke designbevægelser bruger geometriske former?

Bauhaus, den schweiziske eller internationale typografiske stil, art deco og Memphis byggede alle kraftigt på geometriske former, hver i en vældig forskellig ånd.