![Page 1: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/1.jpg)
Veebidisaini trendid 2014Conversion designJaanika Kivilo, WSI Online
![Page 2: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/2.jpg)
Miks hea disain on oluline?
Esmamuljet saab luua vaid 1 kord!Mida hindab kodulehe külastaja?
©2014 WSI. All rights reserved.
![Page 3: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/3.jpg)
Esmamulje ON oluline
• 94% esmamuljest kujuneb disaini põhjal
• Esmamulje kujuneb kiiremini kui 1 silmapilgutus
• Üle 70% internetikasutajatest hindab ettevõtte usaldusväärsust nende kodulehe põhjal
• Üle 65% internetis ostlejatest ei usalda ebaprofessionaalse välimusega kodulehte
©2014 WSI. All rights reserved.
![Page 4: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/4.jpg)
Hea disaini eelised
• Positiivne esmamulje
• Usaldusväärne maine
• Aitab suurendada veebis nähtavust
• Parem SEO• Suurem kodulehe konversioon
![Page 5: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/5.jpg)
Conversion design
Konversioon - kodulehe külastaja täidab kodulehe eesmärgi. Teisisõnu täidab päringuvormi, esitab tellimuse, laeb alla juhendi, registreerub uudiskirjale vm.
Conversion design - kodulehte luues on silmas peetud kodulehe eesmärki. Külastaja suunatakse soovitud tegevusele kasutades selleks erinevaid elemente ja psühholoogilisi mõjutajaid.
![Page 6: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/6.jpg)
Conversion design’i olulisemad tunnused• Sihtrühmale suunatud disain
• Loogiline kodulehe struktuur
• Lihtne navigeerimine
• Negatiivse ala kasutamine (ehk õhuvahed)
• Olulise info rõhutamine
• Müügitunnel
• CTA-de kasutamine
• Kiire kodulehe laadimisaeg
![Page 7: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/7.jpg)
Conversion design disainitrendides
![Page 8: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/8.jpg)
Kuidas teha head, konversioonile suunatud kodulehte?Kasutajamugavus ennekõike:
•usaldus•harjumused•psühholoogilised mõjutajad•meediakasutus kodulehel•värvipsühholoogia•lehe ülesehitus•buyer personas•A/B testimine
![Page 9: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/9.jpg)
Conversion design trendides
• Veebidisaini eesmärk on muuta koduleht kasutajale mugavaks
• Disainitrendid hoiavad kodulehe värskena• 4 olulisemat suunda:
1. vähem teksti, rohkem pilte2. puhtus, selgus, lakoonilisus3. eristumiseks ootamatud võtted4. kasutajamugavus ennekõike
![Page 10: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/10.jpg)
1. vähem teksti, rohkem sisu
Inimesed ei loe vaid sirvivad kodulehti!• Enamik kasutajaid sirvib läbi vaid 50-60%
veebiartiklist (Chartbeat)• Kodulehel loetakse vähem kui 20% tekstist (Jakob
Nielsen)• Hästi struktureeritud koduleht motiveerib rohkem
lugema
• Kasutatakse enam infograafika tüüpi sisu.
![Page 11: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/11.jpg)
Näide: Mac Pro
![Page 12: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/12.jpg)
2. Puhtus, selgus, lakoonilisus
• Lihtne elegants• Minimalistlik graafika• Suured puhtad pinnad• Palju õhku• Hoolega valitud detailid• Web 2.0 on kadumas. • Suund flat disainil
Kasutajakogemus eelkõige!
![Page 13: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/13.jpg)
Näide: WSI Online
![Page 14: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/14.jpg)
Näide: Hea Tava
![Page 15: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/15.jpg)
3. Eristumiseks ootamatud võtted• Parallax• Animeeritud elemendid• Tüpograafia• Single page lahendused
![Page 16: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/16.jpg)
Parallax
• Mänguline, hoiab külastaja põnevil• Mõned pinnad liiguvad, teised jäävad paigale• Tugev visuaalne wow-effekt• Julge ja eristuv lahendus• Suur engagement• Kasutavad ennekõike suured brändid
![Page 17: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/17.jpg)
Näide: Numero10
NB! Efekti tabamiseks vaata lehte lives!! http://www.numero10.ch/fr/home
![Page 18: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/18.jpg)
Animatsioonid
• Populaarsust koguvad HTML5 ja CSS3 lahendused• Erinevad liikuvad lahendused nt:
• elementide hajumine• nihutamine• skaleerimine• pööramine
• Muudavad kodulehe põnevamaks • Tõstab engagementi• Püüab tähelepanu• Toob rõhu erinevatele sisuelementidele
![Page 19: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/19.jpg)
Näide: Väikelinna detektiivid
NB! Efekti tabamiseks vaata lehte lives!! http://detektiivid.ee/
![Page 20: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/20.jpg)
Tüpograafia
• Osa sisudisainist ehk tekst=disain• pealkirjad• sisutekstid• nupud • jne
• Muutunud kirjatüübid, suurused, õhuvahed ja värvid
![Page 21: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/21.jpg)
Näide: Gather.ly
![Page 22: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/22.jpg)
Single page
• Veeb kui presentatsioon, mitte infokataloog• Sisu täies mahus ühel lehel• Eristuvad sektorid - info loogiliselt jaotatud• Navigeerimine käib kerides või läbi ankrumenüü
(eelkõige kasutajamugavuse pärast)• Sobib kompaktse sisuga lehtede jaoks • 50/50 lahendused
![Page 23: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/23.jpg)
Näide: YourDigitalStory
NB! Efekti tabamiseks vaata lehte lives!! http://yourdigitalstory.com/home
![Page 24: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/24.jpg)
Näide: AlterMedia
NB! Efekti tabamiseks vaata lehte lives!! http://altermedia.ee/
![Page 25: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/25.jpg)
4. Kasutajamugavus ennekõike
• Tuttav layout• Läbiv stiil ja bränding• Sisu toetavad elemendid• Müügitunnel• Responsive lahendused
Disain ei tapa kasutajakogemust!
![Page 26: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/26.jpg)
Näide: Kalev Spa
![Page 27: Conversion design - Veebidisaini trendid 2014](https://reader033.vdocuments.mx/reader033/viewer/2022061208/548afb1cb479595b658b46f2/html5/thumbnails/27.jpg)
Kokkuvõte
Konversioonile suunatud disain arvestab kasutaja harjumustega ning muudab info kättesaamise lihtsaks.
Lihtne navigeerimine ja arusaadav struktuur suunab külastaja läbi müügitunneli soovitud tegevuseni.
Tulemuseks on koduleht, mis toob ettevõttele reaalset kasu.