Kun analyysi on tehty ja kattavuus määritelty, konseptointivaihe voi käynnistyä. Konseptointivaiheessa määritellään tärkeimmät ratkaisua koskevat ideat. Konsepti kertoo siis sen, miten erilaiset vaatimukset täytetään yhtenäisellä tavalla siten, että asetettuihin tavoitteisiin päästään.

Muotoilun suuntaviivat

Määrittelemme muotoilun suuntaviivat, joilla pyritään brändin heijastumiseen käyttäjäkokemukseen. Kyseessä on ylätason suunnittelupäätöksistä, jotka antavat konseptoinnille alustavat suuntaviivat. Tässä vaiheessa alamme pohtia myös graafista suunnittelua. Luomme sivuston tyylin huoneentaulun (style tile), josta käyvät ilmi värivalinnat, fontit ja kuvakieli. Ne antavat suunnan graafiselle ilmeelle ja yksityiskohtien suunnittelulle.

Ideoiden konseptointi

Teemme konkreettisempia ehdotuksia ideointityöpajan parhaiden ideoiden pohjalta. Tavoitteena on visuaalisesti houkutteleva lopputulos, joka kattaa konseptin keskeiset osat. Ehdotukset pitävät sisällään ratkaisun yleiset suuntaviivat. Ne on helppo esitellä ja viestiä organisaation sisällä.

Rakenne

Aiemmin luettelomaisessa muodossa olleet sisältö- ja toiminnallisuusvaatimukset ryhmitellään loogisiksi kokonaisuuksiksi. Ryhmittelyt perustuvat siihen, miten uskomme vierailijoiden parhaiten löytävän etsimänsä tiedon. Keksimme ryhmittelyille osuvat nimet. Ryhmittelyt ja nimet kuvaavat verkkosivuston navigointirakennetta. Luomme sivustokartan, jota testaamme käyttäjillä ja jonka asiakas hyväksyy.

Vuorovaikutussuunnittelu

Tässä vaiheessa verkkosivuston vierailijoille tarkoitetut toiminnot sijoitetaan verkkosivun rakenteeseen loogisille paikoille. Kun toiminnon suorittamiseen vaaditaan useampi kuin yksi askel, kirjataan ylös se, millaisin askelin edetään ja miten suhteutuvat toisiinsa. Lopputuloksena on looginen kaaviokuvamainen vuorovaikutussuunnitelma. Tästä näet toteutettavat toimenpiteet.

Wireframes

Suunnittelemme sen, miltä käyttöliittymä näyttää eri kuvaruuduilla. Luonnokset ovat yksinkertaisia ja mahdollistavat eri vaihtoehtojen tarkastelun yhdessä. Yleensä aloitamme kehyksestä eli yläpalkista, alapalkista ja tärkeimmistä navigointielementeistä. Aloitamme yleensä pienimmistä näytöistä (mobiililaitteista) ja siirrymme sen jälkeen suuremmille kuvaruuduille tarkoitettuihin versioihin. Päätämme, mitkä sivuelementit ovat sivuston näkyvimmillä paikoilla. Wireframe-kuviin kirjoitetaan selventäviä tekstejä ja viittauksia siitä, mihin lokin vaatimuksiin ne vastaavat.

Navigointisuunnittelu

Navigointiin on tärkeä kiinnittää huomiota silloin, kun sivustossa on monta päätettävää ja suunniteltavaa osaa. Navigointisuunnittelussa huomioidaan eri näyttökokojen asettamat vaatimukset ja toiminnot, jotka ratkaisun on tarkoitus sisältää.

Informaatiomuotoilu ja brändi-identiteetti

Käyttöliittymäsuunnittelussa käytetään erilaisia kenttiä ja painikkeita kuvaavia tekstejä sekä johdanto- ja ohjetekstejä. Osa toiminnoista edellyttää siis informaatiomuotoilua/copywritingia. Tässä vaiheessa sisältötarpeita voidaan konkretisoida luomalla esimerkkisisältöä, joka vastaa brändi-identiteettiä ja jonka luettavuus on hyvä ehdotetun kaltaisilla sivutyypeillä. Informaatiomuotoilussa huomioidaan myös esimerkiksi hakukoneoptimointi, johon voidaan vaikuttaa sisällön muotoilulla ja avainsanojen oikeanlaisella käytöllä.

Testaus ja hyväksyntä

Ratkaisua voidaan testata oikeilla käyttäjillä jo ennen kuin konsepti hyväksytään. Esimerkiksi rakenteen ryhmittelyjä voidaan testata koehenkilöillä. Koehenkilöä pyydetään näyttämään, minkä otsikon alta hän etsisi jotakin tiettyä asiaa. Myös Wireframe-kuvat voidaan testata oikeilla käyttäjillä, jotta mahdolliset puutteet havaitaan ajoissa. Ennen konseptointivaiheen päättämistä ja muotoiluvaiheen alkamista pyydetään asiakkaalta hyväksyntä kaikille tehdyille luonnoksille.

Alkuun