Verkkosivuprojektin käyttöliittymäsuunnittelu

Kun sivuston rakenne ja navigaatio on lyöty lukkoon, voidaan niiden ympärille miettiä tarvittavat sivumallit, jotka muodostavat niin sanotun rautalangan sivustolle. Usein mallit tehdään noin 5-8 erilaisesta sivutyypistä. Loput tarvittavat sivut voidaan soveltaa näiden perusteella.

Sivupohjamallit tehdään usein seuraavista elementeistä:

Etusivu
Yhteystietosivu ja mahdollisesti henkilökuntaesittelysivut
Artikkelisivu (uutis- tai blogiartikkeli)
Tuote- ja/tai palvelunkuvaussivu
Referenssisivu
Arkistosivu
Hakutulossivu

Kussakin verkkosivuprojektissa mietitään

montako erilaista sivutyyppiä pitää piirtää rautalangoiksi,
mitkä sisältötyypit voivat käyttää joko kokonaan tai osittain samaa sivumallia, ja
kuinka paljon ja millaista sisältöä sivuille on mahdollista tuottaa, erityisesti kuvien ja videoiden saatavuus.

Kun sivuston rakenne ja navigaatio on lyöty lukkoon, voidaan niiden ympärille miettiä tarvittavat sivumallit, jotka muodostavat niin sanotun rautalangan sivustolle.

ERILLISET NÄKYMÄT SIVUTYYPEILLE HELPOTTAVAT KÄYTTÖÄ

Rautalankoihin mietitään sopivat sisältölohkokokonaisuudet tarvittavia sisältöjä ja tarpeita varten. Yleensä hyödynnetään WordPressin (tai muun sisällönhallintajärjestelmän) vakiolohkoja, jotka voidaan kustomoida, ja tarvittaessa suunnitellaan myös mittatilauslohkoja juuri tiettyä tarvetta varten.

Periaatteessa, koska sivut koostuvat lohkoista, voitaisiin käyttöliittymäsuunnittelussa luoda vain yksi massiivinen sivumalli, jossa olisi mukana kaikki tarvittavat sisältölohkot. Eri sivutyypit on kuitenkin helpompi hahmottaa ja erotella toisistaan, kun UX-protoon luodaan erilliset näkymät kullekin sivutyypille.

Käyttöliittymää varten suunnitellaan peruselementtien, kuten otsikot, leipätekstikappaleet, listat, mediaelementit ja taulukot, lisäksi tarpeen mukaan esimerkiksi

haitarielementtejä, jotka aukeavat ja sulkeutuvat klikkaamalla, jolloin sisältöä voidaan piilottaa erityisesti pitkillä sivuilla,
laskureita,
nostolaatikoita,
bannereita, ja
lomakkeita.

LOHKOJA YHDISTELEMÄLLÄ UNIIKKI SIVUSTO

Sivumallit ovat käytännössä siis lohkokokoelmia. Lohkoja voi vapaasti käyttää myös muussa järjestyksessä ja luoda tarvittaessa uudenlaisia kokonaisuuksia, jolloin kustakin sisältösivusta voidaan rakentaa uniikki. WordPressin Gutenberg-editori mahdollistaa myöhemmin ylläpitovaiheessa myös täysin uusien sivutyyppien luomisen vain käytettävissä olevia lohkoja eri tavoin yhdistelmällä.

Kun käyttöliittymäsuunnittelu on valmis ja rautalangat on hyväksytty, voi sisällönsuunnittelu ja -tuotanto alkaa yhtä aikaa visuaalisen suunnittelun kanssa.

Tarvitsetteko apua Käyttöliittymän suunnittelussa?

Jos haluat keskustella siitä, miten voisimme Verkkoasemalla auttaa sinua, varaa aika tuotantojohtajamme Joni Norringin kalenteriin!

Varaa aika kalenteriin