Preskočiť na obsah
Kategórie
Tipy a triky Vzdelávanie

Kreatívne využitie „favicon“ v praxi

Dobre navrhnutá a kreatívna „favikona“ dokáže zlepšiť orientáciu medzi ostatnými otvorenými tabmi v prehliadači a prispieva aj k lepšiemu používateľskému zážitku.

Vytváranie favikoniek sa dá prirovnať k tvorbe loga, pretože aj tu musíte vyjadriť jediným grafickým prvkom všetky informácie o značke alebo obsahu, ktorý sa na webstránke nachádza. A to dokonca bez použitia doplňujúcich sloganov a iba vo veľkosti 16×16 pixelov

Samozrejme, pre rozpoznanie webstránky medzi ostatnými kartami by stačilo zmenšiť logo, no tieto značky sa rozhodli urobiť to inak. Okrem brandingu mysleli na užívateľský zážitok aj interaktivitu.

1. Mixcloud

|

Ikona tejto streamovacej služby obsahuje okrem loga aj dynamické zobrazenie aktuálnej situácie na webe – prehrávanie, pauzu a progress bar.

2. GitHub

Farebné variácie favikony SCM služby GitHub zobrazujú aktuálny stav systému. Zelená indikuje 100% reporting, oranžová drobné problémy (napríklad s webhook callbacks) a červená znamená úplný výpadok služby.

3. Google apps

Dynamické ikony, u ktorých je zmena stavu vyjadrená iba rôznou farebnosťou, by mohli byť v budúcnosti úplne nahradené dynamickými favikonami. Takýto prístup sa stal štandardom takmer vo všetkých Google službách. Favikona Gmailu upozorňuje na počet neprečítaných správ a ikona Google kalendára zobrazuje vždy aktuálny deň v mesiaci.

Návod, ako si vytvoriť podobné favikony nájdete tu, tu alebo tu. Alebo využite hotové dynamické badge, ktoré ponúka Miroslav Magda úplne zadarmo.

|

4. Animovaný progress bar

Niektoré úložiská multimediálneho obsahu zobrazujú stav nahrávania súborov ako animovaný progress bar alebo koláčový graf. Donedávna takto napríklad indikoval stav uploadovania fotografií aj Flickr. Takéto voľne dostupné JavaScriptové favikony nájdete napríklad tu a tu.

|

5. Favikony, s ktorými sa dá hrať

Možno to bude znieť bláznivo, ale favikony môžu byť spracované aj do podoby plne hrateľnej hry. Aj keď rozmer ikoniek nie je ideálnym miestom pre hranie, existujú prípady, kedy ani takéto obmedzenie nebolo pre web developerov prekážkou. Jedným z takých je Mathieu „P01“ Henri, ktorý pretvoril kultovú hru Defender do 16×16 pixelovej verzie. Hra je zobrazená ako favikona a ovládala sa klávesmi.

|

Oveľa známejšou „favikon hrou“ však bola arkádovka pre dvoch – Smart fortwo, ktorej úlohou bolo odkomunikovať, že aj v malom priestore Citroënu Smart Fortwo sa dá plnohodnotne zabaviť.

|

Okrem podávania informácií o tom, na akom webe sa práve nachádzate, sa dajú favikony použiť aj ako interaktívny prvok či dokonca marketingovo – komunikačný kanál.

Ak poznáte iné zaujímavé využitie ikoniek, ktoré by sme mali do článku doplniť, podeľte sa s nami komentároch.

Autor: Erik Oravec

Copywriter a vizuálny fetišista so záľubou v pekných veciach a dobrých ľudoch. Ešte stále študent marketingovej komunikácie, cestovateľ a milovník dobrej knihy. A kávy!