Verkkosivuston toteutus kolmelle eri hankkeelle
Lähtötilanne
Helsingin yliopiston tarjouspyyntö verkkosivuston toteuttamisesta heidän vetämälleen hankkeelle laajeni lopulta kolmen eri hankkeen verkkosivustoprojektiksi. Koska kaikilla hankkeilla sivustorakenne oli hyvin samankaltainen, kannatti sivupohjat suunnitella mahdollisimman yleiskäyttöisiksi. Seuraavassa lyhyesti, mitä sisältöjä toteutettiin:
- Verkkosivusto (sivuilme ja sisältöjen vienti)
- Logo
- Graafinen ohjeisto
- Verkkosivun käytön perehdytys
- Verkkosivusto (sivuilme ja sisältöjen vienti)
- Logo
- Graafinen ohjeisto
- Verkkosivun käytön perehdytys
- Verkkosivuston sivupohjat (sivuilme)
- Logo
- Graafinen ohjeisto
Logojen suunnittelu ja toteutus
Aluksi mietimme logojen ideointia niin, että niissä olisi jotain yhteistä. Lähtökohdiltaan hankkeilla ei ollut muuta yhteistä kuin rahoittajat ja osittain hankkeen toteuttajat. Ideoinnin pohjaksi tilaajat antoivat hankenimet, värikarttoja sekä muotoja. Logoon päätyvät värit ja muodot määrittävät hyvin pitkälti verkkosivuston ilmettä, joten kaikkien kolmen hankkeen työt aloitettiin logoista.
Jokaiselle hankkeelle ideoitiin muutamia logoaihioita sovittujen lähtötietojen pohjalta, joista asiakas valitsi yhden jatkokehitykseen. Käytännössä pidimme palaverin tässä kohtaa, jotta lopullinen logoaihio lähtisi oikeaan suuntaan ja tällöin vältyttäisiin harmillisilta hukkatöiltä. Kaikki kolme logoa muotoutuivat 2-3 viimeistelykierroksen avulla (logon muokkaus -> palaute). Videopalaveri antoi myös kivoja mahdollisuuksia viimeistelyssä ja logoja tuunattiinkin lopulliseen muotoonsa palaverin aikana asiakkaan kanssa.
Lopulliset logoversiot toimitettiin asiakkaalle vaalealle ja tummalle taustalle sopivina sekä osaan lisättiin myös tekstiä (slogan) erilaista käyttötarkoitusta varten. Logon käyttöohjeet sisällytettiin myös asiakkaalle toimitettavaan graafiseen ohjeeseen.
”Kiitos, sujuneesta ja mutkattomasta yhteistyöstä. Olemme tyytyväisiä nettisivuihimme. Haluamme erityisesti kiittää teitä yhteistyövalmiudestanne ja toiveidemme kuuntelemisesta, sekä sujuvaa ja nopeaa kommunikaatiota teidän puolelta (meidän puolelta välillä vähän hitaampaa, kiitos kärsivällisyydestänne!). Jos meillä on ollut kysymyksiä tai kommentteja olette aina reagoineet niihin nopeasti ja avuliaasti. Hyvällä kommunkaatiolla ollemme yhdessä päässeet haluamaamme lopputulokseen. Suosittelemme teitä muihin vastaaviin toimeksiantoihin.”
DataLit -hanke, datalit.fi
”Yhteistyö Sitrusmedian kanssa sujui hyvin. Saimme tyylikkäät, selkeät ja toiveitamme vastaavat verkkosivut, joiden päivittäminen on meille jatkossa helppoa. Samoin olemme tyytyväisiä logoon ja sen työstämiseen. Vastaukset kaikkiin yhteydenottoihin olivat nopeita ja ystävällisiä. Kiitos yhteistyöstä!”
SILE -hanke, hiljaisettoimijat.fi
”Sujuva ja nopsa yhteistyö. Saimme hyvät eväät jatkaa sivujen ylläpitoa ja muokkauksia itse. Homma kolmen projektin ja Sitrusmedian yhteisenä sujui hyvin. Kiitos koko porukalle!”
PROSHADE -hanke, proshade.fi
Verkkosivut hankkeelle
Pidimme aloituspalaverin poikkeuksellisesti yhteisesti kaikkien kolmen hankkeen kanssa, jotta pääsimme kartalle sivuille taitettavasta sisällöstä. Hankkeet myös hyötyivät projektien kesken käytävästä keskustelusta. Toteutettavat sisällöt olivat samansuuntaiset ja sivukartta oli rakenteeltaan kaikille kolmelle hankkeelle samanlainen. Palaverin pohjalta asiakkaat toimittivat tekstit sovitun sivukartan mukaisesti.
Graafisen tyylin tekoa varten asiakkaalta on hyvä saada jotain suuntaviivoja. Saimme väripaletteja ja esimerkkisivustoja sekä listan teknisiä vaatimuksia sisältöjen toteutukseen. Toteutettu logo määritteli hyvin pitkälti myös tehostevärin käyttöä. Toteutimme mallisivut, josta kävi ilmi sivuston tyyli ja graafinen ilme. Tässä projektissa mallisivut sisälsivät etusivun ja yhden alasivun, jossa on tietty asia taitettuna niin, että se toimii millä tahansa laitteella selattuna.
Mallisivustoon tehdään asiakkaan palautteen perusteella muutoksia, jolloin sivupohja on valmis. Näin muu teksti ja kuvamateriaali on valmis taitettavaksi kokonaiseksi sivustoksi. Sivuston sivupohja toteutettiin niin, että asiakkaalle olisi helppo omaksua sivuston sisällön päivittäminen. WordPress-teema mahdollistaa sen, että kaikki sisältö on aina yhden otsakkeen takana editoitavissa ylävalikkoa ja footeria eli alapalkkia lukuunottamatta.
Ennen sivuston julkaisua asiakas kävi sivusisällön vielä läpi. Lopputuloksena on hankkeen näköiset sivut, jota on helppo päivittää ja jatkokehittää.
Kun yhden hankkeen sivusto oli loppusuoralla, sivustopohjia käytettiin kahden muun hankkeen sivuston lähtökohtana. Pohjiin vaihdettiin värit ja fontit hankkeen graafisen ohjeistuksen mukaisesti, jolloin sisältö oli valmis lisättäväksi. Yksi hankkeista halusi jatkaa suoraan toteuttamistamme sivupohjista ja taittoi sisällön sivustolle itse. Ilo on huomata, että tarjoamamme WordPress-teema on helposti omaksuttava asiakkaan päivittäiseen käyttöön.
Sivuston saavutettavuus
Sivuston suunnittelua ohjasi myös saavutettavuusdirektiivi. Kun on kyse yhteiskunnallisesta toimijasta, tuli sivusto olla mahdollisimman selkeä ja helppokäyttöinen. Saavutettavuus vaikuttaa sivuilmeen osalta käytettävään kirjasimeen, väreihin ja sivurakenteeseen. Esimerkiksi kontrastit värien välillä tuli olla tarpeeksi suuret, otsikointi loogista ja metatiedot kaikkien elementtien osalta täytettynä. Kun saavutettavuus toteutuu, laadimme sivustolle saavutettavuusselosteen.
Graafinen ohje
Toteutimme kaikille kolmelle hankkeelle graafisen ohjeistuksen PDF-muodossa. Lisäksi teimme mallikirjaston suoraan WordPressiin, josta käy ilmi sivuston ilme ja kaikki käytetyt elementit. Mallikirjaston kautta on helppo säätää sivuston ilmettä myöhemmin, jos sellaiselle tulee tarvetta. Itse pdf:ssä on dokumentoituna tärkeimmät sivuston ilmeeseen liittyvät asiat: käytetyt värit, fontit ja fonttikoot otsikoissa ja leipätekstissä. Logosta on kerrottu värit, fontit ja se, miten logoa tulisi käyttää. Näin asiakkaalla on hyvä dokumentti, mistä tarkistaa hankkeeseen liittyvät tyyliseikat tuottaessa uutta materiaalia myöhemmin verkkosivuille tai sosiaaliseen mediaan.
Yhteenveto
Yhden hankkeen verkkosivustoprojektin laajeneminen kolmen eri hankkeen laajuiseksi avasi mahdollisuuden synergioiden etsimiseen verkkosivusuunnittelussa. Erinomainen yhteinen aloituspalaveri antoi hyvät suuntaviivat ja onnistuimme toteuttamaan verkkosivupohjat, jotka palvelivat erinomaisesti kolmen eri hankkeen sisältövaatimuksia. Graafisella suunnittelulla (värit, fontit ja logo) jokaisen hankkeen sivusto viritettiin omannäköiseksi. Graafinen ohje auttaa monivuotisia hanketyöntekijöitä jatkossa uuden materiaalin valmistuksessa ja sivuston päivityksessä.
Mainostoimisto Sitrusmedia kiittää inspiroivasta ja kiinnostavasta yhteistyöstä!
Artikkelin kirjoittaja
Henry Moilanen
Yrittäjä
Graafinen suunnittelu, verkkosivut, sisällöntuotanto, valokuvaus.
Puh. 040 1744 826
henry.moilanen(at)sitrusmedia.fi