# Geometrisk design: rutnät, former och mönsteridéer

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

Cirklar, kvadrater, ränder och rutnät är grafisk designs äldsta verktyg och fortfarande de mest pålitliga. En praktisk guide till rutnät, formval och mönsteridéer, med kod du kan klistra in.

## The short version

- Geometrisk design bygger bilder och layouter av regelbundna former som cirklar, kvadrater, trianglar och raka linjer, oftast ordnade i ett rutnät.
- Ett rutnät med jämna marginaler, kolumner och mellanrum är det som får geometriska layouter att kännas ordnade i stället för bara kantiga.
- Cirklar läses ofta som vänliga och fullständiga, kvadrater som stabila och trianglar som riktade och energiska.
- Ränder, rutor, prickar, strålar och ringar kan alla ritas med CSS-gradienter, utan några bildfiler.
- Geometriska mönster fungerar bäst i två eller tre färger med en tydlig skala, så att de stöder innehållet i stället för att konkurrera med det.

**Geometrisk design** bygger bilder av regelbundna former (cirklar, kvadrater, trianglar och raka linjer) placerade i ett rutnät. Det är Bauhaus språk, de schweiziska affischernas, art déco och de flesta moderna logotyper. Det känns ordnat, självsäkert och tidlöst eftersom reglerna syns: saker linjerar, upprepas och hänger ihop. Här går vi igenom hur du sätter upp rutnätet, väljer former med avsikt och gör geometriska mönster, bland annat flera som du kan rita i ren CSS.

## Börja med ett rutnät

Former ensamma gör inte en design geometrisk, det gör linjeringen. Ett rutnät ger varje element en plats: marginaler runt kanten, kolumner tvärs över ytan och mellanrum emellan. När det finns fäster sig varje cirkel, block och textrad vid det, och hela designen börjar kännas byggd.

| Format | Storlek | Marginal | Rutnät |
| --- | --- | --- | --- |
| Instagraminlägg | 1080×1350 | 72 px | 6 kolumner, 24 px mellanrum |
| Kvadratiskt inlägg | 1080×1080 | 72 px | 6 kolumner, 24 px mellanrum |
| Story | 1080×1920 | 72 px på sidorna, 250 px upptill och nedtill | 4 kolumner, 24 px mellanrum |
| A4-affisch i 300 dpi | 2480×3508 | 177 px (15 mm) | 12 kolumner, 59 px mellanrum |
| Hero på webbplats | 1920×1080 | 120 px | 12 kolumner, 32 px mellanrum |

Rutnät att utgå från för vanliga format. De är inga regler från någon plattform, bara rimliga grundvärden: justera dem och håll sedan fast vid dem genom en hel serie.

Mästarna i det här förhållningssättet var de schweiziska formgivarna på 1950- och 1960-talen, vars affischer fortfarande ser aktuella ut. [Schweizisk design](https://gradiently.design/sv/guide/swiss-design) går igenom deras metoder, och [Bauhaus-design](https://gradiently.design/sv/guide/bauhaus-design) visar var kärleken till cirkel, kvadrat och triangel började.

## Välj former med avsikt

Varje grundform bär associationer som ofta används i designundervisning, men ingen är absolut. Se dem som tendenser och låt färg och sammanhang göra resten.

- **Cirkel:** fullständig, vänlig, fokuserad. Bra för att lyfta fram en enda sak, som ett datum eller ett ansikte.
- **Kvadrat och rektangel:** stabil, ärlig, strukturell. Den naturliga behållaren för text och bilder.
- **Triangel:** riktad och energisk. Leder ögat, antyder rörelse eller spänning.
- **Linje och rand:** rytm och fart. Vågrätt känns lugnt, diagonalt känns dynamiskt.
- **Halvcirkel och kvartscirkel:** mjukar upp en sträng layout men förblir geometriska, en favorit på moderna affischer.

En stående affisch delad lodrätt i två block, med en föreläsningstitel linjerad på ena sidan

En delad layout: en stark lodrät delning, med texten låst till rutnätet på ena sidan.

Ett stående inlägg med en stor siffra som lyder 12 kolumner och en liten linjerad detaljrad

En stor siffra satt i rutnätet. Skalkontrast mellan siffra och detalj är ett klassiskt geometriskt grepp.

## Idéer till geometriska mönster

Mönster är geometrisk design när den syns som mest. Klassikerna är ränder, rutor, prickar, strålar, ringar, sparrar och rutnät av linjer. Håll dig till två eller tre färger, välj en skala och avgör om mönstret är hjälten (en affisch, ett omslagspapper) eller en stilla bakgrund, och sänk i så fall kontrasten rejält.

- Diagonala ränder: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Markisränder: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Måltavleringar: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Solstrålar: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Fyrdelad kvadrat: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Linjerat papper: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Sex geometriska mönster ritade helt med CSS-gradienter. Hårda färgstopp (samma position två gånger) ger skarpa kanter i stället för gradienter.

Art déco tog strålar, solfjädrar och trappstegsformer i guld och svart, medan Memphis bröt rutnätet med slingor och konfetti. [Art déco-design](https://gradiently.design/sv/guide/art-deco-design) och [Memphis-design](https://gradiently.design/sv/guide/memphis-design) är båda rika källor om du vill ha ett mönster med en tidsepoks känsla.

## Rutor, prickar och rutnät i CSS

Vissa mönster behöver sin rutstorlek satt separat med `background-size`, så att de upprepas över ett helt element. Dessa tre är de som efterfrågas mest. Artikeln om [css-mönster](https://gradiently.design/sv/guide/css-patterns) har många fler, och [repeterande linjär gradient](https://gradiently.design/sv/guide/css-repeating-gradient) förklarar hårda 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;
}
```

Schackrutor, prickar och rutpapper. Ändra färgerna och rutstorleken, men rör inte strukturen. Skillnaden på 1 px i prickarna mjukar upp deras kant.

## Geometriska designidéer att prova den här veckan

- **En stor cirkel:** en enda cirkel som fyller halva affischen, med eventets datum satt inuti.
- **Randig kant:** ett band av markisränder längs överkanten på en meny eller prislista, inget annat mönstrat.
- **Kvartscirklar i hörnen:** en kvartscirkel i varje hörn på ett kvadratiskt inlägg, i två omväxlande färger.
- **Siffra i rutnätet:** en jättesiffra (ett år, ett pris, ett antal dagar) linjerad mot vänstra kolumnen, med liten text bredvid.
- **Solstrålar bakom en produkt:** lågkontrastiga strålar som strålar ut bakom en flaska eller ask på en butiksbanner.
- **Anteckningar på rutpapper:** en tipskarusell mot en svag rutnätsbakgrund, där varje bild har en regel skriven på sig.

Varje idé använder ett enda geometriskt grepp och låter resten vara enkelt. Det räcker oftast för att ge ett inlägg en tydlig hållning, och det är lätt att upprepa genom en hel serie.

## Håll geometriska designer läsbara

### Undvik

- Högkontrastmönster rakt bakom text
- Fem färger i ett och samma mönster
- Former som nästan linjerar men missar rutnätet
- Fina ränder som flimrar på skärmar
- Tre orelaterade mönsterskalor blandade

### Gör så här

- Ett enfärgat eller lugnt block där orden står
- Två eller tre färger, en dominerande
- Allt fäst mot samma rutnät
- Ränder minst 8 px breda i inläggsstorlek
- En mönsterskala, upprepad med självförtroende

Fina, högkontrastiga ränder kan flimra på skärmar och bli moaré när en app ändrar storlek på din bild, så testa i den storlek som folk faktiskt ser. Geometrisk ordning passar också bra ihop med ett mjukt inslag: en enda [organisk form](https://gradiently.design/sv/guide/organic-shapes-design) på ett strängt rutnät tillför värme utan att bryta systemet. I Gradiently kan Designer lägga ut ett inlägg på ett rent rutnät i ditt varumärkes Mark och göra alla andra storlekar utifrån det, så att linjeringen överlever varje format.

## FAQ

### Vad är geometrisk design?

En grafisk designstil byggd av regelbundna former som cirklar, kvadrater, trianglar och linjer, oftast linjerade mot ett rutnät.

### Hur gör jag ett geometriskt mönster i CSS?

Använd repeterande gradienter med hårda färgstopp, till exempel `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` för ränder. För rutor och prickar lägger du till `background-size` för att sätta rutstorleken.

### Vilket rutnät ska jag använda för ett Instagraminlägg?

Ett inlägg på 1080×1350 fungerar bra med 72 pixlars marginaler och sex kolumner med 24 pixlars mellanrum. Använd samma rutnät för varje inlägg i en serie.

### Vilka designströmningar använder geometriska former?

Bauhaus, den schweiziska eller internationella typografiska stilen, art déco och Memphis byggde alla starkt på geometriska former, var och en i helt olika anda.