Verkkosivujen suunnittelussa etusivun pääkuva (header-kuva) on tärkeä osa sivuston visuaalisuutta. Sen valintaan liittyy kuitenkin kokorajoituksia, jotka on syytä ottaa huomioon. Kyseessä on verkkosivuja suunnitteleville perusasia, mutta silti siihen törmään työssäni todella usein. Eli yritän nyt selvittää kokorajoitukset mahdollisimman perusteellisesti muutaman esimerkin avulla.

Suunnitelma

Asiakkailtamme saamme useasti valmista suunnitelmaa verkkosivujen visuaalisesta ilmeestä. Tyypillisesti esimerkiksi PDF-dokumentin, jossa on verkkosivun visuaalinen suunnitelma ja mukana tarvittava kuva. Lisäksi asiakas kertoo, että haluaisi myös pääkuvan alla olevat kolme tuotelaatikkoa näkymään heti sivulle tultaessa – eli ei mitään pelkkää isoa taustakuvaa.

Kuva 1. Alkuperäinen suunnitelma

Kuva 2. Alkuperäinen pääkuva kokonaisuudessaan

Näyttää nopeasti katsottuna hyvältä, mutta kokeneempi verkkosivujen toteuttaja huomaa heti ongelmat liittyen taustakuvaan. Sommittelussa tulee ongelmia normaaleilla näytöillä, sillä näkyvä alue on vaakasuunnassa leveä. Suunnittelussa pitäisi aina huomioida miltä sivusto näyttää näytöllä eikä pelkästään “paperilla”.

Esimerkkinä käyttämäni suunnitelma on toimiva pystymallin A4-sivulla, mutta tavallisella näytöllä se ei toimikaan halutulla tavalla. Seuraavassa kuvassa on punaisella rajattu alue, joka näkyy sivun auetessa.

Kuva 3. Alkuperäinen suunnitelma tavallisella näytöllä

Tuskin asiakas halusi, että sivustosta näkyy pelkkä pääkuva, joka sekin on leikkaantunut toisen henkilön leuan kohdalta. Jotain pitäisi tehdä asian korjaamiseksi.

Kompromissiratkaisuja

Yksi vaihtoehto on pysyä alkuperäisen suunnitelman kuvakorkeudessa, mutta kasvattaa taustakuvaa peittämään koko alue. Tällöin näkyvässä alueessa näkyy alkuperäisen suunnitelman mukaiset asiat eikä pelkkä pääkuva.

Kuva 4. Kuvaa kasvatettu peittämään alue

Ongelmana on kuvan leikkaantuminen, joka tässä tapauksessa se tarkoittaa, että henkilöiden päät eivät mahdu kokonaan kuvaan. Tällainen leikkaantuminen häiritsee erityisesti kuvissa, joissa on ihminen tai eläin, mutta vaikkapa maisemakuvissa se voi toimiakin.

Mikäli kuvan haluaa näkymään kokonaan ja silti näyttää aloitusnäkymässä myös riittävästi muuta sisältöä, on lopputulos seuraava.

Kuva 5. Kuva mahdutettu alueeseen

Käyttämättömät alueet kuvan reunoilla on visuaalisesti huono ratkaisu, ellei kuvassa ole vaikkapa musta tausta, jota voisi taustavärillä jatkaa. Tällaisella taustakuvalla se ei ainakaan ole edes vaihtoehto, sillä tuo näyttää kummalliselta.

Yksi yleisesti käytetty vaihtoehto on tehdä koko sivustosta kapeampi, eli näyttää sisältöä vain kapeammalla alueella ja laittaa reunoille joku sopiva taustaväri.

Kuva 6. Kapealle palstalle tehty sivusto

Tällaisella kapeapalstaisella sivustolla menetetään visuaalisia mahdollisuuksia tehdä sivusta vaikuttavamman näköiset. Lisäksi tässäkin esimerkissä minun piti pienentää kolmea tuotelaatikkoa pääkuvan alapuolella, jotta ne mahtuisivat rinnakkain kapeammalle alueelle.

Paras ratkaisu

Mikä on siis paras ratkaisu? Huomioi asia jo taustakuvaa valitessa. Valitse sellainen taustakuva, joka toimii myös leveässä sommittelussa. Esimerkkikuvassa tärkeää olisi saada molempien henkilöiden päät mahtumaan kuvaan, joten taustakuvaksi pitää valita sellainen, jossa reunoilla on riittävästi “täytettä”. Eli henkilöiden päät eivät saa olla kuvassa liian isolla, vaan pitää osata hahmottaa kuva vaakasuunnassa leveälle alueelle.

Kuva 7. Parempi kuva isolla tausta-alueella

Tällaisesta kuvasta voi tehdä leveällekin näytölle toimivan toteutuksen. Myös optimointi mobiilinäytölle onnistuu mainioisti.

Kuva 8. Sivun ulkoasu paremmalla taustakuvalla

Mikäli asiakkaalla ei ole ollut kuvasta parempaa versiota, eikä muuta kuvaa ole haluttu käyttää, niin mahdollista on myös photoshopata lisää reuna-alueita. Tämä ollaan tehty useille asiakkaille ja lopputulos on ollut hyvä. Aikaahan se vähän vie enemmän, joten ehdottomasti helpointa olisi valita jo alkuun oikeanlainen kuva.

Saku
Founder, CEO and SW nerd of Eeku Oy. Yrittäjä, toimitusjohtaja ja koodinörtti @ Eeku Oy.

Leave a Reply

Your email address will not be published.

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.