Kuidas alustada animatsioonilise veebiarendusega?

Kuidas alustada animatsioonilise veebiarendusega?

See postitus ei ole mõeldud nendele algajatele, kellel ei ole põhiteadmisi (front-end) veebiarendusest (HTML, CSS ja JS), vaid algajatele, kes tahavad alustada animatsioonilise veebiarendusega ning kellel on juba algteadmised veebiarendusest olemas.

Kui sul pole piisavalt teadmisi praegu, siis võid vabalt lugeda “Kuidas alustada veebiarendusega?” või HTMLi kursust.

Ei tea, mis on animatsiooniline veebiarendus? Loe seda siin.

Mis tehnoloogiaid läheb animatsioonilise veebilehe loomiseks vaja

Noh tegelikult piisab HTML+CSS+JS, kuid samas on olemas erinevad teegid/raamistikud, mis lubavad töökiirust oluliselt parandada.

Isiklikult mina soovitaks sul kasutada HTML + CSS (Sass) + velocityJS + smoothState.js.

velocityJS on kiire ning smoothState lubab kasutajal lehel animatsiooniliselt tagasi minna.

Aga animatsiooniline veebiarendust võib teha enda meele järgi ehk sa võid kasutada animatsioonilise veebilehe loomiseks ükskõik, mis tehnoloogiad, mis just sulle meeldib.

Päris palju teeke võib leida siit.

 

Tuleb lihtsalt vaadata, et jõudlus ei kannataks ning leht oleks kiirem. Kiirem kui see sama leht ilma animatsioonideta.

Ühe hea õpetuse jõudluse peale võib leida siit.

Animatsiooniline veebiarendus on animatsiooniline

Animatsiooniline veebiarendus peaks olema täielikult animatsiooniline ehk veebilehel ei tohiks olla laadimisaegu.

Olgu, ma ka mõistan, et vahete vahel ei ole see võimalik ja ka mõistlik, kuid alati proovi teha veebileht võimalikult laadimis vabaks (seda ka alamoperatsioonide juures).

Animatsiooniline veebileht peab olema kiire ja siin vabandusi ei tohi olla.

Minu meelest võib laadimist võib pidada animatsioonilisuse suurimaks vaenlaseks ning siia alla kuuluvad ka custom-made laadimis eesmärgiga spinnerid.

 

NB! Kui sa pole ühtegi animatsioonilist veebilehte teinud, siis sa ära järgmisi punkte loe, sest ma sooviksin, et saaksid natukene ise aimu, mida animatsiooniline veebiarendus endast kujutab.

Edasi lugemise asemel tee valmis üks animatsiooniline veebileht.

Ükskõik, mis tehnoloogiaid kasutad ja kuidas animatsioone esitad, peaasi, et oleks olemas üks korralik veebileht, mis on animatsiooniline.

 

Animatsiooniline veebiarendus ise on tegelikult ünsagi lihtne

Jah, tõesti nii on. Piisab ju ainult HTMLi, CSSi ja JavaScripti teadmisest ning sa saadki luua ühe animatsioonilise veebilehe.

Kuid, mis animatsioonilise veebiarenduse teeb keeruliseks on just see, kuidas ja mis animatsioone kasutada.

Siin tuleb mängu (siin blogis kuldne väljend) kasutajakogemus.

Iga animatsioon, mida sa kasutad, peaks olema põhjendatud ja mitte põhjendatud ainult selles mõttes, et miks sa animatsiooni kasutasid, vaid miks sa just sellist animatsiooni kasutasid.

 

Näiteks kasutab Google oma materiaalse disaini juhtnöörides põhimõtet, et animatsioon peaks jälgima päris ja realset maailma (alluma füüsikale) sellega meenutades kasutajale juba tuttavaid liikumisprintsiipe.

 

Kindlasti on olemas ka palju teisi animatsioonide tüüpe ja teooriaid, kuid kõik need animatsioonide kasutamised (ja nende põhjendused on seotud) just kasutaja ja ka kliendi (psühholoogia ning vajaduste) mõistmisega.

Animatsioonilise veebilehe ehitamine/disainimine

Et nüüd osata põhjendada animatsioone, mida sa veebilehes kasutasid, tuleks järgida järgmisi juhtnööre.

See annab sulle ka kindluse, et sa kasutasid õiget animatsiooni.

Kuna animatsiooniline veebiarendus on seotud just UX’iga (kasutaja kogemusega), siis need punktid kehtivad ka UX veebidisaini kohta.

Algne artikkel, kus ma omad mõtted sain, võib leida siit.

1. Teadustöö

  1. Mõista/uuri selle projekti kasutajaid, klienti ning nende mõlema vajadusi
  2. Defineeri, millal animatsioone kasutad ja miks animatsioone kasutad 1.a punkti põhjal
  3. Otsi väga palju erinevaid animatsioonide näiteid (nt. CodePen jne) või veel parem mõtle ise välja
  4. Suhtle tihedalt koos kliendiga, et ta nõustuks sinu mõtetega

2. Kuidas animatsioonid

  1. Joonista välja kõik animatsioonid (või mõtted animatsioonidest – punkt 1.c) – selleks täiesti piisab paberist ja pliiatsist
  2. Pane omad mõtted/animatsioonid järjekorda (mis animatsioon millalgil on)
  3. Jaga oma mõtteid kliendiga
  4. Vali välja parimad välja joonistatud animatsioonid punkti 2.c põhjal.

3. Prototüübi parimad animatsioonid

  1. Prototüübi need animatsioonid, mille sa välja valisid puntkis 2.d
  2. Esita prototüübid kliendile ja tee vastavalt parandusi

Nüüd prototüübimiseks on enam-vähem kaks võimalust – kas kasutada koodi või mingit programmi selleks.

Ilma koodita prototüüpimisvõimalused

Koodiga prototüüpimisvõimalused

Valik sõltub täiesti selles kui palju aega sul on, kui keerulised on animatsioonid, milliseid tööriistu oskad jne.

4. Testi kasutajatega

  1. Pane kokku väikene grupp inimestest (circa viis inimest + sinu klient), kes on sinu testgrupis.
  2. Tee test! Jälgi või filmi ekraani, mida iga testgrupi liige teeb sinu äpi kasutamise ajal. Kas ta saab sinu animatsioonidest aru ja mille üle ta kurdab?
  3. Võta arvesse kõik, mida kasutajad ütlevad. Nii hea kui ka halb.
  4. Otsusta punkt 4.b ja 4.c põhjal, mis vajab parandamist (enamus testgrupi kasutajate arvamusest ja video/jälgimismaterjal)

Väikene õpetuspilt nendest punktidest

 

Ja olekski kõik minu mõtetega sellel teemal. Kui tekkis küsimusi, siis küsi neid julgelt kommentaarides 🙂 !

Kui lootsid leida abi rohkem tehnoloogia alal, siis ole mureta.

Siit võid leida nimekirja postitustest, mis räägivad erinevatest tehnoloogiatest animatsioonilises veebiarenduses:

 

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled 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 *