Verkkokaupan visuaalinen suunnittelu
Salminen, Jukka (2013)
Salminen, Jukka
Metropolia Ammattikorkeakoulu
2013
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2013091615332
https://urn.fi/URN:NBN:fi:amk-2013091615332
Tiivistelmä
Insinöörityön tarkoituksena oli uudistaa ja nykyaikaistaa verkkokaupan ulkoasu. Työssä keskityttiin ePages-sisällönhallintajärjestelmään ja sen muokkaamiseen verkkosivusuunnittelun parhaiden käytäntöjen mukaiseksi.
Insinöörityössä perehdyttiin tärkeimpiin visuaalisen suunnittelun parhaisiin käytäntöihin, kuten F- ja Z-rakenteiden käyttöön, ja niiden vaikutukseen verkkosivuston toiminnallisuudessa. Lisäksi perehdyttiin oikeanlaisen sivuhierarkian käyttöön sivujen suunnittelemiseksi AIDA-mallin mukaisesti. Insinöörityössä tutkittiin myös ihmisen ja verkkosivuston välistä interaktiota ja sen optimoimista hyödyntäen psykologiaa, väriteoriaa ja optimaalisen visuaalisen hierarkian rakentamista. Selvisi, että verkkosivusuunnittelussa tärkeät visuaaliset konseptit ovat pääpiirteittäin samoja kuin kuvataiteessa. Kuvataiteessa käytettyjä käsitteitä, kuten kultaista leikkausta, tasapainoa, painotusta, rytmitystä, yhteenkuuluvuutta ja kokosuhdetta, voidaan hyödyntää myös verkkosuunnittelussa. Lisäksi etsittiin keinoja ja huomioonotettavia asioita käyttäjän flow-tuntemusten mahdollistamiseksi käyttäjässä verkkosivusuunnittelun avulla.
Insinöörityöraportin tuloksena syntyi ohjeisto, jota voidaan käyttää ohjenuorana verkkosivusuunnittelussa. Insinöörityön tuloksia voidaan hyödyntää arvioitaessa visuaalisen suunnittelun toimivuutta ja rakennettaessa verkkosivuja parhaiden käytäntöjen mukaisesti.
Verkkokaupan ulkoasu uudistettiin käyttämällä perinteisten WWW-tekniikoiden ja JavaScriptin lisäksi ePages-järjestelmään integroitua jQuery-kirjastoa. jQuery on internetissä yleisesti käytetty kirjasto, joka sisältää valmiit selainriippumattomat komennot tärkeimmistä verkkosivujen käyttämistä funktioista.
Insinöörityön tuloksena syntyi verkkokauppauudistus, joka on visuaalisesti tarkoituksenmukainen ja toimiva. Verkkokaupan ilmeestä tuli kokonaisuudessaan selkeä ja yrityksen arvoja, tyyliä ja brändi-imagoa edustava.
Insinöörityössä perehdyttiin tärkeimpiin visuaalisen suunnittelun parhaisiin käytäntöihin, kuten F- ja Z-rakenteiden käyttöön, ja niiden vaikutukseen verkkosivuston toiminnallisuudessa. Lisäksi perehdyttiin oikeanlaisen sivuhierarkian käyttöön sivujen suunnittelemiseksi AIDA-mallin mukaisesti. Insinöörityössä tutkittiin myös ihmisen ja verkkosivuston välistä interaktiota ja sen optimoimista hyödyntäen psykologiaa, väriteoriaa ja optimaalisen visuaalisen hierarkian rakentamista. Selvisi, että verkkosivusuunnittelussa tärkeät visuaaliset konseptit ovat pääpiirteittäin samoja kuin kuvataiteessa. Kuvataiteessa käytettyjä käsitteitä, kuten kultaista leikkausta, tasapainoa, painotusta, rytmitystä, yhteenkuuluvuutta ja kokosuhdetta, voidaan hyödyntää myös verkkosuunnittelussa. Lisäksi etsittiin keinoja ja huomioonotettavia asioita käyttäjän flow-tuntemusten mahdollistamiseksi käyttäjässä verkkosivusuunnittelun avulla.
Insinöörityöraportin tuloksena syntyi ohjeisto, jota voidaan käyttää ohjenuorana verkkosivusuunnittelussa. Insinöörityön tuloksia voidaan hyödyntää arvioitaessa visuaalisen suunnittelun toimivuutta ja rakennettaessa verkkosivuja parhaiden käytäntöjen mukaisesti.
Verkkokaupan ulkoasu uudistettiin käyttämällä perinteisten WWW-tekniikoiden ja JavaScriptin lisäksi ePages-järjestelmään integroitua jQuery-kirjastoa. jQuery on internetissä yleisesti käytetty kirjasto, joka sisältää valmiit selainriippumattomat komennot tärkeimmistä verkkosivujen käyttämistä funktioista.
Insinöörityön tuloksena syntyi verkkokauppauudistus, joka on visuaalisesti tarkoituksenmukainen ja toimiva. Verkkokaupan ilmeestä tuli kokonaisuudessaan selkeä ja yrityksen arvoja, tyyliä ja brändi-imagoa edustava.