Sirpa Pietikäisen sydämelliset kotisivut

Parempi käytettävyys, löydettävyys ja saavutettavuus – tietenkin WordPressillä

Pitkän linjan europarlamentaarikko työryhmineen lähestyi mainostoimisto meraa kotisivu-uudistuksen myötä. Hedelmällinen aloituspalaveri pidettiin ja uusien sivujen vaatimukset selkiytyivät. Tärkeimmiksi asioiksi nousivat blogiartikkelien parempi löydettävyys, Sirpan pääteemojen selkeämpi esittely, sivuston parempi toimivuus mobiililaitteissa ja nykyaikaan freesattu ulkoasu.

Lisäksi sisällön päivittämisen tulisi olla mahdollisimman helppoa ja automatisoitua. Toistuvia elementtejä sivustolla olisi hyvä suosia, jotta sivuston pitäminen ajantasaisena olisi tehokasta. Sivuston julkaisualustana tulisi olla tuttu WordPress, joka oli aiempienkin sivujen alustana. AA-tason saavutettavuuskriteerit tulisi myös täyttyä.

Verkkosivuston sisällöt väännetään rautalangasta

Piirsimme uusista kotisivuista tuttuun tapaan ensin rautalankamallit. Rautalangoilla tarkoitetaan mustavalkoisia kaaviokuvia, joiden avulla on helppo hahmottaa sisältöjen sijoittelut koko sivustolla sekä yksittäisellä sivulla.

Hahmottelimme Kuukauden puheenaihe -osion, jonka avulla sivuston ajankohtaisuutta saadaan korostettua. Artikkeliosioon suunnittelimme monipuoliset suodatuselementit teema-, hakusana-, kategoria- ja ajankohtahakuineen, jotta vuosien saatossa kerääntynyt, jättimäinen artikkelimäärä saadaan lukijoiden käyttöön. Halusimme helliä nykyaikaisen ja kätevän suoran viestinnän ajatusta ja ideoimme sivustolle pikaviesti-henkisen Kysy Sirpalta -elementin.

Koko suunnitteluprosessin ajan huolehdimme siitä, että sisällöt sopivat luontevasti myös eri kokoisille mobiili- ja tablettiruuduille.

Sydämellistä suunnittelua – jämäkällä typografialla

Kun sisällöt ja elementit oli suunniteltu ääriviivatasolla ja Sirpa työryhmineen oli hyväksynyt rautalangat, oli visuaalisen suunnittelun vuoro. Suuntaa sivuston uudelle ilmeelle haimme mainostoimisto merassa vastasuunnitellusta Sirpan vuosikertomuksesta.

Väripaletin pääsävyiksi valikoituivat myrskynsininen ja limenvihreä, punaista ripoteltiin sivustolle mausteeksi. Fonteiksi valikoituivat jämäkät ja selkeät Google-fontit Babas Neue ja Roboto.

Pressikuvissa Sirpan kaulakorua koristaa punainen sydän ja nostimmekin tämän universaalin kuvion ylätunnisteeseen kiteyttämään mepin empaattista maailmankatsomusta. Gif-animaation avulla sydän saatiin jopa sykkimään! Ikoniesityksillä on omat etunsa nykyaikaisessa, kiihkeätempoisessa median käytössä ja pikku kuvakkeita ripoteltiinkin sivustolle sopiviin kohtiin, esimerkiksi Sirpan teemojen ja henkilön esittelyyn.

Ylätunnisteen monipuoliset valikot saatiin ryhmiteltyä selkeiksi kokonaisuuksiksi värikontrastien ja eri fonttikokojen ansioista. Sivustolla käytettiin runsaasti väripohjia tuomaan rytmiä, selkeyttä ja elämyksellisyyttä yleisilmeeseen.

Uusi vuosi ja uudet, paremmat sivut!

Sirpa on kiitettävän kiinnostunut ja tarkka väreistä. Muutaman sävytyskierroksen jälkeen värit saatiin hiottua täydellisiksi ja sivuston ilme hyväksyttiin. Aineisto siirrettiin koodausvaiheeseen ja julkaistiin pikavauhdilla sopivasti uudenvuodenaattona.

Sirpa työryhmineen oli tyytyväinen lopputulokseen.

Isot kiitokset työstänne. Sivut näyttävät todella hyvältä, siellä on juuri sellaisia yhdistäviä polkuja kuin halusimme, ja WordPress on helppokäyttöisen oloinen.”

– Iida Ahonen, Sirpan avustaja Brysselissä, sivustouudistuksen työryhmän jäsen