Top 5 trendiä verkkosivujen visuaaliselle suunnittelulle vuonna 2021

Uusi vuosi tuo mukanaan uusia trendejä ja näin ollen uusia tapoja houkutella kävijöitä ja erottautua kilpailijoista. Visuaaliset trendit muuttuvat jatkuvasti niin muodissa, sisustuksessa kuin verkkosivusuunnittelussa. Suunnittelijoina meidän tulee pysyä tietoisina näistä trendeistä ja poimia niitä mukaan projektiin sitä mukaa, mitä asiakasyrityksen verkkosivut niitä tarvitsevat. Tutkimalla ja ymmärtämällä, mistä trendi on lähtöisin, voimme suunnitella modernin ja laadukkaan visuaalisen ilmeen verkkosivuille.

Alustuksena mainittakoon, että hyvin suunnitellun visuaalisen ilmeen tulisi aina vastata projektille asetettuja tavoitteita ja pyrkiä houkuttelemaan lopullista kohderyhmää konversioon. Visuaalisen ilmeen ajattomuus ei kuitenkaan aina ole vaatimus ja on olemassa lukuisia syitä, miksi on positiivista tavoitella trendikästä ulkonäköä.

Jos esimerkiksi kyseessä on uusi, tuntematon yritys, on hyödyllistä rakentaa brändi tukeutuen mielikuvaan, että yritys on ajan tasalla ja aallonharjalla omalla alallaan. Näin uusi yritys voi saada markkinalla jalansijaa ja jäädä herkemmin asiakkaidensa mieleen. Lisäksi, jos yrityksen tavoitteleman kohderyhmän edustajia yhdistää trendikkyys ja ajassa eläminen, yrityksen verkkosivut eivät voi näyttää vanhanaikaiselta ja kulahtaneilta.

Vaikka trendikäs ja nykyaikainen ilme tukisi yrityksen brändiä, se ei tarkoita trendien sokeaa seuraamista. Sopivia trendielementtejä kannattaa valita ja soveltaa siten, että ne tukevat projektin alussa asetettuja tavoitteita. Suunnittelijoina suunnittelemme aina muille ihmisille, emme itsellemme. Paras muotoilu on kokonaisvaltaista ja vastaa aina asiakkaan tarpeita ja projektille asetettuja tavoitteita.

Eli jos trendinen ilme palvelee yrityksen tavoitteita, ja trendejä on tarkoituksenmukaista soveltaa verkkosivujen visuaalisessa suunnittelussa, miltä tämä näyttäisi vuonna 2021? Tässä viisi suurinta trendiä tälle vuodelle!

1. Näyttävä typografia

Näyttävä typografia on ollut jo muutaman vuoden ajan iso trendi, ja tänä vuonna leikitellään entistä enemmän ja rohkeammin isoilla kirjaimilla. Oli kyseessä sitten päätteellinen kirjaintyyppi, kuten alla olevassa esimerkissä komeileva Neo Display, tai leikkisämpi kirjaintyyppi luomaan rennompaa tunnelmaa, ovat kirjaimet entistä enemmän fokuksessa.

Tämän kun yhdistää hyvään sisältösuunnitteluun, on verkkosivuilla lopputuloksena vaikuttava ja näyttävä viesti. Tiesithän, että Siniseltä Härältä saat myös apua sisällönsuunnittelussa?

https://ferdu.be/
https://getlupii.com/

2. Liike

Verkkosivuja verratessa painotuotteisiin, loistaa yksi etu ylitse muiden: interaktiivisuus. Verkkosivuihin saadaan liikettä ja interaktiivisuutta animoiduilla taustoilla, vieritettävillä elementeillä ja videoilla.

Kuten alla olevista esimerkeistä näkyy, vain taivas on rajana. Animoituja elementtejä voivat olla niin valikot, tuotekuvat ja tekstisisällöt kuin sisällön dynaaminen scrollattavuus. Videot säilyttävät suosionsa muun muassa isoina hero-osioina, jotka tervehtivät kävijää heti kättelyssä.

https://www.amandegelateria.it/
https://dribbble.com/outer
https://www.mcaninchcorp.com/

3. Dark Mode

Dark mode, eli pähkinänkuoressa vaaleita elementtejä tumman taustan päällä, nosti ensimmäistä kertaa päätään vuonna 2019 ja nousi vahvaksi suosikiksi vuoden 2020 aikana. Tänä vuonna trendi ei vielä hiivu, vaan silmille armollisempi dark mode näkyy vahvasti kaikkialla, myös älypuhelimien applikaatioissa ja tietokoneohjelmissa.

Muun muassa Microsoft on Teams-ohjelmaansa lisännyt mahdollisuuden vaihtaa taustavärit tummaksi. Tumma väripaletti antaa myös verkkosivuille laadun tuntua, ja oikein käytettynä voi jopa lisätä tekstin saavutettavuutta.

https://www.estudionk.com/en

4. 3D ja syvyysvaikutus

3D ja syvyysvaikutuksen trendit eivät ole tämän vuoden uutuuksia, mutta kuumempia kuin koskaan! Litteälle näytölle voidaan rakentaa säväyttäviä kokemuksia lisäämällä syvyystunnetta muun muassa 3D-kuvituksilla, kerrostamalla eri elementtejä tai lisäämällä heittovarjoja.

Tämä verkkosivujen visuaalinen trendi jäljittelee fyysistä maailmaa, jotta vaikutus saadaan muistuttamaan painotuotteen kaltaista käyttökokemusta. Tätä niin kutsuttua tyyliteltyä realismia on nähtävissä painikkeissa, hakupalkeissa, tekstiruuduissa, kuvissa, kuvituksissa ja kaikessa muussa vuoden 2021 digisuunnittelussa.

https://dribbble.com/georgetangwl
https://blobmixer.14islands.com/
https://www.airforce.com/intothestorm/
https://redlight.dev/

5. Hillityt väripaletit

Vuosi 2020 oli meille kaikille yhtä kaaosta (tiedätte mitä tarkoitan). Näin ollen ei ole yllättävää, että yksiväriset, harmoniset väripaletit ovat suosiossa tänä vuonna. Suurin osa meistä viettää huomattavan ison osan ajastamme tietokoneella, joten ei ihme, että koemme välillä silmiemme rasittuvan.

Lisäksi saavutettavuus on sekä trendikästä että käytännöllistä, joten tämä trendi kielii siitä, että suunnittelijat ottavat saavutettavuuden entistä enemmän huomioon huomioimalla mainittua silmien rasitusta. Hillityllä, maanläheisellä värimaailmalla luodaan sekä silmiä että sielua rauhoittavia kokonaisuuksia.

https://99designs.com/profiles/creativeDavid9
https://www.wildsouls.gr/en
https://dribbble.com/chernoova

Tunnistatko yrityksesi tarpeen uusia verkkosivunsa näistä trendeistä inspiroituneena? Me Sinisellä Härällä tarjoamme kokonaisvaltaista suunnittelua räätälöityjen ja tulospohjaisten verkkosivujen ja verkkokauppojen toteutuksiin. Tsekkaa meidän refet tai ota yhteyttä, niin lähdemme kartoittamaan yrityksesi verkkosivun tarpeita!

Mikä on brändikirja ja miksi jokainen brändi tarvitsee sellaisen?

Brändikirja tai brändiohjeisto (eng. Brand Book) on dokumentti, joka kuvaa ja esittää, mistä asioista yksittäinen brändi konkreettisesti koostuu. Brändikirjan tarkoituksena on siis tiivistää yrityksen tai organisaation identiteetti yksiin kansiin.

Kenelle brändikirja tehdään?

Varsinaiselle brändiohjeistolle on useita potentiaalisia käyttäjäryhmiä, joista ehdottomasti tärkein on brändin eli yrityksen oma henkilöstö. Kun brändin kannalta tärkeimmät asiat ja valinnat saadaan kirjattua konkreettisesti paperille, yrityksen olemuksen ja arvojen jalkauttaminen henkilöstölle on huomattavasti helpompaa ja käytännönläheisempää.

Tämän lisäksi brändikirja on erinomainen työkalu tilanteissa, joissa yritykseen palkataan uusia työntekijöitä. Kattavan ja laadukkaan brändikirjan avulla brändin persoonallinen olemus, arvot sekä tapa puhua ja viestiä on helppo kommunikoida brändin uusille jäsenille.

Selkeämpiä ja käytännönläheisempiä käyttökohteita brändiohjeistolle löytyy tilanteissa, joissa tehdään esimerkiksi mainontaa yhteistyössä muiden toimijoiden kanssa. Brändikirja ei ole suinkaan vain yrityksen sisäinen dokumentti, vaan se kannattaa jakaa kaikille brändin kanssa yhteistyötä tekeville osapuolille. Brändikirja toimii kumppaneille ohjeistuksena siitä, miten brändin visuaalisia elementtejä tulee käyttää ja miltä brändi kuulostaa esimerkiksi mainoskampanjoita suunnitellessa.




🐂 HÄRKÄVINKKI: Katso video, miten b2b-yrityksen brändiuudistus kannattaa tehdä >>




Mitä brändikirja sisältää?

Me Sinisellä Härällä uskomme, että mitä yksityiskohtaisemmin ja laaja-alaisemmin asioita saadaan konkretisoitua brändiohjeistoon, sitä enemmän niille saadaan arvoa. Tarjoamme näin ollen lähtökohtaisesti laajoja brändioppaita, jotka sisältävät paljon muutakin kuin vain visuaalisen ilmeen ohjeiston.

Brändikirjojen sisällöt saattavat toki vaihdella merkittävästikin tilaajan tarpeiden mukaan, mutta seuraavat sisältöosiot löytyvät lähes poikkeuksetta kaikista tekemistämme brändikirjoista.

Brändin persoonan ja identiteetin määritys kertoo, mistä brändi on tulossa, miksi se on olemassa, mikä on brändin tarina, mitkä ovat sen missio ja visio sekä mitkä ovat ne tärkeimmät arvot, joihin brändin olemus pohjaa.

Tärkeimmät kohderyhmät saadaan usein konkretisoitua muutamaan ostajapersoonaan, joiden avulla on helpompi muodostaa selkeä ymmärrys siitä, ketä varten yritys on olemassa. Markkinointikoordinaattorimme Janni on kirjoittanut tarkemmin ostajapersoonien määrittämisestä.

Kommunikaatiotyylillä (eng. tone of voice) tarkoitetaan sitä kieltä ja puhetapaa, jolla brändi haluaa puhua, esittäytyä, käydä dialogia ja tulla kuulluksi. Brändikirjassa on usein perusteltua määritellä tone of voice mahdollisimman tarkasti, mutta kuitenkin niin, että se on arjessa toteutettavissa.

Visuaalisen ilmeen ohjeisto on kaikessa yksinkertaisuudessaan joukko ohjeita, joilla määritellään brändin visuaalisen viestinnän elementit ja niiden käyttötavat. Visuaalisten elementtien käyttötapoja määrittäessä kannattaa pyrkiä mahdollisimman yksiselitteisiin ja yksityiskohtaisiin ohjeistuksiin, jotta väärinymmärryksille ei jää tilaa. Tässä osiossa määritetään muun muassa:

  • Brändin logo ja miten sitä käytetään
  • Brändin päävärit ja miten näitä käytetään
  • Typografia ja fontit
  • Kuvatyylit
  • Ikonit
  • ”Do’s and dont’s” – käytännön esimerkit visuaalisen ilmeen käytöstä ja siitä, mitä tulee välttää

Miksi brändikirjan tekeminen kannattaa?

Vähintään yhtä tärkeää kuin itse brändikirjan valmiiksi saattaminen on, on siihen johtava prosessi. Brändikirjan tekeminen haastaa brändin omistajia ja brändiuudistuksen toteuttajia suhtautumaan tehtyihin valintoihin kriittisesti ja perustelemaan ne konkreettisesti.

Brändikirjan luomisen arvo perustuu suurelta osin siihen, että sen sijaan, että päätetään brändin päävärin olevan keltainen, pohditaan kriittisesti syitä sille, miksi keltainen on hyvä valinta. Tämän prosessin myötä kaikki brändin visuaaliset, tyylilliset ja arvoihin perustuvat valinnat tulevat läpivalaistua ja ”musta tuntuu et ois kiva jos…”-tyyliset ajatukset saadaan siivottua pois brändin ytimestä. Valmiiseen brändikirjaan johtavan prosessin tärkein tehtävä on vastata kysymykseen ”miksi?” mahdollisimman kattavasti kaikissa sen työstämisen vaiheissa.


Haluatko nähdä elävän esimerkin laajasta brändikirjasta?

Lataa meidän brändikirja sähköpostiisi tästä 👇 Anna vain sähköpostisi ja saat paluuviestinä esimerkin brändikirjastamme.

Brändikirjan lataus

Entä sitten kun se on valmis?

Valmiskaan brändiohjeisto ei ole tae brändiarvon räjähdysmäiselle kasvulle. Ensimmäinen askel on aina brändikirjan jalkauttaminen kaikille brändin kanssa työskenteleville osapuolille.

Ei riitä, että yrityksen markkinointijohtaja tuntee edustamansa brändin läpikotaisin, vaan koko henkilöstön tulee kyetä sitoutumaan brändiohjeiston noudattamiseen. Muutoin on vaarana, että huolella laadittu brändiohjeisto jää pölyttymään kovalevyn takanurkalle, ja brändikirjaa luodessa tehty arvokas työ valuu hukkaan.

Laadukkaan brändikirjan tunnistaa siitä, että sitä käytetään arjessa. Tästä syystä brändikirjaa on myös syytä myös päivittää aika ajoin ja erityisesti silloin, kun yritys kasvaa, kehittyy tai kokee muutoksia. 

Onnistuessaan laadukas brändikirja takaa sen, että brändi tulee johdonmukaisesti esiin kaikissa sisäisissä ja ulkoisissa kanavissa. Tavoitteena on saavuttaa tilanne, jossa koko henkilöstö viestii samalla kielellä, yhteneväisillä visuaaleilla ja ilmentää yhteisesti sovittuja arvoja, oli sitten kyse yksittäisestä sosiaalisen median julkaisuista tai asiakkaan kohtaamisesta myyntitilanteessa.

Näin luodaan edellytykset brändimielikuvan kehittymiselle, mikä parhaassa tapauksessa sitouttaa sekä henkilöstön että asiakkaat brändiin entistä vahvemmin.

Kukapa ei haluaisi sitoutua brändiin, joka elää ja hengittää sinulle tärkeitä arvoja, joko työntekijänä tai asiakkaana.

Kun brändikirja on tehty, voi seuraavaksi ottaa käsittelyyn vaikka somemarkkinoinnin ja rakentaa yritykselle somestrategian!

Kuinka rakentuu visuaalisen ilmeen workshop

Visuaalisen ilmeen suunnittelu on suurimmilta osin brändityötä. Ilme pohjautuu aina brändin arvoille ja toiminnalle sekä sille, miltä visioimme brändin tuntuvan ja näyttävän kohderyhmille. Tämän myötä visuaalisen ilmeen suunnitteluprosessimme tarkoittaakin hieman asioiden syvempää kaivelua brändistä erilaisten tehtävien avulla.

Tehtävien määrä ja laajuus vaihtelee keissistä toiseen, mutta workshop rakentuu aina vähintään neljästä erilaisesta, eri aisteja hyödyntävistä tehtävistä.

Jos brändi olisi eläin, niin mikä eläin se olisi? Esimerkiksi ”kuningas” leijona tai karhu, itsenäinen kotka, lojaali koira jne.

Tämä tehtävä on hyvä jäänrikkoja workshopin alkuun. Keskustelu eläimistä tuntuu monesti alkuun hassulta ja vähän lapselliseltakin, mutta eläimiin liittyvistä keskusteluista on tullut poimittua mitä merkityksellisempiä timantteja. Kaikilla on mielikuvia ja merkityksiä eri eläimille, ja yhteisessä keskustelussa täältä löydetään hyviä vastaavuuksia brändin tavoittelemiin mielikuviin.

”20 second gut-test” – eli vapaasti suomennettuna 20 sekunnin ensifiilis

Tehtävä koostuu 10–20 erilaisesta sivustosta, joita jokaista katsotaan 20 sekunnin ajan. Sivustolle annetaan arvosana 1–5 sen perusteella, kuinka todennäköisesti haluttaisiin, että oma brändi näyttäisi tämän sivuston kaltaiselta. Vapaisiin kommentteihin on tietysti myös mahdollisuus.

Meillä tätä on testattu 10 ja 20 sivustolla, ja olemme itse kokeneet 20 eri sivustoa jo hieman puuduttavaksi. 10 sivustoon mahtuu kuitenkin monen monituista erilaista vaihtoehtoa. Tärkeintä on valita visuaalisesti sekä käyttökokemukseltaan mahdollisimman erilaisia sivustoja.

Moodboard, eli kollaasitaulut erilaisista tunnelmista

Kun workshopin aiheena on visuaalisuus, olisi tuhlausta käydä keskusteluja vain sanoilla, adjektiiveja käyttämällä. Kaikilla meillä voi nimittäin olla täysin eri mielikuva esimerkiksi raikkaasta tai hempeästä ulkoasusta.

Tämän takia rakennan workshopiin aina neljä erilaista moodboardia, joiden kuvittelen edustavan kyseisen asiakkaan brändin vaihtoehtoisia tyylisuuntia. Tässä käytän apuna rohkeasti omia ennakkoluulojani, ja perustan vaihtoehdot omille mielikuville, asiakkaan kanssa käydyille keskusteluille ja kilpailijoiden benchmarkkaukselle.

Esimerkkinä viimeisimpänä pitämäni workshopin neljä erilaista tyylisuuntaa: modernin minimalistinen, romanttinen rustiikki, rustiikki artesaani ja kotoisan lämmin.

Esimerkki workshopin moodboardista.
Esimerkki workshopin moodboardista.

Moodboardeja tarkastellaan ensin kaikessa hiljaisuudessa yksi taulu kerrallaan, ja jälleen pyydän asiakasta arvioimaan moodboardin arvosanalla 1–5: kuinka todennäköisesti oma brändi muistuttaa kyseistä moodboardia. Pyydän myös valitsemaan suosikkikuvan perusteluineen.

Tämän jälkeen yhteisillä keskusteluilla löydämme hyvin suuntaa sille miltä ilme potentiaalisesti voisi näyttää ja mitkä tyylit sekä kuvat ovat ehdottomia inhokkeja.

Etusivun uutiset 10 vuoden päästä

Ajatusleikki, jota itse rakastan! Tämä tehtävä on mielestäni kaikille yrityksille loistava tapa kirkastaa ja konkretisoida visioita ja unelmia.

Tehtävänä on siis kuvitella, että jos yritys olisi tekojensa tai palveluidensa vuoksi etusivun uutinen kymmenen vuoden päästä, niin mikä olisi uutisoinnin aihe? Mitä niin merkittävää, poikkeuksellista tai innovatiivista yritys on tehnyt, että siitä uutisoidaan lehden etusivulla? Lehti voi olla Helsingin Sanomat tai oman alan aikakauslehti, se ei ole merkityksellistä tehtävän kannalta.

Brändin persoonallisuus-spektri

Tämän tehtävän tarkoituksena on selventää adjektiiviparien avulla brändiä kuvaavia sanoja. Spektrille asetetaan sanapareja ja asiakkaan tulee tiimityöllä valita, mihin kohti brändi spektrillä sijoittuu.

Sanaparit eivät ole toistensa vastakohtia, minkä takia tämä tehtävä onkin niin kinkkinen – monesti kun haluttaisiin olla vähän kaikkea! Tässäkin tehtävässä tärkeintä on kuitenkin juuri se herännyt keskustelu aiheesta.

Oma spektrimme näyttää tällä hetkellä tältä, mutta pääsee kehityksen alle vielä tänä keväänä.

Kollaasitaulun rakennus

Edellisen tehtävän spektrin perusteella rakennetaan yhdessä kuvakollaasi/moodboard, johon kerätään sopivan oloisia kuvia brändiä kuvaamaan.

Asettelen asiakkaalle yllä olevan spektrin adjektiiveja vastaavia kuvia näytille, ja näistä asiakas valitsee yhden kuvan per ryhmä. Tässäkin tehtävässä monesti ne ”tämä ei ainakaan kuvaa meitä” -kuvat kertovat todella paljon siitä mitä ollaan ja mitä ei olla.

Lopuksi valitut kuvat kootaan kollaasiksi ja keskustellaan kuvista yhteisesti.

+ Ostajapersoonat

Usein pienten aloittelevien yrittäjien kanssa työskennellessämme käymme läpi vähintään pintapuolisesti ostajapersoonia ja rakennamme kaksi suuntaa antavaa ostajapersoonaa erilaisten kysymysten avulla.

Osassa tapauksista ostajapersoonat on jo aiemmassa brändin kehittämistyössä lyöty lukkoon, ja osassa tapauksia täydennämme ostajapersoonia tarvittaessa myöhemmin laajemmalla panostuksella.

Workshopissa on meillä aina mukana fasilitaattorin lisäksi kirjaa pitävä tyyppi, ja näiden muistiinpanojen perusteella visuaalinen suunnittelu pääsee vauhtiin. Lue täältä vinkkejä visuaaliseen työpakkiin ja täältä taustasyitä visuaalisen ilmeen suunnittelulle.

15 vinkkiä visuaaliseen työkalupakkiin

Visuaalisen suunnittelun työkalut kehittyvät jatkuvasti, ja kynän ja paperin lisäksi käytössä on iso liuta erilaisia digityökaluja. Uusia työkaluja putkahtelee listalleni lähes viikottain, ja vaikka osa karsiutuu pois heti kättelyssä, jotkut pääsevät suoraan osaksi luottopakkiani. Listasin tähän muutamia omia lemppareitani, joita käytän lähes jokaisessa projektissa, riippuen toki aina työstettävästä asiasta.

Ohjelmistot

Adoben ohjelmistot on varmasti luonnollisin osa suunnittelijan työkalupakkia. Meillä säännöllisessä käytössä ovat Illustrator, Photoshop, Xd layoutien suunnittelua varten ja silloin tällöin myös InDesign taitto-ohjelma. Tällä hetkellä alamme sisällä porukka jakautuu hieman kahteen leiriin ohjelmistotarjoajien välillä, mutta me olemme toistaiseksi pitäneet kiinni Adobesta.

Toisinaan piirrän myös iPadilla, jolloin käytössäni on Procreate.

Automaatio värisuunnittelun tukena

Värisuunnittelu perustuu niin kutsuttuun väripsykologiaan. Värit ovat osa kulttuuriamme ja yhdistämme tiettyjä värejä tietynlaisiin tunteisiin ja tunnetiloihin, ja tätä tietoa hyödynnämme brändivärien valinnassa. Perusteet suunnittelulle lähtevät aina väriympyrästä, mutta onneksi nykypäivänä automaatio ja tekoäly ovat tulleet tähän myös avuksi.

Colormind.io on loistava työkalu väripalettien suunnitteluun. Jos visiossa on vain yksi tai kaksi väriä, mutta paletin täydentäminen on hankalaa, niin käännyn aina Colormindin puoleen. Se generoi minulle tekoälyllä yleisesti sopivaksi oppimiaan väripaletteja haluamieni värien ympärille. Ilmainen työkalu sisältää täysin valmiita paletteja (esimerkiksi teemoilla Amélie tai vesivärimaalaukset) sekä vapaan mahdollisuuden kokeilla yhdistelmiä erilaisilla pohjilla täällä http://colormind.io/bootstrap/.

Mikäli perusasiat väriympyrässä kaipaavat muistutusta tai kaipaan väriharmoniaan tarkkoja sävyjä, käytän apuna color.adobe.com-sivustoa tai vielä perusteellisempaa colordesigner.io-sivustoa. Myös paletton.com-sivustoa käytän joskus, ym. kolme palvelua ovat loppupeleissä melko samanlaisia.

Joskus, jos inspiraatio on täysin kadoksissa, selailen myös picular.co-palvelua, joka on omien sanojensa mukaan Google väreille. Palvelusta voit hakea vaikkapa sanalla ”bull”, ja tulokset näyttävät värejä, joita yleensä kuvahaussa vastaan tulevat kuvat sisältävät. Myös tämä palvelu pohjaa tekoälyyn.

Nyt kun saavutettavuus on ollut yhä useammin mielessäni saavutettavuusdirektiivin vuoksi, on pakkiini tullut lisää myös saavutettavuuden tarkistamiseen tarkoitettuja työkaluja. Näiden avulla tarkistan väripintojen ja erityisesti tekstin kontrastia. Käytössäni on sekä http://accessible-colors.com/ & http://colorsafe.co/.

Erilaisia värityökaluja minulla on pakissani eniten ehkä siksi, että värit ovat minulle visuaalisessa suunnittelussa kaikkein eniten lähellä sydäntä.

Kuvat

Mikäli kuvia ei ole saatavilla projektikohtaisesti, haen kuvia eri kuvapankeista. Kuvapankkeja olenkin listannut jo täällä postauksessa vuonna 2017 4+4 vinkkiä ilmaisista kuvapankeista.

Fontit

Fontit haen lähtökohtaisesti projekteihin joko Googlen fonttipalvelusta, tai Adoben fonttikirjastosta.

Erilaiset ”design systemit” ja ”cheat sheetit”

Design systemejä, eli suunnitteluohjeistuksia löytyy verkosta suuri kirjo, ja näistä minulla ei ole vakiintuneita suosikkeja. Googlen Material Designia kurkin kuitenkin säännöllisesti ja käytän suunnittelun tukena erilaisia lunttilappuja, kuten uxesign.cc:n nappien suunnitteluun keskittyvää.

Mikäli visuaaliset työkalut kiinnostavat, mutta niiden käyttöön tarvitset silti apua, älä epäröi ottaa meihin yhteyttä. Tarjoamme verkkosivustojen suunnittelun lisäksi laajoja visuaalisen suunnittelun ja graafisen suunnittelun palveluja.

UX- ja UI-design – mitä sinunkin tulisi tietää web design -jargonista

Työskentely nopeasti kehittyvällä alalla takaa sen, että työ saa jatkuvasti uusia ulottuvuuksia ja trendejä. Myös termistö kehittyy, ja koska trendit lähtevät monesti liikkeelle englantia puhuvan väestön keskuudesta, ovat termit luonnollisesti ensin englanniksi. Ammattislangin ja -termistön kehittyessä hurjaa vauhtia, käännöksiä ei usein tehdä ja termit vakiintuvat suomalaiseenkin suuhun englanninkielisinä. Kaksi tällaista ratkaisevaa työmme uutta ulottuvuutta ja termiä ovat UX- ja UI-design. Tässä blogiartikkelissa avaan perustasolla mitä nämä käsitteet tarkoittavat, ja miten ne liittyvät ratkaisevasti Sinisen Härän verkkosivustoprojekteihin.

UX-design eli User Experience Design

Voidaan vapaasti suomentaa esimerkiksi käyttöliittymän suunnitteluksi, käyttäjäkokemuksen muotoiluksi tai palvelun muotoiluksi. Käyttäjäkeskeinen UX-design kattaa sateenvarjon lailla alleen monia erilaisia alueita, joiden avulla pyritään parempaan käyttäjäkokemukseen. Muutamia mainitakseni:

– Käyttäjätutkimus ja palvelun testaaminen käyttäjillä. Palvelua kehitetään käyttäjille sopivaksi keräämällä dataa käyttäjistä ja heidän preferensseistään, joiden perusteella pystytään tekemään oletuksia ja käyttäytymismalleja kehityksen pohjalle. Datan perusteella voidaan ratkoa niitä ongelmia, mitä käyttäjät kohtaavat. Palvelun testaamisen järjestäminen oikeilla käyttäjillä esimerkiksi prototyyppivaiheessa on myös UX-designia, toimiiko datan perusteella tehdyt hypoteesit oikeasti ja miten käyttäjä kulkee suunniteltuja polkuja.

Informaatioarkkitehtuuri, eli verkkopalvelun hierarkia, vielä käytännöllisemmin valikkorakenteen suunnittelu. Eli miten asiat ja informaatio jäsennellään ja rakennetaan ymmärrettävään muotoon.

Wireframing, eli rautalankamalli on yksi vaihe suunnittelussa. Tässä vaiheessa keskitytään nimenomaan verkkosivuston tai -palvelun toimivuuteen, käyttäjän polkuihin saavuttaa tavoite ja niin edelleen. Rautalankamalli on ikään kuin luuranko, ja visuaalinen UI-puoli on vaatetus.

Analytiikka ja mittarit ovat oma taiteenlajinsa, mutta liittyvät vahvasti käyttäjätutkimukseen. Erilaiset työkalut, kuten lämpökartat, antavat arvokasta dataa käyttäjistä, mikäli sitä osaa tulkita ja hyödyntää palvelun kehityksessä.

Copywriting, eli tekstin tuotto. Tekstisisältö ohjailee ja helpottaa käyttäjää verkkopalveluissa ratkaisevasti, joten myös tekstin suunnittelu on osa UX-designia.

UI-design eli User Interface Design

Vapaasti suomennettuna ulkoasun suunnittelu, eli visuaalinen puoli suunnittelusta. Ulkoasun suunnittelu on myös osa käyttäjäkokemusta ja käyttöliittymän suunnittelua, joten kahtiajako UX:n ja UI:n välillä ei ole tasapuolinen. Maalaisjärjelläkin ajateltuna visuaalinen puoli vaikuttaa ratkaisevasti käyttäjän kokemukseen. Ulkoasun suunnittelu on eriytetty kuitenkin omaksi palveluksi sen takia, että myös tämä suunnitteluprosessi on täynnä omia sääntöjään, lainalaisuuksiaan ja kommervenkkejään, joihin visuaalinen suunnittelija/UI designer/graafikko/tmv. on erikoistunut. Muutamia näistä mainitakseni:

Värien käyttö sivustolla niin, että se on yrityksen graafisen ohjeiston mukaista, mutta myös käyttäjäystävällistä. Esimerkkinä tilauksen lähetys verkkokaupassa: ”Lähetä”-napin ei tulisi koskaan olla punainen, koska miellämme punaisen napin tarkoittavan asioita, kuten keskeytä tai tyhjennä valinnat.

Fonttien käyttö sivustolla jälleen niin, että mukaillaan yleistä ilmettä, mutta ei tuhota käytettävyyttä hankalasti luettavilla fonteilla.

Kuvien käyttö mukaillen tavoiteltavia tunnetiloja ja toimintoja.

– Ulkoasun suunnittelun on tarkoitus toki myös luoda palvelulle arvoisensa ilme, ja olla näin osaltaan tukemassa tavoitteita.

Miten termit liittyvät Sinisen Härän verkkosivustoprojekteihin?

Kuten yllä on avattu, niin UX- ja UI-design eivät ole verkkosivustoprojekteista eroteltavia palveluita, vaan kriittisiä osia verkkopalveluiden suunnittelussa. Kun Sinisellä Härällä asiantuntijuus on kasvanut, on myös UX- ja UI-designin menetelmiä ja toimintatapoja integroitu osaksi prosessejamme. Nykyinen käytäntömme viedä projektit läpi sisältääkin paljon aiempaa enemmän erilaisia ja aiempaa parempia suunnittelun menetelmiä liittyen esimerkiksi wireframingiin, mittareihin sekä hierarkiaan. Näin voimme paremmin taata verkkopalveluiden toimivuuden ja tavoitteisiin pääsemisen. Meille verkkosivut eivät ole vain käyntikortti, vaan tärkeä, joskus ratkaisevakin pala yrityksen markkinointia.

TLDR: et voi rakentaa verkkosivustoja tekemättä UX- ja UI-designia. Se, miten paljon näihin panostetaan vaikuttaa ratkaisevasti lopputuloksen laatuun.

 

Lataa ilmainen verkkosivujen ostajan opas




Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.

Lataa ilmainen opas!

4+4 vinkkiä ilmaisista kuvapankeista

Tämän hetken yksi suurimpia trendejä nettisivujen suunnittelussa on isot pääkuvat sivustojen etusivulla. On tutkittu, että ihmisen ensivaikutelma sivustosta syntyy 2,6 sekunnissa, joten pääkuvan käyttö on tärkeä osa yrityksen brändiviestintää. Aina kuvia ei kuitenkaan ole mahdollista itse sivulle järjestää, jolloin apuun tulee erilaiset kuvapankit. Kuvapankkeja on maksuttomia sekä maksullisia ja niitä löytyy erilaisilla hinnoitteluilla. Käytämme omassa työssämme paljon maksullisia kuvapankkeja (iStock, Shutterstock) sen takia, että hyvät kuvat ovat näistä usein nopeammin löydettävissä ja säästämme siinä aikaa. Maksuttomista kuvapankeista voi kuitenkin löytää todellisia helmiä, ja tässä parhaat tärpit maksuttomien kuvapankkien viidakkoon.

Pixabay

Kuvapankki, josta löytää paljon erilaisia kuvia sekä englannin-, että suomenkielisillä hakusanoilla. Kuvat ovat pääasiassa pikseleiltään suuria sekä hyvälaatuisia ja Pixabaysta löydät myös esim. vektorigrafiikkaa ja piirroskuvia. Käytännössä kuka tahansa voi ladata palveluun kuviaan, jotka tarkastetaan koneellisesti. Kaikki palvelun kuvat ovat vapaasti käytettävissä, muokattavissa ja jaettavissa ilman lisämaksuja CC0-lisenssillä*. Palvelu tosin mainostaa hakunäkymässä myös Shutterstockin maksullisia kuvia, millä palvelun toimintaa rahoitetaan. Nämä monesti huokuttelevat osuvuudellaan sekä kuvanlaadullaan, mutta ovat tosiaan maksullisia.

Pexels

Pexels tarjoaa yli 30 000 laadukasta valokuvaa. Valokuvat ovat palveluntarjoajan omien sanojen mukaan valittu sivulle käsityönä ja huolella, ja se näkyykin kuvien tasossa. Pexelsistä löytyy kuvia monenlaisiin tunnelmiin ja värimaailmoihin. Kaikki sivuston kuvat ovat vapaasti käytettävissä, muokattavissa ja jaettavissa ilman lisämaksuja CC0-lisenssillä*.

Picjumbo

Picjumbo tarjoaa laadukkaita valokuvia Pexelsin tyyliin, mutta palvelun kuvat ovat kaikki yhden kuvaajan kamerasta. Picjumbon erikoisuutena on maksuttomien kuvien lisäksi Premium-jäsenyys, jota palvelu ahkerasti mainostaa. Sivuston kuvat ovat käytettävissä ja muokattavissa vapaasti, mutta kuvien latauksen mahdollistaminen eli käytännössä edelleen jakaminen omalta sivulta tarkoituksen mukaisesti on kiellettyä.

Googlen kuvahaku

Maksuttomia kuvia miettiessä ei ehkä ensimmäiseksi tule mieleen etsiä kuvaa Googlesta, mutta Googlen kuvahaku on kuvapankeista monipuolisin. Eri lisenssien kirjo on myös valtava, mutta Googlen kuvahausta voi kuitenkin poimia kuvia myös ilmaiseksi, kun muistaa täpätä kuvahakua tehdessä seuraavan kohdan (tai oman käyttötarkoituksen mukaisesti):

Muita huomionarvoisia kuvapankkeja: Unsplash, SplitShire, kuviasuomesta.fi sekä Flickrin lisenssivapaat kuvat.

*Creative Commons Zero (CC0) lisenssi = Teosta voi lupaa pyytämättä kopioida, muokata, levittää ja esittää, mukaan lukien kaupallisessa tarkoituksessa.

HÄRKÄVINKKI

Nettisivuja tehdessä voit itse etsiä sopivat kuvat edellä mainituista kuvapankeista, tai me voimme tehdä sen puolestasi, jolloin saat varmasti visuaalisesti brändiäsi tukevat kuvat kriittisille paikoille.

Näytä