Suunnitteluprosessini ja tyypillisen projektin vaiheet

Tässä kirjoituksessa avaan tiiviisti omaa suunnitteluprosessiani sekä mitä eri vaiheita onnistuneen lopputuloksen saavuttamiseksi tarvitaan.

Kickoff

Hyvä projekti lähtee liikkeelle kickoffilla. Kickoffissa tutustutaan asiakkaan kanssa puolin ja toisin sekä käydään läpi tuleva projekti pähkinänkuoressa. Tärkeintä on muodostaa yhteinen näkemys siitä, mitä ollaan tekemässä ja että kaikille syntyy hyvä fiilis uudesta projektista. Tehtävät ja kevyet harjoitukset voivat myös olla osa kickoffia. Näin etäaikaan varsin näppärä työkalu etäworkshopin vetämiseen on ollut Miro. Sen avulla kaikki osallistujat voivat kirjoittaa ajatuksiaan ylös ja tehdä post it -tyyppisiä tehtäviä eri aiheista.

Konseptointi

Onnistunut projekti nojaa aina selkeään konseptiin. Konseptin sisällöstä on monia mielipiteitä, mutta itse miellän konseptin projektin kiteytykseksi. Konsepti vastaa siihen, mitä ollaan tekemässä, kenelle ja miksi. Hyvä konsepti on kuin opas tai ohjenuora koko tiimille; sen avulla on mahdollista briiffata uusikin tekijä nopeasti mukaan projektiin. Konseptista löytyy kuvattuna ongelma tai tarve jota ratkaistaan, luova näkökulma, kohderyhmien kuvaukset sekä tärkeimmät toiminnallisuudet ylätasolla. Konsepti sanallistaa ja käsitteellistää suunnittelijan ja muun tiimin päässä pyörivät ajatukset kirjalliseen ja visuaaliseen muotoon. Näin hiljainen tieto päätyy paperille ja siihen voidaan palata projektin myöhemmissä vaiheissa. Nykyisin jonkinasteinen konsepti on osa jokaista vähänkin isompaa projektiani.

Rautalankamallit & sivukartta

Ennen kuin aloitan varsinaisen suunnittelutyön on hyvä miettiä sivuston tai palvelun rakenne kuntoon. Sivukartta on sivupuumainen esitystapa tärkeimmille pääosioille ja sen alle kuuluville sivuille tai näkymille. MindMeister on näppärä työkalu tätä varten. Varsinaisen ulkoasu- ja rakennesuunnittelun ensimmäinen vaiheena työstetään rautalankamallit eli tuttavallisemmin wiret. Wirejen avulla esitetään tärkeimmät sisältösivut ja sisältöelementit ilman visuaalisia tyylejä, kuten fontteja ja värejä. Wiret näyttävät harmailta laatikoilta, joissa on jonkin verran tekstiä. Niiden avulla varmistetaan, että tulevan sivuston tai palvelun rakenne on järkevä ja jokaiselle sisällölle löytyy sopiva paikka. Wiret auttavat fokusoimaan isoon kuvaan ja ne säästävät aikaa, sillä niitä on kevyt muuttaa. Rautalankamalleihin ja muuhun visuaaliseen suunnitteluun käytän Sketchiä.

Ulkoasu & layoutit

Sivuston tai palvelun lopullinen ulkoasu eli leiskat rakentuvat wirejen pohjalta. Usein asiakkaalla on käytössään valmis brändi-ilme, jota halutaan soveltaa verkossa. Vahva ymmärrys visuaalisen suunnittelun periaatteista on tärkeää kun suunnitellaan layouteja; riittävä tekstin kontrasti, otsikoiden selkeä visuaalinen hierarkia, elementtien tasaukset, värien käyttö ja kuvavalinnat vaikuttavat kaikki lopulliseen ulkoasuun.

Layouteja tyypillisesti pallotellaan asiakkaan kanssa muutamia kertoja ja niihin tehdään muutoksia. Tämä kaikki on täysin normaali osa design-prosessia ja osa myös jokaista omaa projektiani. Ideat voivat vaatia useampaakin iterointikierrosta. Layoutien presentoimiseen asiakkaille käytän Invisionia, jonka avulla näkymät on helppo jakaa linkin kautta eteenpäin. Invisionin avulla voi myös tehdä kevyitä klikkailtavia prototyyppejä ja esitellä mobiiliversiot leiskoista erikseen.

Kun layoutit ovat valmistuneet, ne siirtyvät devaajien työpöydälle. Tässä vaiheessa annan devaajalle Sketch-tiedoston ja toimitan mahdolliset visuaaliset assetit, kuten fontit, kuvat ja ikonit.

QA & testaus

Tyypillinen projektini ei lopu leiskojen toimittamiseen. Suunnittelijan tehtävä on mielestäni toimia laadunvarmistajana, eräänlaisena keittiömestarina, joka varmistaa, että lopputulos vastaa suunnitelmia. Tässä työvaiheessa käyn usein läpi sivuston visuaalisia tyylejä ja testaan sivustoa tai palvelua eri laitteilla. Aina löytyy pientä parannettavaa ja korjailtavaa. Monesti myös omat suunnitelmat kaipaavat hienosäätöä: isokokoinen otsikkoteksti ei esimerkiksi toimi pitkän tekstin kanssa ja niinpä designia on joskus muutettava lennosta.

Kaiken kaikkiaan verkkosivuston tai palvelun suunnittelu on monivaiheinen prosessi, jonka jokainen vaihe nojaa edellisen varaan. Isoimmat linjanvedot tehdään alkuvaiheessa mutta viimesilaus ja viimeiset 20% eli niin sanottu ’juhlamokka’ syntyy aivan viime metreillä. Sivusto ja palvelu ei myöskään ole koskaan aukottoman valmis vaan projektin valmistuttua mielessä on usein monia jatkokehitysideoita, joita lähdetään suunnittelemaan seuraavaksi.