väriä

3.3.2016

Tällaiset ovat nettisivut vuonna 2016

Ovatko nettisivut koskaan valmiit? Eivät. Sitä mukaan kun tekniikka ja laitteet kehittyvät, myös käyttöliittymäsuunnittelu ja ulkoasutrendit kehittyvät ja muuttuvat. Aikamme trendsetterit verkossa, Google ja Apple, määrittelevät mutta myös rajaavat toteutustapoja ja ohjelmointikielien käyttöä. Näin kävi esimerkiksi Flashin kanssa.

Älypuhelimien ja tablettilaitteiden yleistyminen on muuttanut tapaa, jolla käyttäjä selaa verkkoa. Suunnittelijan onkin pysyttävä jatkuvassa muutoksessa, joka tarkoittaa sekä ajan hermolla pysymistä että uuden opettelua jatkuvasti. Myös ostajan on pysyttävä muutoksessa mukana, tietääkseen mitä voi tai mitä pitäisi ostaa (puhumattakaan siitä paljonko se saisi maksaa). Joillain osa-alueilla työ on tehostunut (valmiit komponentit ja kirjastot säästävät tekijän aikaa), mutta toisaalla taas työmäärä on kasvanut. Esimerkiksi modernin sivuston toimivuus eri päätelaitteilla ja selaimilla vaatii melko paljon testailua ja optimointia.

Edelliseen vuoteen verrattuna radikaaleja muutoksia nettisivujen toteutuksessa ja trendeissä tuskin nähdään. Tietyt asiat tuntuvat tulleen jäädäkseen, kuten responsiivinen suunnittelu, mutta myös flätti- ja minimalistinen suunnittelu tuntuvat edelleen roikkuvan muodissa mukana.  Joka tapauksessa tärkeämpää kuin olla hip, on pyrkiä kohderyhmälle miellyttävään käyttäjäkokemukseen soveltaen siihen ajan trendiä.

Tutkitaanpa hieman, mikä tällä hetkellä on in:

1. Responsiivinen suunnittelu

Responsiivinen suunnittelu on tullut jäädäkseen kiitos mobiililaitteiden. Responsiivisuus tarkoittaa verkkosivun skaalautuvuutta eri päätelaitteille, jolloin erilliselle mobiilisivustolle ei välttämättä ole tarvetta. Tänä päivänä verkkosivuja toteuttavan yrityksen tulisi lähtökohtaisesti tarjota asiakkaalleen responsiivista toteutusta.

Keväällä 2015 Google ilmoitti, että sivuston sopivuus mobiililaitteisiin vaikuttaa ratkaisevasti  hakutuloksiin. Tämän muutoksen ansiosta sivustoja ryhdyttiin pikaisesti uudistamaan mobiiliystävällisiksi responsiivisen suunnittelun kautta ja tämä trendi jatkuu yhä.
Täältä voit tarkistaa miten Google-haku näkee sivusi.

responsiivinen suunnittelu

2. Video voimistuu

Ciscon mukaan vuoteen 2018 mennessä 80% internetin kävijäliikenteestä liittyy videosisältöön. On tutkittu, että kävijä käyttää 100% enemmän aikaa sivulla, jossa on videosisältöä. Yritykset tulevat entistä enemmän panostamaan laadukkaaseen videosisältöön verkkosivuillaan.  

3. Kuvitus

Laadukasta grafiikkaa tullaan näkemään enemmän myös webissä ja yritykset panostavat persoonalliseen ilmeeseen. Myös valo- ja kuvituskuviin panostetaan ja kuvapankki koostuukin usein kuvaajan kanssa yhdessä suunniteltuun omaan kuvapankkimateriaaliin, royalty-vapaiden kuvien sijaan.

Kuvitus trendit 2016

Kuva: malikafavre.com

4. Cinemagraph-kuvat

Cinemagraph-kuvia on nähty jo pitkään esimekriksi Tumblr ja Reddit -sivustoilla, mutta vasta viime aikoina niitä on nähty myös nokkelasti brändien parissa. Cinemagraphs-kuva on GIF-animaatio, jonka taustalla on parhaimmillaan nerokas yhdistelmä; laadukas valokuva ja luuppaava video. Hyvin toteutettuina tällaiset kuvat verkkosivustolla voivat kiinnittää vahvasti kävijän huomion ja tuovat varsin hyvän fiiliksen esimerkiksi muotisivustoille. Näitä kuvia saatetaan nähdä enemmän myös suunnitelussa, vaikkapa sivun herossa usein nähdyn kuvakarusellin sijaan.

 

Kuvat: www.bypeople.com

5. Card design

Webbisivujen käyttöliittymäsuunnittelussa nähdään edelleen card design -suunnittelua, eli sisällön ryhmittelyä laatikoihin. Pioneerina tässä oli Pinterest  ja huolimatta siitä, että tämä on jo ns. vanha juttu, ei tämä suunnittelu ole hiipunut.  Tämän tyylistä suunnittelua tullaan näkemään yhä edelleen responsiivisessa toteutuksessa. Käyttäjän kannalta boksien avulla on helppo silmäillä sivuston sisältöä. Boksit asettuvat myös kätevästi mobiililaitteisiin.

Card Design

6. Personoitu käyttöliittymä

Tulemme näkemään yhä enemmän käyttäjälle personoituja sivustoja, jossa sivusto on jaettu osiin kohderyhmien mukaan. Enää ei tarjota “kaikkea kaikille”, vaan jokaiselle luodaan oma polku ja oma räätälöity sisältö. Esimerkkinä Peugeotin sivusto, jossa etusivu on jaettu kahteen osaan (split-screen).

personoitu käyttöliittymä

7. Animaatiot

Nettisivuilla tullaan näkemään entistä enemmän animaatioita. Ne voivat yksinkertaisuudessaan olla animoituja latauskoneita tai navigaation hover-efektejä sekä muita appi-maailmasta tuttuja minimalistisen tyylikkäitä animaatioita. Nettisivujen yläosassa (herossa) ollaan jo totuttu kuvakaruselleihin (slider) ja näitä tullaan edelleen näkemään, mutta yhä useammin tilalla nähdään taustavideo. Animoituja kuvia tullaan myös näkemään enemmän tuote-esittelyissä.

8. Mikro-interaktiot

Sivustolle suunnitellut mikro-interaktiot ovat esimerkiksi personoidut lomakkeet, pop-up ikkunat tai muut toiminnallisuudet, joita käyttäjät käyttävät melkein huomaamattaan. Mikro-interaktioiden suunnitteluun tullaan panostamaan enemmän ja nämä toiminnallisuudet tulevat parhaimmillaan muistuttamaan enemmän luonnollista kuin robottimaista käyttöliittymää.

9. Enemmän väriä

Tunnistettavaa vuoden 2016 web-suunnittelussa tulee olemaan värien rohkea käyttö. Flat-designin värit ovat edelleen läsnä, mutta enemmän tullaan näkemään sateenkaaren kaikkia värejä. Myös leikkisät sarjakuvamaailman värit  tulevat olemaan webissä vahvasti esillä.

Pantonen mukaan vuoden 2016 värit ohjaavat meitä onnellisempaan ja aurinkoisempaan elämään.

väriä

10. Rohkeampaa typografiaa

Suunittelijoiden iloksi nettisivuilla voidaan nykyään käyttää muitakin fontteja kuin Arialia ja Helveticaa. Tästä voidaan kiittää webbi-fonttikirjastoja, kuten esim. Google Fonts ja Typekit. Luovuutta saa siis käyttää vapaammin ja tästä syystä myös vuoden 2016 trendikkäimmät sivustot erottuvat joukosta isolla, vahvalla typografialla. Myös typossa näkyy värien käyttö. 

Typografia

11. Material Design

Google julkaisi vuonna 2014 oman suunnittelukielen, jonka tavoitteena on luoda selkeää, puhdasta ja modernia käyttöliittymää. Material Design muistuttaa Windows 8 ja iOS -käyttöjärjestelmistä tuttua minimalistista flat-designia, mutta siinä on enemmän syvyyttä. Suunnittelukielen primääri tarkoitus lienee standardit Android sovellusten suunnittelulle, vaikkakin tarkoituksena on myös toimia päätelaite riippumattomana. Tosin Google julkaisi keväällä 2015 Material Design Liten (MDL), joka soveltuu erityisesti verkkosivujen suunnitteluun, sisältäen painikkeita, väripaletteja ja muita verkkosivusuunnitteluun liittyviä komponentteja. Useat ennustavat tämän tyylin olevan hallitseva suunnittelulinja verkossa.

12. Infografiikka kehittyy

Big dataa hyödynnetään yhä enemmän ja trendikäs sivusto visualisoi taitavasti suurenkin määrän tietoa mielenkiintoisella tavalla. Tylsien graafien aika on ohi ja nyt satsataan ammattimaiseen infografiikkaan.

infografiikkaa 2016

Interaktiivinen visualisaatio: armsglobe.chromeexperiments.com

13. 3D ja WebGL

Selaimet kehittyvät ja tuovat uusia mahdollisuuksia visualisointiin. 3D-mallinnukset esimerkiksi verkkokaupoissa palvelevat ostajaa ja ovat kustannustehokas vaihtoehto, jos kuvattavia tuotteita on paljon.

left_shoe_company

Kuva: www.leftshoecompany.com

WebGL mahdollistaa reaaliaikaisen 3D grafiikan näyttämisen selaimessa ilman erillisiä liitännäisiä. Onkin varsin mielenkiintoista nähdä millä eri tavoin tätä tekniikkaa tullaan hyödyntämään tulevaisuudessa. Alla konkreettinen esimerkki, miten WebGL toimii selaimessa.

WebGL

Lähde: madebyevan.com

Yhteenveto

Kaiken kaikkiaan verkossa oleva sisältö tarjoaa entistä visuaalisemman kokemuksen ja näin ollen laajan luovan pelikentän suunnittelijalle. Haasteena tässä tietenkin on hyvän käyttäjäkokemuksen säilyttäminen yhdistettynä taiteelliseen toteutukseen.

Monica Javanainen

 

Olisiko tarvetta vetovoimaisista verkkosivuista? Ota yhteyttä!

 


 

Lue myös Monican bloggaus Adobe blogeissa: Design and creativity trends you can expect to see in 2016

 

Monica Javanainen

Comments

comments