WEBDESIGN TUDÁSTÁR

1. rész:Színek alkalmazása

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

Fogyasztói társadalomban élünk, amelyben kiemelkedő szerep jut a vizuális

kommunikációnak. Egy jól megtervezett webes arculat könnyen megjegyezhető és

megkülönböztet a versenytársaktól.

Könnyen megjegyezhető?

Máris eljutottunk a színekhez, a vizuális kommunikáció alapeleméhez. Kultúránkban

ugyanis a színekhez különböző jelentést, fogalmakat, értékeket tudunk kapcsolni, sőt

érzelmeket is. Ha a színek jelentéséről, mögöttes tartalmáról van szó, biztosan találkoztál

már ezekkel a fogalmakkal:

- VÖRÖS: szenvedély, veszély

- SÁRGA: irígység

- KÉK: tisztaság

És ezek még csak az alapszínek!

Színek és webdesign

Egy olyan példán szeretném ezt bevezetni, amit a közelmúltban, 2014. nyarán készítettem:

A koncepció és a feladat röviden: Naturalbeauty szappanmanufaktúra webáruház készítése.

Az elkészült weboldalt itt nézheted meg: http://www.krisztadesign.hu/webshop/

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

Naturalbeauty vagyis magyarul: természetes szépség. Milyen fogalmak jutnak erről

eszedbe?

- Természetesség, frissesség: többnyire ezek a fogalmak a zöld színhez kapcsolhatóak.

- Nőiesség, szépség: a lila szín és azok árnyalatai amelyek biztosan előkerülnek, ha ezekre a

fogalmakra asszociálunk.

A színek jelentése és alkalmazása a webdesignban

Fehér: leggyakrabban az oldalak háttérszíne, az ún. mostanság divatos minimál stílushoz

kapcsolódik, alkalmazásával teljes mértékben a weboldal tartalma(fotók, szöveg) kerül a

figyelem középpontjába. Jó példa erre az elegantthemes Vertex porfólio sablonja:

http://www.elegantthemes.com/demo/?theme=Vertex

Piros: A látogató figyelmének vezetése szempontjából a legerősebb szín, vitalitást,

melegséget sugárzó szín. Főszínként jellemzően a vendéglátásban, éttermek és szállodák

esetében találkozhatunk vele, de kiegészítő színként a látogató figyelmének vezetésére,

gombok kiemelésére is használjuk.

Kép forrása: http://www.zerotheme.com/demo/index.php?cat=full&temp=zDeliccio

Sárga: Leginkább színpárban használatos szín, gondoljunk csak a Raiffeisen Bank logójára

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

és weblapjára, ahol a fekete szín mellett a sárga szín emeli ki a látogató számára fontos

részleteket, amelyek így garantáltan megmaradnak az emlékezetében.

Narancs: A sárgához hasonlóan figyelemfelkeltő és élénk szín, jellemzően a feketével és

szürkével alkot párost, a férfiak célcsoportját megszólító webáruházak designjának

kialakításában gyakran találkozunk vele.

Kép forrása: https://beta-szerszam.hu/

Rózsaszín: Világos és sötétebb árnyalatai nőkről- nőknek szóló tartalmak és a kisbabákról

szóló oldalak főszíne, mellékszínként a lilával, szürkével és a feketével alkot erőteljes

párost:

http://www.zebrathemes.com/wedding-wordpress-theme/

Kék: Az üzleti világ színe, a kék színhez megbízhatóságot, stabilitást, megfelelő hozzáértést

társítunk. Ennek megfelelően főszínként gyakran találkozunk vele pénzügyi és informatikai

cégek, orvosi szolgáltatást bemutató weblapokon, világosabb árnyalataival gyerekeknek-

gyerekről szóló oldalakon:

http://cyberchimps.com/store/primo-pro/

Barna: A barna szín természetességet, melegséget sugároz. Olyan weboldalak tervezéséhez

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

használjuk, amelyeknél előtérbe kerülnek a természetes anyagok és azok kézi

megmunkálása. A barna szín és árnyalatai kézi manufaktúrák, vendéglátásban tevékenykedő

cégek weboldalainak meghatározó színe.

Kép forrása: http://demo.orange-themes.com/?theme=339458

Találkozhatunk még a gyerekek szín- és formavilágához igazodó gyerekeknek - gyerekekről

szóló „színes” oldalakkal, elsősorban játékokat árusító webáruházak esetében:

Kép forrása: http://www.yithemes.com/live/?theme=kidshop

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

Milyen interneten elérhető eszközök segíthetnek a színpaletta kiválasztásában?

Térjünk vissza most a bevezető példához, a Naturalbeauty szappanmanufaktúra webáruház

tervezéséhez!

A tervezés első lépésében tehát kerestem egy színpalettát, amit felhasználhatok a logó,

arculat kialakításához. Szeretek természetes színpaletták segítségével tervezni, első körben

a http://design-seeds.com/ -on néztem szét, ahol meg is találtam a megfelelő színpalettát:

Színpaletta: http://design-seeds.com/index.php/home/entry/budding-hues3

Ha a jobb oldalon a paletta adott színére húzzuk az egeret, akkor a webes tervezéshez

szükséges ún.hexa kódokat is leolvashatjuk.

Egy kis kitérő: a webes tervezésben minden színt egy ún. hexa kóddal azonosítunk, nézd

meg hányféle színt használhatunk:

http://www.pagetutor.com/common/bgcolors1536.html

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

Hol találhatsz még színpalettát?

• http://www.colourlovers.com/palettes

• http://www.colorhunter.com/

Akár kulcsszavakat beírva is kereshetsz a http://www.colourlovers.com/palettes -on , ahol a

neked tetsző paletták különböző formátumban is letölthetőek. Ezt a palettát én készítettem,

a jobb oldalon a Download Options négyzetben, az .ase formátumra kattintva a paletta

színei behívhatók és felhasználhatók Photoshopban.

Kép forrása: http://www.colourlovers.com/palette/3489079/Autumn_bright

Visszatérve, a http://design-seeds.com/ legfőbb előnye, hogy a színpalettát bemutató

képecske segítségével könnyen eldöntheted, hogy melyik az a domináns szín egy palettán

belül, amelyiket főszínként alkalmazhatunk és melyek azok a színek, amelyek kiemelik ezt

a főszínt.

Ennek megfelelően a logóban a sötétzöld és a világosabb zöld színt használtam fel.

Kiegészítő színként a webes arculatban a lilát és azok árnyalatait, a sötétebb lilát a gombok

kiemelésére, a menü a lila világosabb árnyalatát kapta, és végül a paletta legvilágosabb

színe lett a háttérszín:

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

Kép forrása: http://www.krisztadesign.hu/webshop/

De ha még mindig bizonytalan vagy, hogyan válassz ki színeket webes arculatodhoz,

további profi alkalmazások, amelyek segítenek webes arculatod színeinek kiválasztásában:

Egy kedvenc képedet feltöltve profi paletta javaslatokhoz juthatsz:

Kép forrása: http://www.pictaculous.com/

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu

A „browse” gomb megnyomása után töltsd fel kedvenc képedet, majd kattints a „get my

palette” gombra, és tádáám, kész is a palettád! Hasonló elven működő látványos alkalmazás

a http://www.cssdrive.com/imagepalette/ is.

Kellemes kísérletezgetést és sok sikert kívánok! :)

Készítette: Ménesi Krisztina webdesigner weblap: www.krisztadesign.hu