Geometrinen suunnittelu: ruudukot, muodot ja kuviot

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.

Tavan mestareita olivat 1950- ja 1960-lukujen sveitsiläiset suunnittelijat, joiden julisteet näyttävät yhä ajankohtaisilta. Sveitsiläinen suunnittelu käsittelee heidän menetelmiään, ja Bauhaus-suunnittelu 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.

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.

Art deco käytti säteitä, viuhkoja ja porrastettuja muotoja kultaisina ja mustina; Memphis rikkoi ruudukkoa kiemuroilla ja konfetilla. Art deco -suunnittelu ja Memphis-suunnittelu 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 tarjoaa lisää, ja toistuva lineaarinen liukuväri selittää jyrkät pysäkit tarkemmin.

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

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

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