A webes felületek színei és színtervezésének alapjai

Az előző cikkünkben a színtannal kapcsolatos alapokat ismertettük, melyek nem csak a webes felületeken, de a való életben is érvényesek. Ebben a blogban jobban rátérünk a webes színtervezés alapjaira, a webdesign-ban használt színek sajátosságaira.

Tisztázzuk a színmódokat

A webes tervezéskor kiemelten fontos megemlíteni az RGB és CMYK színmódokat, hiszen ezekben kell elkészíteni, megtervezni a munkádat. De mik is ezek?

Az RGB, azaz Red, Green, Blue rövidítéséből jön létre. Ez a webes színtervezés alapja, hiszen a számítógépek, laptopok monitorja mind-mind ezt a 3 színt használja ahhoz, hogy megjelenítsen nekünk egy képet.

Ebben a rendszerben egy úgynevezett hexadecimális kóddal történik a színek meghatározása, ahol akár egy színnek 256 féle árnyalatot is adhatunk. A hexadecimális kód #-al kezdődik és utána 6 karaktert tartalmaz, amelyek 0-9-ig és A-F-ig vehetnek fel értéket. A 0 jelöli a legsötétebb, míg az F a legvilágosabb árnyalatot. Példának okáért, a #000000 a fekete, a #FFFFFF pedig a fehér színt jelenti ebben a kódolásban.

Az RGB mellett létezik még a CMYK rövidítésű színmód, de az előbbit használjuk webdesign-ban. A CMYK a Cian, Magenta, Yellow és blacK rövidítése és ez a nyomtatásban használt alapszíneket jelöli, hiszen a nyomtatáskor valamiképp más színeket kapunk, mint amilyen színek megjelennek a monitoron. A gépen RGB-ben dolgozunk, de nyomtatni CMYK-ban tesszük.

cmyk

A színtervezés elemei, a színpaletták

A színpaletta összeállítása a színtervezési folyamatkor elengedhetetlen, ugyanis ez fogja a későbbiekben meghatározni a logó, weboldal és egyéb vállalati design színét. Minimum 3 és maximum 6 színt érdemes összegyűjteni a színpalettára.

színpaletta

A webdesignerek a WebSafe palettát használják, melyek web biztonságos színeket tartalmaznak, ami 216 színt jelent. Ezek azok a színek, amelyek minden böngészőben és monitoron is ugyanúgy jelennek meg.

Számos oldal található az interneten, ahol előre összeállított színpalettákat találhatunk, vagy éppen szerkeszthetünk magunknak. Ilyen a ColourLovers, vagy éppen a Kuler, ahol az általad összeállított paletta menthető, akár meg is osztható, vannak közösségi bejegyzések, ahol tapasztalatokat lehet egymással megosztani.

A Color Scheme Designer 3 igen praktikus alkalmazás, könnyen kezelhető és kielégítő lehetőségeket kínál a színpalettád összeállításához.

Vezesd a figyelmet a színekkel, használd a kontrasztot

A színpaletta színeit érdemes úgy kialakítani, hogy erős legyen a kontrasztjuk, ami azt jelenti, hogy a színkör ellentétes helyeiről válogass. Legyenek hideg és meleg színek egyaránt. Használj komplementer színeket és kommunikálj velük! A kontraszt tud segítséget nyújtani, hogy a színek közvetítette érzelmek mellett a látogató szemét is tud vezetni, összpontosítsd a figyelmét, emellett leveszi a terhet a szemről, könnyebb lesz az oldal átláthatósága.

kontraszt

Például ha az oldaladon világosabb a szöveg, mint a háttér, akkor a tartalom fókuszba kerül, azonban ha sárga háttéren fehér betűket alkalmazol, akkor a felhasználó szeme nem fogja tudni mire fókuszáljon és bele fog fájdulni a szeme abba, hogy az oldaladat nézi. Ezt érdemes mindenféleképpen elkerülni.

Tehát mire figyelj színtervezéskor és színválasztáskor?

A cikk összetettségéből kitűnik, hogy számos dologra oda kell figyelni, mikor a weboldalt vagy éppen más grafikai elemet tervezel.

Elsősorban a színek által közvetített érzéseket, jelentéseket kell megfigyelni és ebből kiválasztani a számodra megfelelőt.

Majd a színek egymáshoz való viszonyát, az elsődleges, másodlagos, harmadlagos színeket, illetve komplementer színeket is érdemes megvizsgálni. Utána kell nézni egy-egy színt legfőképpen milyen területen alkalmaznak, hol rendelkezik többletjelentéssel.

Természetesen a megrendelő igényét is szem előtt kell tartani, és közösen kell kialakítani a webdesignban megfelelő és a kliens elvárásainak tetsző színeket.

színtervezés

Emellett a versenytársakról sem szabad megfeledkezni az adott szférában, hiszen érdemes az ő színválasztékukat is elemezni. A végső színválasztásnak pedig mondanivalója kell, hogy legyen! Mégpedig az, amit közölni akarsz a látogatóval a cégedről.

Nem kis elvárások, így nem ki munka a megfelelő színpaletta kialakítása, de egy igen sarkalatos pontja a webdesign-nak.

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

További bejegyzéseink

LinkedIn

Készítsd el a LinkedIn profilod!

Egyre nagyobb térnyerést kap a LinkedIn, mely nem csak közösségi médiaként funkcionál. Különlegessége, hogy főleg a karrier és a szakmai kapcsolatok állnak a középpontban ezen

Bővebben »
tipográfia blog

A tipográfia 6+1 szabálya a webdesign-ban

A webdesign kialakításakor számos területre kell figyelnünk, hogy egy esztétikus és harmónikus végeredményt kaphassunk. Egy a sok közül a megfelelő tipográfia kialakítása. A következőkben azt

Bővebben »

Hírlevél

Szeretnél az elsők között értesülni legfrissebb blogcikkeinkről!?
Iratkozz fel hírlevelünkre!
Adatvédelmi szabályzat *