Verkkosivu­suunnittelun visuaalisista trendeistä

Kuten muodissakin, verkkosivutrendien tuttu ja kiistämätön piirre on se, että ne elävät, vaihtelevat, unohtuvat ja toistuvat. Se ei toki tarkoita ettemmekö voisi tarttua hetkiin ja pyrkiä luomaan kuvaa niistä olosuhteista, jotka juuri nyt vallitsevat. Vuoden 2022 web-suunnittelun trendeistä on tietenkin kirjoitettu paljon ja niiden toteutumista ehditty seuraamaan jo pitkälle kevääseen. Täten olkoon tämä meidän katsauksemme nykyhetkeen ja siihen mitä tämän vuoden trendi-ilmiöt pitävät sisällään.

Itseäni viisaammat ovat sanoneet, että elämme varhaisen webin kaltaista renessanssiaikaa. Uuden ja innostavan löytämisen oltua netin selaamisen keskiössä, myös visuaalisesti on palattu hakemaan näkökulmia tuolta ajalta. Suunnittelijat ovat siirtyneet hakemaan inspiraatiota jossain määrin standardiksi muodostuneiden valokuvapohjaisten toteutusten ulkopuolelta. Jalansijaa saavat yhä enemmän typografian luova käyttö, ruudukot ja viivat, yksinkertainen navigaatio. Hillityt värit sekä liukuvärit, hienovaraiset tekstuurit ja serif-fontit ovat yhtä lailla uineet takaisin leiskoihin.

1. Inklusiivisuus

Vaikka inklusiivisuus sanana vaikuttaa monesti poliittiseen sävyyn viljellyltä muotitermiltä, on se todellisuudessa ideologia, joka on yhä lähempänä elämänalueita, joilla sitä ei ole aikaisemmin nähty. Täten myös maailmanmarkkinoilla idea yleistyy kovaa vauhtia.

Inklusiivinen suunnittelu kuuluu yhä enemmän verkkosivusuunnittelun jokaiseen vaiheeseen. Sivuston kohdeyleisö, tone of voice, persoonallisuus ja visuaalinen kieli valitaan tavalla, jolla pyritään ottamaan huomioon yleisön kaikki sukupuolet, näkökulmat, kokemukset ja tilanteet. Visuaalisesti tämä voi tarkoittaa esimerkiksi sukupuolineutraalimpia kuvia ja kuvituksia, joilla osaltaan vahvistetaan markkinoinnin diversiteettiä. 

Myös pelimaailman vaikutuksesta johtuen suunnittelussa nähdään nyt enemmän hahmoja, avatareja ja kuvituksia jotka eivät perustu ihmisiin, mikä osaltaan laajentaa verkkosivujen todellisuutta.

2. Single pager - sivustot

Joskaan ei mikään täysin uusi ilmiö, single pager-sivustot, joissa keskeisin sisältö on pääasiallisesti yhdellä sivulla ovat tehneet jälleen tuloaan. Kyseinen toteutustapa mahdollistaa monenlaisten visuaalisten keinojen käytön, jolla sisältö voidaan tarjota vierailijoille paitsi näyttävällä mutta myös loogisella tavalla.

Tässä yhteydessä puhutaan narratiivisesta visualisoinnista tai jopa “scrollytellingistä”, jossa visuaaliset elementit on jaksotettu vieritettäväksi kronologisessa järjestyksestä halutun viestin välittämiseksi. Erilaiset animaatiot, siirtymät, parallax-efektit, elävä typografia ja mahdolliset ankkurilinkit ovat keskeisimpiä vaikutuskeinoja, jotka tässä yhteydessä vahvistavat esitettyjen tietojen vakuuttavuutta, näyttävyyttä ja hierarkiaa. Useimmiten single pagerit ovat vieriteltävissä ylhäältä alas, mutta uudenlaisissa ratkaisuissa nähdän ajoittain myös horisontaalisesti ja syvyyssuunnassa eteneviä sivuja. 

3. Kineettinen / animoitu typografia

Trendeistä puhuttaessa on miltei mahdotonta olla antamatta jollain tapaa huomiota typografialle. Luonnollisestikin yhtenä kaiken suunnittelun keskeisimmistä osa-alueista se kokee jatkuvasti murroksia, kokeiluja ja tyylejä, jotka eri vahvuisina ilmenevät myös sivustojen kirjossa. Viime aikoina voimakkaasti kehittynyt typografian piirre verkkosivusuunnittelussa on kineettinen tai animoitu teksti.

Kun aikaisemmin animointi on saattanut liittyä keskeisemmin kuvallisiin elementteihin, uusien tekniikoiden myötä liikettä tuodaan nyt enemmän myös tekstiin. Liikkuva typografia on omiaan vahvistamaan viestejä, ohjaamaan yleisön katsetta sivulla, painottamaan tiettyjä kohtia ja luomaan sivuston persoonallista sävyä. Animoitu typografia mahdollistaa kokonaisten sivujen uudenlaisia rakenteita, kun kävijän kursorin toimintaan perustuvat siirtymät, muutokset ja korostukset ohjaavat tämän etenemistä. Jatkossa nähtäneen yhä enemmän toteutuksia, joissa kineettinen typografia palvelee tarkoitusta pelkän koristeellisuuden sijaan.

4. Suurempi typografia

Edelleen puhuttaessa typografiasta, sen painotus ja rooli on muuttunut myös toisella tapaa. Viime vuosina sivustojen typografian käyttö on painottunut tiettyyn keveyteen ja minimalismiin, johon vastauksena on nyt syntynyt rohkeampaa, isompaa ja muhkeampaa typografian käyttöä. Suuremman typografian etu on, että tietyssä koossa sanoista alkaa tulla ennemminkin graafisia elementtejä pelkän copyn sijaan. Näin tekstiä voidaan jälleen käyttää katseen kiintopisteinä vierailijan ohjaamiseksi. Fontilla on tietenkin merkitystä, joten tärkeää on löytää sopiva koko kullekin kirjasintyypille.

Tällaisen typografian käytön yhteydessä on syntynyt myös niin sanottua brutalismia, jossa massiiviset kirjaimet ja sanat ovat rakennuspalikoita kokonaisille sivuston osille ja rakenteelle, ja typografian dominoiva rooli on sivuston keskeisin visuaalinen keino. 

5. Abstraktit kuvitukset

Verkkosivujen kuvituksia ovat jokusen vuoden hallinneet pirteät vektorikuvitukset ihmisistä ja esineistä, mutta nyt myös orgaanisemmat, ajoittain myös käsin tehdyn näköisemmät abstraktit kuvat ovat saaneet tilaa sivustojen kuvamaailmassa.

Abstraktien kuvitusten edut piilevät erityisesti eri työvälineiden yhdistelemisessä ja täten odottamattomienkin lopputulosten saavuttamisessa. Käsin piirretyt viivat ja orgaaniset tekstuurit luovat kuviin tuttuutta ja käsin tekemisen tuntua, mikä toimii erinomaisena kontrastina voimakkaan digitaaliselle kuvitusmaailmalle. Parhaissa tapauksissa näiden kuvien odottamattomuutta voidaan käyttää varsin tehokkaasti vaikuttavuus- tai erityisesti tunteisiin vetoavana tekijänä, vaikka ne eivät suoranaisesti esittäisi mitään konkreettista. Asiakkaat muistavat brändit usein niiden kuvitusten kautta, ja nykykontekstissa abstrakti kuvamaailma on helposti erottuva, tehokas ja muistettava. 

6. Usean tason kuvat

Toinen kuvittamisen ja kuvien asettelun tapa, joka on yleistynyt viime vuosien puhtaan minimalistisen designin rinnalla on monimutkaisempi kuvien käyttäminen usealla tasolla. Tämä voi koskea joko yksittäisten kuvitusten toteutustapaa tai kuvien asettelutapaa sivustolla. 

Tällaisin menettelytavoin saavutetaan paitsi mielenkiintoista syvyyttä, mutta haastetaan myös niitä konventionaalisiksi muodostuneita esitystapoja, joihin olemme jo tottuneet. Sivustonsa tarinan voi tällä tavoin luoda immersiivisemmäksi, ja yhdessä kiinnostavan sisällön kanssa se saa vierailijat viettämään pidemmän ajan sivustolla. Muista kuitenkin pitää sivuston fiilis yhtenäisenä, esimerkiksi taustan ja värimaailman keinoin.

Monitasoisen esitystavan yksi etu on myös se, että se sallii suuremman sisältömäärän sijoittamisen rajatummalle alueelle.

7. Retro

Nostalgia ja retro ovat vähän väliä tulossa takaisin. No, nyt ne tulevat taas.

90-luvun web 1.0:n räikeistä väreistä, gifeistä ja robottimaisista fonteista muistettava “web-suunnittelu” oli lopputuloksiltaan monesti vähintäänkin kyseenalaista, mutta nykyään siitä kaivetaan inspiraatiota vuosikymmenien design-kokemuksen turvin. Suunnittelijat näkevät internetin alkuajat rajoittamattomana vaikutteiden lähteenä, mikä näkyy esimerkiksi fonttivalinnoissa, kuvituksissa ja väreissä, samalla alkuperäisen aikakauden tarpeettomia kommevenkkejä väistellen.

Nostalgia suuntautuu myös laajemmin ja yleisemmin menneisiin aikakausiin. 80-lukua ikävöidään niin muodissa kuin näytöilläkin. Analogisempaa tunnelmaa haetaan typografialla, kuvituksilla, kuvafilttereillä, sumeudella, rakeisuudella, tekstuureilla, pehmeällä valaistuksella ja pastelliväreillä. Keinoja on liikaa lueteltavaksi, mutta kaikella pyritään piristävään tuttuuteen ja samaistuttavuuteen.