Verkkosivun suunnittelu

Hyvin suunniteltu on puoliksi tehty. Sama pätee myös nettisivuihin. Tässä artikkelissa käydään läpi, mitä kaikkea verkkosivun suunnitteluun liittyy. Verkkosivu kehitys eli koodaaminen jätetään toiseen artikkeliin. Ennen kuin avaamme suunnitteluohjelman, meidän täytyy miettiä tavoitteita.

Kenelle verkkosivut suunnitellaan?

Minä teen verkkosivuja yrityksille, mutta yritys haluaa tietenkin miellyttää asiakkaittensa.  Yrittäjällä on varmasti mielipiteitä sivun ulkoasusta, mutta asiakkaan näkemyksen tulisi mennä näiden edelle.

Verkkosivun suunnittelijaa auttaa, jos hän tuntee yrityksen asiakkaat. Tähän tarkoitukseen hän voi luoda esimerkiksi asiakaspersoonat. Asiakaspersoona on puoli fiktiivinen hahmotelma yrityksen yleisistä asiakkaista. Se voi olla esimerkiksi Ylermi yrittäjä tai Pinja parturi-kampaaja. Tavoitteena on luoda samaistuttava henkilö, joka muistuttaa meitä asiakkaan näkökulmasta.

Mikä on sivun tavoite?

Yritykset haluavat myyntiä, mutta verkkosivuilla voi tehdä paljon muutakin. Tiedon jakaminen ja järjestely on esimerkiksi Wikipedian tavoite. Se varsinainen myyntikin voi olla pidempi prosessi, jolloin verkkosivuilla tavoitellaan lähinnä yhteydenottoja asiakkailta.

Kun selkeä tavoite on mielessä voimme miettiä, miten johdatamme asiakkaan siihen. Asiakkaan matkaa voi kuvata esimerkiksi palvelupolulla, mutta mitään hienoa kuvaajaa ei tarvitse aina tehdä. Riittää kunhan suunnittelija tietää, mitä asiakkaan tulee tehdä ja tietää ennen ostoa tai yhteydenottoa.

Sivuston rakenteen suunnittelu

Nyt tekisi mieli jo hypätä etusivun suunnitteluun, mutta maltetaan vielä. On hyvä miettiä verkkosivun suurempaa rakennetta. Mahtuuko kaikki tieto esimerkiksi yhdelle sivulle vai tuleeko verkkosivuille satoja tuotesivuja? Onko palvelun ominaisuudet omina sivuina on vai riittääkö pieni lista jossain kohtaa etusivua.

Sivukartta syntyy, kun laitamme nämä sivut listalle ja luomme niiden välille hierarkian.  sivukartasta on olemassa monenlaisia versioita ja se voidaan tehdä myös visuaalisesti kuten alla olevassa kuvassa.Sivu kartan avulla voi miettiä myös asiakkaan etenemistä sivustolla.

Tässä vaiheessa kannattaisi myös tietää, millä termeillä yritystä ja sen palveluita haetaan. Jos halutaan hienostella voidaan tehdä niin sanottu hakusanatutkimus. Siinä kartoitetaan,  millä termeillä vanhat sivut näkyvät ja mitkä ovat eniten haettuja termejä tietyllä toimialalla. Tällöin sivut voidaan nimetä ja optimoida sopivien hakutermin mukaisesti.

Yksittäisen sivun suunnittelu

Nyt pääsemme viimein yksittäisen sivun suunnitteluun. Niin sanotulla rautalanka mallilla tarkoitetaan sivun rakennetta. Se kertoo, mitä osioita sivuilla on, missä järjestyksessä ja mitä niiden sisällä mahtaa olla. Yleensä rautalankamalli on tarkoituksenmukaisesti harmaa tai hyvin tylsän näköinen, sillä rakenne halutaan eroon visuaalisista elementeistä.

Moni suunnittelija hyppää rautalanka mallin yli suoraan visuaalisen suunnitelman tekemiseen. Tämä ei ole suuri rikos etenkin, jos kyseessä on kokenut suunnittelija.  Huolellisesti suunniteltu rakenne kuitenkin varmistaa, että verkkosivuvierailu etenee loogisesti.

Visuaalinen suunnittelu

Taiteilu voi alkaa. Täydellisessä maailmassa verkkosivun visuaalinen suunnittelu olisi yritysilmeen ja harkitun verkkosivun rakenteen yhdistämistä. Todellisuudessa lähtötilanne voi olla kasa hauskoja ideoita erilaisista elementeistä.

Visuaalisen suunnittelun voi palastella väreihin, kuviin, topography eli fontteihin ja layouttiin.  Tietenkin varsinaiset tekstit vaikuttavat myös näihin asioihin.

Värit

Kuten aiemmin on todettu, nettisivujen pitäisi olla linjassa yrityksen ilmeen kanssa. Tämä pätee myös väreihin. Jokaisella sivustolla on jonkinlainen musta ja valkoinen väri, joita käytetään teksteissä yleensä taustassa. Varsinaisen väripaletin rakentamisen voi aloittaa valitsemalla pääväri. Valinnassa on hyvä miettiä mielikuvaa ja tunnetta, jota väri viestii. Alla on lueteltu tunteista, joita liitetään yleisiin väreihin.

• Sininen - luottamus, rauhallisuus, uskollisuus
• Punainen - intohimo, rakkaus, varoitus
• Keltainen - luovuus, onnilleisuus, lämpö
• Vihreä - luonto, kasvu, tasapaino
• Oranssi - ilo, energia, optimismi
• Violetti - kuninkaallinen, spirituaalinen
• Pinkki - herkkä, seksuaalinen, tunteikas
• Ruskea - luotettava, raju
• Valkoinen - puhdas, pelkistetty
• Musta - dramaattinen, sivistynyt

Värin valintaan vaikuttaa myös kilpailijat. Jos sinulla on vain yksi kilpailija, älä valitse ainakaan hänen käyttämään väriään. Jos alallasi on jo kaikki värit käytössä, voit valita sen sinulle sopivimman. 

Pääväriä voi täydentää tehosteväreillä. Yksi sellainen on hyvä, kaksi on ihan ok ja kolmanteen pitää olla jo hyvä syy. Tehostevärien valintaan pätee väriteoria, joka asettaa tiettyjä suositeltuja sääntöjä värien valintaan. Tällainen sääntö on esimerkiksi vastavärien käyttö. Internetistä löytyy helppoja työkaluja värisävyjen valintaan kuten esimerkiksi Adobe color.

Tule tarvitsemaan tummempia ja vaaleampia sävyjä valitsemistasi väreistä. Myös nämä vaihtoehtoiset sävyt on hyvä määritellä, jotta väripaletti ei lähde rönsyilemään. Niitä käytetään esimerkiksi painikkeiden eri tiloissa tai vaikka taustaelementeissä.

Kuvat

Kuvat vaikuttavat paljon verkkosivuihin. Ensin sinun on valittava aiotko käyttää valokuvia vai kenties piirroksia tai grafiikkaa. Voit tietenkin käyttää molempia, mutta tällöin kannattaa miettiä, miten saat ne istumaan samaan tyyliin.

Kuvia ja grafiikkaa löytyy internetistä paljon, mutta geneeriset kuvapankkikuvat erottuvat usein negatiivisessa mielessä. Taitava suunnittelija saa nekin toimimaan tarkalla valinnalla ja pienellä muokkauksella. Suurin huomio kannattaa antaa etusivun ensimmäisille kuville tai muiden tärkeiden sivujen grafiikalle. Alla on muutamia ilmaisia kuvapankkeja ja esimerkki geneerisestä sekä hitusen tuunatusta kuvapankkikuvasta.

• Unsplash
• Pexels
• Pixabay
• Gratisography

‍

Typografia

Typografia tarkoitetaan käytettyjä fontteja ja tekstin asettelua. Fonttien tulisi olla jälleen linjassa edellisten päätösten eli kuvien ja värien kanssa. Yleensä kirjasimen valinnassa tasapainoillaan selkeyden ja poikkeavuuden välillä. Internetistä löytyy paljon hauskoja Fontteja mutta tekstin tulee aina olla luettavaa.

Yleensä verkkosivuille valitaan yksi otsikkofontti ja yksi leipätekstifontti. Fonttien yhdistäminen on varsinainen taiteenlaj,i mutta kohtuus on tässäkin suotavaa. Voit esimerkiksi valita otsikko- ja leipätekstifontin samasta kirjasinperheestä. 

Löydät ison kasan ilmaisia fontteja Google fonts -palvelusta.

Layout 

Layout viittaa elementtiin järjestykseen. Sille ei ole kunnollista suomenkielistä vastinetta, mutta se tarkoittaa jotain pohjapiirustuksen ja järjestyksen kaltaista asiaa. Verkkosivuilla se tarkoittaa, miten eri elementit on järjestetty sivulle. Hyvin yleinen tapa on järjestää elementit kahteen palstaan. Vasemmassa laidassa on kuva ja oikeassa laidassa on tekstiä. Toinen vaihtoehto on keskittää elementit yhteen palstaan.

Näitäkin sääntöjä voi tietenkin rikkoa etenkin jos tietää mitä tekee. tällöin tavoitteena on tehdä jotain erilaista ja erottuvaa. Riskinä on tietenkin kävijän hämmentyminen, niin pahasti että hän poistuu sivulta.

Mobiiliversion suunnittelu

Olemme jo pitkällä suunnitteluprosessissa, kun rakenne ja visuaaliset elementit ovat paikallaan. Tässä vaiheessa meillä on jonkinlainen piirustus olemassa. Yleensä se on tehty pöytäkoneen näytölle sopivaksi. Mutta entäs se kännykkä ja muut pienet näytöt? Eivätkö ne ole tärkeämpiä kuin pöytäkoneet?

Niin sanottu mobile-first on yksi lähestymistapa suunnitteluun. Hieman yksinkertaistaen se tarkoittaa sivuston tai sovelluksen suunnittelua ensisijaisesti mobiilinäkymään. On aivan totta, että nykypäivänä useimmat verkkosivut saavat huomattavan osan liikenteestä näistä pienistä laitteista. Mobiilisovellusten eli äppien suunnittelussa lähtökohta on selkeämpi, kun suuria näyttöjä ei tarvitse miettiä. Verkkosivun tulee kuitenkin toimia hyvin erilaisilla näytöillä.

Useimmat verkkosivujen suunnittelijat aloittavat tänäkin päivänä työpöytänäkymästä, sillä sisällön pienentäminen ja piilottaminen on helpompaa kuin sen lisääminen. Hyvä suunnittelija tekee kuitenkin versiot tabletille, kännykälle ja mahdollisesti myös poikkeuksellisen suurelle näytölle.

Mitä tapahtuu verkkosivun suunnittelun jälkeen?

Täydellisessä maailmassa verkkosivun kehittäminen eli koodaaminen alkaa vasta, kun suunnitelma on valmiina. Todellisuudessa kehittäjä yleensä aloittaa sivu rakentamisen jo huomattavasti tätä pistettä aiemmin. Viestinnällinen haaste tulee vastaan, jos suunnittelija ja kehittäjä ovat eri henkilö.

Suunnittelijan tulee kertoa selkeästi sivuston ja suunnitelman tavoite ja erotella toiminnallisuudet, jotka eivät käy ilmi suunnitelmasta. Myös edellisessä luvussa mainitut versiot eri näyttökooista helpottavat kehittäjän työtä. Mitä vähemmän kehittäjän tarvitsee tehdä sivuston ulkoasuun vaikuttavia päätöksiä, sen parempi.

Työkaluja suunnitteluun

Verkkosivuun ja käyttöliittymien suunnitteluun on lukuisia ohjelmia. Tällä hetkellä yksi suosituimmista on Figma. Kyseinen ohjelma muistuttaa hieman kuvanmuokkaustyökalua, mutta on esimerkiksi photoshoppia huomattavasti yksinkertaisempi. Suunnittelija saattaa kuitenkin muokata kuvan photoshopissa ja asetella sen figmassa. Alla on lista erilaisista sovelluksista.

• Figma
• Sketch
• Adobe XD
• Adobe Photoshop
• Adobe Illustrator

Hyvä suunnittelija tasapainoilee

Verkkosivun suunnittelu on usein tasapainottelua. Jokainen haluaa oman verkkosivun erottuvan kilpailijoista. Liian räikeät ja vaikeat nettisivut kuitenkin karkoittavat kävijät. Yllättävän monella elementillä on tuttu ja hyväksi todettu paikka, eikä niitä kannata lähteä siirtämään. Hyvä suunnittelija saa verkkosivu tuntumaan tutulta ja erilaiselta yhtäaikaa.