# Geometrinen suunnittelu: ruudukot, muodot ja kuviot

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

Ympyrät, neliöt, raidat ja ruudukot ovat graafisen suunnittelun vanhimpia ja luotettavimpia välineitä. Näin valitset muodot, rakennat ruudukon ja luot kuvioita myös valmiilla koodilla.

## The short version

- Geometrinen suunnittelu rakentaa kuvia ja sommitelmia säännöllisistä muodoista, kuten ympyröistä, neliöistä, kolmioista ja suorista viivoista, yleensä ruudukon varaan.
- Yhtenäiset marginaalit, palstat ja palstavälit tekevät geometrisesta sommittelusta järjestelmällistä pelkän kulmikkuuden sijaan.
- Ympyrä tuntuu usein ystävälliseltä ja kokonaiselta, neliö vakaalta ja kolmio suuntaavalta ja energiseltä.
- Raidat, ruudut, pisteet, säteet ja renkaat voi piirtää CSS-liukuväreillä ilman kuvatiedostoja.
- Geometriset kuviot toimivat parhaiten kahdella tai kolmella värillä ja yhdellä selkeällä mittakaavalla, jolloin ne tukevat sisältöä.

**Geometrinen suunnittelu** rakentaa kuvia ruudukkoon asetetuista säännöllisistä muodoista: ympyröistä, neliöistä, kolmioista ja suorista viivoista. Se on Bauhausin, sveitsiläisten julisteiden, art decon ja useimpien nykylogojen muotokieltä. Näkyvät säännöt tekevät siitä järjestelmällistä, varmaa ja ajatonta: asiat asettuvat linjaan, toistuvat ja liittyvät toisiinsa. Näin rakennat ruudukon, valitset muodot tarkoituksella ja luot geometrisia kuvioita myös pelkällä CSS:llä.

## Aloita ruudukkosommittelusta

Muodot yksin eivät tee suunnittelusta geometrista, vaan kohdistus. Ruudukko antaa kaikelle paikan: reunamarginaalit, kuvan poikki kulkevat palstat ja niiden välit. Kun ruudukko on valmis, jokainen ympyrä, lohko ja tekstirivi asettuu siihen, ja kokonaisuus alkaa tuntua rakennetulta.

| Muoto | Koko | Marginaali | Ruudukko |
| --- | --- | --- | --- |
| Instagram-julkaisu | 1080×1350 | 72 px | 6 palstaa, 24 px palstavälit |
| Neliöjulkaisu | 1080×1080 | 72 px | 6 palstaa, 24 px palstavälit |
| Tarina | 1080×1920 | 72 px sivuilla, 250 px ylhäällä ja alhaalla | 4 palstaa, 24 px palstavälit |
| A4-juliste, 300 dpi | 2480×3508 | 177 px (15 mm) | 12 palstaa, 59 px palstavälit |
| Verkkosivun pääkuva | 1920×1080 | 120 px | 12 palstaa, 32 px palstavälit |

Lähtöruudukot yleisille kuvamuodoille. Nämä ovat käytännöllisiä lähtökohtia, eivät alustojen sääntöjä: muokkaa sopiviksi ja käytä sitten samoja koko sarjassa.

Tavan mestareita olivat 1950- ja 1960-lukujen sveitsiläiset suunnittelijat, joiden julisteet näyttävät yhä ajankohtaisilta. [Sveitsiläinen suunnittelu](https://gradiently.design/fi/guide/swiss-design) käsittelee heidän menetelmiään, ja [Bauhaus-suunnittelu](https://gradiently.design/fi/guide/bauhaus-design) kertoo, mistä innostus ympyrään, neliöön ja kolmioon alkoi.

## Valitse muodot tarkoituksella

Perusmuotoihin liittyy mielleyhtymiä, joita käytetään yleisesti suunnittelun opetuksessa, mutta ne eivät ole ehdottomia. Pidä niitä suuntaviivoina ja anna värin ja asiayhteyden tehdä loput.

- **Ympyrä:** kokonainen, ystävällinen, keskittävä. Sopii yhden asian, kuten päivämäärän tai kasvojen, korostamiseen.
- **Neliö ja suorakulmio:** vakaa, rehellinen, rakenteellinen. Luonteva kehys tekstille ja kuville.
- **Kolmio:** suuntaava ja energinen. Ohjaa katsetta ja vihjaa liikkeeseen tai jännitteeseen.
- **Viiva ja raita:** rytmiä ja vauhtia. Vaakasuora tuntuu rauhalliselta, vino dynaamiselta.
- **Puoliympyrä ja neljännesympyrä:** pehmentävät tarkkaa sommittelua säilyttäen geometrisuuden. Nykyjulisteiden suosikkeja.

Pystyjuliste jaettuna kahteen pystysuoraan lohkoon, luennon otsikko kohdistettuna toiselle puolelle

Jaettu sommittelu: yksi vahva pystysuora jako ja toisella puolella ruudukkoon sidottu teksti.

Pystyjulkaisu, jossa suuri teksti 12 palstaa ja pieni samaan linjaan kohdistettu lisätieto

Suuri numero ruudukossa. Numeron ja lisätiedon kokoero on klassinen geometrinen keino.

## Ideoita geometrisiin kuvioihin

Kuvioissa geometrinen suunnittelu näkyy selvimmin. Klassikoita ovat raidat, ruudut, pisteet, säteet, renkaat, sahalaidat ja viivaruudukot. Käytä kahta tai kolmea väriä, valitse yksi mittakaava ja päätä, onko kuvio pääosassa esimerkiksi julisteessa tai käärepaperissa vai rauhallisena taustana. Jälkimmäisessä tapauksessa vähennä kontrastia huomattavasti.

- Vinoraidat: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Markiisiraidat: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Maalitaulurenkaat: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Auringonsäteet: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Neliö neljässä osassa: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Viivoitus: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Kuusi geometrista kuviota pelkillä CSS-liukuväreillä. Jyrkät väripysäkit eli sama sijainti kahdesti luovat terävät rajat häivytysten sijaan.

Art deco käytti säteitä, viuhkoja ja porrastettuja muotoja kultaisina ja mustina; Memphis rikkoi ruudukkoa kiemuroilla ja konfetilla. [Art deco -suunnittelu](https://gradiently.design/fi/guide/art-deco-design) ja [Memphis-suunnittelu](https://gradiently.design/fi/guide/memphis-design) ovat hyviä lähteitä aikakauden tunnelmaa hakevalle.

## Ruudut, pisteet ja ruudukot CSS:llä

Joissakin kuvioissa laatan koko täytyy määrittää erikseen `background-size`-ominaisuudella, jotta kuvio toistuu koko elementissä. Näitä kolmea pyydetään useimmin. [CSS-kuviot](https://gradiently.design/fi/guide/css-patterns) tarjoaa lisää, ja [toistuva lineaarinen liukuväri](https://gradiently.design/fi/guide/css-repeating-gradient) selittää jyrkät pysäkit tarkemmin.

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

Shakkiruutu, pisteet ja ruutupaperi. Vaihda värit ja laatan koko, säilytä rakenne. Pisteiden 1px ero pehmentää reunoja.

## Geometrisia ideoita tämän viikon kokeiluihin

- **Yksi suuri ympyrä:** puolet julisteesta täyttävä ympyrä, jonka sisään asetat tapahtuman päivämäärän.
- **Raidallinen reunus:** markiisiraidat ruokalistan tai hinnaston yläreunassa, muu pinta ilman kuvioita.
- **Neljännesympyrät kulmissa:** neljännesympyrä neliöjulkaisun jokaisessa kulmassa kahdella vuorottelevalla värillä.
- **Numero ruudukossa:** valtava luku, kuten vuosi, hinta tai päivien määrä, vasempaan palstaan kohdistettuna, pieni teksti vierellä.
- **Säteet tuotteen takana:** vähäkontrastiset säteet pullon tai laatikon takaa verkkokaupan bannerissa.
- **Muistiinpanot ruutupaperilla:** vinkkikaruselli himmeällä ruudukkotaustalla, jokaisessa diassa yksi sääntö.

Jokainen idea käyttää yhtä geometrista keinoa ja jättää muun yksinkertaiseksi. Se riittää yleensä antamaan julkaisulle selkeän näkökulman, ja samaa on helppo toistaa koko sarjassa.

## Pidä geometriset sommitelmat luettavina

### Vältä

- Vahvasti kontrastista kuviota suoraan tekstin takana
- Viittä väriä samassa kuviossa
- Muotoja, jotka melkein kohdistuvat mutta ohittavat ruudukon
- Ohuita raitoja, jotka väreilevät näytöllä
- Kolmea toisiinsa liittymätöntä kuviokokoa

### Tee näin

- Tasainen tai rauhallinen alue sanojen alla
- Kaksi tai kolme väriä, joista yksi hallitsee
- Kaikki samaan ruudukkoon kohdistettuna
- Vähintään 8 px leveät raidat julkaisukoossa
- Yksi johdonmukaisesti toistuva kuviokoko

Ohuet, voimakkaasti kontrastiset raidat voivat välkkyä näytöllä ja muuttua moareeksi sovelluksen pienentäessä kuvaa, joten testaa todellisessa katselukoossa. Geometriseen järjestykseen sopii myös yksi pehmeä elementti: yksittäinen [orgaaninen muoto](https://gradiently.design/fi/guide/organic-shapes-design) tiukassa ruudukossa tuo lämpöä rikkomatta järjestelmää. Gradientlyssä Designer voi sommitella julkaisun selkeään ruudukkoon brändisi Markilla ja tehdä siitä muut koot, jolloin kohdistus säilyy eri kuvamuodoissa.

## FAQ

### Mitä geometrinen suunnittelu on?

Graafisen suunnittelun tyyli, joka rakentuu säännöllisistä muodoista, kuten ympyröistä, neliöistä, kolmioista ja viivoista, yleensä ruudukkoon kohdistettuina.

### Miten teen geometrisen kuvion CSS:llä?

Käytä toistuvia liukuvärejä ja jyrkkiä väripysäkkejä, esimerkiksi raidoille `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`. Ruuduille ja pisteille määritä laatan koko `background-size`-ominaisuudella.

### Millainen ruudukko sopii Instagram-julkaisuun?

1080×1350-julkaisuun sopivat 72 pikselin marginaalit ja kuusi palstaa 24 pikselin välein. Käytä samaa ruudukkoa sarjan jokaisessa julkaisussa.

### Mitkä suunnittelusuuntaukset käyttävät geometrisia muotoja?

Bauhaus, sveitsiläinen eli kansainvälinen typografinen tyyli, art deco ja Memphis käyttivät kaikki runsaasti geometrisia muotoja, kukin eri hengessä.