Layoutin suunnittelu
Julkaistu 18.6.2021
PƤivitetty 25.8.2023
1. LAYOUT OSANA KOTISIVUPROJEKTIA
Layoutin suunnittelu ja nettisivujen synnyttƤmƤ ensivaikutelma yrityksestƤ
Millaisen ensivaikutelman haluat luoda potentiaalisille asiakkaillesi ja yhteistyƶkumppaneillesi tavatessasi heidƤt ensimmƤistƤ kertaa?
Haluat antaa itsestƤsi ja yrityksestƤsi asiantuntevan, luotettavan ja osaavan kuvan?
Haluat erottua kilpailijoistasi positiivisella tavalla ja jƤƤdƤ mieleen?
Toivot osaavasi vƤlittƤƤ tiettyjƤ arvoja ja mielikuvia, jotka vaikuttavat positiivisesti ostopƤƤtƶkseen?
Kun tarvitset yrityksellesi tehokkaat kotisivut, ota yhteyttƤ
Rakennamme sinulle liiketoimintaasi tukevat sivut maailman suosituimmalla kotisivualustalla yli 2400 sivuston kokemuksella.
Leo SƤvel
āEnsivaikutelman voi antaa vain kerranā
Fakta on se, ettƤ ensivaikutelman voi antaa vain kerran. Ensivaikutelma yrityksestƤ voi syntyƤ esimerkiksi mainoksen, somen tai vaikuttajamarkkinoinnin vƤlityksellƤ tai miksei vaikkapa kohtaamisessa messuilla. Kanavia on monia.
Ensivaikutelma saattaa kuitenkin syntyƤ jo aiemmin asiakkaan etsiessƤ tietoa yrityksestƤsi, tuotteistasi ja palveluistasi tai ylipƤƤnsƤ vertaillessa potentiaalisia palveluntarjoajia verkossa. Usein ensivaikutelma syntyykin itseasiassa yrityksesi nettisivuilla.
Mutta tiedƤtkƶ, millaisia mielikuvia yrityksesi nettisivut potentiaalisissa asiakkaissasi herƤttƤvƤt ā ovatko ne sellaisia kuin toivoisit? EntƤ osaatko sanoa, mitkƤ tekijƤt vaikuttavat nƤiden mielikuvien syntyyn?
Nettisivujen visuaalisen ilmeen vaikutus
Nettisivujen visuaalinen ilme vaikuttaa monin tavoin sekƤ yrityksestƤ syntyviin mielikuviin ettƤ nettisivujen kƤytettƤvyyteen. Hyvin suunniteltu visuaalinen ilme viestii yrityksen toiminnasta ja arvoista. Se tukee tekstin sanomaa ja kohdistaa huomion haluttuihin asioihin.
Mielikuvien muovaamisen lisƤksi toimiva ulkoasu ohjaa sivustovierailijaa haluttuun suuntaan ja ennen kaikkea auttaa lukijaa hahmottamaan kokonaisuuksia ja omaksumaan sivuilla kerrottua. Ja myƶs se, millaiseksi nettisivujen kƤyttƤjƤkokemus muodostuu, vaikuttaa yrityksestƤ syntyviin mielikuviin.
Nettisivuilla visuaalinen ilme on yleensƤ ensimmƤinen asia, johon huomio kiinnittyy, eikƤ siis lainkaan yhdentekevƤ.
Ensivaikutelma on se, jonka perusteella luodaan mielikuvia, kun ei vielƤ yrityksestƤ muuta tiedetƤ. NƤmƤ mielikuvat eivƤt tietenkƤƤn vƤlttƤmƤttƤ vastaa todellisuutta, mutta se ei estƤ niiden syntymistƤ. Mielikuva syntyy tahtomattakin ja voi vaikuttaa ostopƤƤtƶkseen.
āJotta informatiivinen ja vakuuttava teksti tulisi luetuksi, se vaatii kaverikseen miellyttƤvƤn ulkoasunā
Mielikuvat syntyvƤt kokonaisuudesta, joka muodostuu sivujen kƤytettƤvyydestƤ, kuten nopeudesta, rakenteesta ja selkeydestƤ sekƤ sisƤllƶstƤ, kuten kuvista ja teksteistƤ.
Ensivaikutelma muodostuu todennƤkƶisesti kuitenkin jo ennen kuin sanaakaan tekstisisƤllƶstƤ on luettu.
Vaikka nettisivujen suunnittelussa tekstisisƤltƶƤ usein pidetƤƤn tƤrkeimpƤnƤ elementtinƤ, on visuaalinen ilme ja layoutin suunnittelu kuitenkin lƤhes yhtƤ tƤrkeƤ.
Jotta informatiivinen ja myyvƤ teksti tulisi luetuksi, se vaatii kaverikseen miellyttƤvƤn ulkoasun, joka houkuttelee tekstin pariin, tekee sen lukemisesta vaivatonta ja auttaa hahmottamaan tekstissƤ sanottua.
Toisaalta hyvƤn tekstisisƤllƶn puuttuessa on turha myƶskƤƤn satsata visuaaliseen ilmeeseen.
Nettisivujen layoutin suunnittelu
Jos nettisivuihin halutaan aidosti panostaa, kannattaa nettisivun suunnittelussa visuaalisen ilmeen osalta hyƶdyntƤƤ ammattitaitoista graafikkoa. Graafikon toteuttama nettisivujen layout, puhekielessƤ useimmiten ”leiska”, on verkkosivujen visuaalisen ilmeen suunnitelma.
KƤytƤnnƶssƤ leiskassa on kyse graafikon tekemistƤ staattisista kuvista, joista kƤy ilmi, sekƤ nettisivut tilanneelle asiakkaalle ettƤ niiden teknisestƤ toteutuksesta vastaavalle koodarille, millainen sivujen ulkoasu tulee olemaan.
Layoutia suunnitellessaan graafikko hahmottelee kotisivujen rakennetta ja ulkoasua: miten teksti ja kuvat yhdessä muodostavat selkeän ja visuaalisesti kiinnostavan kokonaisuuden.
Leiska on aina suunnitelma, eikƤ se vƤlttƤmƤttƤ vastaa jokaista yksityiskohtaa myƶden sivujen lopullista ulkoasua teknisellƤ alustalla ā leiskaa kun joudutaan soveltamaan esimerkiksi erikokoisille nƤytƶille sopiviksi. Layoutin suunnittelu kuitenkin luo raamit sille, miltƤ valmiit nettisivut pƤƤpiirteittƤin tulevat nƤyttƤmƤƤn.
2. NETTISIVUJEN SUUNNITTELU ITSE VAI GRAAFIKON SUUNNITTELEMA LAYOUT
Nettisivujen tekeminen itse
Verkkosivujen tekeminen on tƤnƤ pƤivƤnƤ erilaisten valmiiden pohjien ja sapluunoiden ansiosta mahdollista myƶs ilman koodauosaamista ja graafista osaamista.
Visuaalisesti erottuvia sivuja ei tietenkƤƤn saavuteta valmiilla ratkaisuilla, mutta ihan kivan nƤkƶisiƤ sivuja voidaan toteuttaa vaikka tietyille aloille suunniteltujen sapluunoiden pohjalta.
TƤllaiset ratkaisut ovat ”ihan ok” esimerkiksi silloin, kun nettisivujen on tarkoitus toimia kƤyntikortin tavoin, niin ettƤ sieltƤ lƶytyvƤt yrityksen aukioloajat ja yhteystiedot.
Ihan kiva ei kuitenkaan riitƤ silloin, jos verkkosivujen tavoitteena on oikeasti erottua kilpailijoista, kasvattaa tunnettuuttaa ja jƤƤdƤ asiakkaiden mieleen.
Graafikon suunnittelema layout
Ammattitaitoisella graafikolla on nƤkemystƤ siitƤ, miten luodaan brƤndin mukainen visuaalinen yritysilme.
Graafikon suunnittelema layout ei ainoastaan vahvista ja tue tekstiƤ, vaan on visuaalista viestintƤƤ jo itsessƤƤn. Harkituilla kuvilla, oikeanlaisella sommittelulla, vƤrivalinnoilla ja typografialla sekƤ erilaisilla visuaalisilla elementeillƤ, voidaan vaikuttaa mielikuviin, joita verkkosivut potentiaalisissa asiakkaissa herƤttƤvƤt.
Graafikon layouttiin kannattaa panostaa etenkin silloin, jos halutaan luoda yhtenƤinen yritysilme, jota on mahdollista hyƶdyntƤƤ nettisivuja laajemmin myƶs muussa yrityksen viestinnƤssƤ ja markkinoinnissa.
3. MISTĆ LAYOUTIN SUUNNITTELUSSA LĆHDETĆĆN LIIKKEELLE?
Kirkastetaan sivuston tarkoitus
Layoutin suunnittelussa kannattaa lƤhteƤ liikkeelle sivuston tarkoituksen mƤƤrittelystƤ.
On turha luoda kaunista visuaalista ilmettƤ, jos se ei palvele tarkoitusta. Sivuston tarkoitus on syytƤ kirkastaa jo nettisivujen tekstisisƤltƶjƤ suunniteltaessa.
Raikkaan nƤkƶinen, hyvƤllƤ tavalla erottuva nettisivusto voi kƤytettƤvyytensƤ puolesta kehno, jos layoutissa ei ole huomioita sitƤ, miten visuaalisella ilmeellƤ olisi voitu helpottaa liikkumista sivuilla ja esimerkiksi korostaa vierailijan kannalta keskeisiƤ elementtejƤ.
Suunnitellaan nettisivut oikeille kohderyhmille
Nettisivujen tarkoituksen lisƤksi kohderyhmƤ on asia, joka mƤƤrittelee layoutin suunnittelua.
KohderyhmƤ vaikuttaa layoutin suunnitellussa kahteen merkittƤvƤƤn asiaan. Siihen, millainen visuaalinen ilme puhuttelee kohderyhmƤƤ? Ja tulisiko layoutissa huomioida joitakin juuri tƤmƤn kyseisen sivuston kohderyhmƤlle ominaisia piirteitƤ?
On tƤrkeƤƤ, ettƤ yrittƤjƤ tuntee oman kohderyhmƤnsƤ, jotta graafikko voi huomioida sivustovierailijoiden erityistarpeet ja mieltymykset layoutin suunnittelussa.
Myƶs tekstien suunnittelu on mahdotonta, jos kaikille projektin osapuolille ei ole selvƤƤ, keitƤ varten tekstiƤ kirjoitetaan.
HyƶdynnetƤƤn olemassa olevaa yritysilmettƤ
Nettisivujen visuaalinen ilme kannattaa tietenkin rakentaa yhtenƤiseksi muun yritysilmeen kanssa.
Monilla uusilla yrityksillƤ ulkoasun suunnittelussa ensimmƤinen askel on logon suunnittelu ja seuraava verkkosivujen suunnittelu.
YhtenƤisen ilmeen kannalta onkin ihanteellisinta, jos nettisivujen layoutin suunnitteleva graafikko suunnittelee myƶs logon.
Toki nettisivujen visuaalista ilmettƤ voidaan lƤhteƤ suunnittelemaan myƶs jo olemassa olevan logon ja muiden materiaalien pohjalta.
āVƤripaletti lƤhtee hahmottumaan yrityksen logon kauttaā
Usein nettisivujen suunnittelussa vƤripaletti lƤhtee hahmottumaan juurikin logon kautta, jos muuta visuaalista ilmettƤ ei vielƤ ole linjattu.
Nettisivujen suunnittelua voi mƤƤrittƤƤ myƶs jo olemassa oleva graafinen ohjeisto, jossa on valmiiksi linjattu visuaalinen ilme ja ohjeet esimerkiksi erilaisten logovaihtoehtojen, typografian ja vƤrien kƤyttƶƶn.
Layoutin suunnittelussa kannattaa kartoittaa myƶs kilpailevien yritysten nettisivuja ja esimerkiksi selvittƤƤ toistuuko sivuissa jotkin tietyt elementit tai vƤrimaailma? Olennaisempaa kuin tiettyyn muottiin mukautuminen on kuitenkin pohtia, miten yritys voisi erottua tƤstƤ joukosta edukseen.
Asetetaan asiakkaan toiveet etusijalle
Mahdollisen graafisen ohjeiston ja logon lisƤksi asiakkaan toiveet ovat tietenkin olennaisessa osassa, kun aloitetaan layoutin suunnittelu.
Millaisia tunteita, mielikuvia ja arvoja yritys itse toivoisi nettisivujen visuaalisen ilmeen vƤlittƤvƤn? Halutaanko toiminnasta vƤlittƤƤ vaikkapa dynaaminen ja nuorekas tai perinteikƤs ja kokenut kuva?
EntƤ mitƤ asioita nettisivuilla on syytƤ korostaa ja mitkƤ asiat puolestaan ovat toissijaisempia?
Jos yrityksen identiteettiin kuuluu vahvasti vaikkapa helposti lƤhestyttƤvyys ja palveluissa halutaan korostaa vaivattomuutta, tulee nƤiden arvojen nƤkyƤ myƶs nettisivujen visuaalisessa selkeydessƤ ja positiivisessa yksinkertaisuudessa.
āGraafikon ja asiakkaan yhteistyƶ on avainasemassaā
Jos asiakkaalle ei ole selvƤƤ brƤndi-identiteettiƤ tai toiveita sen suhteen, millainen kuva yrityksestƤ halutaan vƤlittyvƤn, on graafikon vaikea lƤhteƤ luomaan selkeƤsti erottuvaa visuaalista ilmettƤ.
Graafikon ja asiakkaan yhteistyƶ onkin avainasemassa onnistuneen, kaikkia osapuolia miellyttƤvƤn lopputuloksen syntymisessƤ.
Panostetaan tekstisisƤltƶƶn
Nettisivujen tekstisisƤllƶillƤ on myƶs keskeinen rooli siinƤ, millaiseksi visuaalinen ilme muodostuu.
Tekstit mƤƤrittƤvƤt pitkƤlti sen, millaisia osioita layouttiin voidaan suunnitella ja layoutin suunnittelu puolestaan mƤƤrittƤƤ sen, miten tekstit pƤƤsevƤt oikeuksiinsa. Siksi tekstit suunnitellaan ja kirjoitetaan lƤhes poikkeuksetta ennen kuin aloitetaan layoutin suunnittelu.
TekstiƤ ei pitƤisikƤƤn koskaan kirjoittaa vain valmiin layoutin ātƤytteeksiā, koska silloin nettisivujen ulkoasua ei ole voitu suunnitella aidosti sen tavoitteita ja kohderyhmiƤ ajatellen.
LƤhdetƤƤn liikkeelle etusivun suunnittelusta
Layoutin suunnittelu aloitetaan yleensƤ etusivusta.
Kun kƤvijƤ tulee yrityksen verkkosivuille, etusivu on monesti ensimmƤinen asia, jota hƤn tarkastelee. Etusivu mƤƤrittƤƤ sen, millaisen ensivaikutelman kƤvijƤ saa yrityksestƤ, ja siksi sen tƤytyy olla ulkoasultaan informatiivinen ja ammattitaitoisen nƤkƶinen.
Etusivun suunnittelussa graafikko lyƶkin lukkoon sivujen visuaalisen ilmeen vƤri- ja fonttivalintojen kautta. Etusivun valinnat siis yleensƤ mƤƤrittƤvƤt myƶs, miltƤ muu sivusto tulee nƤyttƤmƤƤn.
āEnsimmƤisellƤ vilkaisulla pitƤisi kƤydƤ ilmi, minkƤ alan yritys on kyseessƤā
Sivustovierailijalle pitƤisi jo heti ensimmƤisellƤ vilkaisulla olla selvƤƤ, minkƤ alan yritys on kyseessƤ.
Visuaalisesti toimiva tapa on kiteyttƤƤ etusivulle yrityksen toiminta-ajatus sloganin tai muun tekstin sekƤ nƤyttƤvƤn kuvan muodossa.
Myƶs etusivun rakenne kannattaa suunnitella heijastamaan koko sivuston sisƤltƶƤ.
Erilaiset palvelut on hyvƤ sijoittaa useammalle alasivulle, mutta tuoda yrityksen palveluvalikoima esille jo etusivulla. TƤmƤ auttaa vierailijaa navigoimaan sivustolla ja hahmottamaan yrityksen tarjontaa.
Etusivulle nostetuilla elementeillƤ ja sivuston sisƤisillƤ linkeillƤ voidaan helposti kiinnittƤƤ sivustovierailijan huomio valikoituihin palveluihin ja tuotteisiin. Ja samalla ne auttavat parantamaan sivuston kƤytettƤvyyttƤ ja hakukonenƤkyvyyttƤ.
Haluaisitko houkutella nettisivuillasi enemmƤn liidejƤ?
Ilmainen mailisuoramme tarjoaa yli 12 testatusti toimivaa keinoa kasvattaa myyntiƤsi verkkosivujesi avulla. Tilaa kattava vinkkipaketti suoraan sƤhkƶpostiisi alla olevalla lomakkeella.
Leo SƤvel
CEO, Partner
4. LAYOUTIN SUUNNITTELUN PERUSTEET
Millainen on hyvƤ rakenne nettisivuille?
Verkkosivujen visuaalisen ilmeen suunnitteluun vaikuttaa olennaisesti se, onko sivu perinteinen useammasta alasivusta koostuva sivusto vai niin kutsuttu onepager, jossa kaikki sisƤltƶ on samalla sivulla.
Sivujen rakennetta suunnitellaan jo tekstien kirjoittamisvaiheessa, jolloin pƤƤtetƤƤn esimerkiksi se, mille kaikille palveluille (avainsanoille) tehdƤƤn omat alasivunsa.
MikƤli tekstimateriaalia on runsaasti, on jƤrkevintƤ jakaa palvelut omille alasivuilleen. MikƤli kyseessƤ taas on vaikkapa yhden henkilƶn tai yksittƤisen tuotteen esittely, on onepage-sivu varteenotettava vaihtoehto.
āOnepagereiden hakukonenƤkyvyys on yleensƤ heikompiā
Nettisivuston rakennetta suunniteltaessa on hyvƤ olla tietoinen, ettƤ onepagereiden hakukonenƤkyvyys on yleensƤ merkittƤvƤsti heikompi kuin sivuston, jossa jokaiselle aihealueelle on omat alasivunsa.
TƤmƤ johtuu siitƤ, ettƤ jokainen palvelu tai tuote tarvitsee oman sivun, jotta sillƤ voisi olla edellytyksiƤ lƶytyƤ hakukoneista palvelun tai tuotteen nimellƤ (tai muulla sivulla kƤytetyllƤ avainsanalla).
HakukonenƤkyvyys edellyttƤƤ, ettƤ kyseisestƤ aiheesta on sivulla kattavasti informaatiota, ja sivu ikƤƤn kuin optimoidaan tietyille termeille. Useammasta yksittƤisestƤ sivusta koostuva verkkosivusto mahdollistaa sen, ettƤ jokaiselle palvelulle tai tuotteelle on oma linkkinsƤ, mikƤ sekin on tƤrkeƤ hakukonenƤkƶkulmasta.
Toisaalta myƶs one page -sivulle on mahdollista saada hyvƤ nƤkyvyys blogitekstein tai vastaavien artikkeleiden avulla. TƤllƶin tƤrkeille avainsanoille optimoidaan artikkeleita, joiden avulla nƤkyvyyttƤ on mahdollista lisƤtƤ.
(One page -sivu johon tuotetaan uutta, mielenkiintoista sisƤltƶƤ blogin muodossa saa todennƤkƶisesti jopa enemmƤn nƤkyvyyttƤ kuin perinteinen layout niukoilla staattisilla sisƤllƶillƤ ja ilman blogia.)
āVisuaalisilla ratkaisulla voidaan korostaa sivuston rakennettaā
Vaikka sivurakenne on layoutin suunnitteluvaiheessa todennƤkƶisesti jo selvillƤ, voidaan visuaalisen ilmeen avulla edelleen korostaa esimerkiksi tiettyjƤ alasivuja, palveluita ja osa-alueita tekstissƤ. Esimerkiksi navigaatiovalikon vƤrivalinnoilla voidaan nostaa esille jokin haluttu alasivu, jota halutaan korostaa.
Sivuille tarvitaan houkuttelevat CTA-painikkeet ā ai mitkƤ?
CTA:t eli Call to Action -painikkeet ovat layouttiin suunniteltavia painikkeita, jotka kehottavat sivustovierailijaa tekemƤƤn erilaisia toimenpiteitƤ.
Painikkeet voivat ohjata suoraan toimintaan, kuten vaikkapa tilaamaan tuotteen tai soittamaan yritykselle, tai ne voivat ohjata esimerkiksi lukemaan lisƤtietoa aiheesta ja tutustumaan palveluihin ensin tarkemmin.
YhtƤ kaikki painikkeiden taakse piilotetut linkit vievƤt vierailijan esimerkiksi tietylle palvelusivulle, yhteydenottolomakkeeseen tai verkkokauppaan.
āPainikkeita sijoitetaan paikkoihin, joissa vierailija voisi olla valmis ottamaan seuraavan askeleenā
CTA-painikkeita sijoitetaan sivuilla paikkoihin, joissa sivustovierailija voisi olla valmis ottamaan seuraavan askeleen ja toimimaan.
Esimerkiksi etusivulle nostetun lyhyehkƶn palvelukuvauksen luettuaan sivustovierailija haluaa todennƤkƶisesti vielƤ lisƤtietoa ennen ostopƤƤtƶstƤƤn, joten sen vieressƤ tai alapuolella on oiva paikka ālue lisƤƤā -tyyppiselle painikkeelle, joka ohjaa palvelusivulle eli kuljettaa vierailijaa ostopolulla eteenpƤin.
Palvelusivun ensimmƤisen tekstiosion jƤlkeen sivustovierailija voi olla jo valmis ottamaan yritykseen yhteyttƤ, ja siihen voikin sijoittaa esimerkiksi yhteydenottosivulle ohjaavan Call to Cction -painikkeen.
MiltƤ sivut nƤyttƤvƤt mobiilissa?
Responsiivisuus on tƤnƤ pƤivƤnƤ oletusarvo kaikilla nettisivuilla, koska valtaosa netinkƤyttƤjistƤ tutustuu yritysten verkkosivuihin nimenomaan mobiililaitteilla.
Nettisivujen pitƤƤ siis toimia moitteettomasti ja tietenkin myƶs nƤyttƤƤ hyvƤltƤ kaiken kokoisilla ruuduilla. Responsiivisuus on ehdoton vaatimus paitsi kƤyttƤjƤkokemuksen myƶs hakukonenƤkyvyyden kannalta.
Uudet verkkosivut skaalautuvatkin lƤhes automaattisesti eri nƤyttƶko`oilla kƤytettƤviksi. YleensƤ kuitenkin vƤhintƤƤnkin pieni hienosƤƤtƶ nettisivujen mobiiliversiossa on automaattisen skaalautuvuuden lisƤksi paikallaan.
āSkaalautuvien sivujen ulkoasu ei vastaa ilmettƤ, joka voidaan saavuttaa ensisijaisesti mobiilia varten suunnitellulla layoutillaā
On silti hyvƤ pitƤƤ mielessƤ, ettƤ skaalautuvien nettisivujen ulkoasu ei kuitenkaan vastaa visuaalista ilmettƤ, joka voidaan saavuttaa, jos layout on suunniteltu ensisijaisesti mobiilia varten.
SiispƤ jos verkkosivujen mobiilikƤytettƤvyyteen ja visuaaliseen toimivuuteen halutaan oikeasti panostaa ja tarjota mobiilikƤyttƤjille paras mahdollinen kƤyttƤjƤkokemus, on graafikolta syytƤ tilata layout erikseen myƶs mobiilia varten.
MitƤ pitƤƤ tietƤƤ typografiasta ja sopivan fontin valinnasta?
Layoutin suunnittelu pitƤƤ sisƤllƤn myƶs typografian suunnittelua. Typografialla tarkoitetaan kirjasintyyppien eli fonttien valintaa, fonttien kokoa ja vƤriƤ sekƤ esimerkiksi otsikkotyylejƤ.
Typografian tƤrkein tehtƤvƤ on tehdƤ nettisivujen teksteistƤ helposti luettavat ja tukea niissƤ sanottua viemƤttƤ huomiota tekstisisƤllƶltƤ itseltƤƤn.
Toiset kirjasintyylit ovat helppolukuisempia kuin toiset. YleisimpiƤ kirjasintyyppejƤ ovat aktiikvat ja groteskit, joista ensiksi mainituissa on jalustana kirjainpƤƤtteet ja jƤlkimmƤisissƤ ei.
Fonttityylin ja -koon lisƤksi esimerkiksi tekstin ja taustan vƤlinen kontrasti sekƤ kirjain- ja rivivƤlien kautta syntyvƤ ilmavuus tai ahtaus vaikuttavat merkittƤvƤsti tekstin luettavuuteen.
Luettavuuden lisƤksi yritysilmeeseen sopivan typografian tehtƤvƤnƤ on myƶs osaltaan vƤlittƤƤ haluttuja mielikuvia yrityksestƤ. Jo kirjaisintyyppeihin itsessƤƤn liitetƤƤnkin erilaisia mielikuvia, kuten vaikkapa hienostuneisuus tai arkisuus ja pehmeys tai kovuus.
Jotkut kirjasintyypit puolestaan mielletƤƤn lƤhtƶkohtaisesti neutraaleimmiksi, mutta nekin toimivat kuitenkin ikƤƤn kuin kirjoitetun kielen ƤƤnensƤvyinƤ. Kirjasinvalinnoilla voidaan luoda erilaisia tunnelmia ja vaikuttaa siihen, millaisia mielikuvia nettisivujen visuaalinen ilme herƤttƤƤ potentiaalisissa asiakkaissa.
Erilaisilla fonteille voidaan helposti elƤvƶittƤƤ, lisƤtƤ variaatiota sekƤ erotella ja korostaa, mutta sivuston selkeyden ja yhtenevƤisen ilmeen sƤilyttƤmiseksi nettisivuilla pitƤydytƤƤn yleensƤ muutamassa valikoidussa kirjasintyylissƤ.
MitƤ nettisivujen vƤrit kertovat yrityksestƤ?
VƤrien valinta, niin fonttien, taustojen kuin kuvienkin osalta, on luonnollisesti todella tƤrkeƤssƤ roolissa nettisivujen ulkoasun suunnittelussa. TƤmƤ kannattaa ottaa myƶs huomioon logoa suunniteltaessa tai uudistettaessa, sillƤ sivun vƤripalettia lƤhdetƤƤn yleensƤ luomaan logon pohjalta.
VƤripaletinkin valintaan vaikuttaa tekstin luettavuus. Tekstin on erotuttava taustasta selkeƤsti, mutta ei liian rƤikeƤsti, jotta tekstin lukeminen on vaivatonta ja miellyttƤvƤƤ silmille.
āVihreƤt sƤvyt yhdistetƤƤn usein luontoon, luonnonmukaisuuteen ja terveyteenā
VƤreillƤ on myƶs erilaisia merkityksiƤ, joista on hyvƤ olla vƤhintƤƤnkin tietoinen nettisivuja suunniteltaessa.
VihreƤt vƤrit esimerkiksi yhdistetƤƤn usein luontoon, luonnonmukaisuuteen ja terveellisyyteen. Siniset vƤrit puolestaan mielletƤƤn tyypillisesti luotettavuuteen, kotimaisuuteen ja rauhallisuuteen viittaaviksi. Punainen nƤhdƤƤn helposti elinvoimaisena ja energisenƤ, jopa aggressiivisena ja keltainen yhdistetƤƤn tyypillisesti esimerkiksi avoimuuteen ja iloisuuteen.
TƤmƤ ei kuitenkaan automaattisesti tarkoita, ettƤ nettisivuille pitƤisi valita sama vƤrimaailma kuin esimerkiksi muilla alan toimijoilla.
VƤreihin pƤtee sama periaate kuin fontteihinkin; vaihtelevilla vƤreillƤ voidaan korostaa ja kiinnittƤƤ katsojan huomio, mutta erilaisten sƤvyjen mƤƤrƤ kannattaa pitƤƤ maltillisena harmonisuuden, tasapanoisuuden ja selkeyden sƤilyttƤmiseksi.
Millaiset kuvat tekevƤt nettisivuista visuaalisesti houkuttelevat?
Myƶs kuvat ovat luonnollisesti merkittƤvƤssƤ roolissa, kun aloitetaan layoutin suunnittelu. Kuvat ovat hyvin usein ensimmƤinen asia, johon kiinnitƤmme huomiomme ja ne tulevat yleensƤ nƤhdyiksi silloinkin, vaikka tekstiƤ ei jaksaisi kokonaan lukea.
Kuvat tukevat ja tƤydentƤvƤt tekstissƤ sanottua, mutta toisaalta ne voivat toimia kuvituskuvien ohella myƶs itsenƤisemmin kertoen yrityksen toimialasta ja arvomaailmasta. Hyvin valitut kuvat, muut visuaaliset elementit ja tekstit yhdessƤ luovat tasapainoisen kokonaisuuden.
Kuvien valinnassa tƤrkeimpiƤ asioita ovat autenttisuus, laatu ja mielikuvat, joita kuvat herƤttƤvƤt. Kuvanlaatu ei kuitenkaan missƤƤn nimessƤ saa kƤrsiƤ aitouden kustannuksella.
Ihanteellisinta on, jos sivuilla voidaan kƤyttƤƤ yritystƤ varten otettuja ammattikuvaajan kuvia, mutta myƶs harkiten valituilla kuvapankkikuvilla on mahdollista toteuttaa visuaalisesti miellyttƤvƤt sivut.
āTƤrkeintƤ on pyrkiƤ vƤlttƤmƤƤn geneerisiƤ kuviaā
Kuvapankkikuvien valinnassa tƤrkeintƤ on pyrkiƤ vƤlttƤmƤƤn geneerisiƤ kuvia, joista nƤkyy selkeƤsti, ettƤ niiden tilanteet ovat lavastettuja.
Kaikista ilmeisempien kuvien sijaan kannattaa etsiƤ kuvapankeista autenttisen oloisia kuvia, jotka voisivat olla yhtƤ hyvin yritystƤ varten otettuja.
5. HYVĆN LAYOUTIN ELEMENTIT
Asettelun, ryhmittelyn ja tyhjƤn tilan vaihtelu
HyvƤssƤ layoutissa sivujen elementit on aseteltu selkeƤsti siten, ettƤ kokonaisuuksien hahmottaminen on helppoa. Kaikessa yksinkertaisuudessaan se tarkoittaa yhteen kuuluvien elementtien ryhmittelyƤ ja āyhteen kuulumattomienā ryhmien vƤliin jƤtettƤvƤn tyhjƤn tilan vaihtelua. NƤin lukijan on helppo esimerkiksi hahmottaa mitkƤ aihealueet kuuluvat minkƤkin otsikon alle ja samalla tyhjƤ tila luo sivulle ilmavuutta.
Hallittu toisto
TekstissƤ toistoa pyritƤƤn yleensƤ vƤlttƤmƤƤn, ellei sitƤ haluta kƤyttƤƤ tehokeinona. Layoutissa toisto on kuitenkin avainasemassa, sillƤ hallittuna se luo sivuilla yhdenmukaisen ilmeen. Toisto nƤkyy esimerkiksi eri alasivuilla toistuvissa otsikkotyyleissƤ, johdonmukaisissa asetteluissa ja tietyssƤ valitussa vƤripaletissa pitƤytymisessƤ. TƤllainen hallittu toisto tekee sivujen selaamisesta ja tekstien lukemisesta helppoa ja miellyttƤvƤƤ.
Kohdistaminen
Layout luodaan yleensƤ ānƤkymƤttƶmƤnā ruudukon pƤƤlle, jolloin elementit pysyvƤt samassa linjassa. TƤllƤ tavoin nettisivun ulkoasu on helppo pitƤƤ selkeƤnƤ ja johdonmukaisena.
Rakennetta voidaan kuitenkin tehokeinona rikkoa myƶs epƤsymmetrisemmillƤ elementeillƤ.
Kontrastit
Kontrasteilla puolestaan kohdistetaan vierailijan huomio niihin asioihin, joita halutaan korostaa tai painottaa. Kontrasteja luodaan erilaisilla kirjasintyyleillƤ, vƤreillƤ ja esimerkiksi vaihtelevilla fonttiko`oilla.
Hierarkia
HyvƤ layout tukee tekstin hierarkiaa, eli kiinnittƤƤ vierailijan huomion ensisijaisesti kaikista tƤrkeimpiin asioihin. Hierarkioita luodaan esimerkiksi nostamalla tƤrkein asia esille suurella ja lihavoidulla fontilla. Hierarkian ansiosta sivustovierailija pystyy nopeallakin vilkaisulla hahmottamaan, mikƤ kullakin sivulla on kaikista olennaisin tieto.
Ulkoasu, kƤytettƤvyys ja sisƤltƶ
HyvƤt nettisivut ovat kokonaisuus, jossa yhdistyvƤt yrityksen viestiin ja arvoihin sopiva visuaalinen ilme, kohderyhmƤlle hyƶdyllinen, informatiivinen ja hakukoneet huomioiva tekstisisƤltƶ sekƤ kƤyttƤjƤystƤvƤllinen toteutus.
Vaikka visuaalinen ilme olisi todella harmoninen tai muulla tavoin silmƤƤ miellyttƤvƤ, mutta jos sisƤltƶƶn tai kƤytettƤvyyteen ei ole satsattu, eivƤt vierailijat tule viihtymƤƤn sivulla. Visuaalinen ilme ja ensivaikutelma ovat tƤrkeitƤ asioita, mutta vƤhintƤƤn yhtƤ tƤrkeƤƤ on, ettƤ sivustovierailija lƶytƤƤ sivuilta etsimƤnsƤ tiedon helposti ja nopeasti.
Kun tarvitset yrityksellesi tehokkaat kotisivut, ota yhteyttƤ
Rakennamme sinulle liiketoimintaasi tukevat sivut maailman suosituimmalla kotisivualustalla yli 2400 sivuston kokemuksella.
Leo SƤvel
