Linkki projektiesittelyyn sivuillamme

Suunnittelimme ja toteutimme Luomuinstituutin verkkosivu-uudistuksen syksyn 2020 ja kevään 2021 aikana. Sivusto on toteutettu Wordpress -sisällönhallintajärjestelmällä.

Tutkittua tietoa luomusta

Luomuinstituutin tehtävänä on tuottaa ja välittää tutkittua tietoa luomusta elinkeinoelämälle, kuluttajille ja yhteiskunnalle. Tämän tiedon välittämisessä yksi keskeisimmistä kanavista on verkkosivut, joiden uudistuksen toteutimme yhteistyössä Luomuinstituutin kanssa. 

Verkkosivu-uudistuksen tavoitteena oli päivittää sivuston ilme raikkaammaksi sekä nostaa paremmin esille luomuun liittyvää tutkimustietoa. Kotimaisten toimijoiden lisäksi sivustolla on tarkoitus tavoittaa ulkomaiset toimijat ja tutkijayhteisö ja näin promota kotimaista luomututkimusta. 

Suunnittelu

Luomuinstituutin ydinviesti on “Tutkittua tietoa luomusta”. Tätä viestiä käytimme avainsanana sivujen suunnittelussa.Tämä viesti oli koko suunnitteluprosessin ajan tärkeänä ohjenuorana; Sivuston ilmeessä haluttiin välttää luomuun liittyvää stereotyyppistä esitystapaa, joten ilme ei saanut olla liian pehmeä eikä vihreä, joilla yleensä kuvataan luomuun liittyviä asioita, vaan sivuston ilmeen tuli kuvastaa Luomuinstituutin tutkimuslähtöistä lähestymistapaa aiheeseen. 

Värimaailma luotiin asiakkaan brändiohjeistusta noudattaen. Värimaailmassa päätimme käyttää paljon kontrastia niin väreissä kuin paksuissa fonteissa. Korostusväriksi valitsimme keltaisen, jolla voidaan helposti kiinnittää kävijän huomio keskeisiin asioihin, sekä samalla keltaisen värin avulla pystyimme piristämään värimaailmaa. 

Käyttöliittymän suunnittelussa panostettiin selkeyteen ja yksinkertaisuuteen, koska sivustolla on laajasti erilaista materiaalia ja tietojen löydettävyys helposti ja intuitiivisesti on erittäin tärkeää.

Toteutus

Verkkosivut on toteutettu käyttäen Agendan omaa WordPress-teemaa, joka on toteutettu mahdollisimman saavutettavaksi ja helposti muokattavaksi. Teema hyödyntää Gutenberg-lohkoja sisällön muokkaamiseen, jonka edut mahdollistavat sisällön uudelleen jäsentämisen ja muotoilun ilman teknistä taustaa. Lohkoja voidaan vetää ja pudottaa vapaasti eri kohtiin muokkausnäkymässä.

Lohkovaihtoehdot vaihtelevat teksti- ja otsikkolohkoista, kuva-, video- ja karusellilohkoihin. Lisäksi on tarjolla Agendan omia lohkoja, joilla voidaan esittää dynaamista sisältöä, kuten artikkeleja sivutetusti monella eri sivulla. Esitettävät artikkelit ja artikkelien esitystavan voi määrittää lohkokohtaisesti ja uudet artikkelit tulevat automaattisesti näkyviin omina nostoinaan. 

Agendan oma Ruudukko-lohko on tarkoitettu pilkkomaan sivulla olevaa sisältöä erikokoisiin ruudukkoihin. Kokeneet kehittäjämme ovat rakentaneet valmiit sivupohjat, jotta sivut saadaan toimimaan eri kokoisilla näytöillä, mobiilista desktoppiin. Rakenne ei kuitenkaan ole kiveen hakattu, joten sivuston hallinnoija voi vetämällä ja pudottamalla lohkoja haluttuihin osioihin jäsentää sisällöt mielensä mukaan.

Alusta tukee useita kieliversioita, joita käyttäjän on helppo hallinnoida sivukohtaisesti. Kieliversiot ovat yhdistettynä toisiinsa, mutta voivat erota sisällöltään vapaasti.

Ulkoasun responsiivinen toteutus perustuu Bootstrap -tyylikirjastoon, jonka eri tyyliluokilla elementtien ilme muodostuu tunnettujen standardien mukaisesti. Sivuston performanssiin on kiinnitetty huomiota jo alustan kehityksessä ja sisältöjen - pääasiassa kuvien - kokojen osalta. Sisällöntuottajalle tarjotaan hallintapaneelissa suositut SEO työkalut hakukoneoptimointia varten.