VV1209, www-sivujen suunnittelu, 1 OV

5.SUUNNITTELUN TEORIAA I

5.1. Yleistä

5.2. Värit - mitkä värit valitset ja miksi?

5.2.1.  Päävärit

5.2.2.  Välivärit

5.2.3. Vastavärit

5.2.4.  Lähivärit

 

Sivukartta

5. SUUNNITTELUN TEORIAA I

5.1. Yleistä

Suunnittelun teoriaa käsitellään tässä opintojaksossa kahdessa osassa. Ensimmäisessä osassa perehdytään värioppiin ja värien käyttöön. Yleisesti  suunnittelun teoriaa käsittelevissä osissa käydään läpi asioita, jotka muodostavat www-sivujen näkyvän eli visuaalisen ilmeen. Teoriaosassa huomioidaan myös äänen olemassaolo, mutta sen osuus jää vähäisemmäksi tietoisesti valituista syistä, joista enemmän tuonnempana.

5.2. Värit - mitkä värit valitset ja miksi?

Visuaalisen eli näkyvän ilmeen laatimisessa www-sivustoille tulee ottaa huomioon monia asioita. Ei ole ihan sama kuinka monia värejä ja mitä värejä suunnittelemillasi sivustoilla käytät. Yksinkertainen on usein tehokasta ja parhaiten toimivaa. Tämä kannattaa muistaa myös silloin kun valitaan www-sivuilla olevat päävärit. Värit vaikuttavat ihmisiin eri tavoin. Eri kulttuureissa väreillä on eri merkityksiä.

Vinkkejä www-sivujen värien käyttöön voi hakea monista lähteistä, esimerkiksi sisustuslehdet, autolehdet ja muotilehdet tuovat esille monia mielenkiintoisia väriyhdistelmiä. Kannattaa myös huomioida matkailusta ja kulttuureista kertovat julkaisut. Jos sinua kiinnostaa jokin näkemäsi väriyhdistelmä, niin mieti sopiiko vaikkapa juuri se värimaailma suunnitelmasi lähtökohdaksi.

Ammattilaisen tulee osoittaa professionaalisuutensa kyvyllään perustella tekemänsä valinnat myös värien suhteen. Värien valintaa perustelemaan ei riitä ainoastaan se, että sinä suunnittelijana pidät juuri näistä väreistä (vaikka niin oikeasti olisikin). Jokaisella värillä on oma psykologinen vaikutuksensa ja toiset värit ärsyttävät enemmän kuin toiset. Joskus sivustojen tehtävänä on synnyttää ärsytystä ja joskus tavoitteena on luoda hyvin seesteinen ja tasapainoinen vaikutelma. Nämä vaikutelmat syntyvät värivalintojen avulla.

  • Mieti miten perustelet tekemiäsi värivalintoja.

Seuraavista kolmesta linkistä pääset tutkailemaan erilaisia värimaailmoja ja tapoja yhdistellä värejä. Käytä runsaasti aikaa näiden linkkien tutkailuun, sillä ammattilaisena tarvitset myös taidon perustella sanallisesti värivalintasi. Myös yrityksen viestinnässään käyttämien värien on kuvattava jollain tapaa yritystä, sen toimintaa ja ideologiaa.

  • Mieti näitä linkkejä tutkiessasi minkä alan sivustoilla voisit käyttää kuvissa esiintyviä värejä.

Ideat ja vinkit värien käyttöön (kts. erityisesti kohta artikkelit ja värit sisustuksessa)

Yleistä väreistä ja värien merkityksistä (täältä löydät värien psykologian ja mytologian perusteet)    

Värien lyhyt oppimäärä ja väriharmoniat (kannattaa selata läpi, sillä aineisto sisältää esimerkkejä)

Sivustojen värivalinnalla voidaan lisätä sivustojen kiinnostavuutta tai tuottaa väljähtynyt, mitään sanomaton tai hyvin sekava vaikutelma. Oikein käytettynä värit kertovat omaa tarkoin harkittua sanomaansa myös www-sivuilla. Värit herättävät sivustoilla vierailevan ihmisen mielenkiinnon. Seuraavassa esitellään värien teoriaa lyhyesti.

 

Sivun alkuun >

5.2.1. Päävärit

Päävärejä ovat keltainen, punainen ja sininen. Käytännössä päävärit ovat siis sellaisia värejä, joita ei saa valmistettua sekoittamalla mitään muita värejä keskenään. Pienet lapset erottavat silmillään parhaiten juuri päävärit. Siksi ihan pienten lasten lelut ovat usein väriltään keltaisia, punaisia tai sinisiä.

5.2.2.  Välivärit

Välivärejä ovat oranssi, violetti (lila) ja vihreä. Käytännössä välivärit syntyvät kahta pääväriä keskenään sekoittamalla eli keltaisesta ja punaisesta tulee oranssi, punaisesta ja sinisestä tulee violetti sekä sinisestä ja keltaisesta tulee vihreä. Usein taiteellisuutta itsessään korostavat ihmiset käyttävät pukeutumisessaan näitä värejä mustan lisäksi.

5.2.3. Vastavärit

Vastavärien käsitteen ymmärtää parhaiten kun tutkii väriympyrää. Seuraavassa on lueteltu pää- ja välivärien muodostamat vastaväriparit: Keltaisen vastaväri on violetti (lila). Punaisen vastaväri on vihreä. Sinisen vastaväri on oranssi.

Vastavärien käytöllä voi luoda sivustoille jännitteitä käyttämällä toista väriä väriparista runsaammin ja toista väriä vähemmän ikään kuin tehosteena. Vastaväriparien käytöllä saadaan aikaan tehokkaita sommitteluja, jotka kiinnittävät www-sivulle tulleen huomion. On kuitenkin muistettava, että punaisen ja vihreän erottaminen tuottaa vaikeuksia punavihersokeille ihmisille. Vaarana vastavärien käytöllä on se, että sivustoista tulee helposti liian räikeät ellei väripintojen suhdetta ole punnittu harkitusti.

5.2.4. Lähivärit

Myös lähivärien käsitteen ymmärtää parhaiten tutkimalla väriympyrää. Esimerkiksi punaisen lähivärejä ovat punaisen oranssi ja punaisen violetti. Tällöin esimerkiksi punaisen oranssi väri on saatu aikaan lisäämällä oranssiin punaista ja punaisen violetti väri on saatu aikaan lisäämällä violettiin punaista. Keltaisen lähivärejä ovat keltaisen oranssi ja keltavihreä. Sinisen lähivärejä ovat sinivihreä ja sinisen violetti.

  • Mieti miten on saatu aikaiseksi keltaisen oranssi ja keltavihreä.
  • Mieti miten on saatu aikaiseksi sinivihreä ja sinisen violetti.
  • Mieti mitkä ovat violetin, oranssin ja vihreän lähivärit.

Lähivärien käytöllä voidaan sivustoille rakentaa helposti harmoninen, tasapainoinen, vaikutelma. Esimerkiksi värien 'liukuminen' toisensa puolelle synnyttää helposti vaikutelman auringonlaskusta (keltaisesta oranssiin), viljan kypsymisestä (vihreästä keltaiseen) jne. Vaarana on kuitenkin, että sivustoista tulee liian "tasapaksut", kun lähekkäin olevat värit puuroutuvat yhteen.

  • Mieti mitä värejä sekoittamalla syntyy ruskea.

Sivun alkuun >

Tehtävä Moodlessa