web-suunnittelu verkkosivuille

Web-suunnittelu

Web-suunnittelu ja kotisivujen toteuttaminen

Kotisivujen suunnittelu ja toteutus

Web-suunnittelu on niin innostava kokonaisuus, että pyöritin lähes kolme vuotta web-suunnitteluun keskittyvää sivustoa. Samalla sain havaita, että kotisivujen suunnittelu kiinnostaa monia. Blogissani olen päivittänyt silloisten web designer -opintojen ympärille rakennetun sivuston. Tässä tekstissä keskityn web-suunnittelun ensimmäiseen vaiheeseen ja päätän tekstin kotisivusuunnittelijan työsuunnitelman TOP 5 -listaukseen. Verkkosivujen suunnittelun kokonaisuuden alusta loppuun asti löydät osa-alueittan sivuston kotisivut -avainsanan » alta.

Miksi web-suunnittelu jaksaa kiinnostaa?

Marraskuussa 2019 huomasin, että vanha verkkosivustoni tuli elinkaarensa päähän. Pari vuotta vanha sivusto olisi vaatinut runsaasti päivittämistä, jotta se edelleenkin olisi toiminut verkkosivujen tekemistä ohjaavana sivustona. Se toimi edelleen dokumentaationa web designer -opinnoista », mutta yhteydenoton kautta saamastani kannustuksesta huolimatta aavistelin sivuston palvelevan enää vain omaa nostalgiannälkääni. Koska itse aihe säilyy ajankohtaisena, päätin siirtää blogiini osan niistä kiinnostavista ja haastavista aihepiireistä, joihin web-suunnittelu törmää. Useat verkkomedian palvelut kuten blogit.fi – jonka sivulta löytyvät tämänkin blogin artikkelit » – kokoavat yhteen eri verkkoalustoilla tuotettua sisältöä.


Tässä viitekehyksessä on luontevaa nostaa esiin verkkosivujen suunnittelun ja sisällöntuotannon käytäntöjä. Näkökulmasta riippuen ne edustavat joko markkinointiviestintää » tai jakavat inspiraatiota ja vinkkejä » web-suunnittelusta kiinnostuneille tai syntyjään uteliaille verkkosivujen käyttäjille.

Web-suunnittelu ja 5 kohdan muistilista.

Verkkosivujen suunnittelu – tekemällä oppii

Lähtökohtaisesti web-suunnittelu vaikkapa valmiin WordPress-teeman pohjalta saattaa vaikuttaa melko helpolta tehtävältä. Oman tiedon karttuessa helppouden tunne alkaa hellittää. Jotta verkkosivusto miellyttäisi sekä käyttäjiä että hakukoneita, kokonaisuuden on pysyttävä kasassa useilla eri osa-alueilla. Alkuun voi olla hyvä ratkaisu rakentaa verkkosivusto oppimisalustaksi myynnillisten tavoitteiden sijaan. Se antaa mahdollisuuden kasvattaa omaa osaamistaan rauhassa ja kehittää verkkosivustoa oppimalla yrityksen ja erehdyksen kautta. Tässä ensimmäisessä verkkosivujen suunnittelua käsittelevässä blogitekstissä käyn aihetta läpi  seuraavasti:

  • Verkkosivujen historiaa ja alustoja omalla työpöydällä
  • Ensimmäinen oma verkkosivuprojekti on erityinen
  • Web designer -koulutus auttaa liikkeelle
  • Miksi verkkosivuprojekti vaatii suunnittelua

Tekstissäni käyn kotisivujen käytäntöjä läpi yhdestä näkökulmasta. Mikään ei estä tekemästä asioita toisin, mutta kotisivujen suunnittelua on kakun leipominen: ensin kannttaa tutustua ohjeisiin. Sen jälkeen voikin alkaa hioa omaa reseptiä timantiksi.

web-suunnittelu media-mouru

Nettisivujen suunnittelu vaatii pitämään punaista lankaa tiukasti hyppysissä.

Verkkosivujen tekeminen aikakirjalla

Verkkosivujen tekeminen alkoi 1990-luvulla Yhdysvalloissa, mutta jo 1993 julkaistiin ensimmäiset verkkosivut » myös Suomessa. Omat haparoivat ensiaskeleeni otin kotisivujen suunnitteluun 2000-luvun alkuvuosina, kun onnistuin julkaisemaan ensimmäisen omatekoisen sivustoni maksuttomalla WYSIWYG (What You See Is What You Get ») -ohjelmalla. Alusta oli pikemmin editori kuin sisällönhallintajärjestelmä, mutta silläkin onnistui luomaan sivuston kaveriporukan tarpeisiin. Hakukonenäkyvyyden puute ei huolettanut: päinvastoin oli hyvä, että sivusto pysyi pienen piirin käytössä. Sitten vuonna 2007 osallistuin avoimessa AMK:ssa ”Internet-kotisivujen tekeminen” -kursille. Lopputulos oli koruttoman konstailematon, sillä työ tapahtui tekstieditoriin koodaamalla. Kurssiarvosanasta oli kiittäminen enemmän Photoshop » -osaamistani kuin sujuvaa koodiani.

Web-suunnittelu bändille

Verkkosivujen tekeminen säilyi kiinnostavana ja kokeilin useampia maksuttomia sisällönhallintajärjestelmiä kuten gpEasy ». Kunnes vuonna 2014 innostuin työni ohessa verkkoviestinnän oppisopimuskoulutuksesta. Edessä oli innostava jakso, jossa opintojen lopputyönä oli Dreamweaver » alustalla tehtävä verkkosivuprojekti. Työnantajani kykeni järjestämään monipuolista tukea opiskeluille, mutta parasta projektissa oli asiakkaani. Viime hetkellä syntynyt ajatus tehdä kotisivut tuolloin 14-vuotiaan kummityttöni bändikerhoharrastuksen ympärille, osottautui onnekkaaksi ratkaisuksi. Sisällöntuotanto oli hauskaa, haasteet tehty taklattavaksi ja kummityttöni kanssa löytyi yhteinen projekti. Bändin promoaminen paisui hyvinkin tutkintovaatimuksia laveammaksi projektiksi.

web-suunnittelun esimerkki

Verkkosivujen tekeminen bändikerhon tytöille

Silti valmistuessani 2015 uskoin, ettei Dreamweaver ollut tarkoitettu nopeasti luotaville sivustoille. Tunnetta vahvisti Adoben silloinen nopea uutuusalusta Muse, jolla ehdin luomaan useampiakin sivustoja. Samoin kuin Adobella oli syynsä luopua Musen palveluista », itselläni oli syytä luopua ennakkoluuloista WordPressin suhteen. Kaikki hyvä ei välttämättä tule Adobelta ja ehkä WordPress on muutakin kuin pelkkä blogialusta – itse asiassa se oli jo maailman suosituin julkaisualusta ». 

Web designer -koulutus ja web-suunnittelu

Kun 2017 aloitin web designer -koulutuksen Turun kristillisessä opistossa », WordPress-sivustoa tehtiin huolella. Opintosisällöt tukivat aikaisempia teknisesti painottuneita koulutuksiani:  laaja kokonaisuus sisälsi myös mm. verkkosivun käsikirjoittamista ja projektinhallintaa. Monimuotokoulutus säilyi koko vuoden intensiivisenä ja kurssityön pohjaksi tehty verkkosivuston toteutus laajeni koko koulutuksen kuvaukseksi.

 

Kattava kurssikokonaisuus oli perusteltua, sillä web designerin on hyvä kasvaa moniosaajaksi. Tämä pätee erityisesti silloin, kun web designer on sekä projektin suunnittelija että toteuttaja. Sivuston ilmeen ja teknisten vaatimusten lisäksi hallussa on oltava myös sisällöntuotanto », asiakaskokemus » ja hakukonelöydettävyys ». Alla olevissa mindmapeissa olen esittänyt kotisivujen suunnittelun kaksivaiheisesti. Se alkaa projektin suunnittelusta päätyen toteutusvaiheeseen.

Web-suunnittelu eri työvaiheissa

nettisivujen suunnitelu alkuvaiheessa | @ Marju Aavikko
web-suunnitelu vaiheessa 2 | @ Marju Aavikko

Web-suunnittelu kahdessa eri vaiheessa: kotisivujen suunnittelu projektina (vaihe 1) sekä kotisivujen suunnittelun toteutus (vaihe 2).

Miksi verkkosivuston suunnittelu vaatii pohdintaa

Innostavan projektin tuntee siitä, että se vie tekijän mennessään. Monella sivuston toteuttajalla on hoppu saada aikaan jotain näkyvää pohdintojen tai selvittelyjen sijaan. Lähtökohta suunnittelulle ei kuitenkaan ole ulkoasu, vaan se muotoutuu sivustosuunnitelman edetessä yllä esitettyyn kakkosvaiheeseen. Sivuston toteutusvaihetta olisi hyvä jarruttaa niin kauan, että toiveet ja tavoitteet projektin lopputuotteelle on kunnolla kartoitettu. Ei ole niin pientä sivustoa, etteikö se hyötyisi projektisuunnitelmasta. Heikkoon suunnitteluun liittyy näennäinen nopeus ja oletetut kustannussäästöt. Sen sijaan hyvä projektisuunnittelu selkiyttää kokonaisuutta ja pitää sen kasassa. Välitön hyödynsaaja on sivuston toteuttaja itse.

Web-suunnittelu tilaajalle

Mikäli kotisivun suunnittelu on tilaustyö, verkkosivun suunnitelma palvelee myös tilaajaa. Suunnitelman myötä tärkeät yhteiset pelisäännöt selkiytyvät kummallekin osapuolelle. Tämä on tärkeä vaihe, sillä verkkosivun suunnittelu on aina tekijän ja tilaajan yhteinen projekti. Se on juuri niin onnistunut, kuin sivuston parissa tehty yhteistyö. Olennaisen tärkeän kommunikaation tukena on hyvin tehty suunnitelma. Verkkosivuprojektista tehtyyn suunnitelmaan on helppo palata, jos jokin seikka vaatii tarkennusta tai perusteluja. Näin hyvä suunnitelma edellyttää myös käsitteiden avaamista puolin ja toisin.


Kun katsotaan suuria, useiden eri tiimien välillä rakennettuja verkkosivuprojekteja, kokonaisuutta vetää usein projektipäällikkö. Silloinkin projektin hallinta nojaa hyvään viestintään. On tunnettu tosiasia, ettei ihmisille tuota hankaluuksia hallita projektin vaatimaa tekniikkaa, vaan Akilleen kantapääksi tahtoo muodostua takkuava yhteistyö.

nettisivujen suunnittelu

Pallo hallussa verkkosivuprojektin alusta lähtien.

Kuinka web-suunnittelu käynnistyy?

Pienempää tai suurempaa kotisivuprojektia yhdistää se, että suunnitelma lähtee liikkeelle kohderyhmän määrittelystä sekä itse projektin ja sen tuotoksen tavoitteista. Koska verkkosivut ovat yrityksen verkkomarkkinoinnin kivijalka, kohderyhmä määrittely » on yhtä tärkeää verkkosivustoprojektissa kuin missä tahansa markkinointiviestinnässä ». Kohderyhmien määrittelyn jälkeen web-suunnittelu voi edetä sivuprojektin tavoitteisiin ja työn suunnitteluun:

 

Web-suunnittelun tavoitteet

Kotisivujen tekeminen sisältää useita kokonaisuuksia ja työvaiheita. Sujuva toteutus vaatii tasapainoa tavoitteiden ja resurssien välille. Yksi esimerkki löytyy niinkin läheltä kuin blogin kirjoittamisesta. Heti alkuun on syytä kysyä itseltään, kuinka usein uskoo ehtivänsä tuottamaan sisältöä. Jos julkaisuväli venähtää useiksi viikoiksi, ei ehkä kannata tarttua kaikkein ajankohtaisimpiin aiheisiin. Tavoitteet ja niiden vaatimat päätökset on helpoin määritellä valmiin suunnitelman avulla. Lue tarkemmin tavoitteellisesta sisältöstrategiasta » sekä verkkosivujen että niiden markkinoinnin osalta.

 

Kotisivujen luonti ja sivuston taloudelliset tavoitteet

Tilaustyönä tehtävä web-suunnittelu on oltava tuottavaa sekä tilaajalle että sivuston toteuttajalle. Onneksi verkkosivujen suunnittelussa laatu takaa usein myös kannattavuustavoitteiden toteutumisen. Ongelmaksi saattaakin nousta se, ettei kaikilta osin toimivan sivuston vaatimukset ole aina selviä. Verkkosivut voidaan vieläkin nähdä vain yrityksen digitaalisena esitteenä. Kun eri mediat sekoitetaan keskenään, myös niiden erilainen tehtävä ja tarkoitus voi jäädä epäselväksi.

 

Miksi hyvät kotisivut ovat kannattava sijoitus?

  • Hyviin verkkosivuihin sisältyy taloudellista arvoa. Ellei palvelu löydy verkosta tai sivusto on teknisesti puutteelinen, potentiaaliset asiakkaat hakeutuvat muille sivustoille.
  • Jos sivusto ei palvele käyttäjää tämän toivomalla tavalla, hän vaihtaa sen hyvin nopeasti toiseen. Käyttäjäkokemukseen ja käyttäjän tarpeisiin » kannattaa panostaa. 
  • Mikäli sivustolla on käytettävyyteen tai sisältöön liittyviä puutteita, se putoaa kauas Googlen hakutulosten kirkkaimmasta kärjestä. Kilpailu Googlessa on kovaa, eikä kärkipaikoille päästä sattumalta. Tutustu hakukoneoptimointiin ».

Kotisivujen suunnittelijan TOP 5

Web suunnittelu on täynnä pieniä sudenkuoppia. Pienenkin verkkosivuprojektin työsuunnitelmaan on syytä sisällyttää jonkinlainen riskianalyysi, mutta riskit eivät saa lamauttaa kotisivujen tekijän intoa. Ne eivät ole este sivuston suunnittelulle. Silti rennoimmankin tekijän kannattaa pitää mielessä viisi huomioitavaa seikkaa:

 

1️⃣ Miksi SSL-sertifikaatti on tärkeä?

SSL-sertifikaatti suojaa https-sivuilla selaimen ja palvelimen välistä liikennettä ja on merkki tietoturvasta sivuston käyttäjälle. Sivuston omistajalle se on sijoitus hakukonenäkyvyyden parantamiseen ja osa teknistä hakukoneoptimointia.

 

2️⃣ Miksi webhotelleja on syytä vertailla?

Hyvä webhotelli tuo mielenrauhaa. Kokemuksesta tiedän, ettei kannata tavoitella aivan halvinta vaihtoehtoa. Vaihtoehtoja punnitessa ratkaisevinta ovat kuitenkin oman sivuston tarpeet. Webhotellia voi verrata vakuutusmaksuihin. Ylivakuuttaminen on turhaa, mutta oma verkko-omaisuus kannattaa turvata. Parhaisiin paketteihin sisältyy hyvä asiakaspalvelu, latausnopeus, toimintavarmuus ja tietoturva.


3️⃣ Miksi web-suunnittelu panostaa sisällöntuotantoon?

Sisällöistä ei voi tinkiä. “Content is King” pysyy ja pitää pintansa. Tutustu tarkemmin strategiseen viestinnän » ja sisältöstrategian merkitykseen ».


4️⃣ Miksi testaus on tärkeää?

Testaamatonta sivustoa ei ole syytä vielä julkaista. Kannattaa luoda oma checklist ja palata siihen tasaisin väliajoin. Tutustu testaukseen ».


5️⃣ Miksi markkinoinnilla on väliä?

Markkinointi huolehtii työn viimeistelystä. Valmista työtä on turha valuttaa hukkaan. Sen sijaan voi varmistaa työn näkyvyyden mm. markkinointiviestinnän avulla. Tutustu Google-mainontaan »

 

Web-suunnittelu ei ole vain projekti

On hyvä muistaa, että verkkosivujen suunnittelu ei ole kerran päättyvä projekti, vaan jatkuva prosessi. Verkkosivusto on kuin kotikissa, joka tyyneydestään huolimatta vaatii sitoutumista ja hoitoa. Verkkosivun ruokkiminen jatkuu ylläpidolla, sisällön päivittämisellä ja kävijäliikenteen seuraamisella ». 

Jos mieleesi nousi kysymyksiä tai kommentoitavaa, ota toki yhteyttä »
Mikäli blogin teemat kiinnostavat, voit seurata sisältöjä myös blogit.fi -sivustolta »

 

Kotisivujen tekemisen linkkivinkkejä:

Traficom: Millainen on hyvä verkkotunnus »
Webhotellivertailu2: Webhotellien vertailu »
Colibri: Verkkosivusuunnittelman ohje seuraavaan projektiisi »
UK SEO Services: Verkkosivuprojektin muistilista aloittelijoille  »
WebsiteBuilderExpert: Mitä verkkosivujen suunnitteluun tarvitaan »
Blogin mindmapit löytyvät myös sivuston Pinterest-tililtä »

Katso lisää kotisivujen suunnittelusta: