Valo ja varjo

Miten valo luo syvyyttä litteälle ruudulle?

Ruutu on litteä — fyysisesti syvyyttä ei ole. Silti havaitsemme korttien kelluvan taustojen yllä, painikkeiden kohoavan pintojen yllä, tekstin leijuvan värin päällä. Tämä illuusio luodaan kokonaan valolla ja varjolla.

Material Design muotoili tämän: jokaisella pinnalla on 'korkeus' (elevation) mitattuna dp-yksiköissä. Korkeammat pinnat heittävät suurempia varjoja. Varjo kertoo katseellesi: tämä on lähempänä sinua. Matalammilla pinnoilla on pienemmät varjot: tämä on kauempana.

Neomorphism ottaa erilaisen lähestymistavan: kaksoisvarjot (vaalea toisella puolella, tumma toisella) luovat illuusion pinnoista jotka työntyvät ulos yhdestä materiaalista tai painuvat sisään siihen. Ei kellumista — vain pursotusta.

Web-brutalismi hylkää illuusion kokonaan: ei varjoja, ei syvyyttä. Sivu on dokumentti, ei tila. Litteys on rehellisyyttä.

Mikä vinjetti on ja miksi jotkin tyylit käyttävät sitä?

Vinjetti on asteittainen tummeneminen (tai lämpeneminen) näkymän reunoilla. Se kohdistaa huomion kohti keskustaa tekemällä reuna-alueista vähemmän näkyviä — kuin kohdevalo teatterissa.

Art Deco käyttää dramaattista vinjettiä — syvä musta reunoilla, luoden teatraalisen kohdevalon. Sivu ei ole dokumentti; se on näyttämö.

Victorian käyttää lämmintä meripihkanväristä vinjettiä — kuin tulisijan valo paneloidussa huoneessa. Reunat tummenevat lämmöllä, luoden intiimiyden ja sulkeutuneisuuden.

Art Nouveau käyttää lempeintä vinjettiä — tuskin havaittavaa lämpenemistä. Se luo tunnelman ilman draamaa.

Bauhaus, Swiss International ja Web-brutalismi eivät käytä lainkaan vinjettiä — sivu on tasaisesti valaistu. Tämä on itsessään kannanotto: tunnelmasta kieltäytyminen on selkeyden valitsemista.

Miten varjot viestivät interaktiivisuutta?

Digitaalisessa designissa varjo tarkoittaa usein 'tämän kanssa voi olla vuorovaikutuksessa'. Varjollinen painike näyttää kohotetulta — ja kohotettuja asioita voi painaa. Poista varjo ja painike litistyy sivuun, menettäen vihjeensä toiminnasta.

Material Design käyttää varjoa tiukkana järjestelmänä: korkeustasot viestivät mitä elementti tekee. FAB (kelluva toimintapainike) 6dp:ssä on ensisijainen toiminto. Kortti 1dp:ssä on passiivista sisältöä. Varjo ei ole koristeellinen — se on semanttinen.

Memphis käyttää kovia siirrettyjä varjoja (4px 4px 0) — ei realistista syvyyttä vaan graafista syvyyttä. Varjo sanoo 'tämä on erillään taustastaan' teeskentelemättä olevansa fyysisesti todellinen.

Nordic Minimal käyttää tuskin havaittavia varjoja (1px sumennus) — kevyin mahdollinen syvyys. Kortit kelluvat kuiskauksella, eivät huudolla.

Mikä on valon suunnan ja johdonmukaisuuden välinen suhde?

Varjot implikoivat valonlähteen. Jos kaikki varjot osoittavat samaan suuntaan, aivot lukevat yhden johdonmukaisen valon — ja illuusio pitää. Jos varjot osoittavat eri suuntiin, illuusio murtuu ja design tuntuu väärältä.

Material Design määrittää yhden päävalon ruudun yläosaan, heittäen varjot alaspäin ja hieman oikealle. Jokainen elementti jokaisella ruudulla noudattaa tätä sääntöä. Johdonmukaisuus tekee järjestelmästä fyysisen tuntuisen.

Neomorphism käyttää samaa periaatetta tiukemmin: kaikki vaaleat varjot ylävasemmalle, kaikki tummat varjot alaoikealle. Yksi epäjohdonmukainen varjo tuhoaa koko 'yhden materiaalin' illuusion.

Oppi: jos käytät varjoja, sitoudu suuntaan. Jos yksi elementti rikkoo säännön, jokainen muu elementti muuttuu epäilyttäväksi.

Miten värilämpötila luo valon tunteen?

Valolla on lämpötila. Auringonvalo on lämmin (keltainen). Kuunvalo on kylmä (sininen). Tulen valo on hyvin lämmin (meripihka). Designin taustaväri voi simuloida näitä valaistusolosuhteita ilman ainuttakaan varjoa.

Victorianin tumma mahonkipaletti simuloi kaasuvaloa — lämmin, meripihkainen, sulkeutunut. Tunnet olevasi liekillä valaistussa huoneessa.

Nordic Minimalin luonnonvalkoinen paletti simuloi päivänvaloa suuren ikkunan läpi — neutraali, tasainen, demokraattinen. Jokainen elementti saa saman valon.

Glassmorphismin tumma sinivioletti paletti simuloi ruudun hehkua — keinotekoinen, kylmä, teknologinen. Käyttöliittymä on valonlähde.

Et tarvitse vinjettiä tai varjoa luodaksesi valon. Sivun väri itse voi olla valo.