Digitális színek – színek jelentése és használata a weben

02
  1. Tananyag
  2. Webdesign Előkészítő
  3. Digitális színek - színek jelentése és használata a weben
Vallj színt! - rivallják. - Szivárvány... - suttogom.
Fodor Ákos

költő

Sokan élnek abban a tévhitben, hogy a design minden esetben ízlés és érzék kérdése. Ugyanaz a vizuális világ, amelyért a fél világ rajong, mások számára értéktelen vagy egyenesen visszataszító lehet. Ennek ellenére egy designer mégsem hagyatkozhat pusztán a stílusérzékére és az ízlésére a munkája során. Vannak olyan elvek és szempontok, amelyeket már a színek kiválasztásakor figyelembe lehet venni. A tudatos tervezés nem zárja ki a kreativitást és az egyéniséget, azonban olyan kapaszkodót jelent, ami felgyorsítja a tervezési folyamatot és egyértelműbbé teszi a vizuális kommunikáció üzenetét.

Szöveges tananyag

Hogyan válassz egyetlen színt az alkotásodhoz?

Mindenkinek megvannak a maga kedvencei, a szeretett és utált színei. Biztos vagyok benne, hogy a te fejedben is vannak olyan színkombinációk, amikhez szívesen nyúlsz különböző helyzetekben. Azonban ez még nem ad elég iránymutatást abban az esetben, amikor konkrét célra tervezel. Az alábbi szempontokat mindenképpen figyelembe kell venned a döntés előtt.

A színek élettani hatásai

Laboratóriumi körülmények között igazolható, hogy a különböző színes fényekkel megvilágított emberek mérhető biológiai reakciókat mutatnak. Hatással voltak a színek a vérnyomásra, a bőrelektromosságra, a teljes idegrendszerre és anyagcserére is. A valós életben azonban soha nem vagyunk kitéve egyetlen szín ilyen erőteljes hatásának. Kisebb felületen, több színt érzékelünk egyszerre, általában mozgás közben, ráadásul ezer más a vérnyomásunkra és az idegrendszerünkre ható inger ér a színek mellett. Részleteket itt olvashatsz a színek élettani hatásairól.

Lehet, hogy egy étterem belsőépítészeti megoldásainál felhasználhatóak ezek a kutatási eredmények, de a weboldalak esetében el lehet felejteni őket. A színek által keltett érzelmi hatások szempontjából sokkal fontosabbak azok a láthatatlan jelentéstartalmak, amelyeket kultúrától függően társítunk a színekhez.

A színek jelentése – asszociációk

A színekhez köthető, mélyebb asszociációk mögött első körben a színhez kapcsolódó természeti jelenségek állnak. A természet zöldjei, az ég kékje, a tenger kékje, a virágok és a gyümölcsök élénk, harapnivaló színei, a talaj feketéje. Ezekkel sokszor összefüggésbe hozhatóak a színekhez kapcsolódó társadalmi jelentések is. Mint például a veszélyt jelző piros lámpa esetében. Valószínűleg a vér vöröse miatt alakult ki a feltűnően erős és gyors reakciónk erre a színre, és ezt használták ki a közlekedési szabályok alkotói. Néha a társadalmi jelentés nem vezethető vissza természeti jelenségekre, inkább kulturális hagyomány, milyen szokások kötődnek az egyes színekhez. Nálunk fehér a menyasszony és fekete a gyász színe. A babák nemét a halvány kék és a rózsaszín jelzi. Az irigység sárga legalábbis szóban, de vizuálisan nem igazán kapcsoljuk össze a két fogalmat.

Az egyes kultúrákban óriási különbségek lehetnek a színek kapcsolt jelentése között, de erről csak akkor kell részletesen hallanod, ha az európai illetve amerikai kultúrkörön kívülre tervezel.

A színek érzelmi hatása ezekből a rétegekből építkezik, és nagy egyéni eltéréseket mutathat. A nemek szerint is megoszlanak a színpreferenciák. A férfiak nem szívesen választanak lila, és rózsaszín ruhadarabokat, vagy használati tárgyakat. Az alábbiakban a saját színekkel kapcsolatos asszociációimat gyűjtöttem össze. Bátran folytassátok a sort és egészítsétek ki a saját gondolataitokkal.

FEHÉR

ártatlanság, hattyú, patyolat, menyasszony, tiszta papír, érintetlen, lepedő, fehérnemű, felhők, vattacukor, hó, felvert tojásfehérje, mozivászon

VÖRÖS

tűz, vér, veszély, szenvedély, pokol, piros lámpa, figyelmeztetés, a bika előtt lengetett kendő, szerelem, úttörő nyakkendő, vörös csillag, vörös rózsa, akció, kaland, izgalom

SÁRGA

Tavaszi virágok, pitypang, lendület, kiskacsa, nap, napfény, skandináv színek, a darázs csíkjai, feltűnés, kukorica, meleg, kikevert tojás sárgája, az a bizonyos sárga rózsa, játékosság, vidámság

KÉK

ég, tenger, folyók, kék szemek, a skandináv kék, kékfestő, acélkék, királykék ruhák, iskola köpeny, kisdobos nyakkendő, matróz csíkos, jég

ZÖLD

természet, növények, fák, natúr, bio, természetes, anyaföld, rügyek, élet, élő bolygó, árnyék, kirándulás, hegyek, egészségügy, gyógyítás, harmónia

RÓZSASZÍN

baba, ártatlanság, naivitás, butaság, bugyutaság, szőke nő, elegancia, gyengédség, lágyság, édesség, fiatalság

PINK, vagy BÍBOR

lendület, fiatalság, sport, dinamizmus, divat, mozgás

FEKETE

elegancia, luxus, kreatív szakmák, művészet, színpad, mozivászon, sportautók, öltöny, szmoking, tekintély, fegyverek, anyaföld, csokornyakkendő, lakkcipő, a kis fekete, fekete macska, boszorkány, kéményseprő, ördög, gyász, halál, drága

SZÜRKE

hivatal, középszerű, elegáns, beton, észrevétlen, galamb, egér, úttest, város, visszafogott

Kinek készül?

Nem biztos, hogy egy ipari automatizálással foglalkozó cég logója jól fog mutatni a kedvenc liláiddal. Vagy, hogy a gyerek örülni fog egy földszínekből összeállított pulóvernek. A munkád ugyanis valaki másnak készül.

Ha egy konkrét személynek készítesz valamit, viszonylag könnyű dolgod van. Meg kell tudnod, milyen színeket szeret, milyen környezetben él, milyen színekkel veszi körül magát, hogyan öltözik? Ha azonban egy terméket szeretnél eladni, vagy arculatot tervezel, már sokkal nehezebb dolgod van. Ugyanis a munkádnak egy elképzelt csoporthoz kell majd szólnia, akikről nincsenek pontos információid. Márpedig annál sikeresebb leszel, minél pontosabban magad elé tudod képzelni azt a célcsoportot, akik majd ismerni, használni, vásárolni fogják az alkotásodat. Minél plasztikusabban elképzeled, minél több részletkérdést tisztázol, annál pontosabban fogod tudni megjósolni a termékhez fűződő viszonyát.

Az egyik tipikus szempont, hogy férfiakra vagy nőkre szeretnél hatást gyakorolni. Mérhető különbség van ugyanis a férfiak és a nők szín-preferenciái között. Más és más vizuális ingerekre, szimbólumokra reagálnak. Az alábbi hangulattáblák két hasonló karakterű kávézó honlapjához készültek, csak éppen az egyik nőket, a másik férfiakat céloz meg.

Régen is létezett a pixeles ábrázolás

A különböző korosztályok is lényegesen eltérő vizuális nyelvet beszélnek, ezért máshogy kell megszólítanod a tiniket, a fiatalokat, vagy éppen a magabiztos negyveneseket. Kisiskolás koromban annál csúnyább színt el sem tudtam képzelni, mint amire nagyapám szívből felsóhajtva mondta: ” de szép barna garbó…” Minél fiatalabb valaki, annál élénkebb, vidámabb színek fogják elnyerni a tetszését. A kamaszoknál viszont égő a rózsaszín és a szórt minta. Ez a feliratos, szürke, tépett és szakadt cuccok időszaka. Aztán érdekes módon a harmincas években nem lehet egy nő ruhája elég piros, negyvenesen meg a sportruhák élénk színei tartanak fiatalon. És ott van minden korosztály számára az örök, a titokzatos fekete, csak éppen minden korban más jelentéssel bír. Az alábbi két hangulattábla nőknek szóló kozmetikum márkákhoz készült. Azonban az első a tiniket, míg a második a negyvenes nőket célozza meg.

1. VIDEÓ – Hogyan használhatod fel egy fotó színeit?

Ez a videó megmutatja, hogyan tudod egy szép fotó színeit inspirációként  következő munkádban felhasználni. Akár ingyenes képszerkesztő eszközökkel is ki tudod nyerni a színek színkódját.

felbontás a pixeles digitális képeken

Számíthat az iskolázottság, hogy faluban, vagy városban lakik-e az illető, és még számtalan egyéni, kívülről láthatatlan tényező. Egy kisvállalkozásnak általában nincs lehetősége megfizetni az ilyen jellegű kutatásokat, azonban a hasonló célközönségre utazó nagy márkák vizuális kommunikációját érdemes tanulmányozni. Milyen színekbe öltözteti a Lancome az ötvenes nőknek szánt arckrémeit? Milyen színvilágot használnak a nagy telekommunikációs cégek a kampányaikban? Az ehhez hasonló kérdések és elemzések irány mutatóak lehetnek.

Színek használata a marketingben

Azonban érdemes szkeptikusan kezelni a nagy márkákhoz kapcsolódó színeket. Az alábbi ábrán a legnépszerűbb világ márkák logóit rendezték el a használt színek szerint. Az egyes színekhez olyan értékeket, érzelmeket kapcsoltak, amelyek az adott márka szempontjából fontosak lehetnek. Már azon is lehet vitatkozni, hogy mindenki érzi-e a színek mögött ezeket a jelentéseket. Például nekem a szürkéhez egyáltalán nem társítható az egyensúly. A kiszámíthatóság már igen. Még fontosabb azonban, hogy nincs egyértelmű összerendelés egy érzelem és egy szín között. Nem csak egyetlen színnel lehet dinamikus és fiatalos, vagy éppen, megfontolt és bölcs hatást elérni. Nincs egyértelmű képlet a színek marketing használatára.

Színek érzelmi tartalmi

nagy felbontású digitális kép

A fenti, sokat hivatkozott, nagy népszerűségnek örvendő ábrát éppen ezért nem tartom igazán szakszerűnek. Ezeknek az óriási márkáknak ugyanis meg van a maguk világot és tömegek viselkedését és hozzáállását megváltoztató erejük. Sok ismétlés segítségével új színasszociációkat is ki lehet alakítani. A T-mobile például megreformálta a pinkhez fűződő viszonyunkat. Előtte ez inkább Barbie ostoba kis világához kapcsolódott. Utána viszont a fiatalos lendület, a dinamizmus és a sport szinonimája lett. Kis vállalkozásoknak nincs esélyük ilyen utólagos kapcsolatok kialakítására, hiszen ehhez óriási reklám büdzsék tartoznak. Az azonban tagadhatatlan, hogy a színek magukba szívták a nagy márkák által rájuk aggatott értékeket, érzelmeket és asszociációkat is.

Az egyes témakörökhöz kapcsolt színvilág

Amikor marketing célokra szeretnéd használni a színeket, akkor inkább a már meglévő asszociációkra, mélyebb jelentés tartalomra építs. Az iparágaknak meg vannak a maguk közhelyei, standardjai, amelyeket lehet tudatosan használni, vagy éppen elutasítani. Az ipari területen a gyárakban használt kék-sárga, fekete sárga, az építőiparban a piros és a sárga (talán a sisakok miatt).

Ipari témakör: automatizálás, gépészet, szállítás, építőipar, mérnöki tervezés, stb.

piros színt használó weboldalak

A natúr, bio, öko piacon a zöld és a barna uralkodik, az élénk kék, a ciklámen és a lime zöld betört a sportba és évek óta biztosan tartja a helyét.

Természet: öko, bio, natúr szolgáltatások és termékek

zöld színt használó weboldalak

A „kis fekete” meg akkor kerül elő, amikor az eleganciának vagy a profizmusnak elsődlegesnek és elsöprőnek kell lenni.

fekete weboldalak awwwards díjazott

Nem mindegy, mire használod majd a színeket

Amikor tervezel, nem csak a területet kell figyelembe venned, hanem azt is, mire fogják használni az adott dolgot. Lehet, hogy egy irodai széken ellenállhatatlannak érezzük a lime zöldet, a kocsinkon már magyarázkodnunk kellene a szín miatt, a házunk falán pedig egyenesen közügy lenne és panaszt tennének a szomszédok.

Fontos, milyen környezetben fog életre kelni a munkád. Más elveket kell alkalmaznod, ha tudod, hogy egy szupermarket polcán kell megkülönböztethetőnek lennie a csomagolásodnak. Hiszen ott a többi hasonló termék között kell kitűnni. Viszont a saját kézműves standodon a te elképzeléseid szerint rendezheted el az ékszereket.

Szín trendek

Bármi is a véleményed a divatról, nem hagyhatod figyelmen kívül az uralkodó trendeket. Az emberek nagy részére ugyanis komoly hatást gyakorolnak a divat magazinok és kirakatok. Lehet, hogy butaság megválasztani az év színét, ahogy a Pantone Institute teszi, azonban az adott szín gyorsan bekerül a köztudatba, és sokan felismerik, keresni kezdik. Ha nem magadnak alkotsz, akkor nem csak az alkotói technikákat kell ismerned, hanem az embereket is, márpedig az emberekre hatással van a divat. Nézd meg az Pantone intézet Év színeinek történetét a blogban.

Digitális képek mérete az Adobe szoftverek szerint

Inspiráció – mit gondolnak mások?

Ha a fenti szempontok alapján még sincs elképzelésed, akkor nem rossz módszer, ha megnézed, mások merre indultak el az adott területen. Inspirációs forrást jelenthet egy textil minta vagy egy természetfotó is, de a képmegosztó oldalakon célirányosan is rákereshetsz egy témakörre, vagy termékre.

sárga színt használó márkák és arculattervek

Van egy érdekes link-gyűjteményünk a blog-on, amiben sárga színre épülő weboldalakat kerestünk, és megpróbáltuk megindokolni a színválasztást. Néha sikerült, néha nem.

2. VIDEÓ – Hogyan válassz arculati színeket?

Ebben a videóban egy borbolttal is rendelkező képzeletbeli kávézó példáján keresztül nézheted meg, hogyan válassz színeket a gyakorlatban egy adott márkához.

Színek használata a webdesignban

A webalkalmazások esetében elsősorban a kulturális jelentésre, illetve a színek asszociációs „felhőjére” kell összpontosítanod a fentiekből. Mivel a honlap az online marketing stratégia zászlós hajója, természetesen a célközönség vizuális kommunikációs nyelvét is figyelembe kell venni.

1

De talán még ennél is fontosabb milyen célra fogják használni a weboldalt. Nem mindegy a színek szempontjából, hogy belső használatra szánják-e a tartalmakat, a külvilágnak szóló promóciós oldalról, esetleg hírportálról van szó. Ezek már komoly korlátokat jelentenek. Egy hírportál akkor sem lehet lila, ha kortárs művészeti tartalomat szolgáltat, egész egyszerűen azért, mert sokkal nehezebb a sötét hátteres oldalakat olvasni. Egy belső használatra szánt rendszernél pedig a praktikum lehet a fő szempont, a kényelmes, erőfeszítésmentes használat kerül előtérbe a marketinggel szemben.

2

Webdesign esetén nagyon sokat számít a felhasznált színek esztétikai hatása is. A színeknek önmagukban, minden belső jelentéstől függetlenül is „szépnek” kell lenniük. Ritkán dolgozunk egy színnel, a legtöbbször palettákban gondolkodunk. Éppen ezért egyértelműbb a megfogalmazás, ha nem szép színekről, hanem harmonikus palettákról beszélünk. Bár a szépség szubjektív fogalom, ha a teljes weboldal ugyanannak a harmonikus palettának a leszűkített színeiből dolgozik, több embernek fog tetszeni. Vannak olyan területek is, ahol akár a diszharmonikus paletta alkalmazása is indokolt lehet (például a kreatív ügynökségek akár ugly stílusú weboldalt is elbírnak).

3

A harmadik dolog, amiben máshogy kell használnunk a weboldalakon a színeket, mint az arculatépítésnél általában, az a figyelem irányítása. A telített színek hatása erősebb, és óriási a szerepe a színkontrasztoknak is. Egy semleges színű háttérből szinte kiugrik a piros a narancs vagy a pink. Gyakori, hogy az alapvetően fekete vagy fehér weboldalakon egyetlen élénk vezető színnel jelölik ki a vizuális hangsúlyokat. A linkek, a gombok, a menü vagy éppen az ikonok mind ezzel a vezető színnel vannak jelölve.

4

Szeretném felhívni a figyelmeteket még egy érdekes problémára, amivel foglalkozni kell, amikor a weboldal színeit tervezed. A honlapot vizuálisan ugyanis sokszor nem is a webdesign színei határozzák meg, hanem a felhasznált képanyag színei. Az arculatnak az is része lehet, hogy csak olyan fotókat használtok fel a weboldalon, amelyek a webdesign és az arculat színeihez illeszkednek. Az eredeti palettánál esetleg bővebbek, több színt tartalmaznak, de harmonikus egészet alkotnak a webdesignnal együtt.

Nem könnyű megmondani, mikor melyik szempontot érvényesítsük a másik rovására. Amikor egy logót, vagy arculatot tervezel, az alábbi szempontokat mindenesetre érdemes megfontolni. Én a konkurenciakutatás részeként színesben ki is nyomtatom a konkurens weboldalak logóját és a weboldaluk címlapját. Részletes leírást találsz a színválasztás szempontjairól a Felképeljük blogon.

  1. Az oldal típusa (hírportál, promóciós, kisvállalati, stb),
  2. színek asszociációs köre, kulturális jelentése,
  3. az iparági színei, a témához kapcsolódó konvenciók,
  4. a célközönség vizuális kommunikációjának jellemzői,
  5. a konkurencia színei,
  6. megrendelő speciális igényei,
  7. harmónia a teljes palettára.

3. VIDEÓ – Profi képkeresés konkrét színek alapján

Ebből a videóból megtudod, hogyan tudsz a Google segítségével jogtiszta, nagy felbontású és a megfelelő színárnyalatú képeket keresni.

Mindig csak a sárga úton – a figyelem irányítása színek segítségével

Már volt arról szó, hogyan kell grafikai eszközökkel irányítani a felhasználók figyelmét. Most nézzük meg, milyen szerepet játszanak ebben a színek. A figyelmet legjobban a teljesen telített, tiszta színek ragadják meg. Azonban ha sok telített színt használsz egy munkában, könnyen papagájosan rikító vagy éppen gyerekes hatást érhetsz el. A legjobb, ha semleges, naturális színek közül ragyogtatod ki valamelyik kedvencedet.

A figyelemfelkeltés szempontjából, illetve azonosíthatóság szempontjából más és más a színek sorrendje.

Responsive képkezelés -  adaptív képek

VIDEÓK

FELADATOK

  1. Milyen témákhoz tudnál elképzelni egy fekete-fehér weboldalt?
  2. Keress sárga alapszínnel dolgozó website-okat. Elemezd az első 10 találatodat. Vajon miért választották éppen ezt a színt az alkotói, Mi a téma, az iparág, és ki lehet a célközönség? Harmonikusnak találod az összhatást?
  3. Végezd el ugyanezt a feladatot piros weboldalakon is.
  4. Készíts konkurencia kutatást. Milyen natúr szappanos oldalakat találsz? Próbáld meg a három kedvenced weboldala alapján a három felhasznált palettát beazonosítani. Figyeld meg, hogy mely elemek tartoznak a webdesignhoz, és melyek a képanyag színei? Hogyan viszonyulnak a képek színei a webdesign színeihez?
  5. Keress olyan motivációs posztert, vagy plakátot, amely a színek figyelemirányító hatását használja ki. Miért azt a színt választották szerinted?
  6. Van-e olyan kedvenc fotód, aminek a színei fogtak meg leginkább?
  7. Vannak-e kedvenc vagy utált színeid? Alkotóként foglalkoztat-e egy színösszeállítás?
  8. Egészítsd ki az alábbi retro palettát a piros valamelyik árnyalatával, ha tudod, hogy
    a) egy régi motorbiciklik adás-vételével foglalkozó webshop

    b) egy vintage ékszerekkel kereskedő aukciósház weboldalához

    készül a paletta.

LETÖLTENDŐ

Töltsd le a dekoratív állatfigurákat, és nyomtasd ki inspirációként a posztereket. Jó szolgálatot tesz a színek mögött meghúzódó jelentéstartalmak összefoglalása, ha tudatosan szeretnél tervezni. A teljes változat 2,72 Mb és három 2488 x 3545 méretű nagy felbontású posztert tartalmaz.

színpszichológia poszterek

KAPCSOLÓDÓ BLOGBEJEGYZÉSEK

Sárga szín használata webdesignban
Sárga weboldalak – miért pont ezt a színt használták?

Sárga weboldalak – miért pont ezt a színt használták?

Működne a Coca-Cola sárgában? Vagy hűsítő kékben? Lehetne a McDonalds narancssárga? Nehéz megmondani, hogy a márka sikere tette világhírűvé az arculatot, vagy fordítva: a zseniális arculat járult hozzá a sikerhez. Nagy a kísértés, hogy utólag elemezzük és értelmezzük a választott arculat színeit. Ebben a blogbejegyzésben sárga weboldalak esetében keressük a színválasztás okait.

Tovább olvasok

KÜLSŐ VIDEÓK

A lilához kapcsolódó asszociációk

A színek pszichológiája – kapcsolódó fogalmak

Színek használata a logótervezésben