Millaisia ovat verkkosivujen visuaaliset trendit nyt ja tulevaisuudessa? Responsiivinen suunnittelu ja Wordpress-teemojen kasvava määrä saavat näyttämään monet sivut samanlaisilta. Tekstissä esittelemme nykytrendejä ja pohdimme tulevaa.

Flat Design kehittyy

windows

Windows 8 ja Metro-aloitusnäyttö. Ruudukkomainen käyttöliittymä pohjautuu värikkäisiin laatikoihin ja dynaamisiin fontteihin. 

 

iPhonen julkistuksen jälkeen Apple oli pitkään määritellyt käyttöliittymien ja verkkosivujen tyylisuuntia. Vuonna 2012 Microsoft julkaisi Windows 8 -käyttöjärjestelmän, jonka yhteydessä esiteltiin myös uusi käyttöliittymä "Metro". Windows 8:n käyttöliittymä suunniteltiin kosketusnäyttöjä varten, jonka tyylisuunnan avainperiaatteita ovat typografia ja sovellusten sisältö. Kukaan ei olisi arvannut, että Microsoft johdattaisi graafisen suunnittelun trendejä uusiin ulottuvuksiin. Metro-käyttöliittymä hurmasi yksinkertaisuudellaan ja tyylikkyydellään. Suunnittelijat alkoivat käyttämään yksinkertaisia visuaalia elementtejä ja vahvaa typografiaa omissa töissään. Flat design oli ollut jo olemassa pitkään ennen Windows 8:n julkistusta, mutta suosio kasvoi julkistuksen jälkeen.

 

Flat Design jakaa suunnittelijoiden mielipiteitä, koska tyylisuuntaa pidetään helppona toteuttaa. Huonosti toteutettuna flat design ei ole visuaalisesti miellyttävää katseltavaa, joten toteuttaminen vaatii keskittymistä. Yksinkertaisuudestaan huolimatta tyylisuunta ei ole katoamassa mihinkään, mutta se kehittyy koko ajan. Ensimmäinen flat design -aalto oli tiukasti pelkkää "flättiä" eli yksivärisiä taustoja, joka yhdisteli selkeitä ikoneita ja dynaamista typografiaa. Tyylisuunta sai paljon vaikutteita sveitsiläistyylisestä graafisesta suunnittelusta. Nyt suunnittelijoiden piireissä kuhistaan flätin uudesta aallosta, jota kutsutaan yllättäen nimellä Flat 2.0. Tämän uuden flat design -aallon elementteinä toimivat luovat ikonit, varjostukset, liukuvärit, dynaamiset väripaletit, minimaalisuus ja yhden fontin typografia. Verkkosivujen suunnittelussa flat design on saanut vahvan jalansijan, koska se edistää responsiivista suunnittelua, parantaa sisällön luettavuutta sekä nopeuttaa sivuston latausaikoja. 

Yksinkertaiset vuorovaikutukset

Vuorovaikutteisuus on paras tapa tavoittaa käyttäjä. Interaktiivisuus saa kävijät selaamaan sisältöä, koska se tekee kokemuksesta hauskempaa ja mielenkiintoisempaa. Mieleenpainuva käyttökokemus luo enemmän positiivisia suhtautumisia sekä tuo verkkosivujen sisältöä paremmin esille. Minimaaliset vuorovaikutukset ovat nyt se uusi juttu, mutta mitä ne ovat? Puhutaan termistä "microinteraction" eli pienistä toiminnallisuuksista esim. Facebookin tykkäysnappi, lukituksen poistaminen puhelimesta tai kääntämällä jokin ominaisuus päälle tai pois. Minimaalisilla vuorovaikutuksilla on tarkoitus helpottaa ja tehdä käytettävyydestä sujuvampaa. 

 

Näitä vuorovaikutuksia voi ruokkia myös näyttävillä animaatioilla, mutta niitä ei suositella sisällyttämään verkkosivuille vain niiden hienouden vuoksi, eivätkä ne tee sivustosta käyttäjäystävällistä. Animaatioilla on tarkoitus herättää käyttäjien huomio ja niiden tavoitteena on ohjailla käyttäjää kohti haluttua tavoitetta. Esimerkiksi saada verkkokaupan kävijä lisäämään tuote ostoskoriin. Vuorovaikutuksien suunnitteluun löytyy paljon hyödyllisiä vinkkejä verkosta ja muutamia löytyy mm. täältä sekä täältä. Eikun harjoittelemaan!

Iskevä typografia

Verkkosivujen sisältö herää kukoistukseen tyylikkäillä ja iskevillä fonttivalinnoilla. Nykyään sivustoilla hyödynnetään isoja ja simppeleitä fontteja, koska viestin täytyy erottua. Isoilla tarkoitetaan sitten oikeasti isoja fontteja. Fonttikirjastot ovat myös laajempia kuin ennen. Ilmaisia vaihtoehtoja tarjoilee Googlen Fonts ja suunnittelijoille kattavampi valikoima löytyy Adoben Typekitistä. Suosituimpia fontteja ovat tällä hetkellä Open Sans, Monserrat ja Merriweather. 

animations

Visuaalisia latausefektejä saadaan yhdistelemällä CSS 3:n animaatioita ja JavaScriptiä. Sivu: Epicurrence

 

Isojen fonttien suosion kasvaessa kannattaa typografiaa käyttää luovasti ja rohkeasti. Yleisimmin fontit sijoitetaan keskelle kuvaa, mutta nokkela suunnittelija kokeilee erilaisia sijoituksia. Nykyään suunnittelijan on hyvä ymmärtää sekä hyödyntää CSS:n mahdollisuuksia kirjainten suunnittelussa. CSS-animoinnilla saadaan luotua typografialle uusia tyylejä ja efektejä. Tekstityylien suunnittelussa ei tarvitse seurata trendejä, koska parhaimman lopputuloksen saa aikaan erilaisuudella, mutta luettavuuden ehdoilla mennään aina. Hyvä typografia korostaa viestin luettavuutta ja toimii harmoniassa verkkosivujen visuaalisen ilmeen kanssa. Isojen, jyhkeiden ja valkoisten tekstityylien aika saattaa olla ohi. Tulevaisuudessa tullaan näkemään ohuempia sekä värikkäimpiä ratkaisuja. 

Elävät värit

Mitä olisikaan graafinen suunnittelu ilman värejä? Myös jopa musta on meidän mielestämme väri, koska siitäkin saadaan irti eri sävyjä. Flat designin myötä värejä alettiin käyttämään rohkeammin ja monimuotoisemmin. Kirkkaat ja iloiset värit ruokkivat nykyään pieniä sekä suuria verkkosivuja. Tietokoneiden sekä älylaitteiden näytöt ovat kehittyneet vuosien saatossa ja ne pystyvät toistamaan huomattavasti laajemman värikirjaston kuin ennen. 

colour

Adoben Color on erinomainen työkalu väripalettien suunnitteluun. 

 

Väreillä herätään tunteita käyttäjässä ja niiden tarkoituksena on saada käyttäjä vuorovaikutukseen sivujen kanssa sekä luoda jopa emotionaalinen yhteys heihin. Värien teemat vaihtelevat ja eläväisten värien käyttö nousee ja laskee yleisten trendien mukana. Ihmiset omaksuvat verkkosivuille heidän suosimiaan värejä, ja ne suositut värit vaihtelevat mm. vaate- ja sisustrendien mukaisesti. Liukuvärien uutta tulemista odotellaan parhaillaan ja niitä on alkanut jo näkymään enemmän mobiilisovelluksissa sekä verkkosivuilla. Tästä parhaimpana esimerkkinä toimii Instagramin sisäänkirjautumissivu, jonka tausta on animoitu liukuväreillä.

Erottuvat valokuvat

Internet yhteydet ovat kiihtyneet ja laitteiden näyttöjen tarkkuus terävöitynyt. Nämä kaksi ovat mahdollistaneet suurempien kuvien käyttämisen verkkosivuilla. Kuvapankkien kliseiset valokuvat ihmisistä tekemässä jotain ovat enää muisto kultaiselta 90-luvulta. Aloitussivulla olevat, koko ruudun täyttävät, valokuvat eli "Hero Imaget" ovat olleet trendinä jo pitkään. Tyylisuunta ei ole poistumassa vähään aikaa, koska niiden käyttö on tehokasta ja iskevää. Hyvin usein verkkosivuilla nähdään iso valokuva, jonka päälle on heitetty color overlay. 

 

Tiedon valtaväylältä on helppo löytää ilmaisia kuvapankkeja, jotka tarjoilevat suuret määrät näyttäviä valokuvia sadoilta eri kuvaajilta. Kuvapankit ovat nopea ja halpa ratkaisu lisätä tarinankerrontaa verkkosivuilla. Huonona puolena on, että hyvien otoksien löytämisessä kestää aikaa ja parhaimpia kuvia näkee käytettävän useilla eri sivustoilla. Parhaimman lopputuloksen omille verkkosivuille saa itse otetuilla valokuvilla. Tämä jälkimmäinen vaihtoehto on huomattavasti kalliimpi ja aikaavievä prosessi. Valokuvat kuitenkin maksavat itsensä takaisin, koska kuvat viestivät vahvemmin yrityksen brändimielikuvaa sekä erottavat yrityksen kilpailijoistaan. 

Pitkät scrollaukset

Minne kannattaa sijoitella tärkeää sisältöä? Ennen sivujen tärkein sisältö laitettiin sivun alkuun heti ensimmäiseksi ja puhuttiin termistä "above the fold" (tunnetaan myös nimellä "above the scroll"). Time-lehden artikkelin mukaan sisältöä ei kannata iskeä sivujen kärkeen, koska käyttäjät selaavat sen ohi. Vuorovaikutuksen suunnittelussa uusimpana trendinä on ohjailla käyttäjiä scrollailemaan sisältöä alaspäin ja hyödyntää elekontrollien käyttöä mobiilinäkymissä esim. pyyhkäisyjä. Alkuun verkkosivujen mobiilinäkymissä matkittiin työpöytänäkymien navigoinnin tyylejä: sisältöä oli tarkoitus selailla klikkailemalla, mutta nyt työpöytänäkymissä on alettu matkia mobiilinäkymien kontrolleja.

Scroll Folds

Kuvakaappaus Time-lehden artikkelista. 

 

Mobiililaitteet pakoittavat tekemään sivuista pitkiä ja käyttäjän sitouttaminen on scrollaukseen on tärkeää. Jos scrollaaminen on tylsää ja sisältö ei ole mielenkiintoista - käyttäjä poistuu sivulta. Suunnittelijoiden tulee hyödyntää tarinankerrontaa verkkosivujen suunnittelussa ja sisältöä kannattaa esitellä entistä luovemmin. Pitkän scrollauksen hyötyjä ovat:

  • Tukee yksinkertaista navigaatiota
  • Edistää vuorovaikusta
  • Mahdollistaa luovan tarinankerronnan
  • Houkuttelee käyttäjiä pysymään pidempään sivulla

Sivujen loputon vierittäminen ei kuitenkaan sovi kaikille verkkosivuille. Se on vain yksi tapa esittää sisältöä ja siihenkin liittyy huonoja puolia:

  • Huono toteutus heikentää käytettävyyttä
  • Tekee sivulatauksesta raskaan selaimelle
  • Kaikki eivät vain tykkää scrollaamisesta
  • Hämmentää perinteiseen navigaatioon tottuneita käyttäjiä
  • Kaikki scrollausefektit eivät toimi mobiilissa (parallax)

Viimeinen sana

Heat maps

Trendejä tulee ja menee. Aallonharjalla pysyminen vaatii muiden suunnittelijoiden seuraamista, mutta toivoisin, että suunnittelijat siirtyisivät käyttämään enemmän käyttäjädataa hyödykseen rakennusvaiheessa. Sivuja ei kannata suunnitella vain fiilispohjalta, hyvä suunnittelutyö ratkaisee liiketoiminnan haasteita. Verkkosivujen tulee olla käyttäjäystävällisiä ja ne toimivat yhtenä yrityksen työkaluna. Verkkosivujen julkistuksen jälkeen suunnittelijoiden tehtävänä on jäädä valvomaan sivujen elämää sekä tutkia käyttäjien liikkeitä. Jos sivustolta löytyy pullonkauloja, on palattava takaisin suunnittelypöydän ääreen.