Verkkosivujen sisällöntuotanto

Sisältösuunnittelu sivustoprojektin ytimessä.

Verkkosivujen sisällöntuotanto nähdään usein turhan kapeasti. Jopa vain tarinan sepittämisenä ja elementtien asetteluna. Mutta hyvä käyttäjäkokemus, löydettävyys ja projektin sujuva eteneminen vaativat muutakin. Arjessa voi törmätä myös siihen, ettei kunnolla tekemiseen uskota. Vaikka perä edellä puuhun -menetelmän vaihtoehtona on oikeat työjärjestykset ja hyödylliset työkalut. Emme ruodi nyt kirjoittamisen tekniikoita tai visuaalisen suunnittelun » perusteita, vaikka sisällöntuottaja tuntee myös tarinankerronnan tyypit ja visuaalisen viestinnän. Sisällön suunnittelu verkkosivulle on laajempi kokonaisuus – koko projektin kokoava voima.

Blogin verkkosivujen suunnittelua » käsittelevät teemat ovat edenneet blogissa vaihe kerrallaan ja löytyvät koottuna kotisivut-välilehdeltä ». Nyt edessä on oleellisin vaihe ja projektin ydin: sisällön suunnittelu ja käsikirjoitus. Miten työvaiheet etenevät ja mistä työkaluista saa apua suunnitteluun? Koska kokonaissuunnittelu sisältää useita eri osa-alueita voi hyvällä syyllä väittää, että onnistunut sisällöntuotanto verkkosivuille yhdistää projektihallinnan tarinankerrontaan.

verkkosivujen sisällöntuotanto ja sisältösuunnittelu
  • Save
Verkkosivujen sisällöntuotanto verkkopalvelun muotoilussa

Verkkosivujen sisällöntuotanto perustaa sisältöön ja rakenteeseen

Entä mitä sisällön suunnittelulla voittaa? Tarkalle sisältösuunnittelulle voi ketterästi tuhahtaa, mutta rakennuksillakin perustukset tehdään huolella, eikä töitä jatketa käsisahalla vaikka moottorisahan bensa loppuu. Kun verkkosivuprojekti sisältää käsikirjoituksen kokonaissuunnittelun ja harkitun työjärjestyksen, vältytään turhilta yllätyksiltä. Tarvitaan vain tekijät ja sopivat työkalut. Tutustu valittuihin sisältösuunnittelun työkaluihin blogin lopussa ».

Sisältösuunnittelu on panostamista sekä lopputuloksen että projektin ajankäyttöön. Suunnitelmallisuus tuo hallittavuuden tunnetta ja vaivalloinen voi kääntyä oivallukseksi. Myös käytännön toimenpiteiden toteuttaminen helpottuu. Työvaiheet loksahtavat kohdilleen ja harjoittelulla niistä syntyy rutiini. Selkeä kokonaisnäkemys auttaa myös havaitsemaan ne vaiheet, joissa on mahdollista oikaista – ja joissa ei. 

Verkkosivuston sisällöntuottaja pitää kaikki langat käsissään

Käsikirjoituksen luonti vaatii moninaista osaamista: sisällön tuottajan lisäksi käsikirjoittaja löytää itsestään ripauksen graafista suunnittelijaa, devaajaa ja käytettävyysasiantuntijaa. Sisällön suunnittelija on myös taitava kommunikoija ja linkki sivuston tilaajan ja tuotantotiimin välillä. Hän ymmärtää projektinsa mahdollisuudet ja edellytykset ja vastaa kokonaissuunnittelusta keräämällä yhteen tarvittavat tiedot ja osaamisen. Vastuunjako eri osaamisalueiden kohdalla on oltava selvä sisältöjen tuotannosta toteutukseen ja aina testaukseen asti.

Verkkosivujen sisällöntuotanto rautalangat käsissä

Käsikirjoitus verkkoon – mistä sisältösuunnittelu alkaa?

Kuinka pitäisi edetä, jotta verkkosivun käsikirjoitus olisi täsmällinen paketti, josta näkee heti millaisesta sivustosta on kysymys? Sisältösuunnitelma lähtee sivuston tavoitteista: miksi sivustoa ollaan luomassa ja mitä tarkoitusta se palvelee? Jos sivusto on tilaustyö, asioista on sovittu jo toimeksiannon yhteydessä. Kun tavoite on kirkas, sisältöstrategia » ja käyttäjäymmärrys asiakasarvon tuottamiseksi » luodaan olemassa olevien resurssien mukaisesti. Strategia ja arvontuotto vaativat sivuston kohderyhmän tuntemista. Tätä on käyty tarkemmin läpi ostaja- ja asiakaspersoonien luonnin » yhteydessä.

  1. Tavoitteet
  2. Strategia ja arvontuotto omalle kohderyhmälle
  3. Räätälöity asiakaskokemus ostajapersoonille
  4. Sisällöntuotanto

Verkkosivujen sisällöntuotanto ja käsikirjoittamisen 5 vaihetta

Sivustonprojektin ja sen sisällön suunnittelu alkaa tehtävän määrittelystä. Ensimmäinen työstettävä dokumentti käsikirjoitusprosessissa on synopsis, joka kokoaa yhteen projektin keskeisimmät tavoitteet ja tietosisällöt. Suunnitelmien tulee olla yksiselitteisiä ja selkeitä: mitä ollaan tekemässä, kenelle, miksi ja missä mittakaavassa? Kun rajaukset ovat selvät, sivustolle on luotavissa sivusuunnitelma (sitemap) käsikirjoituksen pohjaksi. Tarkka kuvaus valituista teemoista ja mediasisällöistä palvelee myös sivuston hakukonenäkyvyyttä ». Alla kotisivujen työvaiheet mindmapina:

nettisivujen suunnitelu alkuvaiheessa | @ Marju Aavikko
  • Save
Verkkosivujen sisällöntuotanto seuraa projektin suunnittelua
  1. Synopsis eli tiivistelmä projektista ja sen toteutuksesta
  2. Verkkosivuston rakenteen suunnittelu
  3. Asiakäsikirjoitus eli synopsiksen ideoiden konseptointi
  4. Tuotantokäsikirjoitus ohjaamaan itsenäistä tekemistä 
  5. Prototyypit ja leiskaus

1. Synopsis

Synopsis on tuotantoprosessin kiteytys, jossa määritellään sivustosuunnitelman tavoitteet, lähtökohdat ja sivuston tarpeellisuus. Ideatasolla tehty tiivistelmä on napakka, helppolukuinen eikä juuri kahta sivua pidempi. Tulevan sivuston rakenne ja tyyli on jo havaittavissa. Synopsis sisältää vaatimusmäärittelyt, joihin kuuluu mm. sivuston tekninen toteutustapa, julkaisualusta, arvioidut kustannukset sekä aikataulut. Sisällöntuotannon suunnittelija tekee tässä vaiheessa myös valinnat tekijöistä ja vastuunjaosta. Vaikka synopsis toimii ohjauksena projektin työryhmälle, se on myös oivallinen apuväline kilpailuttamista tai rahoitusta suunniteltaessa.

2. Rakenne

Rakennekaavio on käsikirjoitusvaiheessa tehtävä näkemys siitä, kuinka ja missä järjestyksessä sivuston sisällöt ovat yhteydessä toisiinsa. Rakennekaaviosta näkee yhdellä silmäyksellä sivuston hierarkiat, linkitykset ja kuinka sivuston sisällä liikutaan. Rakennesuunnitelmassa luotava selkeä organisointi palvelee sekä hakukoneoptimointia » että käyttäjää loogisilla ja sivuston tavoitteita edistävillä ratkaisuilla. Rakennekaavion pohjalta voidaan tehdä myös ruutusuunnitelma, jossa sisältöjako paloitellaan pienempiin osiin. 

3. Asiakäsikirjoitus

Asiakäsikirjoituksessa sivuston sisällöt ja toiminallisuus on kasassa informaatioarkkitehtuurista lähtien. Tulevan sivuston voi nähdä jo valmiina mielessään. Asiakäsikirjoitus kuvaa synopsiksen ideat lopullisena tuotteena ja kertoo sen, mitä projektin toteutus vaatii. Sen pohjalta on määriteltävissä tarkka budjetti, visuaalinen ilme ja tekniset määritykset. Asiakäsikirjoituksesta sivuston tilaaja  pystyy arvioimaan vastaako tuleva sivusto alkuperäisiä suunnitelmia ja hyväksyä tulevan tuotannon. Näin valmis asiakäsikirjoitus palvelee sekä sivuston tekijöitä että auttaa kommunikoimaan tilaajan suuntaan.

4. Tuotantokäsikirjoitus

Tuotantokäsikirjoitus kokoaa tarkasti yhteen asiakäsikirjoituksen suunnitelmat. Se on dokumentti, joka sisältää sivuston yksityiskohtaiset sisällöt, sisäiset ja ulkoiset linkit, käyttöliittymän, mediaelementit ja toteutustavat. Tuotantokäsikirjoitus soveltuu täysin itsenäiseen tekemiseen, koska käsikirjoitus on siinä avattu html-elementtien tasolle. Valmis tuotantokäsikirjoitus on laajennettavissa tuotantosuunnitelmaksi, jonka avulla projektipäällikkö tai mediatuotannon tuottaja voi hallita tulevaa hanketta markkinointiin » asti.

5. Prototyypit ja leiskaus

Kirjoitustyön rinnalla kulkee sivuston visuaalinen ilme. Siinä rakennesuunnitelma etenee rakennekaavion pohjalta yksittäisten sivujen rautalankamalleihin (wireframe) ja prototyyppeihin. Prototyyppien luontia ohjaa käyttäjäymmärrys. Käyttöliittymäsuunnittelu (UI-suunnittelu) kuvaa verkkosivun ulkoasua selainpuolella (front end), eli sitä mitä käyttäjä näytöllään näkee. Alla web-suunnittelu blogitekstistä » löytyvä mindmap verkkosivun suunnittelun jälkimmäisessä vaiheesta:

web-suunnitelu vaiheessa 2 | @ Marju Aavikko
  • Save
Verkkosivun sisällöntuotanto ja suunnittelu selain- ja palvelinpuolella

Sivuston visuaalisuus

Verkkosivujen ulkoasun suunnittelusta kuuluu sivuston sisällöntuotantoon ja on näkyvä osa viestintää. Sivuston visuaalinen suunnittelu varmistaa sivuston yhdenmukaisen ilmeen ja näin lujittaa sivuston uskottavuutta ja yrityksen omaa brändiä ». Sivuston värien käyttö hyödyntää värien merkitystä » ja typografia » tukee sivuston luettavuutta sekä sisältöä. Myös eri mediavalintojen tehtävä on vahvistaa sivuston viestiä ja siinä auttaa tunteisiin vaikuttaminen ». Mobiilinäkymät vaativat helppokäyttöisyyttä ja selkeyttä. Nämä tarpeet tukevat myös nopeasti omaksuttavia ja latautuvia ulkoasuja.

Verkkosivujen sisällöntuotanto työkaluilla tehokkaaksi

Vaikka näkisi rautalankamallien koostamisenkin olevan eräänlaista tarinankerrontaa », asianmukaiset työkalut tehostavat tekemistä. Verkkosivujen sisällöntuotanto on hyvä aloittaa vanhalla kunnon Mindmapilla. Tony Buzanin miellekartat » vuodelta 1974 toimivat edelleen ja ovat oiva apu asiakokonaisuuksien ja -yhteyksien hahmottamisessa.

Simpletivity-kanavan video esitellelee työkaluja ja ohjelmia miellekarttojen luontiin

Varsinaisia käsikirjoittajan työkaluja edustaa Scrivener », joka mahdollistaa oman tekstin organisoinnin kappaleesta toiseen mittaviinkin kirjoitusprojekteihin. Wordia kaihtavalle kirjoittajalle löytyy puolestaan ilmainen vaihtoehto FocusWriter ».

Flowmapp » on visuaalisesti näyttävä työkalu sivuston rakenteen luontiin asiakkaalle, omaan suunnitelmaan tai tiimityön pohjaksi.

Adoben suunnitteluohjelmat lyhyessä esittelyssä

Rautalankamallien suunnittelussa perinteinen staattinen malli taipuu heikosti toiminallisuuden esittämiseen. Adobe XD » mahdollistaa prototyyppien luomisen, siten että applikaation tai verkkosivun käyttökokemus välittyy leiskausvaiheessa olevasta suunnitelmasta. Creative Bloq on niputtanut yhteen Adoben XD:n ohella yli 50 web desing -työkalua, joilla voi työskennellä näppärämmin 2020. Tutustu vinkkeihin ».

Verkkosivujen sisällöntuotanto: lähteet, linkit ja vinkit

HAMK: Sisällöntuotanto kompetenssit »
Webflow: 7 Simple Steps to the Web Design Process »
Constructive: How to Design Content-Heavy Websites »
Jacob McMillen: Website Copywriting »
CrazyEgg: How to Design a Website Layout »
Usability.cov: User Interface Design Basics »
Justinmind: The Complete Guide to Website Wireframe Design »
Adobe: Top Website Layouts That Never Grow Old »