vizuális kommunikációs eszközök a webdesignban

Vizuális kommunikáció egy webdesigner szemszögéből

A képeket máshogy dolgozza fel az agyunk, mint a beszédet. Egyrészt sokkal gyorsabban érzékeljük, amit látunk, másrészt egy kép rengeteg érzelmet képes közvetíteni. A honlapokon a szövegek és a képek keverednek, a tervezéskor pedig arra törekszünk, hogy a lehető leghatékonyabban kommunikáljunk, gyorsan, ugyanakkor kifejező módon tudjuk átadni az információkat és a márkaüzeneteket. Három eszköz is van a webdesigner kezében, ha tudatosan szeretné irányítani a vizuális kommunikációt a weboldalakon.

A stílus, mint kifejező eszköz

Ha máshol nem is, a rajzórákon biztosan mindenki találkozik a művészeti stílusok fogalmával. Az aktuális divatirányzatok pedig a digitális csatornákon pillanatokon belül eljutnak a Föld legeldugottabb zugába is. Tehát a stílus fogalmával mindenki találkozik, mégsem olyan egyszerű definiálni, mit is jelent. A stílus utalhat egy történelmi korszakra, egy művészeti irányzatra, kifejezheti egy társadalmi osztály életérzését, számtalan mögöttes asszociációt hordozhat. A stílus kategóriákat azonban az ember alkotta, nincsenek merev határok. Ráadásul az új eszmékkel a társadalmi és technológiai változásokkal mindig új stílusirányzatok is megjelennek. A stílusok felismerése mindenképpen műveltséghez, kultúrához köthető.

Vintage stílusú hátterek, fontok, grafikai elemek

Vintage stílusú hátterek, fontok, grafikai elemek

Forrás: Megvásárolható vintage csomag a MightyDeals.com -on

A weboldalak esetében a leggyakrabban használt modern webdesign stílus nem véletlenül ilyen népszerű. A modern stílussal ugyanis a korszerű eszközökre, a naprakész szaktudásra, a modern gondolkodásra, átgondoltságra és igényességre utalunk. Minden modern vonalvezetésű tárgy vagy design indirekt módon a tudomány és a technika világát idézi. A tudományos módszerek, a technológiai eredmények, a racionális gondolkodás a modern stílusjegyekben jut kifejezésre.

Érdekes, hogy a stílusban rejlő üzeneteket azok is értelmezni tudják, akik nem ismerik pontosan a stílus eredetét. Olvass utána, milyen kulturális gyökerei vannak a steampunk stílusnak és mennyiben rokon a grunge webdesign stílussal.

A stílust egy weboldal esetében is gyorsan felmérjük, és fontos szerepe van az első benyomás kialakításában is. Az első benyomás hatalma nem pusztán hiedelem, hanem szociológiai kutatásokkal alátámasztott tény. Mindez a digitális világra is kiterjeszthető. Jelenleg az első találkozás az ügyfél és a a cég között legtöbbször az interneten keresztül történik. A honlap nem csak virtuális kirakat, hanem bolt, iroda és ügyfélszolgálat is egyben. Egy modernebb, szebb, trendibb honlap mögé nagyobb szakértelemmel rendelkező céget képzelünk.

Válassz tudatosan webdesign stílust

Az egyik fontos webdesigner eszköz a megfelelő üzenet célba juttatására a tudatos stílus választás. A témakör, a márka, és a célközönség ismeretében már megalapozott döntést lehet hozni a használni kívánt stílusokról. A stílus utalhat a témakörre, leszűrheti a különböző korosztályokat, igényességet, nőies, vagy férfias attitűdöt, érzelmes vagy tudatos hozzáállást fejezhet ki.

A cégek nagy része nem mer kockáztatni, és a modern webdesign stílust részesíti előnyben. A stílus mögöttes asszociációi, kulturális tartalma, töltete ugyanis a márkához fog kapcsolódni valamilyen formában. Egy webdesigner azonban számtalan módon valósíthatja meg a modern stílusról alkotott elképzeléseket. Üzenetet hordozhat, hogy grafikus vagy fotó alapú illusztrációkat választunk, harsány, vagy visszafogott színekkel dolgozunk, hogy kiszámítható, rács-szerkezetet vagy szabálytalanabb layoutokat alakítunk ki.

Hat alapvető webdesign stílus

Vizuális kommunikáció a webdesignban - stílusok alkalmazása

Stílusban tartott webdesign elemek

A tapasztalatlan designerek egyik első számú szabálya, hogy ha az alkotórészeket egyetlen stílus elemeiből választjuk, akkor harmonikus lesz az összhatás. Ugyanezt az elvet a webdoldalakra is alkalmazhatod. Ha a modern webdesign stílusra szavazol, akkor nem fogsz cirádás fontokat használni a címekhez, nem fogsz virágos háttereket alkalmazni, a fotókat pedig véletlenül sem antikolod.

Vintage és modern stílusú lakberendezési weboldal tervek

Vintage és modern stílusú lakberendezési weboldal tervek

Forrás: Kovács Renáta Startvonal Webdesigner tanfolyam hallgatói munkák

A stílusban tartáshoz egyrészt ismerni kell a stílusjegyek jellemzőit, másrészt elemekre kell bontani az oldalt, hogy minden egyes képelemet az adott stílusból választhass. A Webdesign stílusok alkotóelemei blogbejegyzésben villámgyorsan megismerkedhetsz a retro, a vintage, a modern és a grunge stílus elemeivel. Amikor ránézel egy weboldalra, egyáltalán nem biztos, hogy automatikusan képelemekre tudod bontani. Eleinte egy szép fejlécet látsz és nem leltározod, hogy a logó mögött van egy háttérkép, a menüpontok egy gomb-szerű grafikával vannak megvalósítva, az alkalmazott font pedig kézírásos vagy talpas. A webdesignerek viszont első pillantásra felmérik, hogy egy weboldal milyen alkotóelemekből áll.

Sok esetben azonban éppen a bátor stílus törések különböztetik meg a kezdőt a gyakorlott designertől. Ma ugyanis kicsit talán már unalmasnak is számít, ha vegytisztán adagoljuk a különböző stíluselemeket.

A figyelem irányítása

A weboldalakon óriási harc folyik a figyelemért. A felhasználó nem elmélyülten olvas, hanem felszínes figyelemmel böngészi az oldalt. A másodperc töredéke alatt vált az informálódó, koncentráltabb állapotból a teljesen szórt, szórakozó üzemmódba. A stílusjegyekkel kedvező benyomást alakíthatunk ki, de az információ átadásában még fontosabb szerepet játszik, mennyire tudjuk vizuális eszközökkel megragadni, vezetni és irányítani a figyelmet.

A grafikai tervezés szabályai egy honlapnál is alkalmazhatóak

Vizuális kommunikáció második eszköze - a grafikai tervezés szabályai egy honlapnál is alkalmazhatóak

A grafikai tervezési elvek segítségével vizuális hierarchiát tudsz az oldalon belül kialakítani. A legnagyobb méretű elemek, és a képek mágnesként vonzzák a tekintetet. Így a weboldal címsorainak, és képanyagának méretkülönbségeivel egyfajta sorrendet javasolhatsz a felhasználónak.

Az egymáshoz közelebb lévő szövegeket logikailag összetartozónak ítéljük, így a különböző méretű üres helyek alkalmazásával egyfajta mintázatot alakíthatunk ki az oldalon. A tagolással és az elemek egymáshoz viszonyított elrendezésével jól elkülönülő tartalomblokkok keletkeznek.

A környezettől elütő színkontrasztokkal, érzelmeket hordozó képekkel lépésenként lehet vezetni a felhasználót. A vizuális hangsúlyok felkeltik az érdeklődést és fókuszálják a figyelmet.

Képek és illusztrációk a weboldalon

A harmadik vizuális kommunikációs eszköz az illusztrációk és a képanyag megfelelő kiválasztása, amely sokkal komolyabb feladat, mint amilyennek első hallásra tűnik.

A modern és a minimalista webdesign stílusok sokszor tudatosan "semleges" hatást keltenek, mintegy foglalatba helyezik a tartalmat. Ilyenkor a szép tipográfia, a jól tagolt tartalom kiemeli a szöveget, a hangsúlyos, professzionális fotóanyag pedig külön életre kel. Ez azt jelenti, hogy már a honlapon is óriási hangsúlyt kapnak a képek. A többi online marketing felületen pedig kritikus fontosságú lesz a képanyag, hiszen mérhetően többen kattintanak a színes, érdekes, izgalmas, furcsa, érzelmes képekkel illusztrált posztokra, mint a csak szövegesekre.

Sajátos képi világ a valóság és a képzelet határán

WEBARTERY vizuális kommunikáció Photoshopban

Forrás: Pegazus - haladó Photoshop tanfolyam

Mit ábrázol a kép?

Egy képnek mindig legalább három jelentés-rétege van. Vannak rajta konkrét, felismerhető tárgyak, arcok, objektumok, azaz a képnek van egy "dokumentarista" tartalma, jelentése. Mondjuk látok a képen egy fát, ami a felhős, borult ég előtt áll a szélben. Bár a szelet nem látom a maga valójában, de olyan jeleket tudok beazonosítani a képen, ami arra utal, hogy fúj a szél. Egy hírportálon általában emiatt a dokumentarista jelentés miatt szerepel egy kép. Látjuk, ahogy a színésznő átveszi a díjat, a politikus kezet ráz, a pedagógusok tüntetnek.

Érzelmek, asszociációk

A képekben az a legizgalmasabb, hogy érzelmi tartalmat is tudnak közvetíteni. Nehéz megragadni, hogyan lehet akár egy csokoládé torta fotójába a boldog családi élet illúzióját belesűríteni. De a nagy fotóművészeket pontosan ezért csodáljuk. Nem azért, mert tűéles képet készítenek, vagy mert ráközelítenek a bodobács csápjaira. Hanem mert képesek bonyolult érzelmeket, mögöttes gondolatokat közvetíteni. A képeket egy másodlagos jelentések sokaságából álló asszociációs felhő kíséri. Ha ránézek egy fára, eszembe jut az árokparti diófa, amire annyiszor felmásztam. A botanikus kert 120 éves tölgyfája, a pácolt fa ajtó felületének érintése, a fenyő illata, egy kiránduláson az erdő hangja, a kandallóban égő fahasábok, vagy a mesebeli égig érő fa.

Divat

Sajátos képi világ a valóság és a képzelet határán

WEBARTERY vizuális kommunikáció Photoshopban

Forrás: Pegazus - haladó Photoshop tanfolyam

A mozi, a televízió és az internet megjelenése óta járványként tud egy vizuális geg, vagy stílus elterjedni. Mindenkinek beégett, ahogy Marilyn Monroe félig lehunyt pillái alól felnéz. De a hipster stílust, vagy a felülnézeti vektorgrafikákat is megszoktuk már. Kérdés, hogy mi marad fenn hosszú távon stílusként, és mi az egyszer használatos divathullám. A webdesignereknek éppen ezért tájékozottnak lenni. Ismerni kell az aktuális vizuális trendeket, legyen szó a színátmenetekről, a duetone hatásról vagy éppen a drónfelvételekről.

Szépség, harmónia, esztétikum

Egy képnek van esztétikai tartalma is. A színeket harmonikusnak, vagy disszonánsnak érezhetem. A kompozíció lehet szimmetrikus, vagy éppen széteső. Meg tudom állapítani, hogy a képen látható arc, épület, vagy éppen absztrakt vízfesték foltok rendszere "szép" vagy sem. Egy fotó esetében az izgalmas fények, vagy a szokatlan perspektíva hozzáadhat az esztétikai élményhez. Egy festménynél a részletek kidolgozottsága, vagy éppen elkenése, azaz az absztrakció foka is kiegészítheti az esztétikumot. Itt már óriási szerepet kap az egyéni ízlés, annak ellenére, hogy vannak egyetemes, sokakra érvényes szabályok. A szimmetria, vagy az aranymetszés szabályinak alkalmazása sokak számára "szép". A weboldalakon, a hirdetésekben, a címoldali diavetítések esetében nagyon fontos az esztétikum is.

Szimbólumok és kulturális környezet

Az asszociációk sokszor szimbólumokkal telítettek, és sokat merítenek az adott kultúrából, ahol a képet szemlélő él. Az életfa, vagy a fából ácsolt kereszt már mind kultúra függő szimbólumok. Az előbbi borús égbolt előtt hajladozó fa egy festmény. A festő életútját ismerve egy szenvedő, depressziós, magányos ember szimbolikus rajza, tulajdonképpen egy önarckép. De ezt a kulturális tartalmat a képet eredeti környezetéből kiragadva mondjuk Dél-Amerikában csak nagyon kevesen fogják belelátni. Talán csak a kép szomorúságát érzékelik.


Vizuális kommunikáció felsőfokon

Nem mindegy, milyen szinten használod a vizuális kommunikáció eszköztárát. A Hogyan fejleszd az ízlésed? blogbejegyzésben megismerhetsz egy olyan egy 4 lépcsős módszert, amely folyamatosan ismételhető és garantáltan fejleszti a kifejező készséged.

Legyen mondanivalód

Ha nincs mondanivalód, akkor a vizuális kommunikációd üres stílus elemek pufogtatásává válik, élettelen, modoros, és öncélú lesz. Vizuálisan is lehet ugyanis fecsegni.

Ne legyél szépség fetisiszta

Ha túlságosan tiszteled a szépséget, akkor Photoshop rabszolga leszel, és nem lesznek hitelesek a képeid. Meg lehet tanulni, hogy a dokumentarista jelentés, az érzelmi töltet és az esztétikum ugyanakkora súllyal legyen jelen a képeken.

Ne hazudj

A célközönség nyelvén kell beszélni, de ez nem jelenti azt, hogy azt kell mondanod, amit hallani szeretnének. Vizuálisan is kerülni kell a nyilvánvaló hazugságot és a csúsztatást. Rövid távon lehet vele előnyökhöz jutni, de hosszú távon nem kifizetődő.

Használd a célközönség vizuális nyelvét

Más színekre fognak ugrani a tinik, mint a középkorúak. Mást lát viccesnek egy férfi, mint egy nő. Van, aki felismeri Egon Schiele képét, míg más csak egy fát lát. A célközönségre az is jellemző lehet, hogy mekkora érzelmi tartalmat szeretnek látni és befogadni. A cuki kiscicás illusztrációk nem mindenkinek fognak bejönni, az ezoterikus képi világot, vagy a vallási szimbólumok is megosztóak lehetnek. A sikeres vizuális kommunikációhoz ismerni kell a célközönség vizuális nyelvét.

Fogalmazz árnyaltan

A képi világnak is meg vannak a maga "káromkodásai", és közhelyei. Ezek azonban beazonosíthatóak és elkerülhetőek. Egy kis gyakorlással, és a pozitív példák elemzésével bárki megtanulhat vizuálisan pontosan és árnyaltan fogalmazni. Itt volna az ideje, hiszen az internet korában ez lett az egyetemes világnyelv.

Share this post

Leave a comment

(If you're a human, don't change the following field)
Keresztnév.
(If you're a human, don't change the following field)
Keresztnév.
(If you're a human, don't change the following field)
Keresztnév.

Filtered HTML

  • A webcímek és email címek automatikusan kattintható hivatkozásokká alakulnak.
  • Engedélyezett HTML jelölők: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.

Plain text

  • A HTML jelölők használata nem megengedett.
  • A webcímek és email címek automatikusan kattintható hivatkozásokká alakulnak.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
CAPTCHA
Bizonyítsd be, hogy nem vagy robot!
2 + 5 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.