Animatsioonilisest veebiarendusest üldisemalt ja täpsemalt

Animatsioonilisest veebiarendusest üldisemalt ja täpsemalt

Ma mõtlesin üsna pikalt, et kas teha postitust, mis tegelikult kordab juba siin blogis eelnevalt öeldud põhimõtteid animatsioonilise veebiarenduse kohta.

Algselt oli plaanis postita postitus “Kuidas alustada animatsioonilise veebiarendusega”, aga mis mind motiveeris seda postitust looma oli see, et siis on olemas selline universaalne artikkel, mis võtab kokku kõik (minu arvates) tähtsamad põhimõtted animatsioonilise veebiarenduse kohta.

Lisaks sellele arvatavasti täieneb see artikkel tulevikus, nii et ka uut sisu peaks ka siin olema.

“Kuidas alustada animatsioonilise veebiarendusega” tuleb välja selle kuu kolmanda nädala lõpus.

Mis on animatsiooniline veebiarendus?

Animatsiooniline veebiarendus on veebiarendus, mille tähtsamaks eesmärgiks on parandada ja edasi viia kasutajakogemust.

Eesmärgiks pole ainult muuta kasutaja keskkonda, vaid ka kuidas veebileht kasutajale reageerib.

Et kasutajakogemust viia maksimumini tuleks veebileht teha võimalikult sujuvaks. See tähendab seda, et veebilehes ei tohiks olla laadimisaegu – nii alamlehtede vahetamisel kui ka alamoperatsioonide (nt. veebipoes ostmine) tegemisel.

Nõnda töötab veebileht ka aeglaste ühenduste korral kiiresti.

Selleks, et kasutaja mõistaks, mis alamlehel ta on ja mis alamlehel ta edasi läheb, kasutatakse alamlehtede vahetamise korral animatsioone. Sellest tuleneb ka nimi “animatsiooniline veebiarendus”.

Animatsioonide kasutamine lihtsustab kasutaja arusaamist veebilehest ja selle struktuurist.

Inglise keeles nimetatakse animatsioonilist veebiarendust web development with motion design. Otsetõlkes see tähendab veebiarendust koos liikumisdisainiga.

Noh nagu ise saad aru ei ole otsetõlge just kõige parem 😀 .

Miks ma rõhutan kasutajakogemust?

Veebileht (või õigemini veebilehe edukus) koosneb mitmetest komponendidest.

Esiteks, on olemas front-end (esiplaan). See on see, mida kasutaja näeb ja millega kasutaja kokku puutub. Siin ka just mängib rolli animatsiooniline veebiarendus.

Animatsiooniline veebiarendus on üks alamliik front-end veebiarendusest.

Teiseks teguriks on back-end (tagaplaan).

Back-end‘iks loetakse tavaliselt seda, mida kasutaja ei näe (või isegi ei tohiks näha). Erinevad andmebaasid, serveriinfo jne on back-end‘is.

Kolmandaks, on sisu ja SEO. SEO (otisingumootori optimeerimine) ehk nähtavus otsingumootorites on tähtis, et inimesed leiaksid sinu veebilehe kerge vaevaga üles.

Ning SEO sõltub väga palju sisust. Tegelikult võibki SEO’d pidada rohkem sõnade mänguks, sest otsingumootorid näitavad järjekorda ju selle järgi, mis läheb otsinguterminiga kõige rohkem kokku.

Ma tõin SEO eraldi välja back-end‘ist (ka front-end‘is on mitu alamosa) kahel põhjusel.

Esiteks sellepärast, et SEO teenust pakutakse tavaliselt eraldi. Kui back-end ja front-end on tavaliselt koos, siis SEO’d pakutakse eraldi teenusena.

Loomulikult sõltub see ka firmast, kust veebilehe tellid, aga tean ka firmasi, mis on ainult SEO teenustele keskendunud.

Teise põhjuse, miks ma SEO eraldi välja tõin, saad teada natukene all pool.

Kõik need tegurid on tähtsad silmas pidades veebilehe edukust internetis.

 

Aga kahe tähtsa teguri lõpptulemus saab väljendada ühe sõnaga – kasutajakogemus.

Need kaks tähtsat tegurit on front-end ja back-end. Neid ei ole võimalik üksteisest eraldada.

Kui veebilehel on väga hea front-end, aga back-end on halvasti arendatud, siis heast front-end‘ist ei ole eriti kasu.

Ja täpselt samamoodi on ka vastupidi – kui esiplaan on halb, aga tagaplaan suurepärane, siis pole sellest midagi kasu.

Ma isiklikult arvan, et kasutajakogemus sõltub rohkem front-end‘ist, sest kasutaja on otseselt ühenduses front-end‘iga ja front-end on ühenduses omakorda back-end‘iga.

Aga see reegel, et esiplaan on tagaplaanist eraldamatu ja vastupidi, kehtib kindlasti.

 

Nüüd teine põhjus, miks ma SEO eraldi välja tõin on sellepärast, et SEO ei mängi mingit rolli kasutajakogemuses.

Jah, see on väga tähtis osa veebilehe (ja ka siis äri) edukuses, aga kasutajakogemusega ei ole siin midagi teha.

 

Ja nüüd siis tegelikult ka esialgse küsimuse juurde – miks ma rõhun kasutajakogemuse peale?

Kasutajakogemus on tihti alahinnatud.

Jah, kui veebilehel ei ole piisavalt külastajaid, siis tavaliselt esimesteks mõteteks on kas reklaami või SEO (uuesti) tegemine.

Ma ei saa vastu vaielda, et need annavad teatud boosti sinu lehele, aga et külastajad oleksid kauem sinu lehel, siis tuleb appi ainult üks asi – ja see on, siis artiklis juba kümneid kordi öeldud kasutajakogemus.

Mõistlik oleks teha/tellida korralik veebileht.

Nüüd ma kujutan, et paljud inimesed mõtlevad, et vau Oliver, poleks arvanud, et sa soovitad mul tellida/teha korralikke kodulehti. Oliver, sa oled geniaalne!

Nojah, aga tegelikult oli see soovitus ka väikse konksuga.

Mida tähendab korralik veebileht? Kuidas seda hinnata?

Ma vastan ausalt ja lühidalt – seda on väga raske hinnata.

Seda on isegi nii rakse hinnata, et sellele on teatud firmad, rääkimata inimestest, lausa spetsialiseerinud.

Esiplaani vigu/ebameeldivusi suudab igaüks ära öelda, aga mis toimub tagaplaanis – on juba keerulisem.

Aga kuidas siiski korraliku veebilehte defineerida?

See on umbmäärane, aga parim viis on seda tõlgendada nii – korralik veebileht on veebileht, kus kasutaja tahab aega viita, ilma et ta sellest aru saaks.

Oled sa kunagi mänginud videomänge?

Ma arvan, et oled. Oled sa tudnud, kuidas aeg justkui lendaks?

Täpselt sama efekti peaks ka veebileht looma.

Ja see ei tohiks juhtuda teadlikul viisil. Tänapäeval mitte keegi ei rõõmusta just eriti selle üle, et nad käisid mingil toredal veebilehel, aga veebileht peaks pakkuma inimesele huvi – seda nii visuaalselt kui ka sisuliselt.

Ja see kõik viib ühe toreda küsimus juurde:

Mis Sina animatsioonilisest veebiarendusest saad?

Ma ei taha nüüd väita, et animatsiooniline veebiarendus on mingi imeline asi, mis teeb sinu veebilehe (ja siis ka võib olla sinu äri) jube populaarseks, aga ma arvan, et see võib sinu veebilehte väga palju aidata.

Sa pead ka sellest asjast aru saama, et kui veebilehel ei ole korralikku sisu, siis ei saa animatsiooniline veebiarendus palju ära teha.

Aga kui veebilehel on sisu, siis tuleb animatsiooniline veebiarendus mängu – tõstes just külastusaega.

Ja kui külastusaeg on piisavalt suur, siis potentsiaalsest kliendist võib saada üsnagi kiiresti realne klient või uuest külastajast fänn.

Ma usun animatsioonilisse veebiarendusse lausa nii palju, et arvan, et see võib sinu klientide või lugejate arvu kahekordistada.

Inimesed on tihti kannatamatud ja suure tõenäosusega ei soovi sa kaotada kliente/fänne sellepärast, et sinu veebileht lihtsalt on nende ühenduvuses liiga aeglane või vastu vaatab pilt, mille disain on pärit 5 aastat tagasi.

 

Ja lisaks sellele aitab animatsiooniline veebiarendus hoida kokku ka tegelikult kulusid.

Noh loomulikult peab animatsiooniline veebiarendus ka õigesti tehtud olema, aga võtame ette nüüd jälle selle korraliku veebilehe näite.

Oletame, et sul on täna korralik veebileht. Aga kas 10 aasta pärast võib seda pidada korralikuks veebileheks?

Ma kahtlen selles, sest suure tõenäosusega on 10 aasta pärast väga palju uusi trende/moode, mis on tegelikult juba korralike veebilehtede checklist‘i kinnistunud.

Siin jällegi tuleb animatsiooniline veebiarendus mängu. Nimelt ma arvan, et animatsiooniline veebiarendus on tulevikumuusika ning selle tõttu kestab ka sinu animatsiooniline veebileht kauem “nooremana” (ei pea nii tihti uuendama).

Lisaks arvan, et animatsioonilisus tõstab juba iseenesest veebilehe eluiga, aga siinkohal võib ka leida päris häid vastu argumente 🙂 .

Animatsiooniline veebiarendus tänapäeval (2017 algus)

Tänapäeval võib animatsioonilist veebiarendust kohata väga palju nutitelefoni äppides. Sellel on üsnagi palju kaasa aidanud Google oma materiaalse disaini levitamisega.

Google arvamust animatsioonidele võid leida siit.

Kui nüüd küsida, et miks pole selline trend veel jõudnud veebilehtedesse, siis on minul üsnagi raske sellele vastata.

Loomulikult on olemas veebilehti, mis on animatsioonilised, aga enamus, mida me külastame on üsnagi tavalised, kus alamlehed ei vahetu sujuvalt.

Ja täpset põhjust ei oska ma välja öelda, kui ainult see, et lihtsalt selline trend pole suuri tuure internetimaailmas sisse saanud.

Aga noh eks see olegi ju selle blogi eesmärk – levitada animatsioonilist veebiarendust ja sellega seonduvat mõtteviisi 🙂 .

Kui sind huvitab, mida ma arvan animatsioonilise veebiarenduse tuleviku kohta, siis vastava postituse leiad siit.

Mis tehnoloogiaid läheb vaja animatsioonilise veebilehe loomiseks?

Kui sa ei ole väga tehnoloogia ala inimene, siis ma soovitaksin selle osa vahele jätta, sest ma räägin siin üsnagi IT-mehelikku juttu .

Kui väga aus olla, siis animatsioonilist veebilehte saab täiesti teha läbi kuldse trio: HTML5+CSS3+JavaScript .

Ma ei väida, et see on kõige parem lahendus ja suure tõenäosusega oleks hea kasutada puhta JavaScritpi asemel mingit teeki, mis muudab sinu elu tunduvalt kergemaks.

Ja kui väga soovi on, siis saab ka tegelikult hakkama HTML5+CSS3, aga see on rohkem selline eksperimenteerimine.

jQueryt ma animeerimiseks ei soovita, sest selle jõudlus on aeglane.

 

Isiklikult olen pilgu pööranud velocityJS poole, sest tegemist tundub olevat väga hea JS teegiga, mis on kiire ja sobitub nii puhta JavaScripti kui ka jQueryga.

NB! velocityJS kasutab animeerimiseks just puhta JavaScripti animatsioone, mis muudab tema jõudluse palju paremaks kui Transiti ja jQuery oma.

Lisaks sellele tundub velocityJS üsnagi professionaalne. See tähendab, et õppimiskurv saab olema sügav, aga samas saab vastu väga palju kontrolli ja võimalusi.

Ma ei ole velocityJS’i veel ühestki projektis kasutanud ja selle tõttu ei oska ka täpsemalt velocity’st midagi rääkida. Praegu on küll silmade ees üks projekt, kus arvatavasti läheb velocity käiku, aga sellest tuleviku poole.

 

Teiseks, mis ma arvan, et kasuks tuleb smoothState.js. smoothState lubab sul luua alamlehti nõnda, et need oleksid siis sujuvad (ei nõua laadimisaegu), ka kasutades linke ja brauseri “tagasi” nuppu.

Kindlasti tuleb see kasuks paljudes projektides.

 

CSSi kohapealt soovitaksin Animate.css. Tegemist tundub olevat väga hea CSSi animatsiooni teegiga.

 

Loomulikult on veel olemas erinevaid animatsiooni teeke, aga need on mulle kõige rohkem silma jäänud.

Kui on huvi rohkem animatsiooniliste teekide vastu, siis päris suure nimekirja võib leida siit.

Ning kui otsid väikest õpetust, kuidas alustada animatsioonilise veebiarendusega, siis siit võid leida ühe.

Kui palju maksab animatsiooniline veebileht ja kust saab seda tellida?

Ma ei taha öelda, et animatsiooniline veebileht oleks raske kui tuumafüüsika, aga ma ei saa ka öelda, et see oleks kerge.

Animatsioonilise veebiarenduse teeb keeruliseks just nüanside rohkus. Peab täpselt teadma, mis animatsiooni kasutada; millal animatsiooni kasutada; kuidas animatsiooni kasutada; kuidas teha nõnda, et me veebilehe jõudlust animatsioonidega maha ei tõmbaks jne.

Nüüd ma hinna kohta ütlen klassikalise IT-kaupmehe lause: hind sõltub kliendi vajadustest ja soovidest.

Iga klient on erinev, osad soovivad lihtsama poolseid lahendusi, siis on ka hind odavam ja vastupidi. Mida rohkem nüanse, seda kallim hind.

Hinna kohta leiad hea video siit (ma kõikide väidetega ei nõustu, aga enamustega küll).

 

Kui nüüd ise koodi sukelduda ei oska või ei taha, siis oleks mõtekam veebileht tellida.

Seda võib teha minu firmast AnsiVeeb, mis on just animatsioonide veebiarendusele keskendunud ja spetsialiseerunud WordPressi platvormil (tagaplaaniks on WordPress, mis on internetimaailmas väga levinud).

Kui aga millegipärast ei ole soovi animatsioonilist veebilehte minu firmast tellida, siis võiks vaadata nende firmade pakkumisi:

  • Okia – kasutajakogemusele keskendunud firma
  • Artmedia – tundub, et nad mõistavad klientide soove ja vajadusi. Arvan, et mõistavad ka siis animatsioonilist veebiarendust
  • Esileht – sama jutt, mis artmedia kohta. Nende koduleht iseenesest on ilus ning ka natukene animatsiooniline

 

Lisa lugemist animatsioonilise veebiarenduse kohta

Hoidke animatsiooniline veebiarendus lihtsana!

Kas animatsiooniline veebiarendus on ka tulevikus tähtis?

Kuidas alustada animatsioonilise veebiarendusega?

 

Ja need olidki kõik minu mõtted animatsioonilise veebiarenduse kohta. Loodan, et said targemaks!

 

Kui tekkis küsimusi, siis ära karda neid küsida kommentaarides 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled tõsiselt huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *