Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle

Koko: px

Aloita esitys sivulta:

Download "Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle"

Siiri Katajakoski
8 vuotta sitten
Katselukertoja:

1 Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Pyydämme suunnitelijaa ottamaan huomioon seuraavat ohjeet verkkokaupan ulkoasun suunnittelua koskien. Näin vältämme lisäkustannukset ja toimitusaika pysyy nopeana. Tiedostomuoto ja rakenne Ulkoasu tulee toimittaa PSD-muodossa (Adobe Photoshop ), jossa Graafiset elementit ovat omissa tasoissaan (layer), esim. tausta, banneri ja teksti erillisillä tasoilla Sivut / näkymät (kategorianäkymä, tuotesivu, muut kts. Verkkokaupan osat) ovat joko erillisissä tiedostoissa tai yhden tiedoston sisällä ryhmiteltynä kansioihin/ryhmiin (group) Mikäli ulkoasussa käytetään kirjasintyyppiä (fonttia), joka ei ole käyttöjärjestelmän tai Adobe Photoshop :in oletuskirjasintyyppejä pyydämme toimittamaan ne ulkoasun ohessa Mikäli käytössäsi ei ole Adobe Photoshop -ohjelmistoa etkä pysty toimittamaan ulkoasua PSD-muodossa ota yhteyttä myyntiimme (myynti@suomalainenverkkokauppa.fi). Verkkokaupan osat Verkkokaupan yleisimmät (ja suositellut) näkyvissä olevat osat ovat: Ostoskori (mahdollisesti myös ostoskorin tuotelistaus) Kirjautuminen Tuoteryhmävalikko Hakukenttä Sisältösivuvalikko (toimitusehdot, yhteystiedot yms.) Suosituimmat/uudet tuotteet, mainokset Kielivalinta (jos käytössä kieliversiot) Esimerkki PSD-tiedoston rakenteesta Yksilöllisessä ulkoasussa tulee olla suunniteltuna seuraavat näkymät: Etusivu Sisältösivu (asettelu ja typografia) Kategorianäkymä Tuotesivu (yksittäinen tuote) Hakutulos (jos eroaa kategorianäkymästä) Etusivu Etusivulla on verkkokauppiaan määrittelemä sisältö (teksti, kuvat), jonka lisäksi mahdollisesti näyteikkuna, jossa on esim. uusimpia, suosituimpia tai verkkokauppiaan itse määrittelemiä tuotteita. Suomalainen Verkkokauppa 1

Tiedostomuoto ja rakenne Ulkoasu tulee toimittaa PSD-muodossa (Adobe Photoshop ), jossa Graafiset elementit ovat omissa tasoissaan (layer), esim.

2 Sisältösivu Sisältösivun suunnittelu painottuu sisällön asemointiin (typografia, kuvien muotoilu). Kategorianäkymä Kategorianäkymässä voidaan näyttää seuraavat tuotetiedot: Tuotteen nimi Tuotteen hinta (alennettu hinta erikseen, haluttaessa myös alennusprosentti) Tuotekuva Tuotekuvaus (voidaan rajoittaa tiettyyn sana- tai kirjainmäärään) Varastotilanne (ei saatavilla / varastossa) Lisää koriin tai vastaava (myös lisättävien määrä) Kategoriassa näkyvien esikatselukuvien (thumbnail) koko voi olla mikä tahansa, suositeltu maksimikoko on kuitenkin 256x256 pikseliä. Esikatselukuville voidaan myös määrittää alue, jolle ne skaalataan kuvasuhde säilyttäen. Kategorianäkymä sivutetaan automaattisesti, mutta sivulla näkyvien tuotteiden lukumäärä on määritettävissä. Sivutusvalikko voidaan näyttää sekä kategorianäkymän ylä- että alaosassa. Kategorianäkymässä tulee olla suunniteltuna seuraavat sivutukseen ja tuotteiden järjestykseen liittyvät osat: Tuotteiden määrä sivulla Seuraava / Edellinen painikkeet Siirry sivulle valinta Järjestä valinta (hinnan / nimen mukaan) Tuotesivu Tuotesivulla voidaan näyttää seuraavat tuotetiedot: Tuotteen nimi Tuotteen hinta (alennettu hinta erikseen, haluttaessa myös alennusprosentti) Tuotekuva, lisätuotekuvat Tuotekuvaus Tuotekoodi Varastotilanne (ei saatavilla / varastossa) Lisää koriin tai vastaava (myös lisättävien määrä) Tuotesivulle tulee olla suunniteltuna miten näytetään ryhmittelytuotteet ja tuotteet, joissa on tuotemuuttujia (kts. alempaa Esimerkit). Tuotesivulla voidaan myös näyttää kategoriapolku (breadcrumbs) esim. Yläkategoria / Alakategoria / Alin kategoria. Tuotesivulla näkyy myös määritelty lukumäärä ko. tuotteeseen liittyviä tuotteita, joista voidaan näyttää halutut tuotetiedot (kts. ylläoleva taulukko). Suomalainen Verkkokauppa 2

rajoittaa tiettyyn sana- tai kirjainmäärään) Varastotilanne (ei saatavilla / varastossa) Lisää koriin tai vastaava (myös lisättävien määrä) Kategoriassa näkyvien esikatselukuvien (thumbnail) koko voi

3 Tuotekuvan esikatselukuvan voi olla minkä tahansa kokoinen. Tuotekuvaa klikkaamalla avataan tuotekuvasta täysikokoinen näkymä (JavaScriptillä, kts. Esimerkit). Hakutulos Verkkokaupasta haettaessa voidaan hakutulokset listata eri tavalla kuin kategorianäkymässä (kts. Esimerkit). Yleisiä ohjeita Kirjasimet (fontit) Verkkokaupassa esiintyvän dynaamisen tekstin kirjasimen valinnassa tulee käyttää yleisimpiä kirjasintyyppejä, jotta sivut näyttävät samalta kaikilla käyttäjillä käyttöjärjestelmästä ja selaimesta riippumatta. Seuraavat kirjasintyypit ovat yleisimpiä Internet-käyttöön sopivia: Arial Arial Black Arial Narrow Century Gothic Courier New Georgia Impact Lucida Console Palatino Linotype Tahoma Times New Roman Trebuchet MS Verdana Ulkoasun leveys Ulkoasua suunniteltaessa tulee ottaa huomioon käyttäjien erikokoiset monitorit ja niiden resoluutiot. Suositeltu verkkokaupan sisällön enimmäisleveys onkin täten 960 pikseliä. Suomalainen Verkkokauppa 3

Yleisiä ohjeita Kirjasimet (fontit) Verkkokaupassa esiintyvän dynaamisen tekstin kirjasimen valinnassa tulee käyttää yleisimpiä kirjasintyyppejä, jotta sivut näyttävät samalta kaikilla käyttäjillä

4 Esimerkit Tuotemuuttujat Tuotekuvan täysikokoinen näkymä Suomalainen Verkkokauppa 4

5 Hakutulos Kategorianäkymä Suomalainen Verkkokauppa 5

Samankaltaiset tiedostot

Näin tilaat tuotteita C2 SmartLight Oy:n verkkokaupasta

Näin tilaat tuotteita C2 SmartLight Oy:n verkkokaupasta Kuvaus C2 SmartLight Oy on avannut oman verkkokaupan minkä kautta voit ostaa tuotteitamme ja kumppaneidemme tuotteita helposti. Verkkokaupan kautta