Ha k\u00f6r\u00fcln\u00e9zel a weben, az e-mailekt\u0151l a Facebookig, mindenhol ikonokkal tal\u00e1lkozol. N\u00e9ha seg\u00edti a meg\u00e9rt\u00e9s\u00fcket egy c\u00edmke, sokszor azonban nem. Az emberek m\u00e1r r\u00e9g\u00f3ta – a web indul\u00e1sa el\u0151tt is – haszn\u00e1ltak ikonokat kommunik\u00e1ci\u00f3s eszk\u00f6zk\u00e9nt. B\u00e1rhol is ker\u00fclnek alkalmaz\u00e1sra, mindig egyetlen c\u00e9lt szolg\u00e1lnak: hat\u00e9konyan elmondani egy \u00fczenetet egy k\u00f6zismert, vizu\u00e1lis nyelv seg\u00edts\u00e9g\u00e9vel<\/strong>.<\/p>\n\n\n\n Az ikonoknak k\u00e9t felt\u00e9telnek meg kell felelni\u00fck:<\/p>\n\n\n\n Amikor egy ikon ennek a k\u00e9t felt\u00e9telnek megfelel, akkor k\u00e9ts\u00e9gtelen\u00fcl hat\u00e9kony eszk\u00f6zk\u00e9nt kommunik\u00e1lja az \u00fczenetet. Gondolj csak olyan vall\u00e1si jelekre, mint p\u00e9ld\u00e1ul a kereszt vagy a hat\u00e1g\u00fa csillag. Ugyanakkor a digit\u00e1lis vil\u00e1gban m\u00e9g nincsenek ennyire j\u00f3l megalapozott szimb\u00f3lumok.<\/p>\n\n\n\n Az, hogy egy ikon sz\u00e9lesk\u00f6r\u0171en felismerhet\u0151v\u00e9 tegy\u00fcnk, nem k\u00f6nny\u0171 munka. Arra is sz\u00fcks\u00e9g lehet, hogy szabv\u00e1nyok hat\u00e1rozz\u00e1k meg a megjelen\u00e9s\u00e9t. Ellenkez\u0151 esetben az emberek m\u00e1sk\u00e9nt \u00e9rtelmeznek ikonokat, mint ahogy Te szeretn\u00e9d, hogy \u00e9rtelmezz\u00e9k \u0151ket. L\u00e9teznek olyan kultur\u00e1lis \u00e9s szem\u00e9lyes asszoci\u00e1ci\u00f3k, melyek megv\u00e1ltoztatj\u00e1k egy szimb\u00f3lum jelent\u00e9s\u00e9t, ami n\u00e9ha katasztr\u00f3f\u00e1hoz vezet.<\/p>\n\n\n\n Ha egy ikon nem ismer\u0151s az emberek sz\u00e1m\u00e1ra, akkor a jelent\u00e9s\u00e9re kor\u00e1bbi tapasztalataik \u00e9s kontextu\u00e1lis jelz\u00e9sek alapj\u00e1n k\u00f6vetkeztetnek. Ez n\u00e9ha m\u0171k\u00f6dik, n\u00e9ha viszont nem. P\u00e9ld\u00e1ul a KRESZ-t\u00e1bl\u00e1k orsz\u00e1gonk\u00e9nt n\u00e9mileg elt\u00e9r\u0151ek, \u00e9s aki m\u00e1r aut\u00f3zott k\u00fclf\u00f6ld\u00f6n, az tudja, hogy ez olykor zavar\u00f3 tud lenni. Ugyanakkor egy-egy orsz\u00e1gon bel\u00fcl nem okoz gondot a jelz\u00e9sek \u00e9rtelmez\u00e9se, mert szabv\u00e1nyos\u00edtva vannak.<\/p>\n\n\n\n Egy ikon \u00e9rtelmez\u00e9se eset\u00e9ben ugyanolyan ford\u00edt\u00e1si neh\u00e9zs\u00e9gekkel kell szemben\u00e9zni, mint az \u00edrott \u00e9s besz\u00e9lt nyelv eset\u00e9ben. Egy ikon jelent\u00e9se kult\u00far\u00e1nk\u00e9nt v\u00e1ltoz\u00f3 lehet. A nem egy\u00e9rtelm\u0171 jelz\u00e9seket pedig a webdesignban el kell ker\u00fclni<\/strong>.<\/p>\n\n\n\n R\u00e1ad\u00e1sul, mint a kommunik\u00e1ci\u00f3 minden m\u00e1s eszk\u00f6ze, \u00fagy az ikonok is dinamikusak, a jelent\u00e9s\u00fck folyamatosan m\u00f3dosul. Ahogy teh\u00e1t az ikonok jelent\u00e9se v\u00e1ltozik, \u00fagy a kor\u00e1bbi verzi\u00f3kat mindig el kell t\u00fcntetni, hogy egy szabv\u00e1nyos\u00edtott vizu\u00e1lis nyelvet \u00e9p\u00edts\u00fcnk.<\/p>\n\n\n\n Az emberekkel – akik a weboldalad vagy m\u00e1s digit\u00e1lis term\u00e9ked haszn\u00e1lj\u00e1k, \u00e9s megismerik egy ikonnak a jelent\u00e9s\u00e9t a haszn\u00e1lattal -, az ikonok r\u00e9v\u00e9n kialakult kapcsolatot fenn kell tartani. Ha hirtelen megv\u00e1ltoztatod egy szimb\u00f3lum jelent\u00e9s\u00e9t, akkor az rontja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt<\/strong>.<\/p>\n\n\n\n Ha egy ikont m\u00e1r magyar\u00e1zni kell, akkor az m\u00e1r nem m\u0171k\u00f6dik megfelel\u0151en<\/strong>. Att\u00f3l v\u00e1lik ismer\u0151ss\u00e9, hogy az emberek sokszor tal\u00e1lkoztak m\u00e1r vele. Ha elt\u00e9r\u00fcnk a megszokott\u00f3l, akkor az zavart \u00e9s roml\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt okoz. Az rossz megold\u00e1s, amikor egy ikon \u00e9rtelm\u00e9t m\u00e1s designelemek seg\u00edts\u00e9g\u00e9vel kell megmagyar\u00e1zni.<\/p>\n\n\n\n De l\u00e1ssuk az alapelveket!<\/p>\n\n\n\n Egy ikon els\u0151dleges c\u00e9lja a m\u00f6g\u00f6tte \u00e1ll\u00f3 tartalom gyors \u00e9s egy\u00e9rtelm\u0171 kommunik\u00e1ci\u00f3ja. Egy \u00e9rthetetlen ikon rendk\u00edv\u00fcl frusztr\u00e1l\u00f3 tud lenni a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra<\/strong>, s\u0151t bizonyos esetekben megakad\u00e1lyozza a weboldal vagy alkalmaz\u00e1s haszn\u00e1lat\u00e1ban. Az emberek egyszer\u0171en nem t\u00f6r\u0151dnek vele, ha nem \u00e9rtik, innent\u0151l kezdve pedig m\u00e1r nem tudja \u00e1tadni az \u00fczenetet.<\/p>\n\n\n\n Az ikonok eset\u00e9ben is \u00e9rv\u00e9nyes az az elv, hogy a kevesebb n\u00e9ha t\u00f6bb. El kell ker\u00fclni azokat az ikonokat, ahol t\u00fal sok a r\u00e9szlet, mert rontj\u00e1k az \u00e9rthet\u0151s\u00e9get. Ahogy egy webdesignn\u00e1l, \u00fagy az ikonokn\u00e1l is \u00e9rdemes minden olyan felesleget elt\u00e1vol\u00edtani, amire nincs felt\u00e9tlen\u00fcl sz\u00fcks\u00e9g<\/strong>. A c\u00e9l az, hogy a felhaszn\u00e1l\u00f3 egy pillant\u00e1ssal meg\u00e9rtse az ikon jelent\u00e9s\u00e9t. Az egyszer\u0171s\u00e9g k\u00fcl\u00f6n\u00f6sen fontos az anim\u00e1lt ikonokn\u00e1l.<\/p>\n\n\n\n Ha pedig az ikon sehogy sem k\u00e9pes vil\u00e1gosan kifejezni a l\u00e9nyeg\u00e9t, akkor ki kell eg\u00e9sz\u00edteni sz\u00f6veggel, vagy m\u00e1s megold\u00e1st kell keresni.<\/p>\n\n\n\n Ha siker\u00fclt egy \u00e9rthet\u0151 ikont tal\u00e1lnod, akkor figyelned kell az olvashat\u00f3s\u00e1g\u00e1ra is. Egy ikont persze nem olvasunk, de ha t\u00fal sok apr\u00f3, nem el\u00e9g j\u00f3 l\u00e1that\u00f3 r\u00e9szletet tartalmaz, akkor azt neh\u00e9z befogadnia a felhaszn\u00e1l\u00f3nak. Nem \u00e9rdemes t\u00fals\u00e1gosan finom, v\u00e9kony vonalakat haszn\u00e1lni az ikonokn\u00e1l, mert nem veszik \u00e9szre az emberek.<\/p>\n\n\n\n Az ikonokn\u00e1l fontos, hogy egyens\u00falyban legyenek, optikailag j\u00f3l legyenek elrendezve az elemek. Ez azt jelenti, hogy nem felt\u00e9tlen\u00fcl sz\u00e1mok alapj\u00e1n kialak\u00edtott szimmetri\u00e1ra kell t\u00f6rekedni, mert borulhat az ikon egyens\u00falya. <\/p>\n\n\n\n Egy gondolat kifejt\u00e9se n\u00e9h\u00e1ny sz\u00f3ban mindig hat\u00e9kony \u00e9s eleg\u00e1ns. Az ikonoknak az\u00e9rt is kell t\u00f6m\u00f6ren kifejezni\u00fck a l\u00e9nyeget, mert gyakran kism\u00e9ret\u0171 kijelz\u0151n jelennek meg. Mindig csak a megfelel\u0151 mennyis\u00e9g\u0171 r\u00e9szletet haszn\u00e1ld, \u00e9s ne t\u00f6bbet, mint ami felt\u00e9tlen\u00fcl sz\u00fcks\u00e9ges.<\/p>\n\n\n\n A k\u00f6vetkezetlens\u00e9g az ikonokn\u00e1l rendk\u00edv\u00fcl zavar\u00f3 tud lenni, ugyanakkor ezt a hat\u00e1st egy laikus csak \u00e9rzi, megmagyar\u00e1zni nem nagyon tudja. Nyilv\u00e1n Te sem akarod, hogy a l\u00e1togat\u00f3id \u00edgy \u00e9rezzenek. Ha egy ikon nagyobbnak t\u0171nik a weboldalon, mint egy m\u00e1sik, akkor „zajoss\u00e1” v\u00e1lik az oldal, illetve a l\u00e1tv\u00e1ny rontani fogja a c\u00e9gedr\u0151l a weboldaladon kereszt\u00fcl szerzett benyom\u00e1st<\/strong>. <\/p>\n\n\n\n T\u00f6bb ikon haszn\u00e1lat\u00e1n\u00e1l a harm\u00f3ni\u00e1t a k\u00f6vetkezetess\u00e9g biztos\u00edtja, vagyis azonos st\u00edlusban kell \u0151ket megtervezni, valamint azonos vizu\u00e1lis s\u00faly\u00fanak kell lenni\u00fck. Minden ikonnak van egy bizonyos vizu\u00e1lis s\u00falya, melyeket olyan param\u00e9terek hat\u00e1roznak meg, mint a kit\u00f6lt\u00e9s, a vonalvastags\u00e1g, a m\u00e9ret, a forma<\/strong>. Ezek azok a param\u00e9terek, melyeknek azonosnak kell lenni\u00fck az ikonokn\u00e1l. <\/p>\n\n\n\n Teh\u00e1t nem csak az sz\u00e1m\u00edt, hogy azonos legyen egy ikon sz\u00e9less\u00e9ge vagy magass\u00e1ga minden esetben, hanem p\u00e9ld\u00e1ul az is, hogy megegyezzen a form\u00e1juk. Ha nem egy\u00e9nileg tervezel vagy terveznek sz\u00e1modra ikonokat, hanem egy k\u00e9sz ikonszettet v\u00e1lasztasz, akkor is \u00e9rdemes ellen\u0151rizni, hogy a vizu\u00e1lis s\u00falyuk megegyezik-e az ikonoknak<\/strong>.<\/p>\n\n\n\n A megfelel\u0151 sz\u00ednek haszn\u00e1lata az ikonok tervez\u00e9s\u00e9nek is fontos r\u00e9sze. Alapvet\u0151en persze a m\u00e1rkasz\u00edneket haszn\u00e1ljuk az ikonokn\u00e1l, ugyanakkor, ha az ikonok a weboldaladt\u00f3l elt\u00e9r\u0151 k\u00f6rnyezetbe ker\u00fclnek – p\u00e9ld\u00e1ul egy app eset\u00e9ben -, akkor m\u00e1r \u00e1t kell gondolni a sz\u00edns\u00e9m\u00e1t. A legjobb megold\u00e1s, ha minden lehets\u00e9ges megjelen\u00e9si helyzetben teszteled az ikonokat, hogy megfelel\u0151-e a kontraszt.<\/p>\n\n\n\n Ha azt szeretn\u00e9d, hogy az ikonjaid kell\u0151en hat\u00e1sosak \u00e9s er\u0151teljesek legyenek, akkor felejtsd el a szabad form\u00e1j\u00fa ikonokat. Ezek lehetnek j\u00f3pof\u00e1k, azonban a professzionalizmus \u00e9s a hiteless\u00e9g nem tartozik a f\u0151 jellemz\u0151ik k\u00f6z\u00e9. Ezzel szemben egy geometrikus form\u00e1kkal fel\u00e9p\u00edtett design stabilit\u00e1st sug\u00e1roz, r\u00e1ad\u00e1sul val\u00f3sz\u00edn\u0171leg egyszer\u0171bb\u00e9 is v\u00e1lik, ami mint l\u00e1ttuk, fontos szempont az ikonokn\u00e1l.<\/p>\n\n\n\n Mit tesz egyediv\u00e9 egy ikont? Mit mond el a m\u00e1rk\u00e1dr\u00f3l? Milyen hangulatot teremt? Fontos, hogy az ikonok eredetiek legyenek, kapjanak valamilyen szem\u00e9lyis\u00e9get, hogy felismerhet\u0151k, megk\u00fcl\u00f6nb\u00f6ztethet\u0151k legyenek.<\/p>\n\n\n\n J\u00f3 esetben minden c\u00e9gnek, m\u00e1rk\u00e1nak van egy egyedi hangja, vagy szem\u00e9lyis\u00e9ge, amit az ikonokn\u00e1l is meg kell tartani. Ezt \u00fagy kell \u00e9rteni, hogy minden t\u00edpus\u00fa megjelen\u00e9sn\u00e9l azonos ikonokat kell haszn\u00e1lnod. Ha a felhaszn\u00e1l\u00f3 m\u00e1s ikonokkal tal\u00e1lkozik a hirdet\u00e9sn\u00e9l, mint a weboldalon, akkor az zavarba ejti. Arra gondol, hogy tal\u00e1n egy m\u00e1sik c\u00e9g oldal\u00e1ra t\u00e9vedt. <\/p>\n\n\n\n A zs\u00fafoltnak hat\u00f3 ikonok nem a professzionalizmusra utalnak, amit nyilv\u00e1n sug\u00e1rozni szeretn\u00e9l a c\u00e9gedr\u0151l. R\u00e1ad\u00e1sul nem k\u00f6nny\u00edti meg a felhaszn\u00e1l\u00f3k dolg\u00e1t a weboldalon. Ezzel szemben az elegend\u0151 negat\u00edv t\u00e9r, azaz whitespace jav\u00edtja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt \u00e9s a haszn\u00e1lhat\u00f3s\u00e1got. Ahhoz persze gondosan kell tervezni, hogy ne akarj mindent bezs\u00fafolni az oldalra, csak azokat az elemeket \u00e9s ikonokat, melyek els\u0151dleges fontoss\u00e1g\u00faak a l\u00e1togat\u00f3knak. <\/p>\n\n\n\n M\u00e1r Byrne 1993-as tanulm\u00e1nya<\/a> is r\u00e1mutatott arra, hogy az egyszer\u0171 ikonok sokkal jobban \u00e9rthet\u0151k az emberek sz\u00e1m\u00e1ra. A r\u00e9sztvev\u0151k h\u00e1rom k\u00fcl\u00f6nb\u00f6z\u0151 t\u00edpus\u00fa f\u00e1jl-ikont kaptak: egy \u00fcreset, egy egyszer\u0171t \u00e9s egy bonyolultat. Az egyszer\u0171 ikonok egy\u00e9rtelm\u0171en jobban teljes\u00edtettek, mint az \u00fcres \u00e9s a komplex ikonok.<\/p>\n\n\n\n Az egyszer\u0171s\u00e9g teh\u00e1t alapvet\u0151 t\u00e9nyez\u0151 az ikonok tervez\u00e9s\u00e9n\u00e9l. Ha t\u00fal sok r\u00e9szletet kap egy ikon, az nem seg\u00edti az embereket a meg\u00e9rt\u00e9sben, csak h\u00e1tr\u00e1ltatja \u0151ket.<\/p>\n\n\n\n A kevesebb teh\u00e1t itt is t\u00f6bb. Az ikon is vizu\u00e1lis zajk\u00e9nt viselkedhet, \u00e9s egy\u00e1ltal\u00e1n nem jelent seg\u00edts\u00e9get a meg\u00e9rt\u00e9sben, ha t\u00fal bonyolultt\u00e1, t\u00fal r\u00e9szletess\u00e9 tessz\u00fck. T\u00falegyszer\u0171s\u00edteni sem \u00e9rdemes persze, mert az megint csak rontja az \u00e9rthet\u0151s\u00e9get.<\/p>\n\n\n\n Egy kutat\u00e1sb\u00f3l kider\u00fclt<\/a>, hogy az absztrakt ikonok \u00e9rtelmez\u00e9se t\u00f6bb kognit\u00edv energi\u00e1t ig\u00e9nyel az emberek r\u00e9sz\u00e9r\u0151l. Egy pontosan \u00e1br\u00e1zolt ikon felhaszn\u00e1l\u00f3-bar\u00e1t, mivel egy val\u00f3 vil\u00e1gban l\u00e9tez\u0151 t\u00e1rgyra vagy \u00e9lm\u00e9nyre utal vissza.<\/p>\n\n\n\n Amikor teh\u00e1t lehets\u00e9ges, t\u00f6rekedj pontos \u00e1br\u00e1zol\u00e1sra az ikonokn\u00e1l! Ez persze nem minden esetben lehets\u00e9ges, hiszen jel\u00f6lhet az ikon olyan cselekv\u00e9st is, amit nem tudsz lek\u00e9pezni a val\u00f3 vil\u00e1got alapul v\u00e9ve. Ilyen p\u00e9ld\u00e1ul egy „megoszt\u00e1s”. A megoszt\u00e1s fogalma ugyanis \u00f6nmag\u00e1ban is egy elvont dolog, \u00edgy enn\u00e9l ahhoz az \u00e1br\u00e1zol\u00e1shoz kell visszany\u00falni, mely \u00e1ltal\u00e1nos elfogadott\u00e1 v\u00e1lt.<\/p>\n\n\n\n Az ikonok akkor m\u0171k\u00f6dnek a legjobban, ha sz\u00f6veggel p\u00e1ros\u00edtj\u00e1k \u0151ket<\/a>. Ez ugyanis seg\u00edt abban, hogy megel\u0151zz\u00fcnk minden k\u00e9t\u00e9rtelm\u0171s\u00e9get az ikonnal kapcsolatban. Ugyanakkor az ikonnak \u00e9s a sz\u00f6vegnek pontosan illeszkednie kell egym\u00e1shoz. Azaz a c\u00edmk\u00e9nek seg\u00edtenie kell abban, hogy vil\u00e1gosabb\u00e1 v\u00e1ljon az ikon jelent\u00e9se, \u00e9s ezt \u00f6sszehangoltan kell megtennie.<\/p>\n\n\n\n Az egyes kult\u00far\u00e1k eg\u00e9szen elt\u00e9r\u0151en \u00e9rtelmezhetnek bizonyos szimb\u00f3lumokat, illetve lehetnek olyan jelz\u00e9sek, melyek bizonyos ter\u00fcleteken jelent\u00e9ssel b\u00edrnak, m\u00e1shol azonban nem. Ha a term\u00e9kedet a vil\u00e1g minden r\u00e9sz\u00e9r\u0151l haszn\u00e1lj\u00e1k az emberek, akkor olyan ikonokat kell v\u00e1lasztanod, melyek teljesen \u00e1ltal\u00e1nos \u00e9rv\u00e9ny\u0171ek. Ugyanakkor az is igaz, hogy sok esetben a lokaliz\u00e1lt ikonok jobban m\u0171k\u00f6dnek, mint az \u00e1ltal\u00e1nos megold\u00e1sok.<\/p>\n\n\n\n Ha nem tervezed vagy tervezteted az ikonjaidat a weboldaladra, akkor sincs k\u00f6nny\u0171 dolgod, mert kiv\u00e1lasztani sem olyan egyszer\u0171, mint els\u0151re gondolhatn\u00e1d. Sokan elk\u00f6vetik azt a hib\u00e1t, hogy b\u00e1rmilyen ikoncsomagba tartoz\u00f3 ikont elfogadnak, mert azzal tal\u00e1lkoztak, \u00e9s \u00edgy a legegyszer\u0171bb. \u00dagy gondolj\u00e1k, hogy az ikon csak egy szimpla ikon, nem kell t\u00falgondolni, b\u00e1rmelyik j\u00f3 lesz. Pedig mivel funkci\u00f3ja van, egy rossz v\u00e1laszt\u00e1s rontja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt a weboldalon. De mire figyelj?<\/p>\n\n\n\n Olyan ikonokat v\u00e1lassz a weboldaladra, melyek illeszkednek az ipar\u00e1gadhoz, a weboldalad tartalm\u00e1hoz<\/strong>, t\u00e9m\u00e1j\u00e1hoz. Ha az ikonok er\u0151s\u00edtik a kontextust, k\u00f6nnyebben meg\u00e9rtik az emberek az oldalt.<\/p>\n\n\n\n Az a j\u00f3, ha az ikonjaid hozz\u00e1tesznek valamit a weboldalad st\u00edlus\u00e1hoz<\/strong>, nem pedig elvesznek bel\u0151le. Egy komoly, szakmai weboldalon nem haszn\u00e1lhatsz vicces, sz\u00ednes, k\u00e9zzel rajzolt ikonokat. Ugyanez igaz ford\u00edtva is.<\/p>\n\n\n\n Sok ikoncsomagn\u00e1l gondot jelent, hogy nem tal\u00e1lhat\u00f3 benn\u00fck elegend\u0151 ikon. Legal\u00e1bbis a Te ig\u00e9nyeid kiel\u00e9g\u00edt\u00e9s\u00e9re t\u00fal kicsi a v\u00e1laszt\u00e9k. Erre azonban sokszor ut\u00f3lag j\u00f6ssz r\u00e1. \u00c9rdemes teh\u00e1t m\u00e9g a v\u00e1laszt\u00e1s el\u0151tt \u00e1tgondolni, hogy h\u00e1ny ikont szeretn\u00e9l haszn\u00e1lni, mert az nem lesz j\u00f3, ha k\u00e9s\u0151bb m\u00e1s st\u00edlus\u00fa ikonokkal k\u00e9nyszer\u00fclsz kieg\u00e9sz\u00edt\u00e9sre<\/strong>.<\/p>\n\n\n\n Vannak olyan ikonok melyek vektor form\u00e1tum\u00faak, ez\u00e1ltal b\u00e1rmilyen m\u00e9ret\u0171ek lehetnek, \u00e9s k\u00f6nny\u0171 \u0151ket szerkeszteni. Ugyanakkor vannak olyanok is, melyek adott felbont\u00e1s\u00faak, \u00e9s csak abban a m\u00e9retben tudod \u0151ket haszn\u00e1lni. Ez fontos lehet, amikor a megfelel\u0151 megold\u00e1st keresed a weboldaladra.<\/p>\n\n\n\n Az ikonok jobb meg\u00e9rt\u00e9se \u00e9rdek\u00e9ben c\u00e9lszer\u0171 \u0151ket szavakkal is kieg\u00e9sz\u00edteni<\/strong>. Az emberek ugyan a vizu\u00e1lis jelz\u00e9seket gyorsabban befogadj\u00e1k, mint a sz\u00f6vegeket, k\u00fcl\u00f6n\u00f6sen, ha m\u00e1r ismerik az adott jelz\u00e9s jelent\u00e9s\u00e9t, m\u00e9gsem szabad mindent egyetlen ikonra alapozni. \u00c1ltal\u00e1ban a szavak teszik vil\u00e1goss\u00e1 egy ikon jelent\u00e9s\u00e9t, \u00e9s ezek alak\u00edtj\u00e1k ki a bizalmat azzal kapcsolatban, hogy egy interakci\u00f3 a v\u00e1rt eredm\u00e9nyt hozza. A n\u00f6vekv\u0151 bizalom pedig jelent\u0151s javul\u00e1st eredm\u00e9nyez a kulcsfontoss\u00e1g\u00fa mutat\u00f3kn\u00e1l.<\/p>\n\n\n\n A divatos ikonokkal \u00e9rdemes \u00f3vatosnak lenni, mert ezek nem maradnak vel\u00fcnk tart\u00f3san. Egy-egy r\u00f6vid \u00e9let\u0171 projektn\u00e9l j\u00f3pofa megold\u00e1s lehet a haszn\u00e1latuk, de a hossz\u00fa \u00e9let\u0171nek tervezett felhaszn\u00e1l\u00f3i fel\u00fcletekn\u00e9l \u00e9rdemes a klasszikus ikonok haszn\u00e1lat\u00e1n\u00e1l maradni<\/strong>. A designereknek vigy\u00e1zni kell a trendek k\u00f6vet\u00e9s\u00e9re, amikor a haszn\u00e1lhat\u00f3s\u00e1g is fontos t\u00e9nyez\u0151.<\/p>\n\n\n\n A klasszikus ikonok az\u00e9rt klasszikusak, mert id\u0151t\u00e1ll\u00f3ak, \u00e9s k\u00f6vetkezetes a haszn\u00e1latuk. A k\u00f6vetkezetes haszn\u00e1lat eredm\u00e9nye pedig az, hogy az emberek sz\u00e1m\u00e1ra ismer\u0151snek t\u0171nnek. Megszokt\u00e1k azt, hogy interakci\u00f3ba l\u00e9pnek vel\u00fck, \u00edgy tudj\u00e1k, hogy mire sz\u00e1m\u00edthatnak, ha megint tal\u00e1lkoznak vel\u00fck. A trendi ikonokn\u00e1l hi\u00e1nyzik a felismerhet\u0151s\u00e9g, ami pedig elengedhetetlen, ha j\u00f3l haszn\u00e1lhat\u00f3 fel\u00fcletet akarunk.<\/p>\n\n\n\n Mindig gondosan v\u00e1lassz teh\u00e1t ikont \u00e9s legy\u00e9l tiszt\u00e1ban azzal, hogy ha ismeretlen ikont v\u00e1lasztasz, akkor annak k\u00f6vetkezm\u00e9nyei lesznek. A megszokott\u00f3l val\u00f3 minden elt\u00e9r\u00e9snek sz\u00e1nd\u00e9kosnak kellene lennie<\/strong>, melyt\u0151l tov\u00e1bbi el\u0151ny\u00f6ket rem\u00e9lhetsz, nem pedig negat\u00edv hat\u00e1sokat. A hagyom\u00e1nyos ikonok k\u00f6nnyebben felismerhet\u0151k egy sz\u00e9les k\u00f6z\u00f6ns\u00e9g sz\u00e1m\u00e1ra, ez\u00e1ltal magabiztosabb\u00e1 t\u00e9ve a haszn\u00e1latot.<\/p>\n\n\n\n Ha azt gondolod, hogy egy ikon eset\u00e9ben mindegy, hogy az sz\u00ednnel kit\u00f6lt\u00f6tt vagy csak a k\u00f6rvonala van megh\u00fazva, akkor t\u00e9vedsz. Egy ikon st\u00edlusa befoly\u00e1solja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt \u00e9s a hat\u00e9konys\u00e1got.<\/p>\n\n\n\n Sokan vannak, akik puszt\u00e1n \u00edzl\u00e9sbeli k\u00e9rd\u00e9snek tekintik, hogy milyen ikonst\u00edlust haszn\u00e1lnak. Pedig a kutat\u00e1sok azt mutatj\u00e1k, hogy egyik vagy m\u00e1sik t\u00edpus\u00fa ikont elt\u00e9r\u0151 gyorsas\u00e1ggal k\u00e9pesek feldolgozni a felhaszn\u00e1l\u00f3k. Ha egy adott st\u00edlus\u00fa ikont k\u00f6nnyebben k\u00e9pesek \u00e9rtelmezni, akkor az azt jelenti, hogy egyszer\u0171bben \u00e9rik el a c\u00e9ljukat, v\u00e9gzik el a feladatukat egy alkalmaz\u00e1sban vagy egy weboldalon.<\/p>\n\n\n\n A Uxmovement<\/a> egy olyan kutat\u00e1sra<\/a> h\u00edvta fel a figyelmet, melyben az \u00fagynevezett sz\u00ednnel teljesen kit\u00f6lt\u00f6tt, illetve az \u00fcres, csak k\u00f6rvonalat megjelen\u00edt\u0151 ikonokat hasonl\u00edtott \u00f6ssze. A kutat\u00e1s meg\u00e1llap\u00edtotta, hogy az ikonst\u00edlus hat\u00e1ssal van egy feladat v\u00e9grehajt\u00e1s\u00e1ra. Ut\u00f3bbit az ikon felismer\u00e9s\u00e9nek \u00e9s kiv\u00e1laszt\u00e1s\u00e1nak sebess\u00e9ge \u00e9s pontoss\u00e1ga alapj\u00e1n m\u00e9rt\u00e9k.<\/p>\n\n\n\n Ami alapvet\u0151en kider\u00fclt, hogy a telibe sz\u00ednezett ikonok hat\u00e9konyabbak: k\u00f6nnyebben felismerhet\u0151k, mint a k\u00f6rvonalas ikonok. Ugyanakkor akad n\u00e9h\u00e1ny kiv\u00e9tel, valamint vannak olyan ikonok is, ahol nem fedezhet\u0151 fel k\u00fcl\u00f6nbs\u00e9g a feladat v\u00e9grehajt\u00e1s\u00e1nak sebess\u00e9g\u00e9t tekintve. <\/p>\n\n\n\n Ut\u00f3bbi els\u0151sorban a karakterisztikus jellemz\u0151k jelenl\u00e9t\u00e9vel f\u00fcgg\u00f6tt \u00f6ssze. Ha ezek a jellemz\u0151k hi\u00e1nyoztak, vagy nehezen voltak \u00e9szrevehet\u0151k, akkor nem tudt\u00e1k azonos\u00edtani az ikont a felhaszn\u00e1l\u00f3k. Mit ezek a meghat\u00e1roz\u00f3 r\u00e9szletei egy-egy ikonnak?<\/p>\n\n\n\n Mint a fenti \u00e1br\u00e1n l\u00e1that\u00f3, ha hi\u00e1nyzik a kis farok a hozz\u00e1sz\u00f3l\u00e1s-bubor\u00e9kr\u00f3l, akkor m\u00e1r nem lehet hozz\u00e1sz\u00f3l\u00e1sra utal\u00f3 ikonk\u00e9nt \u00e9rtelmezni. Egyszer\u0171en csak egy fekete folt. Ugyanez figyelhet\u0151 meg a lakat ikonn\u00e1l: ha elt\u00e1vol\u00edtjuk a kulcslyukat, akkor m\u00e1r ink\u00e1bb egy t\u00e1sk\u00e1ra hasonl\u00edt. Ahogy a fogasker\u00e9k is csak egy lyukas k\u00f6rr\u00e9 v\u00e1lik fogak n\u00e9lk\u00fcl.<\/p>\n\n\n\n A kutat\u00e1sb\u00f3l kider\u00fclt, hogy a kulcslyuk n\u00e9lk\u00fcli lakat t\u00e9vesztette meg legink\u00e1bb az embereket, a hib\u00e1k negyed\u00e9t okozva. A kulcslyuk itt egy meghat\u00e1roz\u00f3 r\u00e9szlete az ikonnak, mely sz\u00fcks\u00e9ges ahhoz, hogy a felhaszn\u00e1l\u00f3k azonos\u00edtani tudj\u00e1k. <\/p>\n\n\n\n Teh\u00e1t, amikor ikonokat haszn\u00e1lsz, mindig gy\u0151z\u0151dj meg arr\u00f3l, hogy az ikon minden olyan meghat\u00e1roz\u00f3 r\u00e9szletet tartalmaz, mely \u00e1ltal k\u00f6nnyen azonos\u00edthat\u00f3. Ha egy ikon egy m\u00e1sik t\u00e1rgyra hasonl\u00edt, akkor egy olyan karakterisztikus jellemz\u0151t kell el\u0151venni, mely \u00e1ltal \u00f6nmag\u00e1v\u00e1 v\u00e1lik.<\/p>\n\n\n\n Ez \u00fagy kapcsol\u00f3dik a k\u00f6rvonalas ikonok hat\u00e9konys\u00e1g\u00e1nak k\u00e9rd\u00e9s\u00e9hez, hogy a karakterisztikus jellemz\u0151nek k\u00f6nnyen \u00e9szrevehet\u0151nek, j\u00f3l l\u00e1that\u00f3nak kell lennie. M\u00e1rpedig akadnak olyan ikonok, amikor ez a r\u00e9szlet sokkal felt\u0171n\u0151bb egy k\u00f6rvonalas ikonon, mint egy sz\u00ednnel kit\u00f6lt\u00f6ttn\u00e9l.<\/p>\n\n\n\n A fenti k\u00e9pen l\u00e1tszik, hogy melyik az a h\u00e1rom ikon, melyekn\u00e9l a k\u00f6rvonalas st\u00edlus hat\u00e9konyabb. A k\u00f6rvonalak ugyanis a karakterisztikus jellemz\u0151ket sokkal hat\u00e1rozottabban kirajzolt\u00e1k. Egy sz\u00ednnel kit\u00f6lt\u00f6tt hozz\u00e1sz\u00f3l\u00e1sbubor\u00e9kn\u00e1l nehezebb felfigyelni a kis farokra, mint a k\u00f6rvonalasn\u00e1l, de a szemetes fedel\u00e9n\u00e9l is ugyanez a helyzet. <\/p>\n\n\n\n Mindebb\u0151l az az \u00e1ltal\u00e1nos k\u00f6vetkeztet\u00e9s vonhat\u00f3 le, hogy amikor a karakterisztikus jellemz\u0151 nem el\u00e9g er\u0151teljes, \u00e9s a forma sz\u00e9l\u00e9n helyezkedik el, akkor egy k\u00f6rvonalas ikon a hat\u00e9kony megold\u00e1s. Ez\u00e1ltal hangs\u00falyosabb\u00e1 v\u00e1lik a karakterisztikus jellemz\u0151 \u00e9s gyorsabban feldolgozhat\u00f3 az ikon.<\/p>\n\n\n\n Ugyanakkor persze, amikor ikonokat haszn\u00e1lsz, akkor egyfajta st\u00edlust kell k\u00f6vetkezetesen haszn\u00e1lni az alkalmaz\u00e1sban vagy a weboldalon. Vagyis nem keverhet\u0151 a k\u00f6rvonalas \u00e9s a sz\u00ednnel kit\u00f6lt\u00f6tt ikon st\u00edlus. Ez\u00e9rt, ha a sz\u00ednnel kit\u00f6lt\u00f6tt ikonok mellett d\u00f6ntesz, akkor olyan ikonokat kell haszn\u00e1lnod, melyekn\u00e9l jobban l\u00e1that\u00f3 a karakterisztikus jellemz\u0151: \u00e9lesebb sz\u00f6gben \u00e9s jobban kiemelkedik.<\/p>\n\n\n\n A fenti k\u00e9pen tiszt\u00e1n l\u00e1that\u00f3, hogy mik\u00e9nt lehet ezt megoldani.<\/p>\n\n\n\n Az el\u0151bb l\u00e1ttuk, hogy mikor teljes\u00edtenek jobban a k\u00f6rvonalas ikonok. Ugyanakkor vannak olyan tipikus esetek, amikor a sz\u00ednnel kit\u00f6lt\u00f6tt ikonok a hat\u00e9konyabbak. Els\u0151sorban akkor, ha az ikonok valamilyen val\u00f3s t\u00e1rgyat \u00e1br\u00e1zolnak, melynek van egy hat\u00e1rozott sziluettje. Ilyenkor a k\u00f6rvonalas \u00e1br\u00e1zol\u00e1s nem annyira val\u00f3szer\u0171, hiszen elt\u00e9r att\u00f3l, mint amivel a val\u00f3s\u00e1gban tal\u00e1lkozunk.<\/p>\n\n\n\n Term\u00e9szetesen az emberek ezekben az esetekben is k\u00e9pesek \u00e9rtelmezni a k\u00f6rvonalas ikonokat, a k\u00fcl\u00f6nbs\u00e9g csak annyi, hogy a feldolgoz\u00e1s lassabb, amikor az ikon form\u00e1j\u00e1t ad\u00f3 vonalak t\u00fals\u00e1gosan k\u00f6zel ker\u00fclnek egym\u00e1shoz. A fenti k\u00e9pen l\u00e1that\u00f3 k\u00f6rvonalas ikonok az\u00e9rt \u00e9rtelmezhet\u0151k nehezebben, mert a t\u00fal keskenny\u00e9 v\u00e1l\u00f3 bels\u0151 t\u00e9r miatt vizu\u00e1lis zaj keletkezik.<\/p>\n\n\n\n K\u00f6vetkeztet\u00e9sk\u00e9nt levonhat\u00f3, hogy sz\u00ednnel kit\u00f6lt\u00f6tt ikonokat \u00e9rdemes haszn\u00e1lni olyan ikonok eset\u00e9n, ahol sz\u0171k bels\u0151 terek jelenn\u00e9nek meg a vonalak k\u00f6z\u00f6tt. Az \u00e1rnyk\u00e9pes megjelen\u00edt\u00e9s ilyenkor egy egyszer\u0171bb form\u00e1t mutat, \u00edgy az ikon k\u00f6nnyebben \u00e9rtelmezhet\u0151.<\/p>\n\n\n\n A tanulm\u00e1ny olyan ikonokat is tal\u00e1lt, melyeket mindk\u00e9t st\u00edlus eset\u00e9n ugyanolyan k\u00f6nnyen lehetett azonos\u00edtani. Ilyen volt p\u00e9ld\u00e1ul a csillag, a bev\u00e1s\u00e1rl\u00f3kocsi vagy a z\u00e1szl\u00f3. <\/p>\n\n\n\n Ezekn\u00e9l l\u00e1tszik, hogy nincs olyan keskeny r\u00e9sz, melyn\u00e9l a k\u00f6rvonal vizu\u00e1lis zajt okozhatna. <\/p>\n\n\n\n Amire m\u00e9g \u00e9rdemes kit\u00e9rni, hogy sokan \u00fagy haszn\u00e1lj\u00e1k a sz\u00ednnel kit\u00f6lt\u00f6tt \u00e9s a k\u00f6rvonalas ikonokat, hogy el\u0151bbi az akt\u00edv, ut\u00f3bbi az inakt\u00edv \u00e1llapotot jelzi.<\/p>\n\n\n\n Ezt azonban pont ford\u00edtva lenne \u00e9rdemes haszn\u00e1lni. Itt abb\u00f3l kell kiindulni, hogy az emberek k\u00f6nnyebben felismernek egy olyan ikont, melyet m\u00e1r haszn\u00e1ltak. Vagyis, mivel a sz\u00ednnel kit\u00f6lt\u00f6tt ikonok \u00e1ltal\u00e1ban k\u00f6nnyebben \u00e9rtelmezhet\u0151k, ez\u00e9rt a nem akt\u00edv ikonokn\u00e1l kellene \u0151ket haszn\u00e1lni. Ugyanakkor, ha egy ikon akt\u00edv, azt m\u00e1r nyugodtan lehet k\u00f6rvonalas ikonnal jelezni. Emellett persze egy megv\u00e1ltoz\u00f3 sz\u00ednnel is utalni kell arra, hogy melyik ikon akt\u00edv, mert nem elegend\u0151, ha csak \u00e1tv\u00e1ltunk telir\u0151l k\u00f6rvonalasra.<\/p>\n\n\n\n Ha nem saj\u00e1t magad k\u00e9sz\u00edtesz ikonokat, vagy k\u00e9sz\u00edt sz\u00e1modra egy designer, akkor k\u00e9sz ikonokat is let\u00f6lthetsz. Erre mutatunk n\u00e9h\u00e1ny ingyenes forr\u00e1st:<\/p>\n\n\n\n Az ikon fontok egy gyakran felmer\u00fcl\u0151 probl\u00e9m\u00e1t oldanak meg, seg\u00edts\u00e9g\u00fckkel hat\u00e9konyabban \u00e9s gyorsabban jelen\u00edthet\u0151k meg ikonok a weboldaladon.<\/p>\n\n\n\n Ma m\u00e1r rengeteg megold\u00e1s tal\u00e1lhat\u00f3 ikon fontok kiv\u00e1laszt\u00e1s\u00e1ra \u00e9s haszn\u00e1lat\u00e1ra, nem musz\u00e1j neked \u00f6sszehozni egyet teljesen az alapokt\u00f3l. De mi is pontosan egy ikon font?<\/p>\n\n\n\n Az ikon fontok olyan bet\u0171t\u00edpusok, melyek apr\u00f3 k\u00e9peket \u00e1br\u00e1zolnak bet\u0171k helyett. Legnagyobb el\u0151ny\u00fck – ugyan\u00fagy, mint a bet\u0171kn\u00e9l – az, hogy m\u00e9retezhet\u0151k, valamint CSS haszn\u00e1lat\u00e1val m\u00f3dos\u00edthat\u00f3k. Itt teh\u00e1t arr\u00f3l van sz\u00f3, hogy v\u00e1ltoztathat\u00f3 a nagys\u00e1guk, a sz\u00edn\u00fck, a form\u00e1juk. Mivel alap\u00e9rtelmezetten \u00e1tl\u00e1tsz\u00f3ak, ez\u00e9rt b\u00e1rmilyen sz\u00ednt vagy h\u00e1tteret kaphatnak.<\/p>\n\n\n\n Mindez CSS seg\u00edts\u00e9g\u00e9vel megoldhat\u00f3, vagyis nincs sz\u00fcks\u00e9g egyedi k\u00e9pekre minden esetben, amikor ikon ker\u00fcl a designba. Ez pedig cs\u00f6kkenti a weboldal, illetve a k\u00f3d m\u00e9ret\u00e9t is. <\/p>\n\n\n\n Az ikonfontok vektork\u00e9pek, ebb\u0151l k\u00f6vetkezik a m\u00e9retezhet\u0151s\u00e9g\u00fck. Mint b\u00e1rmely bet\u0171, olyan nagy m\u00e9retet vehet fel, ami csak elf\u00e9r a kijelz\u0151n. Ugyan\u00edgy b\u00e1rmekkor\u00e1ra \u00f6sszezsugor\u00edthat\u00f3. Haszn\u00e1lhat\u00f3k \u00f6n\u00e1ll\u00f3an, mintegy dekor\u00e1ci\u00f3s elemk\u00e9nt, vagy ak\u00e1r a sz\u00f6vegbe \u00e1gyazva is.<\/p>\n\n\n\n A haszn\u00e1lat att\u00f3l f\u00fcgg\u0151en v\u00e1ltozhat, hogy kit\u0151l szerzed be az ikonfont-k\u00e9szletet. Ugyanakkor az alapok mindenhol ugyanazok. \u00c1ltal\u00e1ban h\u00e1rom lehet\u0151s\u00e9ged van (hacsak nem tervezed, hogy nagyobb k\u00f3dol\u00e1sba v\u00e1gsz bele):<\/p>\n\n\n\n Az igazi vita ott van, hogy vajon ikon fontot vagy ink\u00e1bb SVG k\u00e9pet kellene haszn\u00e1lnod abban az esetben, ha valami kis k\u00e9pet szeretn\u00e9l megjelen\u00edteni a weboldaladon. Mindk\u00e9t megold\u00e1s m\u0171k\u00f6dhet, els\u0151sorban az egy\u00e9ni preferenci\u00e1id hat\u00e1rozhatj\u00e1k meg, hogy melyiket v\u00e1lasztod.<\/p>\n\n\n\n Egy SVG, azaz a m\u00e9retezhet\u0151 vektor form\u00e1tum mindenesetre kicsit nagyobb mozg\u00e1steret ad. P\u00e9ld\u00e1ul, nem vagy egy sz\u00ednre korl\u00e1tozva, de anim\u00e1ci\u00f3t is adhatsz hozz\u00e1. A kicsi, m\u00e9retezhet\u0151 f\u00e1jlokat egyb\u0151l a m\u00e9dak\u00f6nyvt\u00e1rba t\u00f6ltheted, \u00e9s innen k\u00f6nnyen dolgozhatsz vel\u00fck. Ez teh\u00e1t egy j\u00f3 megold\u00e1s, ha csak n\u00e9h\u00e1ny ikonra van sz\u00fcks\u00e9ged.<\/p>\n\n\n\n Ezzel szemben az ikonfontok gyorsabban t\u00f6lt\u0151dnek be hossz\u00fa t\u00e1von, ugyanis gyors\u00edt\u00f3t\u00e1raz\u00e1sra ker\u00fclnek. Ugyanakkor a k\u00fcl\u00f6nbs\u00e9g nem t\u00fal nagy. Az ikonfontok pozicion\u00e1l\u00e1sa is okozhat gondot, mivel a bet\u0171kre vonatkoz\u00f3 szab\u00e1lyok \u00e9rv\u00e9nyesek r\u00e1 a m\u00e9ret, a sort\u00e1vols\u00e1g \u00e9s a f\u00fcgg\u0151leges elrendez\u00e9s kapcs\u00e1n. Ez az oka annak is, hogy sokan egy szolg\u00e1ltat\u00f3t\u00f3l szerzik be az ikonfontokat, \u00e9s nem saj\u00e1tot k\u00e9sz\u00edtenek.<\/p>\n\n\n\n Amit m\u00e9g \u00e9rdemes tudni, hogy az SVG-k tartalmaznak alt textet is, ami \u00e1ltal hozz\u00e1f\u00e9rhet\u0151bbek, mint az ikon fontok, melyek egyszer\u0171 bet\u0171kk\u00e9nt jelennek meg a sz\u00f6vegfelolvas\u00f3k sz\u00e1m\u00e1ra. <\/p>\n\n\n\n Viszont az ikonfontokat k\u00f6nnyebb megtal\u00e1lni \u00e9s haszn\u00e1lni a legt\u00f6bb ember sz\u00e1m\u00e1ra. A k\u00f6nyvt\u00e1rak mindenhol el\u00e9rhet\u0151k, \u00e9s nem bonyolult meg\u00e9rteni a haszn\u00e1latukat. Az SVG ikonokat ez\u00e9rt olyan felhaszn\u00e1l\u00f3k prefer\u00e1lj\u00e1k ink\u00e1bb, akik nagyobb befoly\u00e1st szeretn\u00e9nek a designjuk felett, illetve komolyabb szem\u00e9lyre szabhat\u00f3s\u00e1gra t\u00f6rekszenek. <\/p>\n\n\n\n Azt kell teh\u00e1t m\u00e9rlegelned, hogy melyik megold\u00e1s a k\u00e9nyelmesebb sz\u00e1modra, illetve melyik illeszkedik jobban a designodhoz \u00e9s a felhaszn\u00e1l\u00f3i fel\u00fclethez.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t az ikon fontokr\u00f3l elmondhat\u00f3, hogy n\u00e9pszer\u0171s\u00e9g\u00fck f\u0151 oka, hogy rugalmasan \u00e9s k\u00f6nnyen haszn\u00e1lhat\u00f3k. A m\u00e9retezhet\u0151 form\u00e1tum \u00e9s b\u00e1rmely tartalomkezel\u0151 rendszerbe val\u00f3 telep\u00edthet\u0151s\u00e9g miatt szinte b\u00e1rki k\u00f6nnyen elkezdhet haszn\u00e1lni ikonfontokat. A legnagyobb el\u0151nye viszont az, hogy nem egy f\u00fcggetlen k\u00e9pf\u00e1jl, ez\u00e1ltal cs\u00f6kken a weboldalm\u00e9ret, \u00edgy javul a bet\u00f6lt\u0151d\u00e9si id\u0151. R\u00e1ad\u00e1sul m\u00e9retezhet\u0151, ez\u00e9rt b\u00e1rmekkora m\u00e9retben megjelen\u00edtheted a k\u00e9s\u0151bbiekben.<\/p>\n\n\n <\/p>\n <\/p>\n\n\n Mint a nyelv, az ikonok is t\u00falmutatnak saj\u00e1t magukon. Er\u0151s\u00edtsd meg az ikonjaid egy j\u00f3 designnal, ami a k\u00f6rnyezet r\u00e9v\u00e9n kiemeli \u0151ket. P\u00e9ld\u00e1ul egy ny\u00edl egy digit\u00e1lis k\u00f6nyv jobb oldal\u00e1n b\u00e1rmit jelenthet, de az elhelyez\u00e9s miatt az emberek arra fognak gondolni, hogy val\u00f3sz\u00edn\u0171leg a lapoz\u00e1sban vehetik haszn\u00e1t. Persze ebben az esetben kicsi a kock\u00e1zat, hiszen az emberek k\u00f6nnyen visszat\u00e9rhetnek az el\u0151z\u0151 oldalra, ha az ikonb\u00f3l m\u00e1st n\u00e9ztek ki. Sokkal vesz\u00e9lyesebb p\u00e9ld\u00e1ul egy k\u00f6z\u00f6ss\u00e9gi m\u00e9di\u00e1s \u00e1llapotfriss\u00edt\u00e9sn\u00e9l vagy e-mail k\u00fcld\u00e9sn\u00e9l k\u00eds\u00e9rletezni. Ezek nem ide\u00e1lis helyek arra, hogy kipr\u00f3b\u00e1lj valami \u00fajat.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy az ikonokat megfontoltan, \u00e1tgondoltan kell haszn\u00e1lni<\/strong>. A j\u00f3l m\u0171k\u00f6d\u0151 ikonok sz\u00e9les k\u00f6rben ismertek, \u00e9s vil\u00e1gos, \u00e9rthet\u0151 \u00fczenteket k\u00f6zvet\u00edtenek. De ekkor is lehet\u0151leg sz\u00f6veggel kieg\u00e9sz\u00edtve c\u00e9lszer\u0171 haszn\u00e1lni \u0151ket. \u00c9s v\u00e9g\u00fcl arr\u00f3l sem szabad megfeledkezni, hogy az ikon k\u00f6rnyezete meger\u0151s\u00edtheti vagy gyeng\u00edtheti a jelent\u00e9s\u00e9t.<\/p>\n\r\nMilyennek kell lennie egy ikonnak?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/ikonok.jpg\")
<\/figure>\n\n\n\n\u00c9rthet\u0151s\u00e9g \u00e9s egyszer\u0171s\u00e9g<\/h4>\n\n\n\n
Olvashat\u00f3s\u00e1g<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/02\/google-terkep-ikonok.png\")
Egyens\u00faly<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/02\/ikon-szimmetria.png\")
<\/figure>\n\n\n\nT\u00f6m\u00f6rs\u00e9g<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/02\/tomoren-fogalmazott-ikonok.png\")
<\/figure>\n\n\n\nK\u00f6vetkezetess\u00e9g a vizu\u00e1lis s\u00falyn\u00e1l<\/h4>\n\n\n\n
Kontraszt \u00e9s sz\u00ednek<\/h4>\n\n\n\n
Haszn\u00e1lj geometrikus form\u00e1j\u00fa ikonokat!<\/h4>\n\n\n\n
Szem\u00e9lyis\u00e9g<\/h4>\n\n\n\n
K\u00f6vetkezetess\u00e9g a m\u00e1rk\u00e1n\u00e1l<\/h4>\n\n\n\n
Elegend\u0151 negat\u00edv t\u00e9r<\/h4>\n\n\n\n
Mit ronthatsz el az ikonokn\u00e1l?<\/h2>\n\n\n\n
1. Vizu\u00e1lisan t\u00fal \u00f6sszetettek<\/h4>\n\n\n\n
![\"\u00d6sszetett](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/10\/osszetett-egyszeru-ikonok.jpg\")
2. T\u00fal elvont ikonok<\/h4>\n\n\n\n
![\"Egy](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/10\/elvont-es-pontos-ikonok.jpg\")
3. \u00d6ssze nem ill\u0151 sz\u00f6veg \u00e9s k\u00e9p<\/h4>\n\n\n\n
![\"Amikor](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/10\/szoveg-ikon-problema.jpg\")
<\/figure><\/div>\n\n\n\n4. Figyelemmel kell lenni az elt\u00e9r\u0151 kult\u00far\u00e1kra<\/h4>\n\n\n\n
Hogyan v\u00e1laszd ki a megfelel\u0151 ikonokat? \u00c9s hogyan haszn\u00e1ld \u0151ket?<\/h2>\n\n\n\n
A t\u00e9m\u00e1hoz ill\u0151 ikonokat haszn\u00e1lj!<\/h4>\n\n\n\n
Legyen \u00f6sszhangban a m\u00e1rk\u00e1ddal \u00e9s a st\u00edlusoddal!<\/h4>\n\n\n\n
Gondold \u00e1t, hogy h\u00e1ny ikonra van sz\u00fcks\u00e9ged!<\/h4>\n\n\n\n
Gondold \u00e1t a m\u00e9retet \u00e9s a szerkeszthet\u0151s\u00e9get!<\/h4>\n\n\n\n
Szavakkal eg\u00e9sz\u00edtsd ki az ikonokat!<\/h4>\n\n\n\n
\u00d3vatosan a trendekkel!<\/h4>\n\n\n\n
Teli vagy k\u00f6rvonalas ikonokat haszn\u00e1lj? Melyik a hat\u00e9konyabb?<\/h2>\n\n\n\n
![\"Teli](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/kitoltott-es-korvonalas-ikon.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/meghatarozo-reszletek.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/konnyen-ertelmezheto-korvonalas-ikonok.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/konnyebben-azonosithato-ikonok.png\")
Mikor rossz v\u00e1laszt\u00e1s egy k\u00f6rvonalas ikon?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/teli-ikonok.png\")
Mikor nincs k\u00fcl\u00f6nbs\u00e9g?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/egyforman-konnyen-ertelmezheto-ikonok.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/aktiv-inaktiv-ikonok.png\")
Honnan szerezhetsz be ikonokat?<\/h2>\n\n\n\n
Mi az az ikon font? \u00c9s hogyan haszn\u00e1ld?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/11\/icofont-1.jpg\")
<\/figure>\n\n\n\nMi\u00e9rt \u00e9rdemes ikon fontokat haszn\u00e1lni?<\/h4>\n\n\n\n
Mikor nem \u00e9rdemes ikon fontokat haszn\u00e1lni?<\/h4>\n\n\n\n
Hogyan haszn\u00e1ld az ikonfontokat?<\/h4>\n\n\n\n
Ikon font vagy SVG?<\/h4>\n\n\n\n
V\u00e9g\u00fcl<\/h2>\n\n\n\n