Multimedia

Verkkosivun käyttöliittymäsuunnittelu Photoshopissa

Tässä kuvattu prosessi esittelee, miten visuaalinen suunnitelma jalostuu ideasta konkreettiseksi verkkopalvelun käyttöliittymäksi.

Nykyiset verkkopalvelut suunnitellaan lähes poikkeuksetta responsiivisiksi, eli ne mukautuvat eri päätelaitteiden – kuten puhelimien, tablettien ja työpöytälaitteiden – näyttökokoihin. Käyttöliittymäsuunnittelussa tämä tarkoittaa sitä, että layoutit on hyvä suunnitella erikseen eri näyttökokoja varten tai ainakin ottaa huomioon, miten elementit skaalautuvat ja järjestyvät eri resoluutioissa. Layoutin suunnittelussa kannattaa luoda vähintään kaksi suunnittelunäkymää: yksi työpöytänäyttöä ja toinen mobiilinäkymää varten. Tällöin voidaan jo varhaisessa vaiheessa varmistaa, että kaikki sivun elementit toimivat kummassakin näyttökoossa.

Oikeanlaisen suunnittelunäkymän luomiseksi tarvitset kuvaruudunkaappauksen tyhjästä selainikkunasta oikeassa koossa. Tämän voit luoda useammalla eri tavalla.

• Tapa 1: Luo Photoshopissa uusi artboard valitsemalla File > New ja valitsemalla valmiin resoluutio/laitetyyppi (esim. Web Most Common).
• Tapa 2: avaa selain ja kirjoita osoiteriville about:blank. Tämän jälkeen avaa selaimen kehittäjätyökalu (CTRL+SHIFT+I) ja valitse emuloitava viewportin koko - ota tästä näkymästä kuvaruudunkaappaus. Kuvaruudunkaappaus kannattaa tallentaa omaksi tiedostokseen, sillä tätä mallipohjaa voit hyödyntää toistuvasti tulevissa projekteissa.

• Tapa 3: Voit rakentaa leiskan myös jollain UI-suunnitteluun erikoistuneella ohjelmistolla, kuten Figma, Sketch tai Adobe XD. Näiden tarjoamat vektoripohjaiset ratkaisut ovat erittäin suosittu tapa rakentaa käyttöliittymiä eri laitteille.

Toinen tärkeä tekijä verkkopalvelun leiskan suunnittelussa on olemassa olevien värimallien ja esimerkiksi logojen huomioiminen. Jos suunnittelet ratkaisua isolle toimijalle, he toimittavat visuaalisesta ohjeistuksen ilmeestä, kuten yritystunnuksen sijoittelusta, värimaailmasta ja typografiasta. Tämän ohjeistuksen tarkoitus on varmistaa, että lopputulos sopii yrityksen olemassa olevaan brändiin ja viestintämateriaaliin.

Jos kyseessä on pienempi yritys, sivun ulkoasun suunnittelun ohjenuorana toimii yleensä vain logo ja mahdollinen iskulause (slogan). Muu kokonaisuus rakennetaan näiden tekijöiden ympärille.

Alla tutustumme 2kmediat.com:n emosivuston,KK Medioitten, verkkopalvelun taiton luomiseen desktop-ympäristöön. Responsiivisen suunnittelun kannalta on tärkeää miettiä, miten tämä kolmen palstan rakenne käyttäytyy eri näytöillä. Esimerkiksi mobiilissa sivun palstat voivat pinoutua pystysuunnassa 1-2-3 -järjestykseen tai esimerkiksi tärkein sisältö (2. palsta) voidaan nostaa ylimmäksi, jotta se näkyy heti käyttäjälle. Lopullisen taiton näet osoitteessa https://www.2kmediat.com/kkmediat/.

Vaihe 1: materiaalin kokoaminen

Ensimmäinen vaihe palvelun ulkoasun suunnittelussa on materiaalin kasaus. Olemassa olevasta visuaalisesta materiaalista hyödynnettiin logoa:

sekä värimallia, joka koostuu karmiininpunaisesta, laivastonsinisestä, valkoisesta ja mustasta. Lisäksi käytettiin olemassa olevaa Hillfiger-tyylistä kuvakollaasia sloganin korostamiseen.

Vaihe 2: layoutin suunnittelu

Tässä vaiheessa kannattaa sulkea tietokone ja kaivaa esiin paperi ja piirustusvälineet. Perinteinen paperille suunnittelu on usein nopeampaa ja vapauttaa tietokoneen tai ohjelmistojen rajoituksista.

Sivun layout päätettiin rakentaa perinteisen 3-palsta-mallin mukaisesti: 1. ja 3. palstalla esitetään lisätietoja tai mainoksia, ja keskimmäinen (2.) palsta keskittyy varsinaiseen sisältöön. Palstojen leveyssuhteeksi valittiin 2:5:3, jolloin painopiste kohdistuu sisältöön.

Logo ja valikko sijoitettiin tavanomaisesti näkyvimmälle paikalle, sivun yläosaan. Koska palvelulla on myös ulkomaisia käyttäjiä, vaihtoehtoinen englanninkielinen valikko sijoitettiin sivun alaosaan. Alavalikko toistaa ylävalikon rakenteen, jolloin ylä- ja alavalikot muodostavat yhtenäisen kokonaisuuden. Rakennetta kevennettiin pisteytyksellä, joka erottaa eri osiot kevyesti toisistaan.

Värien käytössä päätettiin noudattaa hillittyä ja neutraalia linjaa, joka sopii kaupalliselle sivustolle. Päävärit ovat valkoinen (taustaväri), karmiininpunainen (logo ja 1. palstan tiedote/mainosbanneri) sekä musta (teksti). Tähän mennessä luotu layout näyttää seuraavalta (palstojen 2 ja 3 taustavärinä on esityksen selkeyttämiseksi keltainen):

Tässä vaiheessa layout on selvästi epätasapainoinen, sillä painopiste on liian paljon vasemmalla. Ratkaisuksi valittiin kuvakollaasi, jonka sijoittelulla voidaan tasapainottaa layoutia. Samalla sivustolle tuodaan puuttuva väri, laivastonsininen. Vaihtoehtoina ovat kollaasin sijoittaminen yksittäiseen palstaan (täysin tai osittain), levittäminen kaikkien palstojen leveydelle tai kokonaan erillisen tilan luominen kuvalle.

Parhaat ratkaisut ovat kollaasin sijoittaminen joko jompaankumpaan laitapalstaan tai oman tilan luominen sitä varten. Tässä tapauksessa kollaasi sijoitettiin omalle alueelleen palstojen 2 ja 3 päälle, sillä 1. palsta on varattu mainonnalle, ja kollaasin sijoittaminen 3. palstaan olisi kääntänyt tasapainon toiseen suuntaan. Tällä ratkaisulla sivu tasapainottuu selvästi.

Vaihe 3: Suunnitelman siirtäminen Photoshopiin

Kun taustatekijät ovat valmiit, on aika ryhtyä varsinaiseen työhön ja avata Photoshop. Aloita avaamalla pohjatiedosto tyhjästä selainikkunasta ja tallenna se uudella nimellä. Varmista, että pohjakerros (background layer) on lukittu, jotta sitä ei vahingossa siirretä tai muokata.

Seuraavaksi siirrämme suunnitellun layoutin Photoshopiin. Luomme jokaiselle layoutin osa-alueelle oman tasonsa (Layer).

Tästä eteenpäin työskentely on normaalia Photoshopin peruskäyttöä. Rajaa värilliset alueet valintatyökaluilla, lisää kuvat ja tekstit varattuihin kohtiin omille tasoilleen. Näiden vaiheiden jälkeen jäljellä on vain työn viimeistely.

Sloganissa käytettävä kuva ei istu hyvin sivuun, joten sitä on muokattava. Avaa kuvatiedosto omaan ikkunaan muokkausta varten. Ensimmäisenä tehtävänä on sovittaa kuvan koko sivun mittasuhteisiin, mikä vaatii jonkin verran rajaamista ja venyttämistä. Toisena haasteena on epäselvä tekstin fontti; vaihdamme sen Bank Gothic MT:hen ja korvaamme tekstin yrityksen sloganilla. Tuloksena on huomattavasti parempi lopputulos, mutta kuvan värimaailma ei vielä sovi sivun muuhun tyyliin eikä korosta tekstin sanomaa.

Korostaaksemme asiaa ja korjataksemme asiaa, muutamme surffaajan osuuden kuvasta mustavalkoiseksi poistamalla kuvan kyseisestä osasta väritiedon. Tämä tapahtuu valitsemalla valintatyökalun avulla haluttu alue kuvasta ja antamalla komento Image > Adjustments > Desaturate (pikavalintana SHIFT+CTRL+U).

Lopullinen lopputulos sloganissa käyttämämme kuvan osalta näyttää tältä:

Jäljellä on enää yksi tehtävä: pisteviivoituksen tekeminen leiskaan. Tämä onnistuu helpoiten luomalla uusi sivellin viivoituksen aikaansaamiseksi. Tämä tapahtuu valitsemalla sivellin työkalu aktiiviseksi ja sen valitsemalla sen optioista kohta New Brush:

Aseta aukeavaan valikkoikkunaan haluttu siveltimen koko (tästä tulee pisteen koko), aseta välistys (spacing) 200 %:n ja tallenna sivellin presetiksi tulevaa käyttöä varten.

Tämän jälkeen voit käyttää sivellintä normaalien siveltinten tapaan ja se tuottaa mitä täydellisintä katkoviivoitettua jälkeä.

Layout on nyt valmis ja voidaan viedä selaimeen. Tiedosto tallennetaan, ja voimme alkaa suunnittelemaan HTML- ja CSS-rakennetta, jonka pohjalta varsinainen sivusto toteutetaan.

Artikkelin tiedot

Otsikko: Verkkosivun käyttöliittymäsuunnittelu Photoshopissa

Kuvaus: Opi luomaan visuaalisesti houkutteleva ja toimiva verkkosivun layout Photoshopissa vaihe vaiheelta – väreistä typografiaan.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: 19.5.2025

Kirjoittaja: Keijo Kortelainen

Keijo on verkkoliiketoiminnan ja digimarkkinoinnin asiantuntija, joka on auttanut satoja suomalaisia yrityksiä kasvattamaan näkyvyyttään ja myyntiään verkossa. Keijolla on BBA-tutkinto verkkokaupasta (BBA in eCommerce) sekä lähes kolmen vuosikymmen kokemus web-teknologioista (mm. HTML, CSS, JavaScript, PHP ja SQL) ja sisältömarkkinoinnista. Hän toimii yrittäjänä, konsulttina ja freelancerina – ja on jakanut osaamistaan 2kmediat.com-sivustolla yli 20 vuoden ajan.

LinkedIn