Sivujen parhaat värit

Sivujen värivalinnoilla voi olla valtava vaikutus kuluttajien kokemukseen ja yrityksen yleisiin konversioihin. Paranna verkkosivustosi ulkoasua tämän oppaan avulla.

Värit ovat ratkaisevan tärkeitä verkkosivuston menestyksen kannalta. Itse paletilla on kyky horjuttaa kuluttajia ja kannustaa heitä tekemään ostopäätöksiä. Itse asiassa oikeiden väriyhdistelmien käyttäminen verkkosivustollasi voi lisätä konversiota. Verkkosivuston väri sanelee brändin viestin, tunnelman ja sävyn väripsykologian avulla, joka vaikuttaa kaikkien päätöksentekoprosessiin. Onnistunut väripaletti voi tehdä aivan ihmeitä yrityksen verkkosivustolle, kun taas huonosti suunniteltu verkkosivusto voi karkottaa potentiaaliset asiakkaat ja katsojat.

Tässä opit, mitkä värit sopivat parhaiten tiettyihin verkkosivuston elementteihin taustoista hinnoitteluun, ja lisäksi opit, mitkä sävyt eivät välttämättä sovellu verkkosuunnitteluun.

Parhaat taustavärit

Sivuston taustavärillä on valtava vaikutus sivuston yleiseen tunnelmaan, sävyyn ja psykologiaan. Aivan kuten maalaamalla makuuhuoneesi eri väriseksi, verkkosivustosi taustavärin muuttaminen vaikuttaa siihen, miten muut näkevät sivustosi kokonaisuudessaan.

Sivuston tulisi heijastaa brändiä tai henkilöä, ei torjua sitä. Yritykset, jotka esittelevät tuotetta tai palvelua, haluavat korostaa tarjontaansa, joten on tärkeää pitää ne valokeilassa. Samaa voidaan sanoa portfolio- tai blogisivustoista: anna työsi erottua. Pitämällä taustan minimaalisena valokuvaus ja suunnitteluelementit pääsevät paremmin esille.

Yksi parhaista vinkeistä, jotka kannattaa pitää mielessä, on käyttää kuvamateriaalia, tuotetta tai valokuvaa inspiraationa. Onko tuotteesi tai muotoilusi värikäs vai onko se yksivärisempi? Onko jokin tietty väripaletti, joka hyppää esiin, kun katsot visuaalista materiaalia? Kun keskität huomiosi kuvamateriaaliin, voit välttää väärän taustavärin valitsemisen verkkosivustollesi.

Valkoinen tausta

Kun olet epävarma, valitse vaalea tai valkoinen tausta. Vaalean sävyn käyttäminen antaa kuvien tai tuotteen todella erottua, varsinkin jos visuaalisissa elementeissä on näkyvä väripaletti. Voimme verrata tätä huoneen maalaamiseen valkoiseksi; tausta ei ainoastaan kirkasta sivua, vaan se myös antaa katsojalle mahdollisuuden tarkentaa tuotetarjontaa.

Vaaleampaan taustaan pitäytyminen saattaa tuntua ennalta-arvattavalta, mutta se on monipuolinen valinta, joka toimii useimmilla verkkosivustotyypeillä. Jos et tunne aitoa valkoista (#ffffff), voit silti pistää hieman väriä lisäämällä aavistuksen sinistä tai keltaista korostamaan visuaalista ilmettä. Jos tuotetarjonta antaa viileämmän värimaailman, kokeile lämpimän sävyistä valkoista ja päinvastoin. Voit aina kokeilla erilaisia valkoisen sävyjä liikkumalla värivalitsimessa ja esikatselemalla päivitettyä taustaväriä.

Mustat taustat

Tumma tila on kasvava trendi käyttäjäkokemuksen suunnittelussa. Mustat taustat eivät ainoastaan näytä tyylikkäältä oikein tehtynä, vaan ne ovat myös helpompia silmälle. Tästä huolimatta mustat taustat toimivat parhaiten minimalistisessa verkkosuunnittelussa, jossa on paljon negatiivista tilaa.

Valitsemalla tummemman taustan voit helposti korostaa sivun tai otsikon keskipistettä, kuten yllä olevassa meikkisivustossa. Dramatiikan määrä korostuu, kun valitset tummemman taustan vaaleamman taustan sijaan. Vaikka mustan taustan valitseminen voi olla rohkeampi valinta, sillä voi olla valtava vaikutus käyttäjäkokemukseen.

Kun valitset tumman tilan reitin, sinun ei tarvitse tyytyä vain mustaan (#000000). Voit myös ottaa käyttöön lämpimiä tai viileämpiä sävyjä saadaksesi ainutlaatuisen sävyn, joka on uskollinen verkkosivustollesi. Kuten aina, kokeile eri sävyjä nähdäksesi, mikä sävy vaikuttaa parhaiten verkkosivustosi suunnitteluun.

Brändin väriset taustat

Jos valkoiset tai mustat taustat eivät aidosti kuvaa brändiäsi, valitse väri, joka sopii tiettyyn brändipalettiin. Jos sinulla on brändiohje tai värillinen logo, käytä sitä inspiraationa.

Kun käytät inspiraationa brändisi väripalettia, pidä verkkosivustosi sisältö aina minimaalisena visuaalisen sekamelskan välttämiseksi. Perennansininen voi olla rohkea valinta taustaväriksi, mutta kun verkkosivusto on suunniteltu tarkoituksella, kirkkaamman värin valitseminen voi olla palkitsevaa.

Sitä huolimatta, älä mene liian villisti taustavärin kanssa. Taustasävyn tekeminen liian kiireiseksi voi peittää sivustosi viestin ja varastaa huomion liiketoiminnan tarjonnasta.

Parhaat painikkeiden värit

Sivustolla painikkeet ovat napsautettavia muotoja, jotka tyypillisesti sijoitetaan sivuston etusivulle. Ne voivat ohjata katsojia tietylle sivulle, esimerkiksi myyntiin, tai kannustaa katsojia rekisteröitymään sähköposteihin. Painikkeet ovat erittäin tärkeä käyttöliittymäelementti, joka ohjaa kuluttajaa suorittamaan tietyn toiminnon. Kun lisäät painikkeita verkkosivustollesi, valitse ensisijainen tai kontrastinen sävy, jotta katsoja löytää painikkeen helposti.

Primäärivärit – kuten punainen, keltainen tai sininen – ovat tunnettuja siitä, että ne ovat silmäänpistäviä ja erittäin värikylläisiä, joten ne ovat täydellinen valinta painikkeisiin. Avain painikkeiden vuorovaikutuksen lisäämiseen on käyttää sävyjä, jotka muodostavat kontrastin taustaan nähden. Keltaisen tai punaisen painikkeen valitseminen mustan taustan päälle varmistaa, että katsojat näkevät toimintakutsun helposti.

Toinen hyvä sääntö, jota kannattaa noudattaa painikkeen väriä valitessa, on pitäytyä täydentävässä väripaletissa. Oranssi erottuu tummansinisen kanssa yhdistettynä kontrastin tai lämpimien ja viileiden sävyjen vuoksi. Vastakkaisten värien luoman visuaalisen hierarkian ansiosta silmä vilkaisee näytön poikki ja siirtyy välittömästi alueille, jotka erottuvat. Painikkeiden värin tulisi aina näkyä hyvin näkyvillä missä tahansa otsikossa tai sivulla, jotta vuorovaikutukseen kannustetaan ja konversiota lisätään.

Parhaat tekstivärit

Luettavuus ja luettavuus ovat olennaisen tärkeitä verkkosivustoa rakennettaessa. Jos katsojasi eivät pysty lukemaan, mitä kullakin sivulla on, he saattavat hylätä sivuston ja siirtyä toiselle. Teksti yhdessä visuaalisten elementtien kanssa on se, mikä pitää katsojasi sitoutuneina. Verkkosivuston fonttivalintojen ja -värien olisi heijastettava brändiä ja sen yleistä viestiä.

Vaikka tekstille ei ole olemassa yhtä kaikille sopivaa värivalintaa, kontrastia kannattaa aina suosia. Jos työskentelet tummien taustojen tai painikkeiden kanssa, aseta tekstin väriksi kirkas tai valkoinen sävy. Kun työskentelet vaaleiden taustojen kanssa, valitse tummempi tekstiväri. Lisäämällä tekstin taustan ja värin välistä kontrastia voit varmistaa, että suurin osa katsojista pystyy helposti lukemaan sisältösi.

Parhaan hinnan värit

Hinta on asia, johon monet kuluttajat kiinnittävät huomiota heti, kun he tarkastelevat tuotteita. Jos katsojat eivät pysty määrittämään tuotteen hintaa, koska sitä on vaikea tulkita, he saattavat jättää sivuston turhautuneina. Aivan kuten tekstin kohdalla, pidä hinta aina helposti luettavissa kontrastisävyjen avulla. Kun erotat hinnan tekstistä ja taustasta, kuluttajat löytävät nopeasti oikean hintasumman.

Kontrastin käyttämisen lisäksi hinnan värissä kannattaa aina ilmoittaa hinnanlasku punaisilla sävyillä. Tuotteen myyntihinta esitetään tyypillisesti punaisella värillä, kun sitä tarkastellaan alkuperäisen hinnan vieressä.

Vältettävät värivalinnat

Nyt kun olemme käsitelleet ihanteellisia värejä, joita kannattaa käyttää tietyissä sivuston elementeissä, on myös tärkeää ymmärtää, miksi jotkin värit voivat itse asiassa haitata sivuston käyttökokemusta. Verkkosivuston omistaminen ei ole pelkästään esteettistä, vaan sen tarkoituksena on tukea ja lisätä yrityksen tuloja tarjoamalla kuluttajille kätevä tapa ostaa tuotteita tai palveluita verkossa.

Jos verkkosivusto on huonosti suunniteltu tai vaikeasti navigoitava, kuluttajat saattavat hylätä sivuston ja etsiä vaihtoehtoja muualta. Kuluttajan kokemus voi ratkaista, saako yritys myyntiin vai ei. On tärkeää oppia, mitkä sävyt toimivat taustoissa ja mitkä eivät toimi tekstissä, kun rakennat verkkosivustoasi.

Vältettävät taustavärit

Sivuston taustaväri kehystää muita visuaalisia elementtejä ja tekstiä. Jos tausta ei sovi yhteen verkkosivuston sisällön kanssa, koko verkkosivusto voi näyttää mauttomalta.

Vaikka taustoille ei ole olemassa tiettyä ”huonoa väriä”, kannattaa aina varoa kirkkaita värejä tai kuvioita, jotka peittävät verkkosivuston viestin. Myös tylsät värit voivat tehdä verkkosivustosta epämiellyttävän, etenkin jos ne yhdistetään kirkkaampaan visuaaliseen ilmeeseen. Ristiriitaiset väripaletit voivat kääntää potentiaalisen asiakkaan pois, jos verkkosivustokokemus ei ole miellyttävä.

Kun valitset verkkosivuston taustaa, ota huomioon, mitä katsoja saattaa ajatella värivalinnasta. Onko se niin kirkas, että tekstiä on vaikea lukea? Aiheuttaako väri liikaa silmien rasitusta? Kuvastaako taustaväri yritystäsi tai brändiäsi? Ole aina kriittinen sen suhteen, miten muut saattavat nähdä verkkosivustosi, kun suunnittelet sitä.

Vältettävät värit painikkeissa

Parhaita värejä verkkosivuillesi ovat värit, jotka erottuvat muista, kuten päävärit tai täydentävät sävyt. Joitakin värejä, joita kannattaa välttää verkkosivustoa suunniteltaessa, ovat muun muassa sellaiset värit, jotka vetäytyvät avaruuteen tai jotka ovat ristiriidassa verkkosivuston muun värivalikoiman kanssa. Se, että painikkeita on vaikea tunnistaa, voi johtaa kuluttajien vuorovaikutuksen vähenemiseen.

Ei ole olemassa yhtä väriä, joka ei toimisi painikkeille, mutta on tärkeää valita sävy, joka sopii muuhun verkkosivustoosi. Esimerkiksi vaaleansinisen painikkeen lisääminen kirkkaan valkoiselle taustalle tekee painikkeesta vaikeasti tunnistettavan. Kontrasti on avain hyvään painikkeen väriin.

Vältettävät värit tekstissä

Sivuston suunnittelussa on tärkeää, että yksityiskohdat ja tiedot ovat helposti luettavissa ja luettavissa. Tekstin tekeminen helposti luettavaksi ja ymmärrettäväksi on olennaisen tärkeää, jotta saat brändisi viestin perille. Jos katsojien on vaikea säilyttää tekstiä, se voi vaikuttaa siihen, miten he mieltävät yrityksesi ja verkkosivustosi.

Säädä typografia vaaleaan tai tummaan sävyyn, jotta tekstin kontrasti pysyy korkeana. Epäsopivien sävyjen käyttäminen typografiassa, kuten limenvihreä oranssilla taustalla, tai samankaltaisten sävyjen valitseminen tekstissä ja taustoissa voi vaikuttaa voimakkaasti verkkosivuston yleiskokemukseen.

Hinnoissa vältettäviä värejä

Hintojen tulisi olla helposti löydettävissä verkkosivustolta, aivan kuten painikkeiden ja muidenkin kutsujen toimintaan, myös hintojen. Hintatekstin tulisi erottua taustasta, jotta käyttäjä voi nopeasti selata sivua ja löytää oikean summan. Vältä valitsemasta hintojen värejä, jotka muistuttavat taustaa tai painiketta voi olla vaikea lukea eri näytöillä.

Hinnanmuutosta tai -alennusta ilmoitettaessa sivustot valitsevat yleensä punaisen sävyn. Sinisen, vihreän tai violetin valitseminen voi hämmentää katsojaa ostopäätöstä tehtäessä.

Cover image via Pure Solution.

Etsitkö lisää tapoja, joilla verkkosivustosi erottuu muista? Tutustu näihin alla oleviin artikkeleihin:

• 30 virkistävää värivalikoimaideaa verkkosivuillesi
• Mustat taustat verkkosivuille: Kuinka tehdä se oikein
• Parhaat fontit ja fonttiyhdistelmät verkkosivuille ja verkkokauppoihin
• Miten verkkosivut suunnitellaan: 10 kultaista sääntöä aloittelijoille
• Yksinkertaiset verkkosivuston ulkoasun suunnitteluvinkit, joita kuka tahansa voi noudattaa