Hogyan használjunk ikonokat a weboldalon?

A modern weblapok többsége nagy valószínűséggel használ valamilyen ikonokat az oda érkező látogatók könnyebb tájékozódása érdekében. Már nem divat – főleg mobilnézetben – szövegesen megjeleníteni a menüpontokat vagy a weboldal gyors használatához szükséges gombokat, csupán egy mindenki számára jól értelmezhető ikonnal helyettesítik őket.

2021-02-01

Korábbi trendek

Az ikonok már elég régóta jelen vannak a webes világban, már a 90-es években is használták őket a weblapkészítők. Akkoriban az volt a divat, hogy minden ikont képként szúrtak be a weboldalba, és úgy jelenítették meg őket a böngészők. Ha egy oldal sok ikont használt, és azok nem voltak megfelelően méretezve, akkor a betöltési idő is jóval hosszabbra növekedett. Abban az időben annyira nem foglalkoztak ezzel a felhasználók, sem a weblapkészítők, örültek annak, ha internethez jutottak és böngészhették a világhálót.

Ahogy haladt előre a világ, egyre fontosabb lett a weboldalak gyors betöltődése. Az ikonok méretét elkezdték optimalizálni, és igyekeztek a számukat is jelentősen csökkenteni, csak a szükséges esetekben alkalmazták őket. Ekkoriban jött létre a „sprite” fogalma, ami azt jelentette, hogy több ikont vagy képet helyeztek el egy képre, majd a programozók azon belül pozicionálgattak a kívánt ikon megjelenítése érdekében. Ehhez csak egy jól használható és könnyen számolható rácsra volt szükség, amiben elhelyezték a képeket. Így a böngészőknek is csak egy képet kellett betölteniük, és jóval gyorsabb sebességet tudtak elérni, mintha az összes képet külön-külön kellett volna letölteniük a szerverről. Ez az ötlet annyira jól használható, hogy még a mai napig elterjedt, és megfigyelhető a nagyobb weblapok esetén.

Miért volt ez jó? Akkor még az emberek is jobban megnézték a weboldalakat, örültek egy képnek, ikonnak, vagy egy mozgó animációnak. Nem volt ilyen mértékű rohanás, és a grafikusok is jobban kiélhették a tervezési vágyaikat, nagyobb igény volt rá. A technológia fejlődésével a monitorok felbontása és grafikák minősége is profibb lett. A képként megszerkesztett ikonok mérete nem növelhető a végtelenségig, egy idő után pixelesek lesznek, ami nehezíti az értelmezésüket és a weboldal összképét is lerombolja. Előbb-utóbb várható volt, hogy az ikonok képként való megjelenítése feledésbe merül.

Az egyedi ikonok tervezése és térhódítása mára már háttérbe szorult, az emberek rohannak, nincs idejük semmire, főleg nem arra, hogy megértsenek egy weboldalt, vagy éppen megfejtsék, hogy milyen jelentés van egy egyszerű ikon mögött. Mára már kialakultak azok az ikonkészletek, amelyeket a telefonos operációs rendszerek és a weboldalak is összhangban alkalmaznak.

Ikon fontok alkalmazása

Az ikon font olyan betűkészlet, ami betűk és számok helyett jeleket, szimbólumokat, ikonokat tartalmaz. Az ikon fontok megjelenése nagyban megváltoztatta a weboldalak ikonkezelését. Nem kell hozzá grafikus szakember, hogy jó minőségű ikonokat alkalmazzanak a programozók. Könnyen beágyazhatóak, színezhetőek, és a legnagyobb méretben sem pixelesednek. Méretük elenyésző, nem lassítják a betöltődést, ráadásul minden böngésző egyformán támogatja őket.

Népszerű ikon fontok:

• Ionicons
  Ez a fontkészlet teljesen ingyenes és nagyon jó választás weboldalak esetében, hiszen egyértelmű ikonokat tartalmaz, olyanokat, amelyekkel a felhasználók a mobiltelefonjuk használata közben is naponta találkoznak. A két legnagyobb mobil operációs rendszer (Android, iOS) is ezekhez nagyon hasonló ikonokat alkalmaz. Közvetlenül a webhelyhez csatolhatóak, de akár le is tölthetőek és a saját kiszolgálóról is behivatkozhatóak. Nagyon jó kezdő programozók számára, akik még csak most ismerkednek ezzel a technológiával, hiszen könnyen és gyorsan beállítható, hamar megérthető a működési elve. A fontkészlet több mint 1100 ikont tartalmaz, tehát bőven van lehetőség a válogatásra.
• Font Awesome
  Az egyik leggyakoribb webes keretrendszer (Bootstrap) alapértelmezett fontkészlete, ami miatt nagyon sok weblapon megtalálható. Fantasztikus választás minden weboldal számára, hiszen biztonságos, ingyenes és hatalmas ikonkészlettel rendelkezik. Az ingyenes verzióban több mint 1500 ikon érhető el. A készítők gyakran frissítik, így folyamatosan követi a trendeket. Akik hosszútávra terveznek, azoknak mindenképp ajánlott.
• Material Design Icons
  Ez az ikonkészlet a Google material design stílusát tükrözi. Teljesen ingyenes és több mint 1000 ikont tartalmaz. Mivel nyílt forráskódú, ezért bármilyen projektben felhasználható, és szükség esetén egyedileg is testre szabható.

Természetesen a fentieken kívül még számtalan jobbnál jobb fontkészlet található az interneten, vannak fizetősek, de számos ingyenes verzió is létezik, amik ugyanolyan jól használhatóak.

Mi a helyzet akkor, ha mégis képre van szükség?

Ha egy weboldal mindenképp megköveteli az egyedi ikonok használatát, vagy éppen a sok fontkészlet közül egyik sem megfelelő, akkor is van megoldás. Ilyenkor SVG fájlokat érdemes használni, ami egy olyan vektoros formátum, ami jól méretezhető, és elég nagy mozgásteret ad, hiszen színezhető és animálható is. Azonban ezek túlzásba vitele sem javasolt, mert ugyanúgy lassíthatják az oldal betöltődését. Az SVG tehát olyan weboldalak esetén ajánlott, ahol nagyon fontos az egyediség, és az ikonok terén sem engedhetik meg a szabványos megoldásokat.

Sok esetben megfigyelhető, hogy a logót is SVG formátumban készítik el, hiszen a brand legfőbb eleme az egyes felbontásokhoz igazodva sem lesz pixeles, minden esetben megőrzi a szépségét.