Изготвяне на анимирани HTML5 банери и реклами
На първо място едно уточнение, когато се говори за уеб банери повечето хора разбират снимка в определен размер водеща към сайт или целева страница, но в статията по долу ще отворя малко по широко темата за анимирани HTML5 банери които могат да включват в себе си различни техологии, да бъдат интерактивни и също като един уеб сайт, със front end и back end част, за което за тези банери по долу в статията ще наричам и интернет реклами а не просто банери.
Забележка: Ако част от примерите тук или в сайта не са видими то вероятно използвате Adblock.
Анимираните банери – кога и какви да използвам
Тук отговора не е еднозначен, има много варианти от които е неоходимо да се избере правилната стратегия която да отговори на нуждите ви и да бъде максимално ефективна. А това зависи основно от:
Tехнически изисквания
Мястото където ще се „ъплоадват“ анимирани HTML5 реклами, това може да бъде за Google Аdwords, DoubleClick, или други.
Така например има специфични изисквания на които трябва да отговаря вашия банер за да бъде приет от тях, например позволения размер за HTML5 реклама в Аdwords е 150кб, докато за DoubleClick е 500кб, в първия случай не може да има взаимодействие между рекламата и посетителя на банера (тоест може да се кликне само веднъж върху него,целия е кликваема област) а във втория за DoubleClick са допустими всякакви.
Всяка от тях има библиотека с позволени „ресурси“ които можете да използвате и с които трябва да е съобразена рекламата. Външни ресурси не се допускат в повечето от рекламните мрежи и с това разработчика трябва да се съобразява. След като бъде разработен един банер трябва да бъде валидиран и да отговаря на всички технически изисквания било то за гугъл диспейсната мрежа или за директна реклама в определени мрежи.
Така например Нет Инфо.БГ има детаилни условия за рекламата и банерите в системата си от интегрирани и партньорски сайтове на фирмата с които трябва да се съобразява разработчика. По доло е показана само мала извадка
За Google Аdwords, DoubleClick и тн имат съответно своите технически изисквания с които трябва да бъде запознат разработчика преди да се изготвят рекламите. Всички кодове и активи трябва да бъдат включени, външни препратки и ресурси не се допускат освен изрично споменатите от Google, било Google Fonts, jQuery или Greensock. Добре е тук да бъде споменато че всичко е твърде динамично и правилата често се променят, както и Google ресурсите, за което разработчика трябва да следи и да е наясно.
Какъв тип реклама искате
Анимирана и интерактивна или стандартна, като първта може да бъде разширяваща се, да има „carousel“ галерия, да включва освен това видео и тн, съществуват много варианти за една анимирана интерактивна HTML5 реклама.
Какви са идеите ви за анимирана реклама, каква анимация ще се използва, кратка или по сложна, ще има ли взаимодействие между банера и потребителя. Това са все важни аспекри от една модерна и анимирана уеб реклама.
Така например ако ще се използва по сложна анмация е добре рекламата, банера да се разработи в html5 canvas, в противен случай може да се разработи чрез GWD или ръчно да се кодира всичко чрез GSAP и JavaScript.
Дали ще се използват само анимирина или Реагиращи/интерактивни анимирани реклами, банери
Може да погледнете една част от порфолиото ни с анимирани HTML5 банери и реклами:
GSAP + JavaScript банериHTML5 банери и рекламиотзивчиви HTML5 реклами
По долу са показани три примера разработени с различни технологии (An/HTML5 Canvas, GWD/Rich media HTML5 baner и GSAP + JavaScript )
Друга чудесна възможност е да създадете отзивчив банер и да позволите на аудиторията си да взаимодейства с него, като същевременно те ще получат повече информация за продуктите ви. Примерът в този случай идва от H & M, шведска мултинационална компания за дрехи.
Дали целта на банерите и рекламите и е да бъдат отзивчиви
Така например един анимиран банер може да е разработен за конкретен размер (например 250×300 поле за реклама), да бъде адаптивен(adaptive) за конкретни размери или плаващ(floting responsive) за всияки размери на рекламата. Както се досещате в зависимост от начина на разработка и вида на анимацията това може да се окаже голямо предизвикателство и е добре да се избере правилната концепция предварително за да се постигне целта.
Анимираните реклами – красиви или четливи
За разлика от принт дизайна или брандинга, в интернет рекламата едно от най важното условие за една реклама е да бъде лесно разчетима,особено когато се има предвид че тя ще присъства и на мобилни устройства, таблети и тн. необходимо е да не натоварва окото на потребителя, да се взира или да се опитва да разчете ситен шрифт, в такъв случаи те просто няма да му обърнат внимание. Сам по себе си един красив дизайн на реклама не е самодостатъчен да привличе интерес.
Описателни или право в целта
Друг основен аспект е до каква степен е удачно един уеб банер или реклама да съдържа текст, това може да са заглавия, описания на продукти ,призиви и какво ли още не. Като се има предвид че анимирания банер може да проиграва различни сцени текста може да бъде в повече, и може да е необходимо той да бъде редуциран. По добре кратки заглавия и призиви „право в целта“ от дълги описателни текстве и съдържание, все пак целта на интернет рекламата е да провокира интерес а не да запознае посетителя на сайта в дълбочина с продукта ви или услугата която рекламирате.
Основните насоки в дизайна на интернет рекламата и анимираните банери
Под капака на творчеството има някои основни принципи, които все пак дизайнерите и разработчиците следват, за да изработят рекламите.
По долу ще опиша някой от тях, без да се задълбочавам прекалено.
И все пак е добре да се отбележи че, дори добре проектираните банери и реклами може да не успеят да привлекат вниманието на зрителите, ако са насочени към погрешна аудитория. Освен основните принципи, до голяма степен зависят от типа на рекламирания бизнес или услуга и нивото на персонализация, което можете да бъде приложено към рекламите.
Логото на вашата компания, ако има такова трябва да бъде включено, за да се изгради осведоменост за марката. Но то не трябва да е визуално доминиращо колкото стойността на предложението или призива на рекламата.
Необходимо е да присъства призив за действие (или CTA текста или бутон) който кани потребителите да кликват. Фрази като „Купете сега“, „Научете повече“ или „Започнете“,“Резервирай сега“ или „Гледайте сега“ са добри примери. Това трябва да бъде ясен фокус в рекламата. Добре е той трябва да е визуално контрастиращ с останалите елементи в рекламата.
Когато се изработват банери с мултимедия, включително призив за действие, може да бъде по-сложно, тъй като може да се работи с функции или анимации като се проиграват няколко рекламни панела. В такъв случай най-добрият начин е призивът за действие в рекламата да се откроява и да се има впредвид още при проектирането на банера в началото. Би било добре той се вижда на всички рекламни панели, така че зрителят да може да го вижда по всяко време. Ако поканата за действие не е видима по всяко време, зрителят може да не е сигурен какво всъщност искаме да направи, а това може да повлияе на вероятността той да кликне върху банерната реклама с мултимедия. Може например да се обмисли да се използва разширяема HTML5 банерна реклама, за да бъде включен повече текст (но не твърде много) и/или изображения или дори YouTube видеоклип.
Добре е услугата или продукта който се рекламира да бъде правилно представен с атрактивни оферти и/или цени.
Добра идея е да се включат неща като: „Високо качество“ или „40% отстъпка“ или „ограничена наличност“ и други. Това всъщност трябва да отнеме най-много място в една интернет реклама и да бъде първото нещо, което посетителите ще видят. Най просто казано добре е да се създаде усещане за визуална спешност в текста.
Не е нужно да бъде представена цялата информация за това, което ще се рекламира. Ако оставите зрителя любопитен или „с въпроси“, е по-вероятно да кликне.
В зависимост от типа на банера – анимиран или динамичен бутоните, или места с контрастен цвят и текст често увеличават честотата на кликване на рекламата. Има правила къде е добре да се поставят и кога, особено ако анимирания банер проиграва определено действие а то може да бъде до няколко пъти в зависимост от изискванията за продължителност на рекламата.
За да се извлече най-доброто от тях, трябва да се следва правилната структура и да се подредят приоритетите на елементите в правилния ред.
Анимираните уеб банери и реклами са много по ефективни от статичните такива но не трябва да отвличат вниманието от съобщението на рекламата все пак.
Добре е да се използват по къси анимации, които продължават не повече от 10 – 15 секунди. По дълго време ще изисква посетителя да задържи погледа си в нея а това ще намали ефективността и.
Изграждането на банерни реклами не е лесно. Имате ограничено пространство и хората на уеб сайта вероятно ще хвърлят поглед върху рекламата само за няколко секунди които са решаващи за ефективността му.
За анимираните Rich media реклами е добре да се Включи взаимодействие.
Като цяло мултимедийните реклами са интерактивни по някакъв начин. Когато се правят рекламните банери интерактивни, е важно да се направят правилно. И по точно начина, по който се иска зрителят/посетителят да взаимодейства с рекламата да е ясен.
Това може да бъде толкова просто, колкото поставянето на текстова индикация за „Tap“ на банера, за семпло но стилно взаимодействие с посетителя на банера както е показано по-долу.
По долу ще стане дума повече за Rich media рекламите.
Най вероятно рекламата с банери ще се свърже към целева страница, която включва оферта. Добре е дизайна на рекламата да съвпада с вашата марка и целевата страница, за да не се объркат потенциалните клиенти.
Ако присъстват изображения то те трябва да са подходящи и въздействащи в най добрия случай. Освен това те трябва да бъдат и оптимизирани за интернет банера което е техника върху която няма да обърна внимание тук. Снимки на хора с щастливи лица е една добра идея. В многобройни изследвания (а тази практика е широко използвана и може да я забележите навсякъде около вас) е установено, че нашите умове лесно се привличат към други човешки лица, особено към щастливите. Така че, ако ще се използват снимки на хора и/или лица в рекламата, би било добре, те да са усмихнати и да гледат право напред.
За да имат значение изображенията, те трябва да бъдат в съответствие с вашите продукти / услуги, ценностите на вашата рекламна кампания и разбира се, идентичността на марката.
Потребителските графики и 2д анимации днес са доста популярни. Много от големите брандове са се спряли именно на тях.
Многое възможно възможно е графичните изображения или кратки 2д анимации да работят по-добре за рекламата вместо снимка.
Използването на подходящите цветове е от знаение също. Това е тема която обхваща много аспекти от дизайна, брандинга и тн на която няма да се спирам тук но като пример мога да отбележа че „сивото“ например е цвят който вдъхва неутралност и практичност. Но в дизайна на банери може да се използва и като като фон, сивото усилва контраста с другите цветове и така може да направи да изпъкне рекламирания продукт.
От друга страна, цветовете могат да се използват и за задействане на емоции при банер рекламата. Говоря за положителни емоции, които привличат вниманието на зрителя, без да бъдат досадни или натрапчиви.
Също така, цветовете могат да бъдат използвани във връзка с марката, за да се подчертаят определени продукти или да се добави повече елегантност и стил към вашата реклама.
Например, черното добавя повече елегантност и мистерия към банер, както може би сте забелязали присъства в повечето големи модни брандове.
Филтрирането (т.е. промяната на цветовия баланс и контраста в рекламата) може да я направи по ефективна, но е важно да не се прекалява, ефекта на мигане и подобни техники може да отблъснат хората а и не са позволени от Гугъл например.
Всеки казва, че „съдържанието е царя“ и може би е точно така. Когато става въпрос за анимирани уеб банери (а и не само), то начинът, по който сме избрали да бъде оформено съдържанието и елементите е критичен. Не можете просто да е нахвърлен произволно текст и изображения, трябва да бъдат направени видими и в същото време по един стилен и позитивен начин.
Тъй като рекламите са един от основните елементи на маркетинговия процес, трябва да полагат всички усилия, за да създадете по-добри реклами. Съветите, споменати по-горе, със сигурност не са изчерпателни. Това, което работи най-добре за вашата марка и аудитория, може да не работи толкова ефективно за друг.
Анимираните Rich media реклами
Богатите интерактивни HTML5 банери (Rich media) са друг чудесен избор, тъй като те обикновено осигуряват по -добра честота на кликване, отколкото статичните банери. По долу може да видите една извадка за CTR (честотата на кликване в Rich media – мултимедийната реклама).
Персонализируеми интерактивни реклами с банери
Не съм сигурен до колко популярен е този вариант за реклама тук в България, но откакто беше пуснат HTML5, той стана реално нещо в рекламната индустрия макар и не широко използван тук. DoubleClick на Google, предоставя услуги за интернет реклама с такива Rich media банери.
Например дизайнерската студия на Нисан – креативната агенция Digitas, създаде тази превъзходна Rich media банер реклама. Използвайки HTML5 360° блок за преглед на колата, Налице е също така и промяна на цветовете – позволяващи да се използват образци, които отговарят на предпочитанията на посетителя. Така, чрез добавянето на „персонализиране“ в рекламите те стават по-лични и със сигурност ще се отразят положително на рекламната кампания, а може би ще се окаже и тенденция за в бъдеще.
Друга интересна концепция, която очаквам че ще намери повече приложение и през тази година, е разширяващият се анимиран HTML5 банер. Когато кликнете върху призива за действие „Разширяване“(Click to Expand), банерът поема екрана ви и се разширява, за да предoстави на своите зрители по-точен образ на това, услугата или продуктите които се рекламират с допълнителна информация като надгради интереса им. Разширяването не е автоматично и следователно потребителят трябва да избере дали да вижда добавеното съдържание което може да включва допълнителна информация, анимация или дори видео.
Rich media или мултимедийните HTML5 реклами може да включват и красиви галерии на снимки (carousel gallery), по приветлив начин да представя определени продукти на посетителите, може да видите такъв пример по долу:
Друга чудесна възможност е да създадете отзивчив интерактивен мултимедиен банер и да позволите на аудиторията ви да взаимодейства с него, като така те ще получат и повече информация за вашите продукти. Примерът в този случай е от H&M, шведска компания за дрехи. Един от последният им рекламен банер е видео интерактивна реклама, която показва някои елементи от новата им колекция. Когато кликвате с мишката върху някой от банерите, се появява нов банер, който представя някои специфични елементи от колекцията и разбира се, връзка към техния магазин.
Идеята всъщност е добра, не само защото дава някакво взаимодействие с интернет потребителите, а и защото банерът показва продуктите по два начина: видеореклама и освен това селекция от каталожните снимки на дрехите използвани във видеото в началото.
Идеите могат да бъдат наистина много въпреки че тези банери не са особено популярни у нас.
HTML5 банер Темплейтите
Дали е добра идея да използвате готови темплейти за анимирани HTML5 банери и реклами.
Да има много места от където можете да закупите такива, например от:
https://codecanyon.net
https://creativemarket.com
https://studio.envato.com
Отговора е еднозначен, като повечето бързи решения не е добра идея да се използват такива за рекламните ви кампании.
Какъв тип файлов формат трябва да избера?
Има няколко файлови формати, когато става дума за реклама в интернет с анимирани банери. Ако обаче искате да рекламирате чрез анимирани банери, има само 3 вида банери: GIF банери, Flash банери(формата не се поддържа от повечето и гугъл в това число) и HTML5 банери.
Ако искате да се уверите, че сте направили всичко възможно, за да сте успешни, трябва да обмислите да рекламирате с анимиарни банери за различни платформи. Ние смятаме че използването на HTML5 е най доброто решение за вас.
Защо HTML5 е по-добро от Flash и GIF?
Е, нека да разгледаме някои от най-важните причини, които трябва да се вземът предвид при избора на HTML5 банер вместо други видове файлови формати.
Първо, помислете за факта, че HTML5 се поддържа от всички браузъри. Никой не трябва да инсталира приставка или софтуер на трета страна, за да може да преглежда HTML5 файлове. Всички браузъри поддържат този код, независимо от операционната система или типа мобилно или десктоп устройство, което интернет аудиторията използва.
При все това GIF формата все още се използва, особено когато целта е да се разработи анимиран максимално лек по размери банер, но трябва да се има впредвид че той също трябва да отговаря на различни изисквания, така например за Google Adwords той трябва да е 5fps(5 кадъра в секундда), което не може да бъде използвано ако искате гладко проиграване на анимацията например. вижте по долу такъв банер разработен за Adwords. GIF файловете са лесни за използване при създаването на уеб страница. Не се изисква специално кодиране при добавянеto на GIF към уеб страница, тъй като те са нормални файлове с изображения и често дори не биват засичани от Adblock (Adblock Plus), което може би е най голямото им предимство в наши дни.
Потребителят на интернет от 2018г. обаче вече е „обучен“ за визуални ефекти и ясни изображения. И GIF файловете са далеч от професионалния стилен вид на модерен банер.
Имат ли успех анимираните банери и реклами
Има заблуда сред хората, че рекламите не са ефективни. Че никой не ги чете, че са натрапчиви и че „не вършат работа“. Всъщност повече от 50% от потребителите съобщават, че не вярват на банерните реклами, които виждат. Това няма нищо общо с рекламната индустрия, а с начина, по който са проектирани банерите.
Тук може да срещните различни отговори, много хора се дразнят от тях, други са инсталирали дори софтуер чрез който да ги стопират на браузера си но истината е че те не само се развиват а бележът и скок от 7% на година което със сигурност е показател е те работят и ще продължат да работят и завбъдеще.
През последните няколко години дисплейната реклама стана по-популярна от всякога. Както можете да видите от графиката по-долу, има огромно увеличение на разходите при показването на реклами. Рекламите в мрежата за търсене са все още популярни, но вече не са толкова модерни като визуалните реклами, особено анимираните и мултимедийни HTML5 банери и реклами. По доло е един пример за Америка, Илиноис.
Българският пазар на интернет реклама
Данните са направени след проучване на 1Р505 сред големите рекламодатели и медийни групи:
Дисплейната реклама у нас представлява над 4/5 от общия дял на реклама в интернет пространството. С това банер рекламата за поредна година взема превес у нас. Инвестиции, са направени и в мобилна реклама – 1 млн. лв. и в видео реклама – 4.7 млн.
лв. Данните ясно показват тенденцията брандовете все по-често да инвестират в интернет рекламата. Макар и малко но увеличение се наблюдава и в т.нар. „реклама на клик“. СРС и СРА рекламата която покрива около 3 млн. лв. Драстично увеличение се отчита и в рекламите тип обява в интернет справочници и каталози. Там ръстът е с около 75%. Непроменен остава делът на е-мейл реклама. Всъщност спад бележи само делът на е-мейл рекламата.
Сами по себе си чрез семпла или цялостна анимация анимираните банери имат способността да провокират посетителя на сайта където се показват, те са и най – ефективния начин за борба с рекламната слепота.
Пример за частична анимация в рекламата, целта е просто да привлече погледа на посетителя като допълва концепцията на рекламирания продукт. Въпреки че рекламите могат да съдържат анимация, добавянето на фино усещане за движение към статично изображение добавя елегантност към нея. Движенията правят дизайна ви динамичен, въпреки че рамката е статична. И това грабва вниманието много лесно.
Не са ли дразнищи тези реклами и какво след Adblock
Кратко и ясно – колко хора познавате да обичат телевизионните реклами? Николко? Но това са най скъпите и ефективни реклами. Аналогично е и с интернет рекламите и банерите, дори и да са недолюбвани от някой хора те имат реален и позитивен ефект върху бизнеса, и най вероятно ще докарат реални бъдещи клиенти за бизнеса ви, продукт или идея която рекламирате чрез тях.
Друг позитивен аспект на тези реклами е добрата честота на кликване или CTR(за разлика от статичните jpg, png реклами).
За разлика от рекламата в социалните мрежи например тези са доказано по ефективни, тук те провокират и реален интерес а не основно трафик.
Заключение
Основното предизвикателство пред дизайна на реклами е да се съчетаят креативността и маркетинговите послания по подходящ начин. Въпреки наличието на многобройни техники и похвати, те могат да са причината за разликата между успеха и провала.
Всяка кампания обаче е различна и всяка марка адресира собствената си аудитория. Освен това, като се има предвид, че сте на тази страница, предполагам, че вече сте направили своя избор и победителят е анимираният html5 банер. Може да сте обърнали внимание че „правилата“ които прочетохте по горе се различават някъде в представените тук банери, това е така разбира се, защото се съобразяваме и с желанието на клиента. (дори да смятаме че може да греши)
Дизайнът на банери е голямо предизвикателство, особено в наши дни, когато всичко е диманично и бързо променящо се, когато всички имаме достъп до почти всичко и отвсякъде благодарение на интернет и 4G мобилни връзки. Необходимо е не само вдхновение но и да се следят и обмислят постоянно тенденциите и изискванията в рекламата.
С тази статия аз от Adsspirit се опитах да отбележа някои от предимствата, характеристиките и тенденции в дизайна на анимирани html5 банери. Примерите ще ви помогнат да разберете по-добре различните варианти и може би и да се вдъхновите от някои от тях за вашата рекламна кампания.
Имате ли коментар по темата? Знаете ли други тенденции, или имате нещо с което бихте искали да допълните статията ни? Оставете вашите коментари!
Браво. добра статия, и примерите ви са яки. ще ви имам на предвид за вбъдеще
Thank you stoyan!
Stoyan did a great job working on a small advertising project that saved me a great deal of headache. He was flexible, knowledgeable and friendly to meet the goal of project goals, not only defined deliverables.