Ikony sú dôležitým elementom web dizajnu. Nepoznám človeka, ktorému by sa nepáčili ikony na web stránkach. Pripravili sme pre vás článok, ktorý vám vysvetlí ako využiť potenciál ikon vo web dizajne pre zlepšenie užívateľskej skúsenosti vašich web návštevníkov. Ako však môžu ikony ovplyvniť celkový dojem návštevníkov?
Význam ikon vo webovom dizajne
Ikony sú malé grafické symboly alebo obrázky, ktoré slúžia na reprezentáciu konkrétnych predmetov, akcií alebo funkcionalít. Ikony sa často používajú vo web dizajne, mobilných aplikáciách, softvéroch a mnohých iných digitálnych a fyzických médiách na zlepšenie užívateľskej skúsenosti a jednoduchšiu komunikáciu bez potreby dlhého textu.
Ikony majú schopnosť rýchlo a jednoznačne označiť funkciu alebo akciu, ktorú môže užívateľ na webovej stránke vykonať. Napríklad ikona zubného kolieska môže naznačovať možnosť nastavení, zatiaľ čo ikona tlačidla srdca môže signalizovať pridanie položky medzi obľúbené. Každá ikona môže byť symbolom s hlbším významom alebo príbehom.
Napríklad ikona so smajlíkom môže signalizovať pozitívne hodnotenie, zatiaľ čo ikona otvorených dverí môže znamenať prístup k novým príležitostiam. Ikony sú skvelým spôsobom, ako zobraziť produkty, služby alebo kategórie bez použitia dlhých textových popisov. Napríklad ikona kamery môže predstavovať fotografický tovar, zatiaľ čo ikona nákupného košíka signalizuje možnosť nákupu.
Ikony majú schopnosť upútať pozornosť užívateľov kvôli svojmu kompaktnému a vizuálne atraktívnemu charakteru. Vybrané ikony môžu byť prispôsobené štýlu a farbám značky. Ikony môžu byť vynikajúcim spôsobom, ako užívateľom naznačiť, akú informáciu očakávate pri vyplňovaní formulára. Napríklad ikona pera môže znamenať pole pre vstup textu, zatiaľ čo ikona kalendára naznačuje výber dátumu.
Ikony môžu byť použité na reprezentáciu rôznych sekcií alebo stránok na webovej stránke. Napríklad ikona domu môže viesť k úvodnej stránke, zatiaľ čo ikona lupy môže byť spojená s vyhľadávaním. Ikony majú schopnosť nahradzovať textový obsah na web stránke a tým šetriť drahocenný vizuálny priestor. Výber vhodných ikon môže pridať na estetickosti celkovému dizajnu webovej stránky.
Niekedy môže ikona mať silný symbolický význam, ktorý vytvára emocionálne spojenie medzi užívateľom a webovou stránkou. Napríklad ikona srdca môže vytvárať dojem pripojenia a pozitívnych pocitov.
Zásady tvorby ikon
Jednoduchosť je základným princípom tvorby ikon. Ikonu by malo byť ľahké identifikovať a pochopiť na prvý pohľad. Každý prvok by mal mať svoju úlohu a pridávať hodnotu. Príliš veľa prvkov by mohlo spôsobiť chaotický a nečitateľný dojem. Pridávajte detaily iba ak ikone pridajú hĺbku, charakter, sú relevantné a plnia špecifický účel. Každý detail by mal mať význam a prispievať k celkovej identifikácii ikony.
Ikona by mala byť dostatočne jasná a čitateľná aj pri menších veľkostiach. Užívatelia by mali bez problémov rýchlo rozpoznať, čo na danej ikone je. Ikony musia jasne komunikovať informácie o ich význame. Užívatelia by mali byť schopní rozpoznať, čo daná ikona symbolizuje. Pri tvorbe ikon je dôležité zachovať vo všetkých ikonách jednotný štýl. Všetky ikony by mali mať podobnú estetiku, tvarové prvky, farby a proporcionalitu. Vizuálna identita stránky tak zostane súdržná a profesionálna.
Unikátnosť celej sady: Sada ikon by mala mať svoju jedinečnú charakteristiku, ktorá ju odlišuje od iných sád ikon. Unikátnosť jednotlivých ikon: Každá ikona v sade by mala mať svoju vlastnú identitu a rozpoznateľný charakter. Vizuálna rovnováha je kľúčová pre vytvorenie esteticky príjemných a účinných ikon.
Veľkosť a umiestnenie: Veľkosť a umiestnenie prvkov v ikone prispievajú k jej rovnováhe. Vizuálna váha: Prvky v ikone majú rôznu vizuálnu váhu. Tmavšie farby, väčšie veľkosti a detailnejšie prvky majú zvyčajne väčšiu vizuálnu váhu. Biely priestor: Použitie bieleho priestoru, môže prispieť k dosiahnutiu rovnováhy. Zarovnanie: Správne zarovnanie prvkov prispieva k pocitu poriadku a rovnováhy. Hierarchia: Ikony často majú hierarchiu prvkov, pričom niektoré sú výraznejšie ako iné. Kontrast: Kontrast vo farbe, tvare alebo veľkosti môže byť použitý na dosiahnutie rovnováhy.
Ikona je v prvom rade nástroj komunikácie. A tá musí dávať ľuďom zmysel. Jasné a jednoduché: Ikona by mala byť jednoduchá a zrozumiteľná na prvý pohľad. Relevantné: Ikony by mali byť relevantné k svojmu kontextu alebo funkciám. Odpovedajúca kultúre a zvyklostiam: Rôzne kultúry a komunity môžu interpretovať ikony rôznym spôsobom. Zrozumiteľné bez slov: V ideálnom prípade by mali byť ikony schopné preniesť svoj význam aj bez potreby textových popisov. Logické: Ikony by mali mať logický vzťah k veciam, ktoré reprezentujú.
Predtým než začnete návrh ikon, je dôležité pochopiť vašu cieľovú skupinu a analyzovať, čo by ich oslovovalo. Každá ikona by mala mať konkrétny účel a funkciu. Myslite na to, akú informáciu má ikona preniesť. Použitie mriežky vám pomôže udržať konzistentnú veľkosť a rozloženie ikon. Rozpoznateľnosť je kľúčovým faktorom pri návrhu ikon. Zamerajte sa na jasné a charakteristické tvary, ktoré užívateľom umožnia okamžite identifikovať, čo daná ikona predstavuje. Konzistentnosť v štýle, veľkosti, proporciách a farebnosti medzi ikonami je kľúčová pre vytvorenie vizuálnej harmónie. Aj keď sú ikony často malé a jednoduché, môžete im pridať osobnosť. Použite detaily a štýl, ktoré zodpovedajú charakteru vášho produktu alebo značky.
Nie všetky ikony musia byť samostatne zrozumiteľné. Prípadne môžete kombinovať textové štítky s ikonami, aby sa zabezpečilo jasné porozumenie. Pri návrhu ikon je dôležité mať na pamäti kultúrne odlišnosti a zvyklosti vašej cieľovej skupiny. Pred uvedením ikon do finálneho produktu ich testujte na reálnych užívateľoch. Pri testovaní ikon môžete využiť pravidlo 5 sekúnd.
Pristupnosť vo web dizajne znamená vytváranie webových stránok a aplikácií tak, aby boli prístupné a použiteľné pre všetkých ľudí, bez ohľadu na ich schopnosti, disabilitu alebo technické vybavenie. Cieľom prístupného web dizajnu je zabezpečiť, aby všetci užívatelia mohli efektívne komunikovať s obsahom, interagovať s ním a využívať služby online prostredníctvom rôznych zariadení, ako sú počítače, mobilné telefóny, čítačky obrazovky a iné.
- Textové popisy: Využite textové popisy pre ikony.
- Alternatívny text (alttext): Ak sú ikony obsiahnuté v obrázkoch, pridajte k nim alternatívny text, ktorý popisuje ich význam.
Zdroje ikon
- Google Font Icons: Tento zdroj poskytuje sadu ikon dostupných vo forme fontov.
- Unicons: Unicons je sada ikon s otvoreným zdrojovým kódom, ktoré sú veľmi ľahko prispôsobiteľné.
- Feather Icons: Táto sada ikon je minimalistická a jednoduchá, čo ich robí ideálnymi pre moderný web dizajn.
- Icons8: Icons8 poskytuje široký výber ikon rôznych štýlov a veľkostí.
- Font Awesome: Je jednou z najznámejších sád ikon, ktorá obsahuje tisíce ikon a je veľmi obľúbená medzi vývojármi.
- Material Design Icons: Tieto ikony sú navrhnuté podľa Material Design od Google.
- Streamline Icons: Streamline Icons sú ikony s vysokým rozlíšením a detailmi.
- Nucleo: Táto sada ikon má vysokú kvalitu a je dostupná vo forme fontov alebo SVG súborov.
Použitie ikon na webe
- Odporúčané zoznamy: Ikony môžete použiť na zvýraznenie dôležitých alebo najnovších položiek vo vašom obsahu.
- Nové funkcie: Ak chcete upriamiť pozornosť na nové funkcie alebo aktualizácie vo vašej aplikácii alebo produkte, môžete použiť ikony vedľa týchto funkcií.
- Nové produkty: Ak máte viacero aplikácií alebo produktov, ikony môžu byť užitočné na vizuálne odlíšenie jednotlivých produktov.
- Zoznam služieb: Pri výpise služieb alebo funkcionalít môžete ku každej službe pridať ikonu, ktorá naznačí jej charakteristiku. Toto uľahčí rýchlu identifikáciu pre užívateľov.
- Zvýraznenie nadpisov: Ikony môžu byť použité na zdôraznenie nadpisov a tým dať titulom kreatívny dotyk.
Favicon: Malý, ale dôležitý detail
Favicon je malá grafická ikonka, ktorá je umiestnená na kartách prehliadača pred názvom webovej stránky. Termín Favicon pochádza z anglického slovného spojenia Favorite Icon - “obľúbená ikona”. Zvyčajne zobrazuje prvé písmeno názvu značky, jej logo alebo obrázok súvisiaci s témou webu alebo identitou značky. Netreba si ale mýliť pojmy favicon a logo - aj keď oba obrázky predstavujú identitu značky, sú to odlišné veci.
Hlavným účelom faviconu je zvýrazniť a zviditeľniť váš brand alebo webovú stránku medzi kartami prehliadača. Okrem toho je favicon príležitosťou pre firmy, aby ich značka bola rýchlejšie zapamätateľná pre zákazníkov. Obrázok priťahuje pozornosť a je automaticky spájaný so značkou. Favicon je skratka pre "favorites icon" alebo "shortcut icon" a označuje malý grafický obrázok, ktorý slúži ako identifikačná ikona pre webovú stránku.
Táto ikona sa zobrazuje vo webovom prehliadači vedľa názvu stránky v záložkách, v zozname obľúbených stránok (favorites) a vo vyhľadávačoch pri uložení stránky do záložiek. Hlavné vlastnosti a využitie faviconu zahŕňajú:
- Identifikácia webovej stránky: Favicon slúži na rýchlu identifikáciu webovej stránky vo webovom prehliadači. Pomáha používateľom rozpoznať stránku medzi otvorenými záložkami a obľúbenými stránkami.
- Branding: Favicon môže byť súčasťou celkového vizuálneho identifikačného prvku (brandingu) webovej stránky. Obvykle obsahuje logo, značku alebo symbol, ktorý je charakteristický pre danú stránku alebo spoločnosť.
- Profesionálny vzhľad: Prítomnosť faviconu dodáva webovej stránke profesionálny vzhľad a upúta pozornosť používateľov. Pomáha vytvárať konzistentnú vizuálnu identitu pre stránku.
- Zlepšenie používateľskej skúsenosti: Favicon pomáha používateľom orientovať sa v otvorených záložkách a rýchlo identifikovať hľadanú webovú stránku. Zlepšuje používateľskú skúsenosť a umožňuje efektívnejšie prehľadávanie internetu.
Favicon sa najčastejšie implementuje ako malý obrázok vo formáte ICO (ikonový súbor), ktorý je špecifický pre webové prehliadače.
Formáty a rozmery favicon
V minulosti obrázky pre favicon museli byť iba vo formáte .ico. Tento formát umožňuje určiť niekoľko veľkostí ikon s rôznou bitovou hodnotou. V súčasnosti medzi najpopulárnejšie formáty súborov pre favicony patria .png a .svg. Väčšina moderných platforiem a operačných systémov podporuje formát .png (okrem Internet Explorer). Okrem iného, na vytvorenie súboru .png nepotrebujete žiadne špeciálne nástroje, vďaka čomu je veľmi užívateľsky prívetivý. Čo sa týka formátu .svg, podporujú ho iba Opera, Chrome, Firefox, MacOS Safari. Čo sa týka formátov .jpeg, .gif a .apng - tieto formáty majú problémy so zobrazením kvôli nedostatku širokej podpory prehliadačov.
Pre správne zobrazovanie faviconu je potrebné ho používať v správnej veľkosti. Vo všeobecnosti sa odporúča veľkosť 16x16px, pretože sa dá použiť vo všetkých prehliadačoch.
Rozmery: Štandardný rozmer favicony je 16×16 px, ale odporúča sa pripraviť aj väčšie verzie.
Formáty: Najčastejšie používaným formátom je ICO, pretože podporuje viacero rozlíšení v jednom súbore.
Favicon je dnes dôležitým prvkom webovej identity. Tento malý symbol sa zobrazuje v záložkách prehliadača, medzi otvorenými oknami a v niektorých prípadoch aj v mobilných aplikáciách alebo vyhľadávačoch. Favicona by mal jasne reprezentovať logo alebo symbol webovej stránky, čo pomáha užívateľovi rýchlo identifikovať stránku medzi mnohými otvorenými kartami.
Favicon bol prvýkrát predstavený v roku 1999 spoločnosťou Microsoft v internetovom prehliadači Internet Explorer 5. Pôvodne mal slúžiť na označovanie stránok v zozname obľúbených záložiek (favorites), odkiaľ pochádza aj jeho názov. Postupne sa rozšíril do ostatných prehliadačov a stal sa štandardnou súčasťou webových stránok. V súčasnosti sa favicon používa na viacerých úrovniach. Okrem klasického zobrazenia v záložkách je integrálnou súčasťou mobilných zariadení a vyhľadávačov, kde sa môže zobraziť pri vyhľadávaní ako doplnok k odkazu na web. Vyhľadávače ako Google favicon zobrazujú aj pri reklamách, čo môže zvýšiť dôveryhodnosť webu.
Favicon je neoddeliteľnou súčasťou identity značky a technického standardu každého moderného webu. Netreba ho vnímať len ako malý obrázok, ktorý “ozdobí“ vašu stránku. Favicona je dnes nevyhnutným prvkom webovej identity. Napriek svojej malej veľkosti má veľký vplyv na užívateľskú skúsenosť a brand identitu. Správne zvolená a implementovaná favicona pomáha webu lepšie sa identifikovať a zapamätať si ho medzi konkurenčnými stránkami. Mať ju, je v mnohých smeroch výhodou a určite sa oplatí myslieť na ňu pri stavbe webu.
Ikona zámku: Bezpečnosť na internete
Ikona zámku sa nachádza pri každej URL adrese a mala by byť vždy zamknutá. Pri surfovaní väčšina postrehla, že mnohé stránky majú naľavo drobnú ikonu zámku, ktorá v najlepšom prípade ostáva zamknutá. Dnes ju považujeme za dôležitú súčasť online bezpečnosti, no len málokto vie, čo táto ikona skutočne znamená.
Portál The Conversation vykonal prieskum, do ktorého sa zapojilo 528 užívateľov vo veku od 18 do 86 rokov. Viac ako polovica, 53%, mala minimálne bakalársky titul alebo vyšší a 22% dosiahli nejakú formu vyššieho vzdelania. Zvyšok užívateľov mal ukončené len základné stredoškolské vzdelanie. Z 528 užívateľov odpovedalo na prieskum 463 ľudí. Závery ukázali, že 63% užívateľov buď vedelo, alebo aspoň si myslelo, že vedelo, čo symbol zámku znamená. Zo 63% len 7% uviedlo správnu odpoveď. Najčastejšie užívatelia vysvetľovali, že ikona zámku znamená zabezpečenú stránku alebo že zámok predstavuje stránku bez vírusov alebo podozrivých odkazov. Ďalším častým vysvetlením bolo, že zámok predstavuje dôveryhodnú alebo originálnu web stránku.
O ikone zámku môžeme uvažovať ako o “zabezpečenej” stránke, no toto vysvetlenie je nepresné a môže zavádzať. Neznamená to zabezpečenú celú stránku, len komunikácia medzi vašim zariadením a webovým serverom.
Definícia ikony zámku je, že komunikácia medzi vašim počítačom a webom je šifrovaná a nemôžu si ju teda prečítať iné strany. Predstavte si hackera, ktorý by sa nejak dostal k dátam, ktoré si vymieňate napríklad s e-shopom. V prípade šifrovanej komunikácie, hacker bez správneho dešifrovacieho kľúča vidí len nezmyselný zhluk textu. Je pravda že aj táto komunikácia by sa dala dešifrovať, no vyžadovali by sa prostriedky, ktoré bežný kyberzločinec nemá k dispozícii. Naopak, ak je ikona zámku otvorená, komunikácia medzi vašim zariadením a serverom šifrovaná nie je. Ak by sa hacker dostal k týmto dátam rovnako ako v prvom príklade, mohol by jasne vidieť napríklad číslo vašej kreditnej karty, heslá atď.
Poznať ikony ako zámok pri URL adrese je mimoriadne dôležité, hlavne ak sa chceme v online priestore čo v najväčšej miere chrániť. Spoločnosť Google postupne vymieňa ikonu zámku za novú. Podľa ich slov chcú novou ikonou “zabrániť neistotám, ktoré ikona zámku vytvorila”. Otázka je, či podobnú zmenu zavedú aj ďalšie prehliadače. Každý prehliadač má svoju vlastnú ikonu zabezpečenej komunikácie. Vo väčšine prípadov ide o nejakú formu zámku, no pre čo najväčšiu bezpečnosť by mal byť dizajn tohto bezpečnostného prvku čo najviac jednotný.
Ako vytvoriť favicon pre váš web – použite tento bezplatný a jednoduchý generátor favicon!
Nová ikona prehliadača Chrome podľa slov Googlu vzbudzuje dojem „klikateľnosti“ a nie ihneď dojem dôveryhodnej stránky. Predchádzajúca ikona sa vyznačovala prehľadnosťou. Šifrovaná komunikácia mala ikonu uzamknutého zámku, nešifrovaná komunikácia odomknutého.
Ako nasadiť favicon na web
Favicon - malá ikonka, ktorú nájdete v prostredí internetu na mohým miestach. V okne prehliadača, v záložkách, vo vyhľadávaní, v histórii prehliadača aj inde. Prečo je dobré favicon používať a ako ju nasadiť na web? Favicon či favicona (z anglického „favorite icon“ alebo obľúbená ikona) je ikona stránky, ktorá bola pôvodne určená pre lepšiu prehľadnosť tzv. obľúbených záložiek v prehliadači.
Najpopulárnejší vyhľadávač Google ikonu stránok v organickom vyhľadávaní na mobilných zariadeniach zobrazuje od mája 2019. Faviconu po zobrazuje pri výsledkoch vyhľadávania namiesto náhľadu stránok aj Seznam.cz. Ikonu favicon.ico vie väčšina dnešných služieb a prehliadačov automaticky detekovať zo zdrojovej zložky stránok. Ikonu preto stačí nahrať cez FTP rozhranie do root zložky. Využiť na to môžete prístupové údaje vášho webhostingu a správcu súborov, napr.
Tip: Ikona sa dá v niektorých šablónach nahrať priamo v nastavení. Pomocnú ruku vám podajú aj online generátory, ak nechcete hľadať grafika. Ideálnym podkladom pre tvorbu ikony je logo vo formáte PNG alebo JPEG. Každá dobrá firemná stránka, e-shop či blog by nejaké logo mala mať. Logo si ľudia, ako dôležitý prvok firemnej identity, zväčša dobre pamätajú.
Niektoré služby dokážu generovať celú sériu rôznych veľkostí i keď základná verzia ikony má len 16×16 pixelov. Stretnúť sa s nimi môžeme napr. pri mobilných aplikáciách. Čo robiť v prípade, že nemáte vlastné logo ani vyhovujúci obrázok? Cestou je ikonu vytvoriť po svojom. V súčasných prehliadačoch môžete mať naraz otvorených niekoľko záložiek. Favicona v tomto smere uľahčuje orientáciu používateľa. Skúste nazrieť do histórie svojich prezeraných stránok alebo obľúbených záložiek. Uvidíte, že najpoužívanejšie prehliadače pri adrese a mene stránky zobrazujú aj ikonu favicon.