Case studies: malý animovaný banner na web

Webové stránky, které nabízí nějaký reklamní prostor k pronájmu, se snaží z reklamy vytěžit maximum a povětšinou jsou reklamními bannery přesyceny. Když si nějaký takový prostor pronajmeme, budeme nejspíše řešit, jak banner udělat, aby ve stránce plné reklamy vynikl a co více, přesvědčil návštěvníka, ke kliknutí.

Na co nejspíše aspoň na chvíli padne vaše pozornost? Nejspíše na něco co se hýbe. Proto u mnoha online bannerů se více než nabízí je naanimovat. Je to časově náročnější, ale ve finále se to může vyplatit více, než banner odbýt jako statický obrázek a mít z něj minimální návštěvnost. Protože jednoduše zapadne v záplavě dalších banneru.

Jeden takový banner jsem nedávno tvořil pro Lapierre Bikes. V pár bodech vám ukážu svůj postup k finálnímu výstupu.

 ,

1. Pojetí

Mělo by mít hlavu a patu. Něčím začít a něčím skončit. Já to pojal následovně. Oslovit cílovku a urvat pozornost těch, pro které je primárně kolo určeno. Když už lehce urvu jejich pozornost, banner je zkusí zaujmout technickými libůstkami a ve finále je vyzvat k akci, aby produkt prozkoumali detailně. Snažím se vyhýbat nápisům jako nejlepší, skvělý, apod. Snažím se spíše informace podat tak, aby si na to návštěvník přišel sám, že inzerovaný produkt je kvalitní, propracovaný, apod.

 .

2. Příprava podkladů

Ořez produktových fotek a příprava grafických prvků pro tvorbu vizuálu jednotlivých snímků animovaného banneru. Nejčastěji pro tuto část využívám programů Adobe Photoshop a Illustrator.

.
 .

.
3. Tvorba snímků

Když mám vše připraveno, vyskládám jednotlivé snímky v Adobe InDesign. Razím, že by na banneru měl být aspoň jeden pevný prvek. V mém případě logo. Ideální však je, pokud jde stále i vidět výzva k akci – tlačítko. Já však hodně bojoval s prostorem, protože banner je opravdu malinký a vsadil jsem raději na obsah.

.

Bonus: Tady přikládám ukázku animovaného banneru, na který jsem měl více prostoru. Zařadil jsem tak zde i výše zmíněné tlačítko, aby bylo viditelné na všech snímcích.
.

.
.


4. Animování

Jednotlivé snímky si vyexportuji do JPEGu a v Photoshopu je naanimuji. Výsledek je poté následující.
.

.
A jak přistupujete k animovaným bannerům vy? Děláte je stejným způsobem, nebo to děláte trošku jiným způsobem?

Líbilo se?

Prozatím jste článek neohodnotili

Diskuze