Mainostoimisto Sitrusmedia Oy
  • Kotisivut
    • Huolenpitopalvelu
  • Verkkokaupat
  • Hakukoneoptimointi
  • Markkinointi
  • Sisällöntuotanto
  • Referenssit
  • Blogi
Valitse sivu

Verkkosivuston toteutus kolmelle eri hankkeelle

30.07.2021Asiakastyö

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:

www.hiljaisettoimijat.fi

  • Verkkosivusto (sivuilme ja sisältöjen vienti)
  • Logo
  • Graafinen ohjeisto
  • Verkkosivun käytön perehdytys

www.datalit.fi

  • Verkkosivusto (sivuilme ja sisältöjen vienti)
  • Logo
  • Graafinen ohjeisto
  • Verkkosivun käytön perehdytys

www.proshade.fi

  • Verkkosivuston sivupohjat (sivuilme)
  • Logo
  • Graafinen ohjeisto
Sitrusmedia Jyväskylä

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.

Graafinen suunnittelu
Graafinen suunnittelu
Graafinen suunnittelu

”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

  • Twitter
  • LinkedIn

Viimeisimmät artikkelit

  • Messuvalmennus: Messutyöskentelyn ABC
  • Uuden työntekijän esittely: Miia Vilja
  • WordPress tietoturvan parantaminen – yli 20 vinkkiä!

Kotisivut

Kotisivut yritykselle

Kotisivut yhdistykselle

Kotisivut seuralle

Kotisivut hankkeelle

Saavutettavat kotisivut

Vanhojen kotisivujen päivittäminen ja kotisivujen uusiminen

Verkkokaupat

Responsiivinen verkkokauppa

Kuukausimaksullinen verkkokauppa

Kieliversiot

Hakukoneoptimointi

Hakukoneoptimointi Helsinki

Hakukoneoptimointi Jyväskylä

Hakukoneoptimointi Kuopio

Hakukoneoptimointi Lahti

Hakukoneoptimointi Oulu

Hakukoneoptimointi Tampere

Hakukoneoptimointi Turku

Muut palvelut

WordPress-koulutus

WordPress-ylläpito

WordPress-tietoturva

Logosuunnittelu yritykselle

Sisältömarkkinointi

Digitaalinen markkinointi

Google-mainonta

Perinteinen markkinointi

Yrityskuvaus

Markkinointivideo

Messuvalmennus

  • SeuraaSeuraa
  • SeuraaSeuraa
  • SeuraaSeuraa
  • SeuraaSeuraa

© Mainostoimisto Sitrusmedia Oy – Y-tunnus 3009059-6

Hallinnoi evästeiden suostumusta
Tämä sivusto käyttää evästeitä asiakaskokemuksen parantamiseen. Käytämme sivustolla myös Google Analytics -kävijäseurantaa, jolle voit antaa suostumuksesi hyväksymällä kaikki evästeet tai Tilastot.
Toiminnalliset Aina aktiivinen
Tekninen tallennus tai pääsy on ehdottoman välttämätön oikeutettua tarkoitusta varten, joka mahdollistaa tietyn tilaajan tai käyttäjän nimenomaisesti pyytämän palvelun käytön, tai yksinomaan viestinnän välittämiseksi sähköisen viestintäverkon kautta.
Asetukset
Tekninen tallennus tai pääsy on tarpeen laillisessa tarkoituksessa sellaisten asetusten tallentamiseen, joita tilaaja tai käyttäjä ei ole pyytänyt.
Tilastot
Tekninen tallennus tai pääsy, jota käytetään yksinomaan tilastollisiin tarkoituksiin. Tekninen tallennus tai pääsy, jota käytetään yksinomaan anonyymeihin tilastollisiin tarkoituksiin. Ilman haastetta, Internet-palveluntarjoajasi vapaaehtoista suostumusta tai kolmannen osapuolen lisätietueita pelkästään tähän tarkoitukseen tallennettuja tai haettuja tietoja ei yleensä voida käyttää tunnistamaan sinua.
Markkinointi
Teknistä tallennustilaa tai pääsyä tarvitaan käyttäjäprofiilien luomiseen mainosten lähettämistä varten tai käyttäjän seuraamiseksi verkkosivustolla tai useilla verkkosivustoilla vastaavia markkinointitarkoituksia varten.
Hallitse vaihtoehtoja Hallinnoi palveluita Hallitse myyjiä Lue lisää näistä tarkoituksista
Asetukset
{title} {title} {title}