Verkkosivuston konseptointi ja suunnittelu

Mitä verkkosivuilta halutaan?

Ennen kuin aloitetaan visuaalista suunnittelua tai yleisesti tulevaa käyttöliittymää, töytyy kirkastaa seuraavia perusasioita:

• Mikä on toimijan fokus ja sivuston päätarkoitus? Mitä teette ja mikä tekee toiminnastasi erityisen? Mikä on strateginen linjaus? Myydäänkö tuotteita, kerätäänkö liidejä, osallistujia tai lahjoituksia, toimiiko infokeskuksena vai jotain muuta?
• Ketkä sitä käyttää? Mieti, ketkä ovat pääkohderyhmää ja mitä he sivustolta hakevat.
• Miten mitataan onnistumista? Onko se myynti, yhteydenotot, lataukset vai jokin muu?

Tässä kohtaa kannattaa myös vilkaista, mitä kilpailijat tekevät ja miten oma sivusto voisi erottua joukosta.

Sisällöt ja käyttäjäpolut kuntoon

Kun tavoite on selvillä, mietitään, mitä sisältöä tarvitaan ja miten käyttäjät liikkuvat sivustolla.

• Mitä sivuja tarvitaan? Listaa kaikki olennainen: etusivu, palvelut, yhteystiedot, blogi, verkkokauppa jne.
• Miten kävijä etenee? Mitä polkua pitkin käyttäjä kulkee esim. ensimmäisestä vierailusta ostoon tai yhteydenottoon?
• Hakukoneystävällisyys (SEO): Sisällön pitää löytyä helposti myös Googlessa, joten mieti avainsanat ja rakenteet fiksusti.

Kun käyttäjäpolut ovat selvät, voidaan piirtää alustava sivukartta, joka toimii projektin pohjana.

Rautalankamallit – hahmotellaan sivuston rakenne

Ennen kuin mennään väreihin ja fontteihin, tehdään wireframe-mallit eli rautalankamallit. Ne ovat yksinkertaisia luonnoksia siitä, miltä sivusto voisi näyttää.

• Missä on päävalikko?
• Mihin laitetaan CTA (Call to Action, esim. ”Ota yhteyttä”)?
• Kuinka pitkät sivut ovat ja miten ne rullaavat?

Tässä vaiheessa testataan erilaisia vaihtoehtoja ja varmistetaan, että rakenne tukee käyttäjäkokemusta. Usein näistä tehdään myös testattava proto mahdollista käyttäjätestausta varten.

Toiminnallisuudet ja tekninen vaatimusmääritelmy

Kun rakenne on kasassa, mietitään, mitä teknisiä juttuja tarvitaan:

• Julkaisujärjestelmä (WordPress, Webflow, Shopify tms.)
• Mahdolliset lisäominaisuudet (verkkokauppa, lomakkeet, chatbot, integraatiot)
• Nopeus ja saavutettavuus – sivuston pitää latautua nopeasti ja toimia kaikilla laitteilla

Tässä vaiheessa myös kehittäjät astuvat kunnolla mukaan projektiin, jos niitä tarvitaan. Tässä vaiheessa laaditaan usein lopputuloksena tekninen vaatimusmäärittelydokumentti.

Prototyyppi ja testaus

Kun kaikki palaset on saatu kasaan, tehdään prototyyppi ja testataan sitä oikeilla käyttäjillä. Tämä voi olla esimerkiksi interaktiivinen malli Figma-ohjelmassa tai jopa jo osittain koodattu versio.

• Toimiiko navigaatio loogisesti?
• Löytävätkö käyttäjät etsimänsä helposti?
• Onko CTA:t oikeissa kohdissa?

Testauksen jälkeen tehdään tarvittavat viilaukset ennen varsinaista kehitystyötä.

Konseptimanuaali ja graafinen ohjeisto

Joissain projekteissa asiakkaalle laaditaan myös konseptimanuaali, joka kokoaa yhteen kaiken työpajatyöskentelyn aikana syntyneen. Se toimii tiiviinä käsikirjana, johon on dokumentoitu lopputulokset, rajaukset, löydökset, sivuston rakenne, käyttäjäpolut sekä graafinen ohjeisto. Manuaali auttaa varmistamaan, että kaikki projektin osapuolet – niin asiakas, design-tiimi kuin mahdollinen tekninen toteuttaja – ovat samalla sivulla ja että verkkosivusto rakentuu suunnitellun mukaisesti.