Avainsana: visuaalinen suunnittelu

Suomen riistakeskus

Suomen riistakeskuksen sivustouudistusta lähdettiin suunnittelemaan joulukuussa 2017 starttipalaverilla keskustoimistolla Helsingin Tapanilassa. Tavoitteena oli tehdä sivustosta käytettävämpi rakenteellisesti, modernisoida ulkoasua ja tuoda uutisia ja muita tärkeitä toimintoja näkyvämmäksi

Yhteyshenkilönä riistakeskuksen puolelta toimi viestintäsuunnittelija Tero Kuitunen. Hän on tuttu jo monen vuoden ajalta, toimiessaan entisessä tehtävässään Riista-lehden päätoimittajana (toteutin lehden sivut urani alkupuolella).

Sivusto sisältää satoja alasivuja ja artikkeleita neljällä eri kielellä. Lisäksi sivustolla on monia räätälöityjä toimintoja kuten koulutus- ja yhteystietohakuja. Näitä toimintoja on alunperin laadukkaasti toteuttanut H1 (nykyinen Zeeland Family).

Tein ulkoasusuunnitelman ja toteutuksen itse. Keskiössä olivat kauniit kuvat, ajankohtaiset uutiset ja tärkeät nostot sisällöstä. Toteutus on jälleen asiakkaankin näkökulmasta modulaarinen, eli toteutetuista sisältöelementeistä voi rakentaa haluamiaan ulkoasuja helposti. Olemassaolevat toiminnot säilytettiin, muotoilut uudelleenrakentaen.

Olin jo pitkään halunnut tehdä jotain fullscreen design -periaatteella; elementit täyttävät ruudun laidasta laitaan isollakin resoluutiolla, ja silti sivusto mukautuu hienosti myös mobiiliin. Valu Digitalin toimari on kirjoittanut hyvin fullscreen designista. Tässä siis oli oiva projekti ottaa käyttöön koko ruutu.

Uutuutena sivustolle integroitiin ennakoiva hakumoottori AddSearchin avulla. Tämä korvaa WordPressin oman hakumoottorin ja mahdollistaa esimerkiksi hakutulosten painottamisen. Hakumoottori indeksoi sekä pääsivuston että Riistainfon ja näyttää hakutuloksia ristiin kummastakin. Tulokset tulevat salamannopeasti jo parilla alkukirjaimella esikatselukuvan kera — kokeile hakua ihmeessä!

Sisältöä sivustolle haetaan useista rajapinnoista, kuten Oma Riista -palvelun rajapinnasta (metsästyskiintiöt) sekä Viidakkomonitorin mediaseurantatuloksista.

Valu Digital vastasi sivuston kanssa lähes käsi kädessä julkaistun Riistainfon suunnittelusta ja toteutuksesta. Sivustojen ulkoasua pyrittiin yhtenäistämään yhdessä Valun asiantuntijoiden kanssa, jotta ne näyttäisivät mahdollisuuksien mukaan saman toimijan sisarsivustoilta.

Suomen riistakeskuksen riista.fi-sivusto palvelee metsästäjiä ja kaikkia riista-asioista kiinnostuneita. Merkittävän osan sivuston sisällöstä on oltava kansalaisten saatavilla helposti  ja ajan tasaisena.

Tätä taustaa vasten ajatus sivuston uudistamisesta aiheutti meissä tiettyä hermostuneisuutta, joka kuitenkin karisi nopeasti projektin käynnistyttyä. Kaikki eteni aikataulussa ja myös matkan varrella ilmaantuneet ideat toteutettiin leppoisassa ilmapiirissä.

Saimme haluamamme, ilman turhia sydämentykytyksiä.

Tero Kuitunen

Kiitos Suomne riistakeskuksen väelle; Terolle, Mirjalle ja Klausille. Jatketaan tästä kehitystyötä eteenpäin!

 

Suomen riistakeskuksen sivustouudistusta lähdettiin suunnittelemaan joulukuussa 2017 starttipalaverilla keskustoimistolla Helsingin Tapanilassa. Tavoitteena oli tehdä sivustosta käytettävämpi rakenteellisesti, modernisoida ulkoasua ja tuoda uutisia ja muita tärkeitä toimintoja näkyvämmäksi Yhteyshenkilönä riistakeskuksen puolelta… Lue artikkeli ”Suomen riistakeskus” kokonaan »

riista.fi
Suomen riistakeskus

Hämeen Kesäyliopisto

Hämeen Kesäyliopisto tarjoaa avointa koulutusta kaikille kiinnostuneille ympäri vuoden.

Kesäyliopiston koulutuspäällikkö Hanna Salo otti yhteyttä huhtikuun lopussa. He olivat kuulleet minun toteuttaneen loppuvuodesta 2016 Etelä-Pohjanmaan Kesäyliopiston uusille WordPress-pohjaisille sivuille rajapintaintegraation Asion koulutuskalenteriin osana seinäjokelaisen Valakia Interactiven toteuttamaa sivustouudistusta.

Kesäyliopisto pyysi minua freesaamaan jo valmiiksi WordPressin päällä pyörineet vanhat sivunsa uudelle aikakaudelle. Lähdin hakemaan inspiraatiota kesäyliopiston koulutusesitteen raikkaasta ilmeestä, jonka on suunnitellut forssalainen Mainossatama. Lähetin ensimmäisen luonnoksen toukokuun alussa, ja kesäkuussa päästiin avaamaan uudet sivut. Melko nopealla sykkeellä saatiin siis projekti maaliin.

Mikrogramman kanssa toteutettu nettisivujen uudistusprojekti sujui joustavasti, nopeasti ja vaivatta! Toteuttajana Mikrogramma oli erittäin luotettava ja joustava yhteistyökumppani.

Uudistuksen yhteydessä tehtiin myös integraatio Asion kurssitietojärjestelmään. Tätä kautta Asion järjestelmään syötetyt kurssitiedot voitiin hakea osaksi sivujen omaa sisältöä. Tavoitteena oli saada enemmän kävijöitä kesäyliopiston omille sivuille kasvaneen hakukonenäkyvyyden ja selkeämpien, yksilöllisten kurssiesitesivujen osoitteiden kautta. Etusivulle upotettiin Asion nettikalenteri vielä erikseen omana elementtinään.

Nettisivu-uudistuksen yhteydessä toteutettu rajapintatyö kurssihallintajärjestelmäämme sujui ongelmitta. Yhteydenpito hoitui suoraan Mikrogramman toimesta kurssihallintajärjestelmätahoon.

Tiedot haetaan Asion rajapinnasta JSON-muodossa, ja tallennetaan WordPressin tietokantaan välimuistiin (transient) halutun pituiseksi ajaksi. Tämä nopeuttaa sivulatauksia huomattavasti, koska tietoja ei tarvitse hakea jokaista kävijää varten erikseen ulkoisesta järjestelmästä.

Sivuston uudeksi kodiksi valittiin yhteistuumin Seravon WP-Palvelu, joka huolehtii WordPress-pohjaisten sivujen ylläpidosta todella mallikkaasti; sivut latautuvat nopeasti ja muutenkin tietoturvaan ja suorituskykyyn on kiinnitetty erityistä huomiota. WP-Palveluun on myös mahdollista luoda ulkopuolisten katseilta piilossa olevia ”varjoja”, joissa voi helposti testata uutta ulkoasua tai sisältöä ennalta.

Yhteistyöhön ja lopputulokseen olemme erittäin tyytyväisiä! Suosittelemme Mikrogrammaa nettisivutoteutuksiin!

Kiitos Hanna ja muu Hämeen Kesäyliopiston porukka, että sain olla alusta asti kokonaisvastuullisesti suunnittelemassa ja toteuttamassa tätä! Ja kiitos myös Asion spesialistieille avusta ja reagoinnista rajapinnan osalta.

Hämeen Kesäyliopisto tarjoaa avointa koulutusta kaikille kiinnostuneille ympäri vuoden. Kesäyliopiston koulutuspäällikkö Hanna Salo otti yhteyttä huhtikuun lopussa. He olivat kuulleet minun toteuttaneen loppuvuodesta 2016 Etelä-Pohjanmaan Kesäyliopiston uusille WordPress-pohjaisille sivuille rajapintaintegraation… Lue artikkeli ”Hämeen Kesäyliopisto” kokonaan »

hameenkesayliopisto.fi
Hämeen Kesäyliopisto

Parempia Riistalaukauksia

Haulikkokoulu ja Kiväärikoulu järjestävät koulutuksia, jotka kirjaimellisesti tähtäävät onnistuneisiin riistalaukauksiin.

Suunnittelin kokonaan uusitulle sivustolle erähenkisen ulkoasun, jossa hyödynnetään hyvän ystäväni ja kiväärikouluttajan, Ville Pohjolan, upeita kuvia.

Toteutin sivustolle hartaasti toivotun ilmoittautumisjärjestelmän koulutuksiin; paikkavaraustilanteen näkee reaaliajassa. Järjestely perustuu Event Organiser Pro -lisäosaan.

Haulikkokoulu ja Kiväärikoulu järjestävät koulutuksia, jotka kirjaimellisesti tähtäävät onnistuneisiin riistalaukauksiin. Suunnittelin kokonaan uusitulle sivustolle erähenkisen ulkoasun, jossa hyödynnetään hyvän ystäväni ja kiväärikouluttajan, Ville Pohjolan, upeita kuvia. Toteutin sivustolle hartaasti toivotun… Lue artikkeli ”Parempia Riistalaukauksia” kokonaan »

kivaarikoulu.fi
Parempia Riistalaukauksia

Ovikortit

Ovi-korttisarja on tekstitön kuvakorttikokoelma asiakastyöhön ihmissuhdealoille.

Suunnittelin etusivun pidemmäksi ja informatiiviseksi. Alasivuilta löytyvät lisätiedot ja verkkokauppa.

Kortteja voi siis tilata sivustolle integroidusta WooCommerce-pohjaisesta kaupasta. Ostoskorin loppusumma päivittyy automaattisesti yläpalkkiin. Verkkokaupan puolelle luotiin myös ”valitse vapaasti 10” -tyyppisiä yhdistelmätuotteita Mix and Match Products -lisäosan ja räätälöidyn toteutuksen avulla. Toimituskulut lasketaan automaattisesti tilauksen painon mukaan.

Sivustoa on mahdollista käyttää sekä suomeksi että englanniksi, verkkokauppa mukaanlukien.

Ovi-korttisarja on tekstitön kuvakorttikokoelma asiakastyöhön ihmissuhdealoille. Suunnittelin etusivun pidemmäksi ja informatiiviseksi. Alasivuilta löytyvät lisätiedot ja verkkokauppa. Kortteja voi siis tilata sivustolle integroidusta WooCommerce-pohjaisesta kaupasta. Ostoskorin loppusumma päivittyy automaattisesti yläpalkkiin. Verkkokaupan… Lue artikkeli ”Ovikortit” kokonaan »

ovikortit.com
Ovikortit

Eevia

Eevia on suomalais-norjalainen terveysalan yritys, joka valmistaa raaka-aineita arktisista luonnonantimista.

Sain suunnitella uuden, raikkaan ilmeen Eevialle tuttujen graafisten elementtien ja yksityiskohtien ympärille. Etusijalla ovat isot kuvat ja tekstielementeissä toistuvat Eevian brändivärit.

Sivustolle integroitiin mahdollisuus tilata Eevian uutiskirje. Uutiskirjeen luominen on tuotu osaksi WordPressin ohjausnäkymää.

Eevian yritysasiakkaita silmälläpitäen toteutin kevyen ”intranetin”; raaka-aineiden dokumentaation lataaminen edellyttää rekisteröitymistä. Rekisteröityneille asiakkaille voidaan lähettää uutiskirjeitä tai kysyä heiltä tarkempia tietoja kiinnostuksesta tuotteita kohtaan.

Eevia on suomalais-norjalainen terveysalan yritys, joka valmistaa raaka-aineita arktisista luonnonantimista. Sain suunnitella uuden, raikkaan ilmeen Eevialle tuttujen graafisten elementtien ja yksityiskohtien ympärille. Etusijalla ovat isot kuvat ja tekstielementeissä toistuvat Eevian… Lue artikkeli ”Eevia” kokonaan »

eevia.fi
Eevia

Vuoden Viinit 2017

Vuoden Viinit -kilpailun sivuston ulkoasu uudistettiin täysin vastaamaan vuoden 2017 kisan uudistettua tulostenjulkistustaktiikkaa.

Etusivulla on kisan edetessä täydentyvä listaus eri sarjojen tuloksista. Myös sivun ylälaidassa oleva graafi — ”sarjapiirakka” — täydentyy sitä mukaa, kun tuloksia julkistetaan.  Graafin ulkoasun suunnitteli hyvä ystäväni ja lahjakas graafinen suunnittelija Mika Hakala. Teknisesti piirakka on toteutettu SVG-kuvana, jota muokataan lennossa JavaScriptin avulla.

Maahantuojille on oma kirjautumista edellyttävä extranet, jonka avulla he voivat ilmoittaa edustamiaan viinejä kilpailuun suoraan sivustolta löytyvän lomakkeen avulla. Viinit menevät WordPressissä omiksi sisältötyypeikseen (custom post type), ja niitä voidaan kisan järjestäjän puolesta monipuolisesti muokata ohjausnäkymässä.

Toteutin viinien ilmoittamisen helpottamiseksi järjestelyn, jossa maahantuoja syöttää lomakkeelle ensin Alkon tuotenumeron, ja lomake esitäytetään automaattisesti Alkon tietokannasta haettavien tietojen avulla.

Vuoden Viinit -kilpailun sivuston ulkoasu uudistettiin täysin vastaamaan vuoden 2017 kisan uudistettua tulostenjulkistustaktiikkaa. Etusivulla on kisan edetessä täydentyvä listaus eri sarjojen tuloksista. Myös sivun ylälaidassa oleva graafi — ”sarjapiirakka” — täydentyy… Lue artikkeli ”Vuoden Viinit 2017” kokonaan »

vuodenviinit.fi
Vuoden Viinit 2017