Tento príbeh pozná hádam každý dizajnér a programátor:
Urobíte parádny dizajn pre svojho klienta. Ten je nadšený, všetko je schválené. Deň pred spustením príde mail: „Pozerali sme sa na to večer s babkou a dedkom, a im sa zdá, že miesto tej zelenej by mal byť dizajn radšej v červenej.“ A keďže babka má vždy pravdu, ide sa prerábať.
Pokiaľ máte prvky stále rozrobené v Photoshope alebo inom editore, alebo sa jedná len o prvky, ktorým by sme farbu zmenili pomocou CSS, tak väščinou nemusíte myslieť na (samo)vraždu. Na tú začnete myslieť až vtedy, keď ikonky nepasujú k novej farbe. Obzvlášť vtedy, ak ste ich ručne kreslili niekoľko hodín.
Čo teraz? Budem hľadať nové? Skúsim im zmeniť farbu? Môžete, ale…
Čo ak sa zákazníkovi nebude pozdávať odtieň a bude to celé treba meniť znova? A znova… A čo ak ich bude chcieť zväčšiť? Zrazu sa objavia hnusné nekvalitné pixely a vy vo vašom podvedomí určite nebudete spokojný s tým, čo dodávate, lebo je to nedokonalé. Zaručená cesta do blázinca.
MOJA CESTA K DOKONALÉMU RIEŠENIU
Bitmap
Dlhú dobu sa používali ako ikonky malé bitmapové obrázky najčastejšieho rozmeru 16x16px alebo jeho násobky.
V akom formáte ich ukládať? Použijeme *.jpg? Ak je jednofarebné pozadie a viete, že také aj ostane, je to v poriadku.
Čo ak by sme ich chceli mať priehľadné? Použijeme *.gif? Gif je super, podporuje aj animáciu. Grafika v GIF je však kostrbatá, lebo využíva len 8 Bit farieb. A kto by v dnešnej dobe používal animácie v tak malej ikonke?
Čo tak použiť *.png? Veď ten je oveľa krajší zvláda 24 Bit farby a pri priehľadnosti je to pekne hladké (samozrejme kým sa to nepriblíži). Ale čo ak niekto používa zastaralý prehliadač? Ten priehľadnosť len tak jednoducho nedokáže. Implementujeme na stránku script a všetko krásne funguje.
Dobre tak máme favorita – budeme používať *.png. Prichádza znechutenie z toho, že sa vám nechce tie ikonky kresliť. Veď hádam niekto predsa v živote kreslil takú ikonku akú práve potrebujem. Každý vie, čo v tomto bode nasleduje: hľadanie obrázkov cez Google. Obvykle im treba odstraňovať pozadie, ale sem tam sa zadarí a natrafíme na nejaké bez pozadia.
Pri hľadaní na webe natrafíme na ikonové balíčky alebo knižice, kde nájdeme množstvo ikoniek. Zadáme názov čo hľadáme a ono nám to vyfiltruje desiatky ikoniek (sem tam nič :D, treba len vedieť čo skutočne chceme) a to aj v niekoľkých veľkostiach. Takou stránkou je napr. Iconfinder.
Flat
Všetko sa zmenilo keď Microsoft prišiel so svojím operačným systémom Windows 8. Podľa môjho názoru od začiatku vyzeral ako Teletext, ale človek prostý sa prispôsobi a zvykne si. A na tú grafiku som si rýchlo zvykol. Takýto dizajn uľahčil prácu nielen grafikom ale aj programátorom na frontende.
Z minulého storočia sme si zvykli, že ikonky si sťahujeme, lebo sa nám ich nechce kresliť. Ale čo s tými flatovými? Tie sa dajú nájsť pri použití kľúčových slov Pixel, Flat alebo Outline.
Svg
Vývoj napreduje a začíname využívať framework. Určite ste už počuli o Bootstrap-e. V ňom sa nachádza ikonový balíček Glyphicon. Najprv som si povedal: „Načo mi to bude? Veď aj tak ich mám už dávno poriešené svojimi krásnymi bitmapovými ikonkami.“
Potom som si povedal: „Veď prečo nie?“, a rozhodol som sa ich použiť. Ten jednoduchý zápis do class, žiadna cesta k obrázku, kde sa nachádza. Môžem si meniť farbu, na hover nepotrebujem dva rôzne obrázky a dokonca viem meniť veľkosť (môžem ikonku zväčšiť aj 100 násobne a bude stále pekne ostrá). Toto sa s mojimi ikonkami nedalo.
Časom príde po prvotnom očarení rozčarovanie. Ikoniek je málo, niektoré sa vám nepáčia a tohto systému sa vzdať nechcete.
Problém s nedostatkom ikon sa vyriešiť dá. Napríklad na Glyphicons, kde za nejaký poplatok si tých ikoniek stiahne viac.
Ak sa vám nepáčia, začne pátrať po alternatívach. Tu by som ako príklad dal stránku Fortawesome, ktorý vo svojej prvej verzii vychádzal z bootstrapu a nahradzoval priamo jeho ikonky, takže princíp bol rovnaký. No časom vyšla novšia verzia ktorá používa iný prefix. Priniesla však aj niečo nové a to svoje vlastné doplnkové classy pre:
- zväčšenie ikonky
- zachovanie rovnakej šírky v zoznamoch
- animácie pre spinner (každá ikonka sa môže otáčať, alebo pulzovať)
- otáčanie ikoniek o 90°, 180°, 270°, vertikálne alebo horizontálne
- spájanie ikoniek (ak sme nenašli nejakú variantu ikonky v štvorci alebo krúžku môžeme si ju jednoducho vytvoriť)
Všetky tieto veci nájdeme v príkladoch na stránke. Všetky ikonky sú rozdelené do niekoľkých kategórii.
- Web Aplications – najbežnejšie používané ikonky na stránkach
- Transportation – prepravné
- Gender – pohlavia
- File type – typy súborov
- Spinner – ikonky pre loading
- Form control – checkbox a radio buttony
- Payment – platobné (ikonky Visa, MasterCard, Paypal…)
- Chart – rôzne grafy
- Currency – platobné meny (ikonky Euro, Dolar, Libra, Bitcoin…)
- Text Editor – ikonky používané vo wysiwyg editoroch
- Directional – rôzne šípky
- Video player – ikonky pre video prehrávač
- Brand – logá rôznych stránok a značiek
- Medical – ikonky z lekárstva
Výhodou je, že autor tieto ikonky pravidelne doplňuje. Pri stiahnutí balíčka máte aj ukážkové súbory a aj samotný font, ktorý môžete nainštalovať na váš systém a tak ikonky využiť priamo pri návrhu dizajnu.
Tip: Pre implementáciu môžete využiť odkaz na CDN, ktorý je oveľa rýchlejší než váš server.
Všetko je super. Ikonky, farby, veľkosti meníme jedna radosť. Až do chvíle, keď sme zistili, že sa naše stránky na seba príliš podobajú…
