4 részes alapozó lecke, 1. rész

1. Színek
alkalmazása
ingyenes alapozó leckék 1. rész
Pixelgyár Kft. 2012 - Minden jog fenntartva!

2. “Egy nagyiparos társaságot hívott meg
magához vacsorára.
Az érkező hölgyeket és urakat finom
konyhai illatok fogadták, s már mindenki
előre örült az ínyenc falatoknak. Amikor
a vidám társaság körülülte a nagyszerűen
elkészített ételekkel rakott asztalt, a
házigazda vörös fényt kapcsolt be. Szép
pirosra színeződött, és frissnek hatott a
tányérokra kirakott hús, a paraj azonban
feketének tűnt, a krumplik pedig pirosan
világítottak.
Mindenki meghökkent, de a vörös fény
máris kékre váltott, s ettől a pecsenyék
mintha oszlófélben, a krumplik mintha
rothadtak lettek volna. A vendégek ét-
vágya egyszeriben elment. Amikor erre
még sárga fény következett, s a vörösbor
olyan lett, mint a sötét olaj, az emberek
pedig sárga félholtaknak látták a szom-
szédjukat, néhány érzékeny hölgy felállt
és kisietett az ebédlőből. Senki sem volt
képes enni, bár a jelenlévők mind tud-
ták, hogy csak a megvilágítás színének
változásai okozzák e különös érzéseket.
Nevetve kapcsolta be a házigazda a fehér
fényt, és nemsokára helyreállt a vidám
hangulat az asztal körül.”
Johannes Itten - A színek művészete
www.webdesigntanfolyam.com

3. A színek
Milyen módon válasszunk színeket a logónkhoz,
honlapunkhoz?
L
egtöbben a saját ízlésük alapján hozzák meg
ezt a fontos döntést, Ez nem túl megalapozott
választás, így már a kezdet kezdetén lemondunk
az egyik legfontosabb eszközünk adta előnyökről.
Ahhoz, hogy tisztában legyünk vele, hogy mik ezek,
és esetleg érvelni is tudjunk miért ezeket választjuk,
érdemes megvizsgálni a színeket közelebbről.
A színekről egy egész tudományág szól - a színtan, ill.
színdinamika, amely minden területen megvizsgálja
a színek szerepét, és hatását az életünkre. A színek a
vizuális kommunikáció alapkövei, amelyek rendkívüli
módon hatnak az érzékekre.
Ha egy színt bármely oknál fogva kiválasztunk, ahhoz
különböző értéket, jelentést, kiváltott érzelmeket is
kapunk egy csomagban, úgyhogy egyáltalán nem mind-
egy mit választunk.
Ahogy mindenben itt is vannak hagyományok un.
konvenciók az egyes területeken használandó
színekben is.
Például a vállalati honlapokon jellemzően az acélkék,
fehér, és grafitszürke színek a jellemzőek, ezek
stabilitást, megbízhatóságot, biztonságot, üzleti jel-
leget sugároznak.
Egészséggel kapcsolatos weboldalak a természetesség,
vitalitás jegyében sok zöldet, napsárgát, és égkéket
alkalmaznak, míg az éttermek egyik kedvence a bordó,
mélyvörös, csokoládébarna, és fekete - ezeken jól
mutatnak az ételfotók, kellemes, meleg, barátságos
környezettel, és a jóllakottság érzésével kecsegtetnek.
Még csak a színeknél tartunk, de máris üzeneteket
közvetítünk egy non-verbális csatornán.
www.webdesigntanfolyam.com

4. A színkör
I
saac Newton termékeny ember volt, a dinamika, és a tehetetlenség törvényének megalkotása mellett a
fény tulajdonságait is vizsgálta, és még arra is volt ideje, hogy 1666-ben elkészítse a színkört, amelyet
azóta is használunk, és persze kidolgozza a hozzá tartozó színelméletet.
Alapszínek
A színeket ez alapján 3 csoportba osztjuk: elsődleges, másodlagos, és har-
madlagos színek.
A három elsődleges szín a vörös, a kék és a sárga.
Ezek az alapszínek, az összes többi szín ezek keveréséből jön létre. Ha ezekből
bármely kettőt összekeverjük, létrejönnek a másodlagos színek, mint a zöld, a
lila, és a narancs.
A harmadlagos színek pedig az elsődleges és másodlagos színek keverékei.
Komplementer színek
A színkör egymással szemben álló színei (piros-zöld, sárga-kék, lilásvörös-
sárgászöld, narancsvörös-kékeszöld, sárgásnarancs-liláskék)
a komplementer színek, amelyek nagyon jól kiegészítik egymást.
Kontrasztjuk akkor érvényesül igazán, ha az egyik túlsúlyba kerül -
kiemelésekhez használjuk őket.
Színpárok
Az egymáshoz közel álló, hasonló színek színpárokat alkotnak.
www.webdesigntanfolyam.com

5. A színek hatásai
A
színek mindig, mindenhol hatnak ránk - gondold csak végig, milyen színeket használnak egy orvosi
rendelő várójában, és milyeneket egy bevásárlóközpontban?
A színek fokozhatnak, vagy akár csillapíthatnak is érzéseket, mint éhség, vágy, feszültség, nyuga-
lom. A színek oly mértékben befolyásolják érzelmeinket, hangulatunkat, hogy gyógyításra,
kedélyállapot-javítására is használják őket.
A meleg színek - a színkör egyik felén - a sárgától a liláig
találhatóak - pl. vörös, barna, rózsaszín... Ezek a mi kultúránkra jellemzőek - ha
A hideg színek a kör másik fele - kék, zöld, cián, sötétlila esetleg más országokból is akadnak
akadnak ügyfeleink, érdemes odafi-
stb.
gyelni, milyen jelentéssel bír egy-egy
A fehér, szürke és fekete pedig semleges színek. szín.
Az egyes színekhez különböző érzeteket, fogalmakat Egy híres eset a McDonalds éttermek
társítunk: Japán piacra bevezetése. Ugyanis a
híres Ronald bohóc fehér arca az ő
FEHÉR - egyszerű, tiszta, érintetlen kultúrkörükben a halált jelképezi, ami
egy egyébként sem az egészségről
FEKETE - súlyos, nehéz, sötét, titkos, elegáns, drága,
elhíresült étteremláncnak hatalmas
halál baklövés.
PIROS - szerelem, szenvedély, veszély, figyelmeztetés,
izgalom, az élelmiszer, impulzus, akció, kaland Sőt a zöld szín is egészen furcsa
KÉK - megbízhatóság, siker, komolyság, nyugalom, erő, jelentéssel bír náluk - a nálunk elfoga-
szakszerűség, hatalom dott természetességgel ellentétben
SÁRGA - a kíváncsiság, játékosság, vidámság, a modern technológia, a high tech
termékek színe.
szórakozás, irigység
LILA - igazságosság, luxus, fantázia, álmok,
kétértelműség, bizonytalanság, öregség, vagyon
ZÖLD - pénz, a természet, állatok, egészségügy,
gyógyítás, élet, harmónia, frisseség
RÓZSASZÍN - lágyság, édesség, ártatlanság, fiatalság,
gyengédség
NARANCS - erő, energia, dominancia, boldogság,
kényelem, kreativitás, ünneplés, szórakozás, ifjúság, A színek jelentését
melegség
SZÜRKE - általánosság, közönyösség, fenntartás,
gyakran szokásaink,
visszafogottság, unalom társadalmi, vallási
BARNA - föld, természet, lágyság, termékenység,
kényelem, stabilitás tényezők befolyásolják!
www.webdesigntanfolyam.com

6. A fókusz
Figyelemfelkeltés
szempontjából a
színek sorrendje: 1. 3. 5.
2. 4. 6.
Azonosíthatóságukat
tekintve a színek sor-
rendje: 1. 3. 5.
2. 4. 6.
A figyelmet legjobban
a tiszta színek vonják
magukra, 1. 2. 3.
a kevertek kevésbé:
www.webdesigntanfolyam.com

7. Színmódok
RGB, vagy CMYK? eszik azt, vagy isszák?
A
különböző eszközökhöz különböző
színrendszerek tartoznak - a webes tervezés az
RGB, vagyis a Red, Green, Blue rendszerre épül,
Te jó ég!
mert a monitor a megjelenő képet ebből a 3
színből rakja össze - un. additív összeadásos móddal.
Hogy fogom
Az RGB rendszerben a színek meghatározása egy un. ezeket megjegyezni?
hexadecimális kóddal történik
pl. #RRGGBB
Egy-egy alapszínnek 256 féle árnyalatot adhatunk,
így összesen ca. 16,7
millió színárnyalattal
gazdálkodhatunk.
A színek meghatározása Először is, nem kell meg-
két karakterrel és 16- jegyezned - a gyakran
os, azaz hexadecimális használtak úgyis rögzülnek
számrend- szerben - de az összes grafikai pro-
történik úgy, hogy egy gramban megnézhető az
karakter 0 – 9-ig illetve adott szín hexa kódja. Az
A – F-ig között vehet fel interneten pedig csillió he-
értéket. így alapszínenként a két karakterrel kijön a 256 lyen, a legkülönfélébb táblázatokban le-
színárnyalat. A 0 a legsö- tétebb, az F a legvilágosabb het megtekinteni őket. Pl: a Wikipédia
árnyalatot jelöli. A 00 00 00 tehát a feketét, az FF FF FF szócikkében is, ahol további infókat
a fehéret és például az FF 00 00 a vöröset jelöli. olvashatsz még a témáról.
A HTML kódban a hexadecimális színmeghatározások
elé mindig egy kettőskereszt # kerül.
A kék színünk tehát így fog kinézni: “#0000FF”
Webes tervezés esetén csak az RGB színmóddal dol-
gozunk, de jó ha tudsz róla, hogy létezik másmilyen
is. A CMYK - vagyis Cian+Magenta+Yellow+blacK a
nyomtatásban használt 4 alapszínre bontást jelenti - un.
szubszaktrív kivonásos. Ennek következtében fordul-
hat elő, hogy a monitoron megjelenített képhez képest
nyomtatáskor más eredményt kapunk.
Magyarul, ami bemegy a számítógépbe (szkenner,
digitális fényképezőgép stb.) az RGB, ami kijön belőle -
nyomtatás, nyomdai kivitelezés - az CMYK.
www.webdesigntanfolyam.com

8. Színpaletták
A tervező legjobb barátja a színpaletta!
A
színpaletta határozza meg a megtervezendő
munka - legyen az logó, weboldal, vagy bármi
más alapszíneit.
Ha egy projekthez megtaláltuk a megfelelő szín-
palettát - kis túlzással a munka legnagyobb részét már
elvégeztük, mert erre az alapra már-már magától épül
fel.
Egy átlagos paletta 3-6 színből áll. Ennél több színnel
ne tervezzünk, mert a túl sok szín használata zavaros,
a szemnek fárasztó eredményre vezet. Árnyalatokat
természetesen használhatunk.
http://kuler.adobe.com
Míg a print designerek a méregdrága Pantone skálával
rohangálnak, a webdesignereknek csak egy WebSafe Az elkészített palettákat letölthetjük, és beimpor-
paletta jutott. tálhatjuk a szoftvereikbe.
A mások által már létrehozott paletták között is
Web safe, azaz webbiztos színeknek azokat a színeket rengeteg szép kollekciót találni.
nevezzük, amelyek minden megjelenítő eszközön
ugyanazt a színt mutatják. Sajnos ez meglehetősen Én személy szerint a Kuler helyet a ColourLovers
szűkös skála, mindössze 216 színről tudjuk elmondani, weboldalát használom, ez inspirál a legjobban.
hogy ugyanúgy fog megjelenni minden monitoron, Csak kiválasztom, hogy Search Palettes, és eset-
minden böngészőn - főleg úgy, hogy ezek egyébként leg beírok egy
kulcsszót pl. happy, és máris egy csomó vidám
Most akkor csak 216 színt színpalettával kezdhetem a gondolkodást,
használhatsz?
tervezgetést. Nálam mindig ez az első lépés.
Lementem a legjobban tetsző palettákat, úgy egy
Csúnya lenne, ha így lenne. Az említett 16 millió szín tucatot, amelyek között már ott van az, ami végül
mind a rendelkezésünkre áll, hallgatólagos beleegyezés- a nyerő kombináció lesz.
sel az iránt, hogy nem lesz mindenhol egyformán szép,
de ugyebár a szépségért sok áldozatot meghozunk.
Színpalettákat tartalmaznak a képszerkesztő, és egyéb
grafikus szoftverek is, mint az Adobe Photoshop. Mun-
ka közben ezekből válogathatunk, de a sztenderd palet-
ták mellett saját, egyénileg összeállított palettákból is
dolgozhatunk.
Rengeteg színpaletta készítő, generáló, pakolgató
weboldal, szoftver létezik ma már - az Adobe sajátja a http://www.colourlovers.com/palettes/
Kuler search?query=happy
www.webdesigntanfolyam.com

9. Színérzékenység
Az meg mi? Nézzük!
T
inilányként a barátnőimmel volt egy játékunk -
Milyen színű a hangulatod ma? - és a válaszból
a másik tudta hogy dumcsi, sírás, vagy ereszd el
a hajam lesz az esti program.
Sokáig azt gondoltam, hogy mindenki tud színekben,
színpalettákban gondolkodni, de idővel rákellett jön-
nöm, hogy ez is olyan, mint az abszolút zenei hallás.
Fogalmakhoz, hangulatokhoz tudok azonnal színkom-
binációkat gyártani, de egy megasztár hanggal lehet
jobban jártam volna.
Nincs ilyen képességed?
Cseppet se bánkódj! Ahogy az énekhang, úgy a
színérzékenység is fejleszthető, és fejlesztened is kell!
Ha nem akarod magad a még esetleg nem kifejlődött
színérzékedre bízni, akkor “tudományos alapokon” is
választhatsz színeket. Ehhez a Color Scheme Designer
a legjobb választás.
Használata pofonegyszerű - a már ismert színkörből
választja ki a kívánt palettákat - csak jelöld be, hogy
Mono, azaz monokróm - egy szín több árnyalata - vagy
esetleg Complement, azaz komplementer - egymásnak
szemben álló, kontrasztos palettában gondolkodsz pé-
ldául. A Triad - Tetrad beállítások pedig harmadolós/ http://colorschemedesigner.com/
negyedelős színsémát jelentenek, a színek egymástól
egyenlő távolságra vannak a színkörön, így hideg és me-
leg színek egyaránt vannak a palettán.
A Color Scheme Designer további funkcióit is érdemes
felfedezni - a Random füle e véletlenszerű megoldáso-
kat kínál, a Colorspace fülön pedig Web Colorsra is átál-
líthatjuk, így a már említett webbiztos színekből generál
csak színeket.
Ami még érdekes viszont a Colorblind fülecske, amely a
különböző színtlátási zavarokra ajánl palettákat.
www.webdesigntanfolyam.com

10. A fókusz
A színekkel terelt figyelem
Ö
sszkép szempontjából nagyon fontos tényező:
a kontraszt.
A színeket úgy érdemes összeválogatni, hogy
erős kontrasztot hozzanak létre, azaz a domináns színek
a színkör ellentétes tartományából - a hideg ill. meleg
tartományból kerüljenek ki.
Ez az oldal jó példa a komplementer színek egyszerű
használatára.
Felhívja a figyelmet a narancs színnel, és egyben bizal-
mat, együttérzést ébreszt a kékkel. A színek beszélnek,
semmi extra. Egyszerű ez ugye?
tt.
k közö
a pöttyö
ll látnod s meg-
A kontraszt megragadja a figyelmet, és oda tereli, á mot ke r é rdeme
Egy sz l, akko m vagy
-e
ahová csak szeretnéd, ha jól használod. Ez a fókusz - isme red fe tve ne
Ha nem , ille esztő!
látásod színtév
vagyis a figyelem középpontja. atni a
vizsgált
A színtévesz-
tés tesztelését
egy mobil al-
kalmazással is
elvégezheted!
Androidra is
láttam, keresd
a Marketben!
A színvakság és a színtévesztés a színlátás zavara az em-
beri szervezetben.
A színvakok és színtévesztők nem tudnak különbséget
tenni olyan színek között, amelyeket az egészséges
emberek eltérőként érzékelnek. Jellemzően genetikai
okokra vezethető vissza, de előfordulhat szem-, ideg-
vagy agykárosodás során és vegyi hatásra is - írja a
Wikipédia.
www.webdesigntanfolyam.com

11. Most kajáról
beszél? Drágám, melyik
függönyt válasszuk
a cikláment, vagy a
püspöklilát? Esetleg a
lime? Nem túl világos?
Ööööö...
A
lime az egy gyümölcs, a zöld
meg egy szín! - mondja erre a
férfi.
Jellemzően a férfiak “fog-
yatékossága” ez, amellyel egyéb-
ként akkor is rendelkeznek, ha nincs
megállapítva róluk, hogy színvakok.
Egyszerűen kívül esik az érdeklődési
területükön, hogy ilyesmivel foglal-
kozzanak - ez talán ősemberes ho-
zomány is - a vadászathoz nincs
szükség a színek ilyen fokú megkülön-
böztetésére, míg a bogyószedéshez
elkél - a sötétpiros ehető, a narancs-
sárgától viszont baromi büdös lesz a
barlangban éjjel!
http://parka.deviantart.com
www.webdesigntanfolyam.com

12. Kalibráció
Dolgozzunk jól beállított eszközökkel!
Színkorlát
E
bbe előbb-utóbb bele kell törődünk, hogy a
munkánk nem mindenhol ugyanolyan nagyszerű
megjelenéssel bír, és sajnos nem ez az egyetlen kor-
lát, a betűtípusokkal
ugyanez van pepitában...
Miért is?
Az internet színmegjelenítésének szabványa az sRGB,
esetleg a szélesebb spektumú Adobe RGB. Ezek azok a
színprofilok, amelyeket a legtöbb monitoron használnak,
de a dologba belekavar a a monitorhoz gyárilag készített
színkezelő profil, sőt az egyes böngészők színkezelése,
a felhasználói egyéni beállítások stb. úgyhogy egy
kordinálatlan katyvasz az egész.
Próbáld ki, hogy egy fotót küldj el másoknak, és nézd
meg a barátaid gépén is - az egyiken fakó lesz, a másikon
szürkés, a harmadikon sötét...
Hogy megfelelő monitorbeállításaink legyenek (legalább
nekünk), a monitor kalibrálására van szükség, méghozzá a
webes környezethez alkalmazkodva.
Miután egy ilyen kalibrációs eszköz pár-sok-százezer fo-
rintocska, egy kalibrációs ábra is megteszi kezdetnek -
kövesd a rajta lévő utasításokat.
Sosem látott részleteket fedezhetsz fel :)
http://fotozz.hu/fotot_megmutat?Foto_ID=88488
Természetesen ez még nem a tökéletes megoldás.
Ha bővebben érdekelnek a színprofilok, a monitor kali-
bráció, olvasd el ezeket a cikkeket:
http://www.geeks.hu/tippektrukkok/080507_tft_moni-
tor_kalibralasa_hazilag
www.webdesigntanfolyam.com

13. Színösszeállítások
Színek a webdesignban
M
ár egy csomó mindent tudsz a színekről, és még mindig semmit sem tudsz a színekről?
Bizonyos esetekben már eltudod dönteni, hogy egy szín odavaló-e vagy sem, hisz megismerkedtél
a színekkel, azok jelentésével, tudod melyek azok amelyekkel a figyelem felkelthető.
Vannak kialakult színkezelési, tervezési szokások, amelyeket előbb ismerj meg, mielőtt úgy döntesz, hogy
felrúgod!
FEHÉR
A legtöbb oldalnak fehér az alapszíne, en-
nek két alapvető oka van - egyrészt a
legolvashatóbb a fehér alapon fekete
szöveg, főleg ha hosszú szövegről van szó -
pl. cikkek
A fehér alappal rendelkező oldalon a képek
is megfelelő, kiemelő hátteret kapnak, sőt
az egyes képformátumok okozta problémák
- cakkos szélek - is kiküszöbölhetőek vele.
A fehér minden más színnel működik, egyes
színeket kiemel, másokat tompít.
A webdesign stílusok közül a minimal na-
gyon népszerű, ezen oldalak legtöbbször
fehér vagy fekete alappal, sok kontraszttal,
és a nevéből is adódóan minimális grafikai
elemmel, egyszerűen, mégis harmónikusan
jelenítik meg a kívánt tartalmat.
A szabadon hagyott fehér felületeknek
ráadásul van egy olyan tulajdonságuk, hogy
odavonzzák a szemet.
Ez az un. white space.
Sokan szeretik kitöltetni az egész felületet,
pedig az okosan használt “üres” részek Jellemzően fehér oldalak:
tartják egyensúlyban az összképet, és veze-
tik a látogató figyelmét, és a tartalomra hírportálok - index.hu, hvg.hu, origo.hu, nytimes.com
összpontosítanak. márkaoldalak - apple.com
egészségügyi oldalak, orvosok honlapjai
www.webdesigntanfolyam.com

14. FEKETE
Egy fekete alapra már néhány elemmel is
vizuális csodát lehet művelni, de pont ezért
nagyon nehéz elkészíteni, megtalálni azt,
hogy mi az ami még nem túl sok, és nem is
túl kevés.
Az egyik legnehezebb 3 vonalból, és két
képből olyan egységet létrehozni, mint
például a luxusmárkák oldalai, amelyek
előszeretettel használják a sötét tónusokat,
mint az elegancia, és a drága, minőségi hol-
mik jelképe.
Fekete alapon a fehér ill. a sárgás szöveg
olvasható a legjobban, de fekete alapra
csak rövid szövegeket tegyünk - fárasztja
a szemet, rontja a koncentrációt, ellenben
gyönyörűen kiemeli a fotókat.
Jellemzően fekete oldalak:
luxusmárkák, sportmárkák
fotósok portfoliói
üzleti oldalak
ARANY ÉS EZÜST
A monitoron nincs ezüst, vagy arany szín
(csak fényképen) -
csak valami hasonló árnyalat - de a Photo-
shop segítségével létrehozhatunk fémes ha-
tású designokat. Ezekkel azonban érdemes
csínján bánni, mert az exkluzívnek szánt
megjelenés könnyebben válhat gagyivá,
erőltetetté, mint más esetben.
Ahogy az ékszereket, úgy ezeket a színeket
is leginkább kiegészítőként használjuk -
gombok, kiemelések, ikonok, ill. háttérele-
mekként, és főleg a semleges alapokon
- tehát fehéren, feketén, és szürkén mutat-
nak jól.
www.webdesigntanfolyam.com

15. PIROS
A legerősebb szín, kevesen mernek piros
weboldalt készíttetni, még akkor sem, ha az
arculat fontos eleme ez a szín. És valóban
nagy merészség kell hozzá, de aki mer, az
még nyerhet is.
A piros élettel tölti meg a felületeket, din-
amizmust, melegséget sugároz, felhívja a
figyelmet.
Erre a színre különösen odafigyelünk, így
piros jelzésekkel úgy végigvezethetjük az
oldalon a látogatót, hogy észre sem veszi,
hogy már pakolja is a kosarát.
Érvek és ellenérvek:
• a látogató garantáltan emlékezni fog rá,
szinte beleég a memóriájába kontra bár az
oldalra emlékszik, annak tartalmára nem
• a vörös szín gyorsan hat az érzékekre,
vérnyomás emelkedést, izgalmat okoz, de
kiválthat dühöt is, zavarodottá, zaklatottá
tehet
• a piros elemek az oldalon odavonzzák a
tekintetet, kiemelik amit ki akarunk emelni -
azonban előfordulhat - a túl sok piros
“kiégeti” azaz fárasztja a szemet
A piros jelzés Jellemzően piros/bordó oldalak:
• Bármilyen weboldalon a piros jelölés élelmiszerekkel kapcsolatos honlapok
gyakran jelent tiltást, törlést, vagy figyel- éttermek, bárok
meztetést, hibaüzenetet, ezek helyes színházak, zenészek
használatára mindenképpen figyeljünk erotikus oldalak, szexshopok
oda!
www.webdesigntanfolyam.com

16. NARANCS
A piros és a sárga keveréke, azok tulajdon-
ságait örökölte. Ez a szín pont olyan, mint a
gyümölcs, amelyről a nevét kapta. Vidám,
napsütötte, egészséges, játékos, élénk. A
pirosnál kevésbé durva, nem csap arcon, de
még mindig eléggé figyelemfelkeltő.
A narancsszín nagyon jól működik szürké-
vel, kiegészíti a zöldet vagy a kéket, és talán
sosem gondolnád, de a pinkkel is jó párost
alkot.
A következő oldal jó példa arra, hogy olyan
nincs, hogy nem illenek össze bizonyos
színek - maximum nem azt a hatást keltik,
amit várunk :D
A suhanó autók képe fokozza a színek dina-
mizmusát, az elrendezés nem mindenna-
pos, trendi, fiatalos.
Jellemzően narancssárga oldalak:
webáruházak szeretik alkalmazni kiegészítő
színként, elvezeti a felhasználót a kosárig
reklámügynökségek
események, rendezvények (nyári/őszi)
SÁRGA
Nehéz eset, ezért igen ritka is a sárga színre épülő weboldal. Szürkével, és feketével erős kontrasztot alkot,
ami annyira világít, hogy gyakran használják ezt a kombinációt építőiparban, biztonságtechnikai cégeknél,
ill. figyelmeztetésekhez!
Fehérrel pedig olyan fényes, akár a napsugár. Életerős, vidám szín, mégis kevesen szeretik, főleg a világos
változatait. Irigységet, féltékenységet, komolytalanságot is sugallhat.
A sárga hat ránk fizikailag is - türelmetlenné tesz, azt mondják egy sárga szobában többet sírnak a
csecsemők. Hogy ez igaz-e vagy sem, azt nem tudom, nálunk nem sárgák a falak, mégis sírtak - de a túl sok
sárga nem túl barátságos, ezért érdemes más színekkel tompítani ezt a hatását.
Pirossal, naranccsal, barnával meleg, mediterrán, kellemes vizuális környezetet lehet létrehozni, míg a vilá-
gossárga zölddel, kékkel naturális, természetközeli, friss hatást kelt.
www.webdesigntanfolyam.com

17. www.webdesigntanfolyam.com

18. RÓZSASZÍN
A pink árnyalatok a csajoknak és a
babáknak lettek leosztva. Lehet halvány,
szűziesen ártatlan, édibédi, cukormázas,
érintetlen, éretlen, nőies, csajos, de dögös
is, és közben végtelenül elcsépelt.
Azért van néhány cég, amely arculatának is
ezt a színcsaládod választotta -
a Telekom/T-com/T-Mobile egyenesen
megvett, azaz levédetett egy színárnyala-
tot a magentából - szóval ne próbálj meg
még hasonló árnyalattal sem telekommu-
nikációs céget indítani, mert lekapnak a
tízkörmödről rögtön - de ne is tervezz ilyen
cégnek ilyen arculatot, mert a kukában, és a
bíróságon végzi.
A Telekom weboldalak kitűnő állator-
vosi lovak, úgyhogy még fogsz velük nem
követendő példaként találkozni.
Ezt a színt lehet utálni, lehet szeretni, egyet
nem lehet - nem odafigyelni rá. Tehát ez
a sötétrózsaszín nem csak babás, hanem
rendkívül erős márkaépítő hatású.
Hihetetlen jó páros szürke/fekete árnyala-
tokkal.
Jellemzően rózsaszín oldalak:
nőknek szóló tartalmak
kisbabákkal kapcsolatos tartalmak,
webáruházak, fórumok
női divat, trend blogok
party, rendezvény site-ok
www.webdesigntanfolyam.com

19. KÉK
This is a business.
A kék klasszikus üzleti szín. Ha megfigyeled,
rengeteg pénzügyi, informatikai
mammutvállalat valamilyen fáradtkék szín-
nel pozicionálja magát - bizalom, meg-
bízhatóság, biztonság, hatalom, erő, pénz,
innováció, modern, professzionális, high-
tech...
Világosabb árnyalatai, pasztell környezet-
ben szintén kedveltek a gyerekeknek,
gyerekekről szóló oldalak esetén - a tisz-
taságot, az új életet, a természetességet
sugallva - gyógyszertárak, magánklinikák
honlapjain is találkozni a “megnyugtató”
kórházkékkel és zölddel.
Jellemzően kék oldalak:
férfiaknak szóló tartalmak - üzlet, sport
ügyvédek, jogászok
informatikai vállalatok
orvosok, kórházak, egészségmegőrzés
www.webdesigntanfolyam.com

20. ZÖLD
Zöld, mint a föld. Vagyis a fű.
Mindenképpen vissza a természetbe.
A zöld szín frissességet, újat, harmóniát,
békét, természetességet tükröz.
Jellemzően zöld oldalak:
egészség, egészségvédelem, ter-
mészetgyógyászat
környezetvédelem, zöld beszerzések,
megújuló energia
biogazdaság, bioételek
mezőgazdaság, agrár
póker, szerencsejáték oldalak - feke-
tével, pirossal karöltve
www.webdesigntanfolyam.com

21. LILA
Keveset használt szín, az emberek többsége
nem is nagyon szereti. Van aki nem is tekinti
színnek - kéknek vagy rózsaszínnek nézik,
árnyalattól függően.
Igényfelméréskor - tehát amikor egyeztetsz
az ügyféllel, mit szeretne - gyakran megkér-
dezem, milyen színt preferálnak az oldalon,
és melyiket ne alkalmazzuk semmiképpen.
Az utóbbira legtöbbször a lila a válasz.
Mert olyan furcsa szín. Titokzatos,
megnevezhetetlen, egészen egyedi, buja
légkört teremt egy lila szoba.
Sötétebb árnyalatait a luxuscikkek pl.
parfümök között találod, világosabbak
pedig egyéb kozmetikai termékek arculatát
adják.
Kreativitás, misztikum, intuíció, vágy,
vallás, bölcsesség - mind egy-egy árnyalat a
lila palettán.
Mi szeretjük :)
Jellemzően lila oldalak:
pszichológiával, lélekgyógyászattal foglalkozó
oldalak
spirituális, ezoterikus témák
erotikus témák
szépségápolás
szórakozóhelyek, klubok, bárok
www.webdesigntanfolyam.com

22. BARNA
Földszín - termékenység, gondoskodás,
melegség, stabilitás, kitartás, egyszerűség,
férfiasság.
A természetes anyagokkal, tevékenységek-
kel jól társítható - pl. fa - fát megmunkáló
szakmák, fából készült tárgyakat forgalmazó
boltok
Kis manufaktúrák, egyedi, kézi készítésű ter-
mékek, földműveléssel, mezőgazdasággal -
zölddel, és kékkel alkalmazva.
Az otthon, melegséget, nyugalmat szim-
bolizálja kávézók, éttermek, beülős,
beszélgetős klubok esetében.
Jellemzően barna oldalak:
földművelés, agrár témák
kézművesség, fafeldolgozás, mesterek, szakem-
berek
szállodák, lakberendezés, otthonteremtés
kávézók, bárok, mediterrán, családias éttermek
férfias témákhoz, sportokhoz - horgászat,
vadászat.
www.webdesigntanfolyam.com

23. SZÍNES OLDALAK
Jó persze a legtöbb design nem egy színre
épül, mégis vannak az un. full color, vagy
colorful webgrafikák, amelyet két területen
használnak rendszeresen.
1. a kisgyerekeknek szóló oldalak
A kisgyerekek nagyon szeretik a feltűnő,
tiszta színeket - piros, kék, zöld, sárga.
2. reklámcégek, ügynökségek, stúdiók olda-
lai
A színorgia a sokszínűséget, a kreativitást
hivatott ez esetben jelképezni.
Egy nagyon színes oldal gyorsan rögzül, saj-
nos a tartalma már kevésbé.
Jó, de mégis akkor hogyan válasszak színeket?
Mostmár egy csomó dolgot tudsz a színekről, már ezek alapján is össze lehet
állítani a palettákat, azonban még nem vettél számításba pár nagyon fontos dolgot. Nézzük az összes
szempontot.
Színválasztáskor vedd figyelembe:
• a használni kívánt színek egymáshoz való viszonyát - ebben segít a színkör
• a színek jelentését, pszichológiai, élettani hatásait
• a konvenciókat, vagyis a hagyományos felhasználási módokat, területeket
• a meglévő arculatot (ha van ilyen)
• a megrendelő igényeit - előfordul, hogy kategorikusan kikötik a használható színeket
• a versenytársak, konkurens cégek arculatát - bármit is tervezel - logó, arculat, weboldal - azt egy
közegbe fogod belehelyezni, amelyben már mások is
tartózkodnak.
• a marketing célokat - vagyis az üzenetet, amelyet a megtervezendő dologgal közvetíteni kívánnak
majd. Ha ilyen szavakat hallassz, hogy modern, elegáns,
letisztult, harmónikus, fiatalos stb. akkor tudd 1. minden ügyfél szinte szóról szóra ugyanezt fogja
mondani 2. neked kell rávezetni őket, hogy mit is akarnak üzenni valójában
www.webdesigntanfolyam.com

24. Függelék
Olvasni, és néznivaló
B
ajban vagyok, mert ezek a könyvek jelenleg nem kaphatóak, talán fellelhetőek antikváriumban, vagy
néha a Vaterán, de ha bővebben akarsz a színekkel, és a színtudománnyal foglalkozni, akkor érdemes
vadászni rájuk.
A színtan egy tudományág, tehát itt átadni nem lehet, és tapasztalati úton rögzül, nem lehet
bemagolni.
• Johanness Itten - A színek művészete
• Színharmónia a gyakorlatban (Scolar kiadás)
Linkajánló
Földvári Melinda a színelmélet doktora, minden ami a színekkel kapcsolatban fontos, említésre kerül az olda-
lán -
http://www.szintan.hu
“A kaleidoszkóp egyszerű és bámulatos.
Elég, ha tíz különböző alakú, más-más
szí­ űre festett üvegdarabkát helyezünk
n
el benne, mielőtt lezárnánk. A tükörrend-
szer elvégzi a dolgát. Aztán megrázhatjuk
tíz­ zer, tízezerszer, és soha többé nem
s
fogjuk látni ugyanazt a mintázatot.
Az ember nem egyszerű, de bámulatos.
Őbenne nem tíz, nem is tízezer, és nemc-
sak más-más alakú és színű üvegdarabka
van elhelyezve. Különben is, az ember
nem lezárható, mint egy kaleidoszkóp,
ezért foly­ on-folyvást belékerül valami
t
új, és mégis van egy ismeretlen pillanat,
amikor végérvényesen rögzülnek benne
a tükrök. (...)
Minden embernek megvan a maga
tükörrendszere, ami csak a sajátja.”
Ancsel Éva
www.webdesigntanfolyam.com

25. Feladatok
Ne csak olvasd! Csináld!
Megismerkedtél a színek különböző tulajdonságaival, használatával.
Ezek egyrészét talán eddig is tudtad, esetleg nem is tudtál, hogy tudsz róla.
De más dolog olvasni a boldogságról, és más annak érezni magad - így most a gyakorlatban kiderül, hogy
mennyire ívódtak beléd a színek!
1. Feladat
Keress példákat (3-3 db-ot) monokróm, és komplementer színpalettát használó
weboldalra!
Hogyan készíts screenshotot?
Print Screen gomb a billentyűzeten - Ctrl+V valamilyen képszerkesztőbe, Mentés
Szoftverrel - http://www.techsmith.com/jing/
Weboldalakról legegyszerűbben böngésző plug-in segítségével -
Chrome - https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnj
cddpki?hl=hu
Firefox - https://addons.mozilla.org/en-US/firefox/addon/1146/
2. Feladat
Készíts valamelyik alkalmazással (Kuler, Color Scheme Designer stb.) különböző palettákat, és a legjobban
sikerülteket - amelyik neked leginkább tetszett valamiért - mentsd Adobe Swatch Exchange palettaként
(.ase). 10-12 db ilyen palettád legyen. Ezeket oda mented ahová gondolod - csak legyen mihez nyúlni, ha
feladat van! Mivel a Color Scheme Designer pl. mypalette.ase néven menti őket, érdemes valami saját
kreálmányú elnevezést adni a későbbi felhasználás érdekében.
Mondjuk malnafagyi.ase, vagy fagyostelikutyagumi.ase
A hülyenevek segítenek emlékezni 2 hét múlva is, az ékezet nélküliséget pedig nem csak itt ajánlom, ha-
nem mindenhol máshol is, ha informatikai elnevezéseket adsz. A programok érzékenyek az ékezetekre,
vagyis nem tudnak velük mit kezdeni, köszönhetően az egyedi karakterkészletünknek, amelyekkel a burz-
suj világ nem számol, hiszen nem vagyunk komoly piac.
Egyszer órákat töltöttem azzal, hogy rájöjjek miért nem működik egy flash
animációm. A gyökérkönyvtár!!! ékezetes elnevezésű volt. Talán ez ma már nem okozna gondot, de jobb
a békesség!
Informatika = ékezet mérsékelten használandó.
www.webdesigntanfolyam.com

26. Ha már szeretnél velük garázdálkodni a Photoshopban akkor a letöltött .ase fájlokat dobáld a Photoshop
programod megfelelő mappájába
PresetsColor Swatches
pl. C:Program FilesAdobeAdobe Photoshop CS4PresetsColor Swatches
A programot elindítva pedig a
Color Swatches színes kockás táblácska jobboldali csücskiben
megbúvó nyilacskát megnyomván -
a Load Swatches paranccsal hozzáadjuk a jelenlegi táblához, a
Replace Swatches-el pedig kicseréljük a mostanit az újra.
Az eredeti állapot a Reset Swatchessel állítható vissza.
3. Feladat
A következő oldalon http://labs.ideeinc.com/multicolr/ színek alapján listázhatsz ki fotókat, képeket,
amiket a Flickr nevű képmegosztóra töltöttek fel az emberek a Creative Commons felhasználói licensz
alapján.
Ez röviden itt olvasható - http://www.flickr.com/creativecommons/
Szóval a feladat: keress képeket ezekhez a kifejezésekhez, fogalmakhoz,
mindegyikhez 2-2 db-ot
* tisztaság
* gazdagság
* természetesség
* varázslat
* hagyomány
* mértékletesség
* diszharmónia
Készíts róluk screenshotot!
Ezek ilyen többségében fejben gyakorlós, nézelődős, vagy egyszerű
feladatok - ennek ellenére kérlek vedd őket komolyan, mert az alapok nagyon fontosak!
Jó munkát kívánok!
www.webdesigntanfolyam.com