У овом оштром конкурентском окружењу, компаније грчевито траже начине да привуку и задрже пажњу људи. Како се бавимо својим свакодневним животом, непрегледни ток визуелне стимулације шикља нас из анимираних огласа на улици, видео снимака на нашим мобилним телефонима, а да не помињемо наше фидове на друштвеним мрежама, ствара осећај сталног кретања које се надмеће за нашу пажњу.

Реакција делића секунде на кретање у нашем окружењу развијена је из потребе за преживљавањем и покренута подстицајима из околине који се доживљавају као потенцијално претећи или штетни; људи обраћају додатну пажњу на ствари које се крећу. Док крајичком ока ухватимо нешто што се брзо креће, мозак нас упозорава у делићу секунде јер је наш подсвесни мозак већ реаговао на опасност пре него што је наш свесни ум стигао да обради информације.

Оглашивачи то знају и зато јесмо анимирани улични огласи на аутобуским стајалиштима и на платформама подземне железнице, видео огласи који се појављују у стримовима друштвених медија и електронски билборди са видео записима у целом покрету. Техника је двоструки ударни ефекат дизајниран да испоручи маркетиншке поруке. Прво, привлачењем наше пажње, и друго, коришћењем видеа и анимације да би се порука пренела.

Ако статична слика вреди хиљаду речи, колико вреди анимација?

Овде долази веб анимација. Веб дизајнери се надају да ће привући и задржати нашу пажњу и можда додати неочекивани трзај одушевљења. Веб анимација се може користити за визуализацију различитих корака у сложеном процесу или идеји, за илустрацију једноставне маркетиншке поруке или за померање ствари на веб страници на природан и флуидан начин док људи скролују - опет, да би на нешто скренули пажњу.

Како је започела веб анимација, пораст ГИФ-ова

Током раних дана Ворлд Виде Веба, ствари су биле прилично статичне и досадне. Веб странице су се углавном заснивале на графичком дизајну и распоредима из штампаног света. Међутим, неки дизајнери су се сложно потрудили - упркос техничким изазовима и изазовима пропусности - да укључе ране облике веб анимације како би их учинили динамичнијим и атрактивнијим. Један од првих додатака ГИФ анимације веб локацији био је укључен Јеффреи Зелдман Батман Форевер 1995. Посетиоце је дочекао Батманов лет према њима, анимиран као сликовни низ.

Промо веб локација Батман Форевер била је једна од најпопуларнијих страница у то време. Надахнуо је друге веб дизајнере и програмере да уграде ГИФ веб анимацију као необичан, привлачан елемент у своје веб локације.

Премотавање унапред 20 година и анимирани ГИФ-ови су сада свуда. Налазе се на Твиттер-у, Мессенгер-у, иМессаге-у, ВхатсАпп-у, Скипе-у, Инстаграму и Фацебоок-у. ГИФ-ови су погодни за кратке анимације, секвенце слика, па чак и кратке видео петље. Несрећни недостатак је ипак тај што ГИФ формат датотеке нема променљиву транспарентност и не подржава алфа канал; стога су сви пиксели или потпуно непрозирни или потпуно прозирни.

ГИФ анимације биле су почетак ренесансе у веб дизајн , али нису били идеални. Нарочито у раним данима диал-уп-а и спорих брзина интернета, ГИФ-ови су били свињаре пропусности. Резултат је била пикселирана секвенца ниске резолуције. Недостатак дизајнера који су морали да компресују ГИФ-ове на најмању могућу величину била је ограничена 8-битна палета, што је резултирало великим уситњавањем. То се променило тако што је брзи интернет постао уобичајенији у 21. веку, и као последица тога, веб анимација је постала лепша у милионима боја, и углађенија са већим бројем сличица у секунди.

Зора Фласх веб анимације

Велики процват веб анимације наступио је увођењем Фласх 1996. када Мацромедиа најавили су свој веб додатак и пратећи алат за анимацију заснован на кадровима: Мацромедиа Фласх (након што су купили ФутуреСпласх Аниматор , програм векторске анимације). Фласх је играо водећу улогу у увођењу нових могућности на мрежу. Од звука и анимације до интерактивности и видеа, Фласх је помогао да се Интернет погура напред.

Могућност за изградњу једноставних, витких, веб-анимација заснованих на векторима на читавим веб локацијама које су укључивале интеракције створила је оно што би се могло назвати „барокним“ периодом веб дизајна са (пре) многим анимираним елементима који гужвају пејзаж. Ипак, Фласх је пружио увид у могућности динамике веб дизајн , ослобађајући дизајнере да експериментишу и ослобађајући период брзе еволуције веб дизајна.

која је најбоља величина за сцрум тим?

Фласх анимације су лагане и релативно једноставне за израду. Велике су само неколико килобајта, дистрибуирају се у СВФ формату датотеке и у датотеци користећи звук са оштром векторском графиком. Стварање веб анимација постало је поједностављени процес који није додао пуно времена учитавања веб страница. Али поред свега што је остао значајан недостатак - додатак за прегледач је био потребан за његово покретање.

Поред тога, софистицирану интеракцију у Фласх-у омогућио је АцтионСцрипт (АС), објектно оријентисани програмски језик сличан ЈаваСцрипт-у. АцтионСцрипт је у почетку дизајниран за контролу једноставних 2Д векторских анимација, али је касније прерастао у софистицирани алат.

Нажалост, Фласх анимација није требало да реагује, није функционисала добро на свим уређајима и на крају је избачена са свих популарних мобилних уређаја. Иако је величина датотеке била релативно мала, Фласх није био добро оптимизован и на крају је изгубио ЦПУ, што је представљало проблем и на мобилним телефонима. Крај Фласх ере наступио је након Стевеа Јобс-а одлучио да не подржава Фласх на Аппле мобилним уређајима.

Фласх је створен током ПЦ ере - за ПЦ и мишеве. Али мобилна ера односи се на уређаје мале снаге, интерфејсе осетљиве на додир и отворене веб стандарде - сва подручја у којима Фласх недостаје.

Стив Џобс

Веб анимација данас

Данас, пошто је Фласх застарео, имамо различите потребе за веб анимацијом. Алати морају бити флексибилни и лагани. Веб дизајнери мора створити одзиван и прилагодљив садржај за различите уређаје (рачунаре, таблете и мобилне уређаје), узимајући у обзир различите димензије екрана, прегледаче, пропорције, густину пиксела и још много тога. Наша ремек-дела за веб анимацију морају да раде на 5-инчном мобилном телефону од 720 пиксела, до 9,7-инчног ККСГА таблета, до 32-инчног Ретина 6К екрана.

Технологија је сазрела до тачке када чак и слабо снажни мобилни уређаји имају пропусност и процесорску снагу за руковање врло захтевним веб анимацијама и видео садржајима високе резолуције. То не значи да веб локације треба да буду супер „заузете“. Као и увек, ради се о успостављању праве равнотеже између анимације, динамичке интеракције и статичних елемената. Чињеница да данас можемо да применимо пуно фенси веб анимације не значи да бисмо то требало и учинити.

Веб дизајнери / аниматори такође морају узети у обзир подршку на више платформи. Пре десет година дизајнери нису морали да буду сигурни да ће њихове креације изгледати добро на тако широком спектру уређаја. Различите размере, портретне и пејзажне оријентације, као и различити густина пиксела а морају се узети у обзир и удаљеност гледања. Ова загонетка представља веб дизајнерима низ нових изазова и потенцијалних замки. Корисничко тестирање троши драгоцено време, више ствари може поћи по злу на мноштву платформи, а веб анимације морају бити детаљније него икад.

ХТМЛ5, ЦСС3, ЈаваСцрипт и СВГ (скалабилна графика) чине се најбољим решењима за веб анимацију. Коришћење ових модерних веб технологија и језика помоћи ће у решавању већине, али не свих горе наведених проблема. Али увек је добра идеја да пажљиво корачате, посебно када сте на неистраженој територији, а обимно обезбеђење квалитета и тестирање су неопходни.

Зашто користити веб анимацију?

Веб анимација може да привуче и задржи пажњу људи дуже од статичне веб странице и јасније и ефикасније саопштава идеју или концепт. Одлична веб анимација преноси причу иза сваког покрета. Све је у вези са оживљавањем анимације са значењем и „душом“ (лат. Анима).

Веб анимација треба да буде глатка, садржајна и да подржава путовање посетиоца. Веб дизајнер / аниматор мора бити свестан како се анимација уклапа у корисничко искуство , покушајте да предвидите вероватне токове корисника, а затим их подржавајте на значајан начин.

Веб дизајнери не смеју гледати на веб анимацију из чисто техничке перспективе; треба то да сагледају из перспективе корисника.

Једна од битних ствари код анимације је време. Правилно одређивање времена даје физичко и емоционално значење анимацији. Искуство би требало бити беспрекорно и логично. Ако анимација није флуидна (има проблема са временом), људи би је могли схватити као грешку и изгубити сваку мотивацију за даље истраживање веб странице.

Аниматор треба да користи одговарајуће време да би пружио жељени ефекат. Колико кључних кадрова треба користити у анимацији? Каква је динамичка промена у анимацији услед интеракције посетилаца и колико брзо долази одговор након интеракције? Да ли је анимација хировита, озбиљна, забавна?

Са логичке тачке гледишта, веб анимацију можемо поделити на два основна типа:

• Статична, неинтерактивна веб анимација, на пример, а ГИФ анимација .
• Динамична веб анимација са ангажовањем корисника и интерактивношћу која се мења на уносу корисника.

Најбољи пример динамичке анимације је игра , где корисници манипулишу садржајем на екрану. Још један једноставан пример била би промена положаја одређених елемената као посетиоца веб странице помера се кроз веб локација са паралаксним померањем. Анимација није пасивна, она се разликује у зависности од радњи корисника.

Динамична веб анимација се често користи за представљање анимираних инфографика на веб локацији, тако да људи обраћају више пажње одређеним областима док листају страницу - то је моћан начин да истакнете релевантне информације.

Предности и недостаци веб анимације

Ево неколико предности и недостатака техника веб анимације, укључујући застарела решења која се више не користе.

Техника	Прос	Цонс
ГИФ	Једноставан је и доступан свима. Није потребан додатак за прегледач. Омогућава анимацију секвенце слика, може бити и видео.	Величина анимираних гиф датотека може бити огромна. Контрола непрозирности не постоји, не постоји алфа канал. Има малу компресију. Може се пикселирати.
АПНГ	Подржава алфа канал.	Није подржано у већини веб прегледача.
Фласх	Извезена свф датотека може бити прилично мала. Брз је, може бити интерактиван и користи векторску анимацију.	Више није подржано на већини платформи.
ХТМЛ / ЦСС3	Једноставно и лако за научити. Добро за прелазе и трансформације. ХТМЛ / ЦСС3 анимације добро функционишу на мобилним уређајима. Омогућава векторску или пикселну анимацију. Такође може да манипулише скалабилном векторском графиком (СВГ).	Не могу сва СВГ својства бити анимирана ЦСС-ом. Има ограничене могућности за анимацију и често захтева употребу ЈаваСцрипт-а или СМИЛ-а. Не може да одговори на нове улазе или променљиво окружење (динамичка анимација).
ОСМЕХ	Компактан је и способан је да анимира својства са којима ЦСС не може да се носи. Очува СВГ када је уграђен у слику.	Није подржано у свим прегледачима.
ЈаваСцрипт	Олакшава веб анимацију када се користи СВГ библиотека анимација која генерише секвенцу слика (.пнг секвенца)	Не чува СВГ када је уграђен као слика.

Шта је са предностима и недостацима веб анимације уопште? Добро изведена веб анимација и даље може изгледати неумесно, па је увек добро поставити нека кључна питања (као и клијенте квиза и остале чланове тима) пре него што наставите са интеграцијом анимације у дизајн веб странице.

Прво, морамо да проверимо како анимација ће утицати на корисничко искуство. Да ли ће побољшати УКС веб странице? Дизајнери треба да:

• Испитајте постојећи дизајн веб странице (ако је доступан)
• Проверите циљну публику и хардверске платформе које користе
• Проверите време учитавања локације и оптерећење процесора
• Истражите друге алтернативе
• Припазите на употребљивост

Његово не добра идеја је да користите веб анимацију на веб локацији како бисте једноставно пратили трендове.

Одлуку о коришћењу веб анимације треба третирати као било коју другу одлуку о дизајну; веб дизајнери мора извагати предности и недостатке и осигурати да корисничко искуство не буде угрожено. Такође би требало да раде са програмерима како би утврдили захтеве за кодом и осигурали да се не заглаве са неефикасним кодом који ће можда морати да се доради на путу.

Савремена технологија веб анимације значајно је сазрела у последњих 20 година - повећали су се перформансе, расположива пропусност и квалитет приказивања. Међутим, дизајнери би требало да пажљиво кроче и додају анимацију веб локацији само ако она значајно побољшава корисничко искуство.

• • •

Даље читање на блогу АпееСцапе Десигн:

• Како створити прилагођене анимације за учитавање како бисте смањили стопе одбијања
• Стварање умотворљивих илустрација помоћу скице и петље у трену
• Корак по корак водич за УИ анимацију са принципом и скицом
• Инспирације за анимацију логотипа како бисте свој бренд учинили пријатнијим
• Корак по корак Водич за стварање анимираних видео снимака са објашњењима производа

Разумевање основа

За шта се користи веб анимација?

Веб анимација се користи на свим врстама веб страница. То могу бити мале веб анимације које се дешавају док посетилац помиче веб страницу како би скренуо пажњу на неки елемент, анимацију која демонстрира производ или промотивну веб анимацију која приказује нешто забавно и занимљиво.

Зашто је анимација важна у пољу веб дизајна?

Веб анимација се може користити за привлачење пажње, боље ангажовање људи и јаснију и ефикаснију комуникацију. Може да привуче и задржи пажњу људи дуже него само статична веб страница. Веб анимација треба да буде глатка, садржајна и да подржава путовање посетиоца.

Које су најчешће врсте основних анимација које се користе на вебу?

Основни типови веб анимације су ЦСС и ЈаваСцрипт анимација, скалабилна векторска графика (СВГ), СМИЛ, ГИФ, платно и видео. Свака врста веб анимације најбоље се користи за оно за шта је намењена. На пример, ЦСС прелази и анимације идеално би требало да се користе за УИ и основне прелазе.

Шта је Фласх и његова употреба?

Фласх је алат за анимацију и додатак за прегледач компаније Адобе. Користи временску линију засновану на оквиру за изградњу веб анимације и може имати интерактивност која се постиже коришћењем скриптног језика под називом АцтионСцрипт. Већина мобилних уређаја то не подржава и сви веб прегледачи постепено укидају подршку за њега.