Webshark Blog

A weboldaladon képként nem csak fotókat használhatsz, hanem rajzolt, akár kézzel rajzolt illusztrációkat is. De miért érdemes illusztrációkat használni, hol és hogyan vetheted be őket a weboldaladon? (Frissítés, 2023.06.02. – Egy új fejezettel bővítettünk: Miért és hogyan használj kézzel rajzolt elemeket a weboldaladon?)

A jó webdesignnak jelentős hatása van a potenciális ügyfelekre, hiszen az emberek a weboldaluk alapján ítélik meg a cégeket. Az nem számít, hogy ez az ítélet helyes-e vagy sem, csak a benyomás számít. Ezért a designerek folyamatosan megpróbálnak új megoldásokkal javítani a felhasználói élményen. Ennek érdekében – ahogy a való életben is – elsősorban a vizuális elemekhez nyúlnak. És itt lépnek a képbe az illusztrációk.

Miért érdemes illusztrációkat használni a weboldaladon?

A rajzolt illusztrációk hatékony eszközt adnak a designerek kezébe. Az illusztrációk a modern designban funkcionális elemek, a kommunikáció eszközei. A céljuk persze ugyanaz, mint bármilyen fotónak: segíteni a weboldal üzenetének átadásában, fokozni annak hatását. Az illusztráció egy olyan olyan vizuális elem, mely a szöveget támogatja. Célja az, hogy kibontsa és világossá tegye a szövegben lévő gondolatot. Lehet egy kép, de akár egy táblázat, grafikon is. Egy illusztráció akkor működik, ha a látogató a segítségével jobban megérti a verbális üzenetet. Az illusztráció az érzékszervi élményre építve magyarázza a szövegben szereplő gondolatot.

Manapság a web tele van szövegekkel, melyek legtöbbjének elolvasására nincs időnk. Ugyanakkor a vizuális információk befogadása teljesen függetlenül zajlik a verbális információktól.

Ahhoz azonban, hogy a rajzolt illusztráció működjön, a képeknek könnyen felismerhetőnek kell lenniük, és az általuk hordozott információt a felhasználók különböző csoportjainak is tudniuk kell dekódolni. De lássuk a funkcióikat részletesen!

Könnyebben elmagyarázhatod velük a lényeget

Az illusztrációk jól használhatók abból a célból, hogy valamit megmagyarázz, világossá tegyél a felhasználók számára. A rajzolt illusztrációk vizuális segítséget nyújtanak a felhasználóknak. Képesek megértetni velük egy üzenetet, leegyszerűsítve a dolgokat könnyen felfogható ábrákká. A képek „hangosabbak”, mint a szavak, és a befogadásuk is sokkal gyorsabb. Ez az oka annak, hogy miért olyan népszerűek a rajzolt illusztrációk a felhasználók elindításánál egy appban vagy egy weboldalon.

Bevetheted őket abban az esetben, amikor a látogató megérkezik a weboldaladra vagy a mobil alkalmazásodba, és el kell magyaráznod neki, hogyan is működik az oldal. Illusztrációk használatával elkerülheted a túl sok szöveg használatát. A belépő oldalak illusztrációkkal kiegészítve kiválóan bemutatják a felhasználók számára a legfontosabb funkciókat és előnyöket. Jelzik számukra a kontextust, világossá teszik a helyzetet, vagy akár vezethetik is a felhasználót a következő lépés megtétele felé. Ha egy minimál felülettel kombinálod a rajzolt illusztrációkat, akkor rendkívül hatékonyan képesek segíteni a fontos üzenetek eljuttatásában, anélkül, hogy túl sok szöveget kellene használnod.

Egy jól sikerült, interaktív beszálló oldal automatikusan felkelti az emberek érdeklődését a weboldal iránt. Arra készteti őket, hogy kezdjék el használni azt. Egy képes használati utasítást sokkal könnyebben és gyorsabban megértenek, mint a hosszú, szöveges magyarázatokat. Még azoknak az oldalaknak vagy appoknak is érdemes a rajzolt illusztrációk eszközéhez nyúlnia, ha el kell magyarázni valamit az embereknek, melyek egyébként más esetekben nem használják ezt.

Ugyancsak jól alkalmazható egy rajzolt illusztráció akkor is, ha különböző csomagok közötti választást kell bemutatnod:

Szintén használható, amikor a felhasználó belefut egy problémába. Ilyenkor a humor eszközét felhasználva tehető emberközelibbé a probléma és annak megoldása.

Emlékezetes a felhasználó számára

Webböngészés közben számtalan weboldallal találkozunk, azonban csak néhány olyan van, mely valóban emlékezetes lesz számunkra. Amikor az emberek valamilyen élményre visszaemlékeznek, akkor nem a teljes élmény ugrik be nekik az elejétől a végéig, hanem annak egyes kulcsfontosságú elemei, egy-egy kép, benyomás. Egy illusztráció pont ilyen kulcseleme lehet a weboldaladnak, és így a márkád is sokkal jobban megragad az emberek emlékezetében

A weboldalad főoldalán elhelyezett illusztrációk az egész weboldalról alkotott képet meghatározzák a felhasználók számára. Beindítják az emberek fantáziáját, és sokkal erősebb személyes kapcsolatot alakíthatsz ki rajzolt illusztrációkkal, mint a fotókkal. Emellett az egyedi, kizárólag a Te weboldaladhoz készült rajzolt illusztrációk hatékonyabban képesek megkülönböztetni a konkurenciától.

A különböző rajzolt karakterek is azért hasznosak, mert maradandóbb emlékeket hozhatsz létre általuk. Ezekre a márkaelemekre jobban vissza tudnak emlékezni az emberek, azonosítják őket a márkával, kapcsolatot tudnak kialakítani a felhasználó és a termék között.

A közvetlen kommunikáció illúzióját nyújtja

Minden termékhez kapcsolódó felhasználói interakció egy úttá áll össze. Minden egyes út mögött található egy cél, melyet a felhasználó szeretne elérni a termék használata révén. Bizonyos esetekben pedig lehetséges a felhasználói út történetté alakítása. Az illusztrációk ilyenkor kapcsolatot alakítanak ki a felhasználó és a weboldal között annak érdekében, hogy belevonják a folyamatba. Például egy rajzolt karakter lesz az, amely végigvezeti a felhasználót egy felületen, hogy megismerje annak működését.

A játékos, vidám, rajzolt karakterek sokkal hitelesebbé, megbízhatóbbá tehetik a termékedet, miközben könnyebben elérheted általuk a felhasználói elköteleződést is. Ilyen karakterek lehetnek például az állatfigurák, mint a Mailchimp esetében Freddie, a csimpánz. Ezek a figurák a felhasználói élmény emlékezetes elemei, melyek kapcsolatot hoznak létre a felhasználók és a weboldalad között, életet lehelnek az interakciós folyamatokba, és fenntartják az emberek érdeklődését. Ha el akarod kötelezni az embereket a weboldalad, céged, terméked iránt, akkor teremts meg egy rajzolt karaktert a márkád számára!

A Mailchimp csimpánza persze emellett jelentős szerepet játszik a felhasználó élmény javításában is. Különböző szerepekben megjelenik az oldalain, felhívva a figyelmet egy adott elemre, vagy csak egy viccet elsütve, hogy csökkentse a felhasználók feszültségét ott, ahol szükség lehet rá.

Megerősíti a stílust

Az illusztrációkat arra is használhatod a felületeidnél, hogy vizuális támogatást adj a weboldalad stílusának. Más márka-elemekkel szemben – mint a logó, betűtípus, színséma – az illusztrációknak jelentős hatásuk van a termék stílusára is. Amikor egy illusztráció egy adott stílusban készül el, akkor természetesen és harmonikusan illeszkedik a termékedhez és a márkádhoz. Ehhez persze az is kell, hogy az illusztrációk összhangban legyen egymással is, még ha különböző forrásból is származnak.

Alkalmazhatod a jutalom-oldalaknál

Nyilván mindenki találkozott már jutalmakkal a játékoknál. Ezek rendkívül erős hatás képesek gyakorolni az emberekre. Hogy mi az oka ennek? Mert úgy tűnik, mintha egy ember állna a másik oldalon, nem pedig egy számítógép. A jutalmazás emocionális interakció: a pozitív érzések révén elköteleződés alakul ki a felhasználók részéről. Az emberek képesek elfelejteni még a hibákat is akkor, ha pozitív érzésekkel ajándékozza meg őket egy app.

Amikor megjutalmazod az embereket valamilyen teljesítmény esetén, akkor az azt jelzi számukra, hogy törődsz velük. Tehát jutalmazd meg őket egy animációval, amikor teljesítenek egy személyes célt!

Összességében tehát elmondható, hogy az illusztrációk erőteljes és fontos eszköznek számítanak a felhasználói élmény javítása során, illetve a felület vonzóbbá és hatékonyabbá tételénél. Miközben nincsenek szabályok arra, hogy miként használhatsz rajzolt illusztrációkat a weboldaladon, azt mindenképpen érdemes észben tartani, hogy csak akkor alkalmazd őket, ha a felhasználók számára hasznosak. Ilyenkor az illusztrációk segítenek a céged és a terméked üzenetének hatékonyabb átadásában.

Miért és hogyan használj kézzel rajzolt elemeket a weboldaladon? (FRISSÍTÉS, 2023.06.02.)

A mostani, egyre mesterségesebbé váló világban a kézzel rajzolt elemek hatékonyan képesek felkelteni a közönség érdeklődését, kitűnni a zajból és megjeleníteni egy márka emberi vonásait.

Miért érdemes kézzel rajzolt elemeket használni a weboldaladon?

Azt talán már tudod, hogy a vizuális elemek általában sokkal nagyobb hatást gyakorolnak a látogatókra, mint a szövegek. A fotók vagy az illusztrációk erőteljesen megragadják a felhasználók figyelmét és képesek átadni a fontosabb információkat. A kézzel rajzolt illusztrációk annyival nyújtanak többet, mint a vektorokból felépített grafikák és más digitális elemek, hogy nyilvánvalóvá válik a mögöttük lévő ember, annak ellenére, hogy persze mindkettőt alapvetően emberek alkotják meg.

Még akkor is így van ez, ha az illusztrációt nem papírra készíted, hanem egy digitális kijelzőre, mint bármely más webdesign elemet. A közönség számára ezáltal mégis valami természetesebbet, hitelesebbet kínálsz.

Ha pedig egy olyan márkád van, mely kifejezetten szeretné megmutatni az emberi oldalát a webdesignban is, akkor a kézzel rajzolt elemek ezt olyan hatékonyan képesek kivitelezni, mint semmi más a weboldaltervezésben. A rajzolt elemek mindig arra emlékeztetik a látogatót, hogy valódi emberek állnak a weboldalak mögött, nem egy gép és robotok, melyek tökéletesen, érzelem nélkül végzik a dolgukat, és amelyekhez nem lehet kapcsolódni. Használatukkal tovább tudsz lépni a képek alapvető funkcióján, amikor ki akarod fejezni a tartalom érzelmi oldalát, így maradandóbbá válik az élmény.

Nem véletlenül alkalmazzák a kézzel rajzolt elemeket, illusztrációkat olyan cégek, mint a Dropbox vagy a Mailchimp. Már az is nagyon jól kifejezi a márka emberi vonását, ha nem teljesen szabályos vonalakkal találkoznak a felhasználók egy weboldalon. Annál is inkább, mert a legtöbb cég és a weboldala a tökéletességet próbálja hajszolni, amibe gyakorlatilag nem fér bele semmi, ami emberi.

Ezáltal azok a weboldalak, melyek kézzel készült rajzokat használnak, különbözni is tudnak, azaz megkülönböztethetővé válnak, ami a marketing egyik alaptétele. Ha eddig gondod volt azzal, hogy miként is válj megkülönböztethetővé, kiemelkedővé, miben térj el a konkurenciától, akkor ezt a megoldást kihasználhatod.

Hogyan használd a kézzel rajzolt elemeket a weboldaladon?

Ahogy a webdesign minden más eleménél, a kézzel készült rajzok alkalmazásánál is gondos tervezésre, stratégiára van szükség. Nyilván nem leterhelni akarod a látogatókat a weboldaladon a mindenféle értelmetlen, odavetett rajzokkal, telezsúfolva az oldalt, hanem javítani szeretnéd a felhasználói élményt. A rajzoknak ugyanazt a célt kell szolgálniuk, mint magának a weboldaladnak.

A kézzel rajzolt elemeket keverheted más vizuális elemekkel a weboldaladon, így jól megférnek fotókkal és videókkal, miközben felhívják a figyelmet a legfontosabb részekre. Ha például megnézed ezt a weboldalt, akkor azt látod, hogy itt-ott feltűnnek rajzok, melyek által nemcsak izgalmasabbá válik a weboldal, hanem segít a látogatóknak az értelmezésben is, kiemelve a fontos részeket.

Ha mélyebb, érzelmi szinten akarod megfogni a látogatókat a rajzolt illusztrációk révén, akkor a legjobb, ha viccesek és interaktívak lesznek a rajzolt elemek. Itt lehet szó akár egy interaktív játék elkészítéséről is, ami egészen egyedivé alakítja a weboldalon szerezhető élményt.

Ugyanakkor sok esetben a legjobb kézzel készült elemek, nem feltétlenül illusztrációk vagy képek. Megjelenhetnek a rajzok a tipográfiánál is, ahogy például a Google szokta egyes nevezetes napokon átalakítani a keresőjében a logóját. Egy ilyen megoldás mindjárt ad egy mélységet, mögöttes mondanivalót, többletértéket a márkának és persze a weboldal designjának.

Az olyan tipográfia, mely a természetes, valódi, emberi kézírást utánozza, szintén jó figyelemfelkeltő egy szabályos, tökéletességet imitáló digitális környezetben, miközben nem rontja egy weboldal eleganciáját, már ha nem élünk vissza a használatával.

A szkript fontokat lehet finoman is alkalmazni, mégis jellegüknél fogva figyelemfelkeltőek. Természetesen az olvashatóságot nem feltétlenül javítják, így emiatt érdemes azért visszafogottan alkalmazni őket.

A kézzel rajzolt elemek általában sokkal játékosabb hangulatot teremtenek a weboldalakon, mint a szabvány megoldások. Figyelj arra, hogy a weboldaladon a gyermeki ártatlanság, egyszerűség, barátságosság, közvetlenség érzését közvetítsék, melyet egyébként nagyon nehéz elérni más eszközökkel.

Az ilyen gyermeki esztétika az élénk színekkel, az esetlenségekkel, a túlzásokkal a kreativitást és a vidámságot fejezi ki, sokkal inkább, mint ha csak színekkel és betűtípusokkal próbálkoznál.

Ha pedig el is kezded animálni a kézzel rajzolt illusztrációkat, még több életet varázsolhatsz a weboldaladba. Arra persze figyelj, hogy a weboldal-animációk szabályainak megfelelően rajzolt elemek esetében se ess túlzásokba, mert a túl sok animáció nem csak lelassítja a weboldalt, hanem a felhasználói élményt is rontani fogja.

Összességében pedig elmondhatjuk, hogy habár nem minden weboldalhoz és céghez passzolnak a rajzolt elemek, azok, akik az emberi oldalukat, vagy a cég mögött lévő emberi vonást akarják megmutatni annak érdekében, hogy erősebb kapcsolatot alakítsanak ki a felhasználókkal, és megkülönböztethetők legyenek, jól ki tudják használni a rajzok hatását a digitális világban.

Amire figyelj

Élénk színek

Amikor a felhasználók valamit keresnek egy weboldalon, akkor átfutják azt. Ugyanakkor az erős vizuális jelzések felkeltik a figyelmüket. Ha ez megtörténik, akkor talán a szöveg is érdekelni kezdi őket. A fekete-fehér vagy a pasztell színek ugyan lehetnek művésziek, vagy jól mutathatnak otthonodban, de a weben nem ezekre számítanak az emberek. Ha körülnézel a weben, akkor az illusztrációknál általában élénk színekkel találkozol: élénk sárgával, zölddel, pirossal, kékkel és ezek kombinációival. Ezek azok a színek, melyek kiemelkednek a fekete, szürke, fehér szövegek és hátterek közül.

Kontraszt

Az még nem feltétlenül elegendő, hogy élénk színeket használsz. A kontraszt biztosítja azt, hogy egy kép tényleg kiemelkedjen egy weboldal tartalmából. Az illusztráció színeit úgy kell megválasztani, hogy erős kontrasztot alkosson a weboldal szövegével, hátterével és egyéb elemeivel.

Vizuális hierarchia

Az rendben van, hogy az illusztrációk magukra vonják a figyelmet, azonban fontos, hogy a weboldal más elemei ne törekedjenek ugyanerre, ugyanilyen mértékben, kivéve persze a CTA-t. Figyelj a vizuális hierarchiára és ne terheld túl a felhasználókat színekkel és formákkal a weboldalon!

Ne használj szöveget a képeken belül!

Sokan szeretnek beleírni a képekre, például egy blogbejegyzésnél egy címet. Azonban az ilyen szövegek sokszor megzavarják a kép által hordozott fő üzenet befogadását. Kivételt jelentenek az infografikák vagy a képeken megjelenő idézetek, melyeknél a kép azt a szöveget erősíti, ami rá lett helyezve. Ugyanakkor, ha a szöveg önmagában nem áll meg a saját lábán, nem fog működni képpel sem.

Képletes ábrázolás

Akadnak olyan témák, amelyeknél nem igazán hozhatók létre olyan képek, melyek segíthetnének az üzenet átadásában. Nem tudod a képek által közvetíteni a mondanivalód lényegét. Milyen illusztrációk használhatók ezeknél a szövegeknél? Olyanok, melyek egy kicsit elrugaszkodnak a téma eredeti jelentésétől és csak távolról utalnak rá. Tehát, amikor például linképítésről szól egy cikk, akkor nem egy lánc lesz a címlapi képed, hanem mondjuk egy egymás kezét fogó emberekből álló sor. Ezzel máris érdekesebbé teszi az illusztráció a szöveget, miközben utal is annak lényegére.

Hogyan válaszd ki az illusztrációid színeit?

Mint talán az előbbiekből is látható, az illusztrációk esetében fontosak a színek. De nem mindegy, hogy milyen színeket választasz. Mit vegyél figyelembe?

Az illusztráció kontextusa

A színek kiválasztásakor nem csak arra kell figyelni, hogy jól mutasson egy illusztráció, hanem arra is, hogy közvetítse az elvárt üzenetet. Fontos, hogy összhangban legyenek a színek a kiváltani kívánt érzésekkel.

Céges weboldalakon, ha már vannak meghatározott márkaszínek, akkor érdemes azokhoz ragaszkodni, hogy erősítsd a márkaüzenetet. Azt ugyanakkor látni kell, hogy ettől egy kicsit egyhangúak lehetnek az illusztrációk, és adott esetben nagyon beolvadhatnak a többi elem közé, elveszítik figyelemfelhívó funkciójukat. Érdemes lehet tehát egy kicsit elrugaszkodni a céges színektől, esetleg új színekkel próbálkozni.

Kevés színnel indíts!

Mindenesetre érdemes mindig csak 3-4 színt használni, és a későbbiekben bővíteni a palettát, ha szükséges. Ezáltal könnyebben meglátod a színek közötti kapcsolatokat, gyorsabban meg tudod mondani, hogy egy adott szín működik-e. Ha pedig nem, akkor tudni fogod, hogy melyiket kell lecserélni.

Ezután továbbléphetsz abba az irányba, hogy újabb színeket jelenítesz meg: 8-10 színnel érdemes próbálkozni, esetleg szokatlan, merész színkombinációkat próbálgatsz. Arra viszont figyelj, hogy minél több színt használsz, annál nehezebb lesz elérni a színharmóniát.

Ne feledkezz meg a kontrasztról!

Ha már megvannak a színek, akkor azt is meg kell vizsgálnod, hogy a kontraszt is megfelelő-e. Enélkül ugyanis nem tudod vezetni az emberek tekintetét. Érdemes lehet szürkeskálás megjelenésre váltani, és megnézni, hogy még mindig értelmezhető-e az illusztráció. Ha kell, akkor egyes színeket sötétebbre, erősebbre, másokat világosabbra kell venni, esetleg egyszerűsíteni kell a színpalettán.