<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=917189318365224&amp;ev=PageView&amp;noscript=1">

Verkkosivutrendit 2017 – mitä odottaa tulevalta vuodelta


Vuodenvaihde lähestyy ja on aika listata mitä mielenkiintoisia verkkosivutrendejä vuosi tuo käyttöliittymäsuunnitteluun tullessaan.


Elina Hurtta
18.11.2016 15:16

Vuosi 2017 on kulman takana, joten on aika tutkailla tulevan vuoden käyttöliittymäsuunnittelun (UI) trendejä. Poimin alle mielenkiintoisimmat uudet trendit, joita tulee näkymään ensi vuoden suunnittelussa. Mukana on myös muutama tuttu vuoden 2016 verkkosivutrendeistä, jotka tulevat kehittymään entisestään.

 

1. Personointi

Flat design ja material design ovat muuttaneet suunnittelua niin, että sivut näyttävät keskenään samanlaisilta eivätkä erotu toisistaan. Personointi nousee tästä syystä tärkeämmäksi, jotta erotutaan joukosta. Sivuille valitaan jatkossa brändin mukainen ilme, joka viestii juuri oikealla ja halutulla tavalla. Näin käyttäjä tunnistaa sivun muiden joukosta ja ymmärtää viestin paremmin. Kun persoonallisuutta lisätään, se herättää helpommin myös katsojan huomion.

 

2. Gradientti ja vahvat värit

Personoinnin myötä vahvat väripaletit ja gradientit palaavat flat designille tyypillisten sameiden ja hillittyjen värien tilalle. Hyvänä esimerkkinä Instagramin uusi ilme. Tämä trendi tulee vaikuttamaan niin typografiaan, kuin myös kuviin ja videoihin.

screenshot2016-11-18-realfuture.png

Kuvan lähde: realfuturefair.com

 

3. Kustomoidut valokuvat ja kuvitukset

Ihmiset ovat kyllästyneet kuvapankkikuviin, joten kuvia on aika etsiä muualta, vaikka blogeissa ja sosiaalisessa mediassa näitä tullaan silti vielä näkemään. Kuvapankkikuvien käyttö nettisivuilla on riskaabelia, sillä kuva voi löytyä kilpailijankin sivulta. Kustomoitu kuva muuttaa nettisivun erityiseksi, joka tukee brändiä ja luo sille oikean visuaalisen kielen ja äänensävyn. Niillä myös erottaudutaan tehokkaasti joukosta. Muutamassa sekunnissa sivun täytyy pystyä näyttämään käyttäjälle sen, mitä sillä on tarjota juuri heille. Kustomoiduilla kuvilla voi viestiä tehokkaammin käyttäjän kanssa. Valokuvien ottaminen on nykyään niin helppoa puhelimien kulkiessa mukana, että niiden käyttö sivuilla yleistyy ainakin joillain aloilla.

 

Lataa verkkosivu-uudistajan opas!

 

4. Typografia

Typografia tulee olemaan tärkeämpää kuin ennen. Typografian suunnittelu ja mahdollisuudet ovat parantuneet, kun Google Fonts ja monet muut palvelut lisäävät uusia fontteja jatkuvasti. Ilmaisten fonttien kasvava valikoima antaa brändeille mahdollisuuden omaksua rohkeasti rikasta typografiaa ja käyttää tätä osana personointia.

screenshot2016-11-18-austinbeer.png

Kuvan lähde: austinbeerworks.com

 

5. Gridin rikkominen

Gridi on ollut pitkään pohjana käyttäjäkokemus- ja käyttöliittymäsuunnittelulle johdonmukaisena, tasapainoisena ja järjestelmällisenä sekä käyttäjille tuttuna. Pitkään on esim. etsi-kenttä, puhelinnumero ja valikko olleet tietyssä paikassa sivua. Tämä linja on muuttumassa sillä gridipohjainen suunnittelu voi olla rajoittava ja jäykkä rajaten luovia, perinteitä rikkovia vaihtoehtoja pois. Tämän vuoksi kokeellinen, gridiä rikkova suunnittelu on nousussa. Vapaampi suunnittelu, rajojen rikkominen ja omaperäisyys luovat uusia mahdollisuuksia ja antavat tilaa uusille ideoille. On kuitenkin muistettava ettei käyttäjiä pidä hämmentää. Vapaammassa suunnittelussakin on muistettava käyttäjäkokemus sekä käytettävyys pienemmillä näytöillä.

screenshot2016-11-18-lookbook.png

Kuvan lähde: lookbook.quechua.com

 

6. Koko näytön videot

Video dominoi trendejä, ei ainoastaan sisältönä vaan myös taustakuvina ja liikegrafiikkana (motion graphics). Kuva on käyttäjän huomion herättämiseksi yksi tehokkaimmista keinoista, sillä näkö on aisteistamme voimakkain. Kun kuvaan lisätään liike, on huomioarvo vielä suurempi. Dynaamiset, koko näytön videot tukevat hyvin visuaalista tarinankerrontaa sekä sitouttaa käyttäjän tehokkaammin. Kun videoon lisätään vielä interaktiivisuus, on kokemus kokonaisvaltaisempi ja uniikimpi. Koko näytön video toimii hyvin esimerkiksi pääotsikon taustalla. On kuitenkin muistettava olla ärsyttämättä käyttäjää liian pitkillä ja raskailla videoilla. Animaatioissa kannattaa myös hyödyntää rauhallisia liikkeitä ja yksinkertaisuutta. Liian suuri tiedostokoko voi johtaa sivun hitaampaan latausnopeuteen, ja koska käyttäjä ei jaksa odottaa kuin pari sekuntia sivun lataamista, riskinä on kävijän poistuminen sivuilta.

screenshot2016-11-18-variousways.png

Kuvan lähde: variousways.com

 

7. Cinemagraphics

Cinemagraphs-kuva on animaatio, joka rakennetaan valokuvasta ja luuppaavasta videosta. Cinemagraphicsistä on tullut suosittua sosiaalisessa mediassa, mutta käyttöliittymäsuunnittelussa sitä ei ole vielä juurikaan näkynyt. Cinemagraphics tulee lisääntymään videoiden myötä, sillä se on kevyempi vaihtoehto liikkuvan kuvan hyödyntämiseen videoiden sijaan.

Voit tutustua cinemagraphics-kuviin esimerkiksi täällä: cinemagraphs.com

giphy.gif

Kuvan lähde: giphy.com 

 

8. Responsiivisen suunnittelun kehittyminen

Responsiivinen suunnittelu on tullut jo tutuksi, tiedämme miten sitä voi hyödyntää ja osaamme huomioida käyttäjän tarpeita paremmin. Responsiivinen suunnittelu tulee silti vielä kehittymään ja käyttäjäkokemus muuttuu vielä paremmaksi. Responsiivisen suunnittelun vaikutus tulee olemaan jatkossa vielä suurempi, sillä Google on nostanut mobile first -suunnittelun tärkeyttä luomalla erillisen mobiili-indexin, joka nostaa mobiiliystävälliset sivut hakutuloksissa ylemmäksi. Näin ollen on hyvä muistaa seuraavat asiat, jotka parantavat hakutulosta:

  • Optimoitu mobiililaitteille ja on nopeasti ladattavissa.
  • Sisältöä ei saa piilottaa. Eli sisällön täytyy olla sama kuin desktopilla.
  • Älä käytä pop-upeja.
  • Suunnittele kosketusnäytölle.

 

9. Age-Responsive Design – ikään reagoiva suunnittelu

Online-mainostajat ovat jo jonkin aikaa kustomoineet sisältöä käyttäjän kiinnostuksen mukaan. Nyt vuorossa on nettisivujen sisällön mukautuminen käyttäjän iän mukaan. Metadata, joka muuttaa sivuja ikäkohtaisesti, lisääntyy. Se voi sisältää mm.

  • Navigaatio vastaa käyttäjän vaatimustasoa. Riisuttu käyttöliittymä ja tutut elementit helpottavat aloittelijaa selaamaan sivuja tai appia.
  • Fontit ova iäkkäille ihmisille suurempia ja selkeämpiä.
  • Väriteemat vaihtuvat. Nuorille värikkäämpiä ja vanhemmille lempeämpiä värejä.

AdobeStock_125637156.jpeg

 

10. ‘Feel’ fast – Keveympi suunnittelu

Kevyempi suunnittelu vastauksena ylenpalttiselle suunnittelulle. Tämä suuntaus nostaa päätä, kun haetaan kevyttä ja aikaa säästävää käyttäjäkokemusta. Poistetaan turhat animaatiot, siirtymät, lataussivut ja isot kuvat. Optimoidaan koodi, kuvat ja riisutaan laajennukset. Tuodaan navigaatio esille, jotta valinta käy nopeasti. Tavoitteena on nopeammin latautuvat sivut, valinnat ja selkeys.

 

Viestinnän moniosaaja, joka rakastaa kaikkea visuaalista ja on kiinnostunut siitä miten design vaikuttaa ihmisiin. Rentoutuu luonnossa ja hyvien tarinoiden äärellä sekä juo aivan liikaa teetä.

Lisää luettavaa: trendit  ui  käyttöliittymäsuunnittelu  webdesign