VIERASKYNÄ - MARJUT KOSTILAINEN - MARKKINOINTI STILA

VINKKEJÄ VERKKOSIVUJEN VISUAALISEEN ILMEESEEN

#verkkosivut #kuvat #värit #fontit


Päivitetty 07.09.2023

Verkkosivujen suunnittelun yksi osa-alue on sivuston visuaalinen (graafinen) ilme eli miltä sivut näyttävät. Visuaalinen ilme on tärkeä osa sivuston käyttökokemusta muun käytettävyyden ohella.


Tässä artikkelissa käyn läpi muutamia visuaaliseen ilmeeseen vaikuttavia osa-alueita, kuten

  • asettelu
  • värit
  • kuvat
  • fontit

Graafinen ohjeistus – entä jos sellaista ei ole?

Jos yrityksellä on olemassa jo ennestään suunniteltu graafinen ohjeistus, sivujen visuaalisen ilmeen suunnittelussa on jo jokin lähtökohta olemassa. Suunnittelu on helpompaa, kun noudattaa määriteltyä ohjenuoraa. Ellei graafista ohjeistusta ole, voi sivuston ilme mukailla yrityksen käyttämää muuta visuaalista materiaalia, jos sellaista on jo tehty.


Aloittavalla yrityksellä olisi aina hyvä olla jokin suunnitelma yrityksen visuaaliselle ilmeelle. Minimissään olisi hyvä valita käytettävät värit, fontit ja suuntaviivat kuvien käytölle. Silloin yrityksen brändi-ilme pysyy yhdenmukaisena ja tunnistettavana alusta asti.

Selkeys ja luettavuus

Sivujen suunnittelussa kannattaa aina muistaa, että sivusto on helppokäyttöinen, selkeä ja luettava. Et varmaan halua menettää yhtään asiakasta sen vuoksi, että sivustoa on hankala käyttää?


Nykyään verkkosivuista voi rakentaa vaikka minkälaisia taideteoksia, koska työkalut ovat kehittyneet, eikä perusverkkosivujen tekemiseen tarvita välttämättä sen erityisempää osaamista. Tässä voi kuitenkin piillä sudenkuoppa: haluatko, että sivustosi on vaikeasti ymmärrettävä taideteos vai helppokäyttöinen, yrityksesi näköinen ja myyvä sivusto?


Sivustoja käytetään nykyisin suurimmaksi osaksi mobiililaitteella (puhelimella, tabletilla), joten tämä kannattaa ottaa erityisesti huomioon. Se mikä näyttää hyvältä desktop-näkymässä eli tietokoneella, ei aina toimi sellaisenaan mobiilinäkymässä. Sommittele eri elementit siten, että ne näyttävät hyvältä myös puhelimella selatessa. 


Vinkkejä asetteluun:


  • Älä käytä liikaa erilaisia asetteluja, jotta yleisilme pysyy rauhallisena.
  • Jätä tarpeeksi tyhjää tilaa eri elementtien väliin.
  • Vaihtele erilaisia asetteluja, jotta sivustosta tulee mielenkiintoisempi. Esimerkiksi kuva ja teksti voivat vaihtaa paikkaa, ja välillä voi käyttää pelkkää tekstiä tai pelkkää kuvaa.
  • Vältä turhia animointeja, sillä ne harvoin lisäävät lisäarvoa.
  • Taustavideoiden käyttö voi olla hyvä tehokeino, mutta käytä videoita harkiten.

Värien käyttö

Tässä vinkkejä värien valitsemiseen:


  • Valitse esimerkiksi 2-5 väriä, jotka sopivat yhteen (ensisijaiset/päävärit ja niitä tukevat värit).​ Mieti, haluatko sivuston yleisilmeen olevan tumma vai vaalea.
  • Muista riittävä värien kontrasti. Esimerkiksi vaalealla pinnalla tarvitaan tarpeeksi tummaa tekstiä ja päinvastoin.
  • Täysin musta väri valkoisella taustalla on usein liian voimakas, joten kannattaa harkita hieman murretumpaa väriä.
  • Liian vaalea fontin väri ei erotu tarpeeksi valkoisesta taustasta.
  • Mieti, käytätkö omia lempivärejäsi vai sellaisia värejä, jotka vahvistavat yrityksesi brändiä.


Mutta miten valita keskenään sopivat värit? Voit käyttää apuna esimerkiksi Canva-työkalua, jossa on paljon mallipohjia eri tarkoituksiin. Jos sinua miellyttää jokin tietty värimaailma, voit poimia mallipohjasta sopivat värit käyttöösi. Monesti suunnittelun lähtökohtana on jokin tietty valokuva. Canvalla voit selvittää kuvassa käytetyt värit ja saada sieltä suoraan värikoodit, joita voit käyttää verkkosivuilla.

Tiesitkö muuten, että värit ovat markkinoinnin tehokeino, ja niiden valinnalla voidaan vaikuttaa ihmisten tunteisiin ja käyttäytymiseen? Jos tämä aihe kiinnostaa, voit hakea Googlesta lisätietoja hakusanalla "värien psykologia".


Kuvien käyttö

Omien valokuvien käyttö olisi aina suositeltavaa, mutta se ei aina ole mahdollista. Kuvia voi kuitenkin hankkia kuvapankeista, kuten:


  • Pexels
  • Pixabay
  • Unsplash
  • Canva


Canvassa voit myös muokata kuvia kätevästi omaan värimaailmaan sopiviksi, jos sinulla ei ole käytössä erillistä kuvankäsittelyohjelmaa, kuten Photoshopia.

Vinkkejä kuvien valintaan:

  • Käytä tyyliltään ja värimaailmaltaan samankaltaista kuvitusta.
  • Varmista, että kuvat sopivat väritykseltään valittuihin väreihin.
  • Älä käytä mitä tahansa Googlesta poimittua kuvaa. Muista noudattaa tekijänoikeuksia.
  • Käytä tarpeeksi selkeitä kuvia. Puhelimella nopeasti räpsäisty kuva ei välttämättä ole paras vaihtoehto.
  • Pakkaa kuvat tarvittaessa pienempään tiedostomuotoon. Suositeltavia tiedostomuotoja verkkosivuilla ovat esimerkiksi jpg ja webp.

Fontit

Fontit vaikuttavat mielikuvaan yhtä paljon kuin kuvat ja värit. Fonttien valinnassa on siis syytä olla huolellinen.

Vinkkejä fontteihin:


  • Etsi erilaisia fontteja esimerkiksi Google Fonts -sivustolta.
  • Huomioi fonttien luettavuus: koristeellinen fontti voi näyttää hienolta, mutta se ei välttämättä ole selkeä verkkosivuilla.
  • Varmista, että fonttikoko on riittävän suuri, erityisesti mobiililaitteilla.
  • Valitse vain muutama fontti (esim. 1-3 kpl) eri tarkoituksiin, esimerkiksi otsikoille, leipätekstille ja korostusteksteille.
  • Muista kuitenkin varmistaa, että valitut fontit sopivat yhteen.


Kuvassa on Canvasta löytyvä esimerkki värien ja fonttien käytöstä. Kuvalähde: Canva.

Kuvassa on Canvasta löytyvä esimerkki värien ja fonttien käytöstä. Kuvalähde: Canva

Lopuksi

Jos olet epävarma suunnitelmasi toimivuudesta, voit pyytää mielipiteitä tuttavilta tai kollegoilta, tai tee vaikka pieni tutkimus asiakkaidesi parissa. Muista kuitenkin, että mielipiteitä on yhtä monta kuin on mielipiteen antajaakin. Loppujen lopuksi merkitystä on sillä, mitä sivuston kävijä (asiakas) on mieltä.

Kotisivujen tekijä Marjut Kostilainen

Tämän blogiartikkelin kirjoittaja

Tämän vieraskynän kirjoittaja on kotisivujen suunnittelija Marjut Kostilainen, joka tarjoaa myös visuaalisen suunnittelun palveluja. www.stila.fi

Digitekoja blogin aloitussivulle

VIERASKYNÄ - MARJUT KOSTILAINEN - MARKKINOINTI STILA

VINKKEJÄ VERKKOSIVUJEN VISUAALISEEN ILMEESEEN

#verkkosivut #kuvat #värit #fontit


Päivitetty 07.09.2023

Verkkosivujen suunnittelun yksi osa-alue on sivuston visuaalinen (graafinen) ilme eli miltä sivut näyttävät. Visuaalinen ilme on tärkeä osa sivuston käyttökokemusta muun käytettävyyden ohella.


Tässä artikkelissa käyn läpi muutamia visuaaliseen ilmeeseen vaikuttavia osa-alueita, kuten

  • asettelu
  • värit
  • kuvat
  • fontit

Graafinen ohjeistus – entä jos sellaista ei ole?

Jos yrityksellä on olemassa jo ennestään suunniteltu graafinen ohjeistus, sivujen visuaalisen ilmeen suunnittelussa on jo jokin lähtökohta olemassa. Suunnittelu on helpompaa, kun noudattaa määriteltyä ohjenuoraa. Ellei graafista ohjeistusta ole, voi sivuston ilme mukailla yrityksen käyttämää muuta visuaalista materiaalia, jos sellaista on jo tehty.


Aloittavalla yrityksellä olisi aina hyvä olla jokin suunnitelma yrityksen visuaaliselle ilmeelle. Minimissään olisi hyvä valita käytettävät värit, fontit ja suuntaviivat kuvien käytölle. Silloin yrityksen brändi-ilme pysyy yhdenmukaisena ja tunnistettavana alusta asti.

Selkeys ja luettavuus

Sivujen suunnittelussa kannattaa aina muistaa, että sivusto on helppokäyttöinen, selkeä ja luettava. Et varmaan halua menettää yhtään asiakasta sen vuoksi, että sivustoa on hankala käyttää?


Nykyään verkkosivuista voi rakentaa vaikka minkälaisia taideteoksia, koska työkalut ovat kehittyneet, eikä perusverkkosivujen tekemiseen tarvita välttämättä sen erityisempää osaamista. Tässä voi kuitenkin piillä sudenkuoppa: haluatko, että sivustosi on vaikeasti ymmärrettävä taideteos vai helppokäyttöinen, yrityksesi näköinen ja myyvä sivusto?


Sivustoja käytetään nykyisin suurimmaksi osaksi mobiililaitteella (puhelimella, tabletilla), joten tämä kannattaa ottaa erityisesti huomioon. Se mikä näyttää hyvältä desktop-näkymässä eli tietokoneella, ei aina toimi sellaisenaan mobiilinäkymässä. Sommittele eri elementit siten, että ne näyttävät hyvältä myös puhelimella selatessa. 


Vinkkejä asetteluun:


  • Älä käytä liikaa erilaisia asetteluja, jotta yleisilme pysyy rauhallisena.
  • Jätä tarpeeksi tyhjää tilaa eri elementtien väliin.
  • Vaihtele erilaisia asetteluja, jotta sivustosta tulee mielenkiintoisempi. Esimerkiksi kuva ja teksti voivat vaihtaa paikkaa, ja välillä voi käyttää pelkkää tekstiä tai pelkkää kuvaa.
  • Vältä turhia animointeja, sillä ne harvoin lisäävät lisäarvoa.
  • Taustavideoiden käyttö voi olla hyvä tehokeino, mutta käytä videoita harkiten.

Värien käyttö

Tässä vinkkejä värien valitsemiseen:


  • Valitse esimerkiksi 2-5 väriä, jotka sopivat yhteen (ensisijaiset/päävärit ja niitä tukevat värit).​ Mieti, haluatko sivuston yleisilmeen olevan tumma vai vaalea.
  • Muista riittävä värien kontrasti. Esimerkiksi vaalealla pinnalla tarvitaan tarpeeksi tummaa tekstiä ja päinvastoin.
  • Täysin musta väri valkoisella taustalla on usein liian voimakas, joten kannattaa harkita hieman murretumpaa väriä.
  • Liian vaalea fontin väri ei erotu tarpeeksi valkoisesta taustasta.
  • Mieti, käytätkö omia lempivärejäsi vai sellaisia värejä, jotka vahvistavat yrityksesi brändiä.


Mutta miten valita keskenään sopivat värit? Voit käyttää apuna esimerkiksi Canva-työkalua, jossa on paljon mallipohjia eri tarkoituksiin. Jos sinua miellyttää jokin tietty värimaailma, voit poimia mallipohjasta sopivat värit käyttöösi. Monesti suunnittelun lähtökohtana on jokin tietty valokuva. Canvalla voit selvittää kuvassa käytetyt värit ja saada sieltä suoraan värikoodit, joita voit käyttää verkkosivuilla.

Tiesitkö muuten, että värit ovat markkinoinnin tehokeino, ja niiden valinnalla voidaan vaikuttaa ihmisten tunteisiin ja käyttäytymiseen? Jos tämä aihe kiinnostaa, voit hakea Googlesta lisätietoja hakusanalla "värien psykologia".


Kuvien käyttö

Omien valokuvien käyttö olisi aina suositeltavaa, mutta se ei aina ole mahdollista. Kuvia voi kuitenkin hankkia kuvapankeista, kuten:


  • Pexels
  • Pixabay
  • Unsplash
  • Canva


Canvassa voit myös muokata kuvia kätevästi omaan värimaailmaan sopiviksi, jos sinulla ei ole käytössä erillistä kuvankäsittelyohjelmaa, kuten Photoshopia.

Vinkkejä kuvien valintaan:

  • Käytä tyyliltään ja värimaailmaltaan samankaltaista kuvitusta.
  • Varmista, että kuvat sopivat väritykseltään valittuihin väreihin.
  • Älä käytä mitä tahansa Googlesta poimittua kuvaa. Muista noudattaa tekijänoikeuksia.
  • Käytä tarpeeksi selkeitä kuvia. Puhelimella nopeasti räpsäisty kuva ei välttämättä ole paras vaihtoehto.
  • Pakkaa kuvat tarvittaessa pienempään tiedostomuotoon. Suositeltavia tiedostomuotoja verkkosivuilla ovat esimerkiksi jpg ja webp.

Fontit

Fontit vaikuttavat mielikuvaan yhtä paljon kuin kuvat ja värit. Fonttien valinnassa on siis syytä olla huolellinen.

Vinkkejä fontteihin:


  • Etsi erilaisia fontteja esimerkiksi Google Fonts -sivustolta.
  • Huomioi fonttien luettavuus: koristeellinen fontti voi näyttää hienolta, mutta se ei välttämättä ole selkeä verkkosivuilla.
  • Varmista, että fonttikoko on riittävän suuri, erityisesti mobiililaitteilla.
  • Valitse vain muutama fontti (esim. 1-3 kpl) eri tarkoituksiin, esimerkiksi otsikoille, leipätekstille ja korostusteksteille.
  • Muista kuitenkin varmistaa, että valitut fontit sopivat yhteen.


Kuvassa on Canvasta löytyvä esimerkki värien ja fonttien käytöstä. Kuvalähde: Canva.

Kuvassa on Canvasta löytyvä esimerkki värien ja fonttien käytöstä. Kuvalähde: Canva

Lopuksi

Jos olet epävarma suunnitelmasi toimivuudesta, voit pyytää mielipiteitä tuttavilta tai kollegoilta, tai tee vaikka pieni tutkimus asiakkaidesi parissa. Muista kuitenkin, että mielipiteitä on yhtä monta kuin on mielipiteen antajaakin. Loppujen lopuksi merkitystä on sillä, mitä sivuston kävijä (asiakas) on mieltä.

Kotisivujen tekijä Marjut Kostilainen

Tämän blogiartikkelin kirjoittaja

Tämän vieraskynän kirjoittaja on kotisivujen suunnittelija Marjut Kostilainen, joka tarjoaa myös visuaalisen suunnittelun palveluja. www.stila.fi

Digitekoja blogin aloitussivulle

VIERASKYNÄ - MARJUT KOSTILAINEN - MARKKINOINTI STILA

VINKKEJÄ VERKKOSIVUJEN VISUAALISEEN ILMEESEEN

#verkkosivut #kuvat #värit #fontit


Päivitetty 07.09.2023

Verkkosivujen suunnittelun yksi osa-alue on sivuston visuaalinen (graafinen) ilme eli miltä sivut näyttävät. Visuaalinen ilme on tärkeä osa sivuston käyttökokemusta muun käytettävyyden ohella.


Tässä artikkelissa käyn läpi muutamia visuaaliseen ilmeeseen vaikuttavia osa-alueita, kuten

  • asettelu
  • värit
  • kuvat
  • fontit

Graafinen ohjeistus – entä jos sellaista ei ole?

Jos yrityksellä on olemassa jo ennestään suunniteltu graafinen ohjeistus, sivujen visuaalisen ilmeen suunnittelussa on jo jokin lähtökohta olemassa. Suunnittelu on helpompaa, kun noudattaa määriteltyä ohjenuoraa. Ellei graafista ohjeistusta ole, voi sivuston ilme mukailla yrityksen käyttämää muuta visuaalista materiaalia, jos sellaista on jo tehty.


Aloittavalla yrityksellä olisi aina hyvä olla jokin suunnitelma yrityksen visuaaliselle ilmeelle. Minimissään olisi hyvä valita käytettävät värit, fontit ja suuntaviivat kuvien käytölle. Silloin yrityksen brändi-ilme pysyy yhdenmukaisena ja tunnistettavana alusta asti.

Selkeys ja luettavuus

Sivujen suunnittelussa kannattaa aina muistaa, että sivusto on helppokäyttöinen, selkeä ja luettava. Et varmaan halua menettää yhtään asiakasta sen vuoksi, että sivustoa on hankala käyttää?


Nykyään verkkosivuista voi rakentaa vaikka minkälaisia taideteoksia, koska työkalut ovat kehittyneet, eikä perusverkkosivujen tekemiseen tarvita välttämättä sen erityisempää osaamista. Tässä voi kuitenkin piillä sudenkuoppa: haluatko, että sivustosi on vaikeasti ymmärrettävä taideteos vai helppokäyttöinen, yrityksesi näköinen ja myyvä sivusto?


Sivustoja käytetään nykyisin suurimmaksi osaksi mobiililaitteella (puhelimella, tabletilla), joten tämä kannattaa ottaa erityisesti huomioon. Se mikä näyttää hyvältä desktop-näkymässä eli tietokoneella, ei aina toimi sellaisenaan mobiilinäkymässä. Sommittele eri elementit siten, että ne näyttävät hyvältä myös puhelimella selatessa. 


Vinkkejä asetteluun:


  • Älä käytä liikaa erilaisia asetteluja, jotta yleisilme pysyy rauhallisena.
  • Jätä tarpeeksi tyhjää tilaa eri elementtien väliin.
  • Vaihtele erilaisia asetteluja, jotta sivustosta tulee mielenkiintoisempi. Esimerkiksi kuva ja teksti voivat vaihtaa paikkaa, ja välillä voi käyttää pelkkää tekstiä tai pelkkää kuvaa.
  • Vältä turhia animointeja, sillä ne harvoin lisäävät lisäarvoa.
  • Taustavideoiden käyttö voi olla hyvä tehokeino, mutta käytä videoita harkiten.

Värien käyttö

Tässä vinkkejä värien valitsemiseen:


  • Valitse esimerkiksi 2-5 väriä, jotka sopivat yhteen (ensisijaiset/päävärit ja niitä tukevat värit).​ Mieti, haluatko sivuston yleisilmeen olevan tumma vai vaalea.
  • Muista riittävä värien kontrasti. Esimerkiksi vaalealla pinnalla tarvitaan tarpeeksi tummaa tekstiä ja päinvastoin.
  • Täysin musta väri valkoisella taustalla on usein liian voimakas, joten kannattaa harkita hieman murretumpaa väriä.
  • Liian vaalea fontin väri ei erotu tarpeeksi valkoisesta taustasta.
  • Mieti, käytätkö omia lempivärejäsi vai sellaisia värejä, jotka vahvistavat yrityksesi brändiä.


Mutta miten valita keskenään sopivat värit? Voit käyttää apuna esimerkiksi Canva-työkalua, jossa on paljon mallipohjia eri tarkoituksiin. Jos sinua miellyttää jokin tietty värimaailma, voit poimia mallipohjasta sopivat värit käyttöösi. Monesti suunnittelun lähtökohtana on jokin tietty valokuva. Canvalla voit selvittää kuvassa käytetyt värit ja saada sieltä suoraan värikoodit, joita voit käyttää verkkosivuilla.

Tiesitkö muuten, että värit ovat markkinoinnin tehokeino, ja niiden valinnalla voidaan vaikuttaa ihmisten tunteisiin ja käyttäytymiseen? Jos tämä aihe kiinnostaa, voit hakea Googlesta lisätietoja hakusanalla "värien psykologia".


Kuvien käyttö

Omien valokuvien käyttö olisi aina suositeltavaa, mutta se ei aina ole mahdollista. Kuvia voi kuitenkin hankkia kuvapankeista, kuten:


  • Pexels
  • Pixabay
  • Unsplash
  • Canva


Canvassa voit myös muokata kuvia kätevästi omaan värimaailmaan sopiviksi, jos sinulla ei ole käytössä erillistä kuvankäsittelyohjelmaa, kuten Photoshopia.

Vinkkejä kuvien valintaan:

  • Käytä tyyliltään ja värimaailmaltaan samankaltaista kuvitusta.
  • Varmista, että kuvat sopivat väritykseltään valittuihin väreihin.
  • Älä käytä mitä tahansa Googlesta poimittua kuvaa. Muista noudattaa tekijänoikeuksia.
  • Käytä tarpeeksi selkeitä kuvia. Puhelimella nopeasti räpsäisty kuva ei välttämättä ole paras vaihtoehto.
  • Pakkaa kuvat tarvittaessa pienempään tiedostomuotoon. Suositeltavia tiedostomuotoja verkkosivuilla ovat esimerkiksi jpg ja webp.

Fontit

Fontit vaikuttavat mielikuvaan yhtä paljon kuin kuvat ja värit. Fonttien valinnassa on siis syytä olla huolellinen.

Vinkkejä fontteihin:


  • Etsi erilaisia fontteja esimerkiksi Google Fonts -sivustolta.
  • Huomioi fonttien luettavuus: koristeellinen fontti voi näyttää hienolta, mutta se ei välttämättä ole selkeä verkkosivuilla.
  • Varmista, että fonttikoko on riittävän suuri, erityisesti mobiililaitteilla.
  • Valitse vain muutama fontti (esim. 1-3 kpl) eri tarkoituksiin, esimerkiksi otsikoille, leipätekstille ja korostusteksteille.
  • Muista kuitenkin varmistaa, että valitut fontit sopivat yhteen.


Kuvassa on Canvasta löytyvä esimerkki värien ja fonttien käytöstä. Kuvalähde: Canva.

Kuvassa on Canvasta löytyvä esimerkki värien ja fonttien käytöstä. Kuvalähde: Canva

Lopuksi

Jos olet epävarma suunnitelmasi toimivuudesta, voit pyytää mielipiteitä tuttavilta tai kollegoilta, tai tee vaikka pieni tutkimus asiakkaidesi parissa. Muista kuitenkin, että mielipiteitä on yhtä monta kuin on mielipiteen antajaakin. Loppujen lopuksi merkitystä on sillä, mitä sivuston kävijä (asiakas) on mieltä.

Kotisivujen tekijä Marjut Kostilainen

Tämän blogiartikkelin kirjoittaja

Tämän vieraskynän kirjoittaja on kotisivujen suunnittelija Marjut Kostilainen, joka tarjoaa myös visuaalisen suunnittelun palveluja. www.stila.fi

Digitekoja blogin aloitussivulle