# Piktogramok és ikonok készítése I. rész (Mindent az alapokról)

> A piktogramok és ikonok azért fontosak, mert pár másodperc alatt annyi infót adnak át, amihez szavakban sokkal több kellene. Ebben a részben megmutatom, mi a különbség piktogram, ideogram és ikon között, és milyen alapszabályok mentén érdemes tervezni egy márka ikonkészletét.

Forrás: https://brandguide.hu/piktogramok-es-ikonok-keszitese/  ·  Megjelent: 2022-06-02  ·  Frissítve: 2026-10-16

A vizuális zaj egyre nő, az emberi figyelem megosztott, így egyre nehezebb kitűnni a tömegből. A tömörítés (és ennek hatásos formái: a piktogramok és ikonok) épp ezért elemi fontosságúak a vizuális kommunikációban.

Ebben a kétrészes cikksorozatban megmutatom a piktogramok és ikonok készítésének legfontosabb alapjait és néhány példát a használatukról, csoportosításukról, valamint konkrét gyakorlati tippeket is.

Így mire az írás végére érsz, már minden tudás a birtokodban lesz, hogy egyértelmű, jól megkülönböztethető, gyorsan befogadható és értelmezhető piktogramokat készíts.

## A piktogram és az egyre szűkülő emberi figyelem

Egyre többet olvashatunk arról, hogy az emberi figyelem rövidül.

Az elmúlt években olyan brutális mennyiségű tartalom ömlött ránk, hogy míg 2000-ben átlagosan 12,5 másodpercig voltunk képesek egy dologra fókuszálni, a Microsoft 2015-ös tanulmánya már csak 8,25 másodperces figyelemről beszél.

Erre a kutatásra hivatkozva hírportálok százai hozták le, hogy az emberi figyelem rövidebb, mint egy aranyhal memóriája – ez utóbbi ~9 másodpercre tehető, igaz, azóta erről is kiderült, hogy tévhit.

De hadd nyugtassalak meg, a helyzet mégsem ennyire drámai.

A BBC külön cikket szentelt az [emberi figyelemmel kapcsolatos mítosz lerombolására](https://www.bbc.com/news/health-38896790). Nem untatlak a részletekkel, de a lényeg, hogy az emberi agy egyre inkább képes párhuzamosan több dologra is fókuszálni (multitaskolni).

[![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/02/Typo-onyv-banner@3x-1024x417.webp)](https://typo.brandguide.hu)

Hogy ez miért érdekel minket, amikor piktogramokról és ikonokról beszélünk?

Az ikonok és piktogramok képesek néhány másodperc alatt több mondatnyi információt átadni.

És ez akkor is létfontosságú, ha valóban csökken az emberi figyelem. És akkor is, ha egyre többet multitaskolunk.

Hiszen a vizuális zaj egyre nő, a világ folyamatosan gyorsul (bármilyen közhelyes megállapítás is ez), ezért a kommunikáció terén a tömörítés a leghatékonyabb eszközünk.

Mert attól függetlenül, hogy az emberi agy mire képes és mire nem, egyértelmű célunk kitűnni a vizuális zajból.

És ebben segítenek a piktogramok és ikonok.

## Tisztázzuk a fogalmakat: ikon, piktogram, ideogram – melyik mit jelent pontosan?

A piktogramok a való világ tárgyait vagy jelenségeit leképező egyszerű rajzok – amelyekre ránézve ugyanazok az üzenetek jutnak eszünkbe..

Ahogyan a [logótervezés](/hogyan-keszul-egy-logo-logotervezes/) során, úgy a piktogramok készítésekor is addig kell egyszerűsítenünk, amíg el nem jutunk arra a pontra, ahonnan még egy elem eltávolításával az ikon már elvesztené a jelentését.

Az **ideogram** pedig egy gondolat, egy elvont üzenet tömörítése, amiről megtanultuk, mit jelent, és így képes valaminek a szimbólumaként szolgálni. Ilyen például az egyenlőségjel (=) vagy a tiltás jele (🚫).

Ezek nem leképeznek egy a valóságban is létező tárgyat vagy cselekvést, hanem egy közmegegyezésre született jeleiül szolgálnak egy gondolatnak, üzenetnek.

A piktogramot és az ideogramot gyakran használjuk egymással kombinálva.

![A dohányzás piktogram és tiltás ideogram kombinált használata.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/06/ikon-1-1024x469.webp)

A dohányzás piktogram és tiltás ideogram kombinált használata.

Oké, de mi az ikon?

Ha azt vesszük alapul, hogy a piktogram és az ideogram konkrét céleszközök, akkor az ikonok ezeknek egy művészibb kiterjesztése. Amely nemcsak arra törekszik, hogy egyértelműen leképezze a világot, hanem arra is, hogy ezt valamilyen esztétikai minőségben tegye.

![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2021/09/tipp.webp)

Jogi szempontból mindenképpen kérdéses, hogy egy-egy ilyen eredménnyel mihez is kezdhetsz. Így bármelyik AI tool-t is használod, nézz utána a jogi oldalának, ha továbbvinnéd.

De szűkítsük most a kört a UI design területére.

Ha megnézzük a [grafikus felületek fejlődési idővonalát](http://toastytech.com/guis/guitimeline.html), 1973 és 2015-ig komoly változások mentek végbe. De egyvalami mégis állandó: az ikonok hangsúlyos szerepe.

## A piktogramok fajtái

A piktogramoknak alapvetően több fajtáját különböztetjük meg. Mi most hármat vizsgálunk meg közelebbről.

### DOT piktogramok

A [DOT piktogramok](https://en.wikipedia.org/wiki/DOT_pictograms) egy eredetileg ötven piktogramból álló készlet, mára ISO 7001-es szabvánnyá fejlődő készlet, amelyek az utazók és orientálódni vágyók számára nyújt hasznos információkat, szavak használata nélkül.

![DOT piktogramok (mozgólépcső, baba, taxi és busz.)](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/06/ikon-2-1024x469.webp)

DOT piktogramok (mozgólépcső, baba, taxi és busz.) Forrás: wikipedia

Ezeket általában reptereken, pályaudvarokon hotelekben és egyéb nyilvános helyeken használják, hogy akár külföldi turisták, nyelvi ismeret nélkül is könnyedén eligazodjanak.

### Olimpiai piktogramok

1972-ben (Münchenből) indultak hódító útjukra az olimpiai piktogramok. Ezt az ikonrendszert [Otl Aicher](https://www.piktogramm.de/en/) alapozta meg. Ezután pedig minden Olimpián megjelentek a sportágak illusztrálását és a navigáció megkönnyítését szolgáló piktogramok.

![Olimpiai piktogramok (úszás, birkózás)](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/06/ikon-3-1024x469.webp)

Olimpiai piktogramok (úszás, birkózás) [Forrás](https://www.piktogramm.de/en/)

### Univerzális ikonok

Léteznek olyan ikonok is, amelyek rajzolatilag már elavultak, mégis a mai napig használatosak. (Ilyen például a kagylós telefon, hiszen ma már a legtöbben mobilt használunk.)

![univerzális ikonok (telefon, nagyító, kuka, meeting point)](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/06/ikon-4-1024x469.webp)

Univerzális ikonok a [www.zwicon.com](http://www.zwicon.com) készletből (telefon, nagyító, kuka, meeting point)

### A márka arculatához igazított ikonkészletek

Az ikonok a brandünk részei. Épp ezért törekednünk kell arra, hogy ne csak azokat az általános tömörítéseket alkalmazzuk.

Egy márka ikonkészletét érdemes olyan esztétikai plusszokkal ellátni, amelyek által azok:

-   illeszkednek a márka arculatába;
-   és felismerhetőek más márkákkal szemben.

A sok ilyen apróságból adódik össze az a vizuális környezet, amely a brand egyediségét, különbözőségét adja.

Tökéletes példa erre az Iconwerk által tervezett Opel Icony System.

![Opel Icon System és márkaarculati elemek.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/06/ikon-5-1024x469.webp)

Opel Icon System és márkaarculati elemek. [Forrás](https://iconwerk.com)

Ha megnézzük a fenti példát látható, melyek azok a karakterisztikák, amelyek segítségével az Iconwerk létrehozza azt a vizuális egységet, amely a márkára, annak arculatára és az ikonkészletre is érvényes.

Jól látható, hogyan szerkeszti a fent már említett egyszerűsítés elvének mentén az ikonokat a tervező úgy, hogy az üzenet ne sérüljön, de a márka felismerhető elemei is szerepet kapjanak.

Hasonlóan jó példa erre a – szintén az Iconwerk által tervezett – Norwegian Airlines ikonkészlete is.

![Norvegian Airlines Icon System és márkaarculati elemek.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/06/ikon-6-1024x469.webp)

Norvegian Airlines Icon System és márkaarculati elemek. [Forrás.](https://iconwerk.com)

A vizuális elemek részeinek ilyen módú újrahasznosítása a [tipográfia](/a-tipografia-jelentese-alapismeretek/) területén is bevett szokás.

## Az ikontervezés alapszabályai

Az alábbi 5 szabály betartása jelentősen megkönnyíti majd a piktogram- és ikontervezést.

### 1\. Maradj stílusban

Mindenképp törekedj a brand kialakított (vagy kialakítandó) stílusához igazítani az ikonrendszert is.

Hiszen a márka minden olyan eleme, ahol ikonokat használunk (pl. applikáció) alapjaiban határozza meg a brand hangulatát.

### 2\. Gondolkozz egységes méretekben és léptekben

Ikonok tervezése során is tartanunk kell az egységes méreteket. Egy arculat ikonjai méretben és léptékben nem térhetnek el egymástól – legalábbis nem jelentősen.

### 3\. Tapadj a gridre!

Az ikonrendszereket (is) gridben tervezzük. A tervezés során arra kell törekedned, hogy az ikonok illeszkedjenek a gridrácsok vonalaira. Így ugyanis egy pixeles képernyőn is élesebbek lesznek az ikonok, ha például a szokásos 24×24 vagy 32×32-es pixelgridre tervezed.

De a gridháló akkor is hasznos, ha nem képernyőre dolgozunk. Ugyanis segít megteremteni és fenntartani a méret- és aránybeli egységességet.

### 4\. Gondolkozz rendszerben

Egy márka ikonkészlete állhat akár több száz ikonból is. Létfontosságú, hogy ezeket egymás mellé téve felismerhető legyen, hogy mindegyik ugyanannak a rendszernek az eleme.

A fentiekben már láttunk arra példát, hogyan hasznosíthatjuk újra az arculat egyes elemeit, akár az ikonokban is. Ez ugyanis képes egységet teremteni.

### 5\. Alkalmazz egységes színpalettát

A brand színeit alkalmazva még egységessebbé és felismerhetőbbé tehetjük a márka ikonrendszerét.

## Összegezve a fentieket…

A piktogram- és az ikonkészítés legfontosabb alapszabálya, hogy gondolkodj rendszerben.

Amikor egy brand számára tervezünk ikonkészletet, nemcsak a méret- és színbeli egység elengedhetetlen, hanem az is, hogy az ikonok elemei felidézzék a márka arculatának egyéb vizuális elemeit, formáit.

A cikksorozat második részében a fenti 5 pontot részletesen bemutatom majd, amelyekkel a most tanult alapokat magabiztosan alkalmazhatod majd élesben.

Ha maradt megválaszolatlan kérdésed, esetleg hozzáfűznél valamit, tedd meg bátran csatlakozz [Facebook csoportunkhoz](https://www.facebook.com/groups/brandguide).

Ha tetszik a cikk, oszd meg másokkal is, ha pedig kérdeznél, kiegészítenél, nyugodtan tedd meg hozzászólás vagy üzenet formájában.

## Kérdések és válaszok ikonokkal kapcsolatban

[![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/02/Konyv-banner@3x-1-1024x417.webp)](https://konyv.brandguide.hu)

## Mit vigyél haza

- A piktogram a valóság egyszerűsített leképezése, amit ránézésre mindenki ugyanúgy ért.
- Az ideogram egy elvont gondolatot jelöl, amit közmegegyezés alapján tanultunk meg felismerni.
- Az ikon a piktogram és ideogram művészibb, esztétikusabb kiterjesztése.
- Egy márka ikonkészletét a brand stílusához, méreteihez és színeihez kell igazítani.
- A legfontosabb szabály: gondolkozz rendszerben, hogy az ikonok összetartozónak tűnjenek.

## Gyakori kérdések

### Mi a különbség a piktogram, az ideogram és az ikon között?

A piktogram a valóság tárgyait vagy jelenségeit képezi le egyszerű rajzzal, az ideogram egy elvont gondolatot jelöl, amit közmegegyezés alapján tanultunk meg, mint az egyenlőségjelet, az ikon pedig ezeknek egy esztétikusabb, művészibb kiterjesztése.

### Miért fontosak a piktogramok és ikonok a márkaépítésben?

Mert pár másodperc alatt több mondatnyi információt tudnak átadni, segítenek kitűnni a vizuális zajból, és a jól megtervezett ikonkészlet a márka arculatának felismerhető részévé válik.

### Milyen szabályok szerint érdemes ikonkészletet tervezni egy márkának?

Tartsd magad a márka stílusához, használj egységes méreteket és léptéket, tervezz gridre, gondolkozz rendszerben, és alkalmazz egységes színpalettát.

### Mik azok a DOT piktogramok?

Egy eredetileg ötven piktogramból álló, mára ISO 7001 szabvánnyá fejlődött készlet, amely szavak nélkül segíti az utazók eligazodását reptereken, pályaudvarokon és más nyilvános helyeken.