Värit web-sivuston suunnittelussa

Web-sivut ovat muuttuneet paljon sitten 1990-luvun alun, jolloin ensimmäiset tekstipohjaiset HTML-sivut ilmestyivät. HTML-sivut mahdollistivat kuitenkin kuvien liittämisen tekstiaineiston oheismateriaaliksi, mikä oli suuri edistysaskel www:n edeltäjään, Gopheriin verrattuna.

Ensimmäisessä HTML-protokollassa oli kyllä olemassa ratkaisut esimerkiksi taustavärien ja eriväristen fonttien käytölle, mutta rajoituksia aiheuttivat vielä varsin alkeelliset web-selainohjelmat. Esimerkiksi Unix- ja Linux-maailmassa edelleen suosittu Lynx oli täysin tekstipohjainen www-selain. Paljon on kuitenkin tapahtunut sitten 90-luvun alkuvuosien ja nykyään web-sivut ovat ennen kaikkea graafinen ilmaisun muoto. Näin ollen ei olekaan mikään ihme, että visuaalinen ulkoasu ja erilaiset värimaailmat ovat hyvin merkittävässä osassa nykyisissä verkkosivuissa, samoin kuin luonnollisesti myös multimedia ja animaatiot.

färg färghjul_130407788

Psykologinen näkökulma

Oletko koskaan miettinyt, miksi esimerkiksi yritysten logot ovat juuri sen värisiä kuin ne ovat? Esteettisyys on tietysti yksi tärkeä kriteeri värivalintoja tehdessä, mutta eri väreillä on myös oma psykologinen viestinsä. Mainostoimistoille eri värien hyödyntäminen on yksi perustyökaluista. Punainen esimerkiksi symboloi dynaamisuutta ja voimaa. Sininen merkitsee puolestaan rauhallisuutta ja perinteiden arvostamista, keltainen elinvoimaa ja esimerkiksi vihreä symboloi toiveikkuutta. Tässä vaiheessa voikin palautella mieleensä eri brändien logoja mietiskellä miksi esimerkiksi Nokian logo on sininen ja McDonald’sin puna-oranssi.

Eri värit web-maailmassa

Kuinka värit sitten toteutetaan www-sivuilla? Nykypäivänä avainasemassa ovat CSS-muotoilut, joiden avulla voidaan luoda yhtenäisiä värimaailmoja, jotka kattavat sivuston kaikki sivut aina kotisivulta alisivuille asti. CSS-tekniikkaa käyttämällä on myös helpompi hallita sivun värejä ja fontteja kokonaisuuksina, ja niitä voidaan myös helposti muuttaa jälkikäteen. Sivuston väriteemat valitaan yleensä aihepiiristä ja tyylistä riippuen.

Tässä listattuna muutamia esimerkkivärejä:

  • Vihreä, Ruskea

grönbrun

 

 

 

 

 

 

 

Vihreä värimaailma kuvastaa luontoa ja luonnonmukaisuutta, mutta myös ekologisuutta ja esimerkiksi kierrätystä. Vihreällä on nykypäivän web-maailmassa hyvin positiivinen ja ekologisuutta korostava merkitys. Voit huomata, että esimerkiksi monet uudenaikaiset energiayhtiöt, jotka tarjoavat ympäristöystävällistä sähköä, ovat valinneet sivustonsa teemaksi vihreän. Koko sivuston ei tarvitse olla vihreä taustaltaan, vaan esimerkiksi Maanystävien tapaan voidaan käyttää vihreää valikkopalkkia.

  • Valkoinen

vit

 

 

 

 

 

 

 

Valkoinen korostaa informaatiota, ja se on tavallaan kaikkein neutraalein värivalinta web-sivuille. Samalla se on myös valitettavasti hieman tylsä. Valkoinen on kuitenkin lähes aina varsin turvallinen valinta, ja Apple on hyödyntänyt sitä tehokkaasti.

  • Harmaan eri sävyt

grå

 

 

 

 

 

 

 

Luotettavuutta ja asiakaslähtöisyyttä voidaan korostaa harmaan eri sävyillä. Hyvä esimerkki tästä on maailman suurin pokerisivusto PokerStars. Hillitty ulkoasu antaa asiakkaille viestin vakaasta ja luotettavasta sekä laadukkaasta palvelusta.

  • Punainen

röd

 

 

 

 

 

 

 

Elinvoimaa ja tuoreutta! Tämä on melko rohkea valinta web-sivuston väriksi, mutta onnistuessaan tekee varmasta vaikutuksen vierailijaan. Punaisen ei tarvitse olla välttämä räikeä, sillä esimerkiksi tummanpunainen on hyvin rauhallinen väri.

  • Sininen

blå

 

 

 

 

 

 

 

Yksi yleisimmistä webin värivalinnoista, joka symboloi rauhaa ja luotettavuutta. Sinisessä on jotain hyvin miellyttävää ja rauhoittavaa, ja se toimii myös web-maailmassa tällä tavoin. Kovinkaan persoonallinen ratkaisu ei sininen teema kuitenkaan yleensä ole, mutta oikeanlaisessa yhteydessä hyvä ja varma valinta.

  • Keltainen, Oranssi

gulorange

 

 

 

 

 

 

 

Keltainen lienee punaistakin rohkeampi valinta. Keltainen on verkkosivusoilla kaikkien harvinaisin väriteema, mutta se puolustaa paikkaansa kyllä oikeassa tilanteessa. Kyseessä on varmasti huomiota herättävä valinta. Keltaisen värinkään ei tarvitse olla se kaikkein räikein sitruuna tai appelsiini, vaan myös rauhallinen kullansävyinen keltainen voi toimia web-sivustolla.

  • Violetti, Pinkki

lilarosa

 

 

 

 

 

 

 

Molemmat värit symboloivat eksotiikkaa, kuninkaallisuutta ja kaikkea ”jännittävää”. Violetti on melko harvinainen väri web-maailmassa, ja sitä voisi pitää jonkinlaisena valtavirrasta poikkeavana ”underground” väriteemana. Violetin eri sävyjä, joihin voidaan lukea myös tietyt pinkit sävyt, luovat hieman kielletyn yleistunnelman, ja tätä väriteemaa käytetään lähes yksinomaan viihdesivustoilla.

  • Musta

svart

 

 

 

 

 

 

 

Mustapohjaisen sivun tarkoitus on usein myös hieman hätkähdyttää vierailijaa. Tämä väri on kuitenkin melko yleinen väriteema verkkosivuilla. Musta tausta on usein myös visuaalisesti toimiva, ja se korostaa hyvin sivulla olevia muita värejä esimerkiksi kuva-gallerioissa.

Web-sivustojen suunnittelu pohjautuu pitkälti eri värien käytölle niin taustaväreissä, logoissa, kuvituksessa kuin fonteissakin. Värimaailmojen rakentaminen on kuitenkin tarkkaa puuhaa, liian räikeät ja rohkeat valinnat luovat sivusta amatöörimäisen vaikutelman. Liian turvalliset valinnat puolestaan jättävät sivun turhankin vaisuksi. Web-sivuston suunnittelussa pitääkin löytää sopiva yhteys sisällön ja ulkoasun välillä.