Egyedi weboldalkészítés felsőfokon!
Kérdése van? Segítünk!
Reelweb ügyfélszolgálat

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.

2020-02-01
Hogyan használjunk ikonokat a weboldalon?
 

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.

Kapcsolódó kulcsszavak

# ikon fontok

# svg képek

# weblap ikonok

Kapcsolódó híreink

A weboldal tervezés legfontosabb lépései

2019-09-14

A weboldal tervezés legfontosabb lépései

A weboldal létrehozása sokszor nem tűnik olyan bonyolult feladatnak, ám amikor nagy lendülettel belevetjük magunkat a tervezésbe, akkor hamar szembesülünk a valósággal.

On-Site weboldal optimalizálási alapszabályok

2017-04-26

On-Site weboldal optimalizálási alapszabályok

A SEO lényege: egy weboldalt adott kulcsszavakra a keresőoldalak legjobb pozíciójába juttatni. Ez nem könnyű feladat, mert nem ismerjük a kereső algoritmusok pontos működését.

Milyen egy modern webdesign?

2014-06-20

Milyen egy modern webdesign?

A weboldalak kialakítása során kulcsfontosságú szerepet játszik a webdesign. Hogy miért? Azért, mert az online érdeklődők mindig a honlapot keresik fel elsőnek, hogy bővebb információt kapjanak.

Kapcsolódó szolgáltatások

Weboldal készítés

Egyetlen vállalat, sőt még a legkisebb vállalkozás sem számíthat igazi sikerekre egy jól megtervezett weblap nélkül. A weboldalkészítés fontos minden vállalkozás életében ahhoz, hogy az online világban érvényesülni tudjon.

Tovább »

Webáruház készítés

Az online jelenlét nélkülözhetetlen minden vállalkozás számára, mert csak így tudja hatékonyan növelni forgalmát. A webáruház készítés célja az értékesítés és a forgalom növelése.

Tovább »

Üzenjen nekünk!

Kérdése van? Információra van szüksége? Kérjük, adja meg elérhetőségeit és érdeklődése célját! Hamarosan keresni fogjuk.

*Elfogadom az oldal szerződési feltételeiben és az adatvédelmi tájékoztatójában foglaltakat.

Központi iroda: 2800 Tatabánya, Mártírok útja 81/B. II. emelet 6. ajtó
Ügyfélfogadási idő: Hétfőtől péntekig: 08:00-16:00
Online elérhetőség: info@reelweb.hu
Telefonos elérhetőség: +36 70 410 1763