Köszönjük feliratkozását!

Hamarosan megkapja heti webáruházas tippjeit.

Gyakran tapasztaljuk, hogy a webáruház tervezésének folyamatában az egyik legkritikusabb pont a design. Amíg az információk egyeztetése, és a felületi tervezés folyik, addig meglehetősen absztrakt dolgokkal kell foglalkozni, viszont a látványtervezés során először a megrendelő egy olyan állapottal szembesül, ahol képet kap a leendő webáruháza kinézetéről. Itt pedig megjelennek azok a szubjektív, érzelmi faktorok, amelyeket a dizájn színei hordoznak magukban.

szinkor.jpg


Néha sok időt kell eltölteni azzal, hogy kialakuljon egy olyan állapot, ami a megrendelőnek és nekünk is “tetszik”: a látványtervet ugyanis a termékkör, a célcsoport, egy esetleges márkaarculat, a webáruház által sugallni akart érzelemvilág, szakmai konvenciók, és a megrendelő elképzelési figyelembevételével kell kialakítani. Ezen szempontok mindegyikének megfelelni nehéz feladat, az ügyféloldali, jól-rosszul konkretizált elgondolások és igények ugyanis gyakran teljesen ellentétesek azzal, amit a grafikus az első négy tényezőt figyelembe véve elkészít (ene). Ebben a cikkben azt akarom megmutatni, milyen szempontok szerint érdemes értékelni a designer által kialakított színvilágot, és milyen tényezőket kell figyelembe venni, mikor oldalunk színösszeállítását tervezgetjük.

A színek alkalmazásával kapcsolatos javaslatok

Az egyes színek rövid ismertetése előtt érdemes megnézni néhány általános tudnivalót azok használatával kapcsolatban.

A kevesebb mindig több: Soha ne használjunk oldalunk dizájnjában túl sok színt. A túl sok (kb. 4-nél több) szín használata nehezen áttekinthetővé teszi weboldalunk megjelenését.

Figyeljünk a hatásokra: Vannak színek, amelyek egymással párosítva harmóniát adnak (komplementer színek), s amelyeket együtt alkalmazva vibrálást, erős hatást váltanak ki (színpárok). A honlap szerkezeti, navigációs részeinél mindenképp érdemes inkább semleges vagy hideg, színekkel, komplementer színpárokkal dolgozni, ezekkel nagyon jól lehet a kiemelt oldalelemeket is kommunikálni az egyik szín túlsúlyával. A vibráló színpárokat a bannerek esetén lehet használni, ezekkel azonban érdemes csínján bánni: a túl sok harsány oldalelem összezavarja és elbizonytalanítja látogatóinkat... és a szemnek sem túl jó. (Megfelelő célcsoport esetén természetesen ettől el lehet térni, de ezt lehetőleg előzze meg egy piackutatás, és teszteljük a dizájn hatásait, nem lőttünk-e mellé.)

Csak óvatosan: A színek használatánál is vannak egy kialakult gyakorlat azzal kapcsolatban, hogy mely színek mutatnak jól egymással. Az én személyes véleményem az, hogy webáruházunk dizájnjának kialakításakor inkább ezeket kövessük, ezzel is támogatva a jó használhatóságot, a kísérletezést pedig hagyjuk meg a grafikusok portfólió oldalainak.

szinkor.jpg
Itt található a hideg/meleg színek, a komplementer színek és a színpárok értelmezése.

 

A következőkben megpróbálom összeszedni, hogy a leggyakrabban használt színek milyen lélektani hatással bírnak a nyugati kultúrkörben.

Semleges színek

Fekete
A markáns elegeancia színe. Viszont - mivel nagyon erős szín - vigyázni kell rá, hogy ne vigyük túlzásba, mert arroganciát is sugározhat, és kellemetlen lehet a szemnek, érdemes inkább másodlagos színként alkalmazni. A fekete háttérhez nem fehér, hanem leginkább a szürke valamely árnyalat használható szövegek esetén. Manapság leggyakrabban a szürke egy mélysötét árnyalataként jelenik meg.

nblack_resized.jpg

 

Szürke
A semlegesség, az alázatosság és a tisztelet színe, de érdemes kerülni, ha idősebbeket célzunk. Belőlük ugyanis könnyen az öregedés, a depresszió, a halál érzetét válthatja ki. Szintén inkább másodlagos, kiegészítő szín.

ngray_resized.jpg

 

Fehér
A lelki tisztaság, a biztonság színe, gyakorlatilag a leggyakrabban alkalmazott szín a webdesign területén (a legtöbb oldal háttere fehér). Nem véletlen a white-space kifejezés kialakulása is, egy oldalelemnek akkor tudunk igazán nagy hangsúlyt adni, ha kellő mértékű fehér (üres) terültete hagyunk körülötte, és ez is fehér háttéren a leghangsúlyosabb. Néhány keleti kúltúrkörben a gyász színe.

nwhite_resized.jpg

 

Barna
A barna a föld színe, megbízhatóságot, stabilitást jelöl, organikus, természetes szín. A barna szín az emberekben a bizalom, a barátságosság érzetét kelti. Sötét színben inkább kiegészítő színként szokták alkalmazi, de egy bézs árnyalat bátran lehet alapja bármilyen webáruháznak.

nbrown_resized.jpg

Hideg színek

Kék
Nem csoda, hogy a vállalati, és technológia fogyasztói piacot célzó cégek jelentős része a kék színt használja webes arculata gerinceként. A kék szín a megbízhatóság, a nyugalom, a profizmus színe, bár a különféle árnyalatai számos mellékjelentést hordozhatnak: a Crutchfield és a Walmart például egy harsányabb árnyalatot választottak amely nagyobb érzelmi hatást vált ki. A világos babakék szín pedig inkább az ártatlanság, a védtelenség érzetével bír, nem véletlenül alkalmazzák pl. bébitermékek esetén. A türkiz árnyalatok ezzel szemben inkább a természeteség, frissesség, egészség érzetével azonosíthatók.

nblue_resized.jpg

 

Zöld
A zöld szín az a természet, az egészség, a fiatalság, a szerencse és a pénz színe. A nyugati kultúrkörben gyakran alkalmazzák akcióra hívó elemek (pl. kosárba gomb) színezésére, vagy raktárkészlet kijelzésére, mivel egyértelmű pozitív jelentést hordoz, és cselekvésre serkent. A zöldnek is több árnyalata van, a sötétebb árnyalatok inkább koinzervatívabb érzelemvilággal bírnak. Akárhogy is, a zöld egy rendkívül széles körben alkalmazott szín, amely kiváló alapot adhat webáruházunk arculatának.

ngreen_resized.jpg

 

Lila
A lila a szellemiség, kreativitás, gazdagság és jólét színe, a hideg színek közül a “legerősebb”. Mivel a lila a titokzatosság érzetét is keltheti, ezért inkább kiegészítő színként szokták alkalmazni. Jelenleg igen divatos, ezért gyakran előfordul ruházati webáruházak esetén. Az árnyalat sötétedésével a kiváltott érzelmi hatás is egyenes arányban csökken.

npurple_resized.jpg

Meleg színek

Piros
Rendkívül erős szín, amelynek néhány kutatás szerint testi hatásai is lehetnek: a légzés erősödését, a vérnyomásemelkedést okozhat. Serkentő hatása van, és intenzív érzelmeket vált ki, amelyek a szerelemmel, a szexxel, a szenvedéllyel, és az ambícióval hozhatók kapcsolatba. Okosan alkalmazva nagyon jó alapszíne lehet egy webáruház arculatának.

nred_resized.jpg

 

Sárga
A sárga a nap színe, a ragyogó napsűtés, az optimizmus, és pár árnyalata a gazdagság színe (arany), de keltheti a gyengeség, a gyávaság érzetét. A sárga nagyon erős szín, amely fokozhatja a kreativitást, a kreatív gondolatokat, viszont nagy “mennyiségben” káros is lehet. Ezen kívül az emberi szemnek a sárga a legnehezebben feldolgozható szín, éppen ezért usability szempontból sem javasolt az, ha a látványterv fő színének választjuk. Ezzel szemben komplementer színként, akcióra hívó, figyelemkeltő elemeken alkalmazva nagyon jó hatást érhetünk el vele.

nyellow_resized.jpg

 

Rózsaszín
Az igaz szerelem, a kapcsolatok, a nőiesség színe, amely erős nyugtató hatással bír. De csak a megfelelő célcsoportban. Fő színként nagyon erős (mint minden meleg szín), ezért csak akkor alkalmazzuk, ha biztosak vagyunk benne, hogy az oldal látogatói pozitívan értékelik majd.

npink_resized.jpg

 

Narancssárga
A narancssárga az egyensúly, az energia, a lelkesedés színe, és ezeket az érzelmeket rendkívül intenzíven váltja ki. Magában hordozza a piros és a sárga szín előnyeit is: a piros szín érzelmi töltetét ötvözi a sárga szín nyugtató hatásával. Ez lehet az oka annak, hogy viszonylag sok weboldal dizájnja a narancssárga színre épül, de másodlagos színként alkalmazva is számos, profi példát találunk rá (pl. Amazon).

norange_resized.jpg

 

Ha a webáruházunk színeit megfelelően választjuk ki, azt tapasztaljuk, hogy a látogatóink tovább maradnak az oldalunkon és jobban konvertálnak. Ezt viszont csak úgy érhetjük el, ha a színek kiválasztását egy kutatás előzi meg, amely a célcsoportunkat vizsgálja: ha csak a szubjektív érzéseinkre hallgatunk, az könnyen tévútra vezethet.

Nagyon jó cikk. Köszönöm a jó tanácsokat!
Az én webáruházam színösszeállítá sáról mi a véleményetek?
www.shirley.hu
Nálam a fekete és az arany/bordó szín van jelen.

Üdv,
Attila
#
Shirley Bassey
Nagyon idegesítőek az oldaladon az animated gif-ek. Szeretnék megnézni egy részletet és közben mozog, változik a kép.
#
sanya
A cikkben nem találtam hivatkozást a felhasznált irodalomra, így gondolom a fentiek a szerző által végzett felmérésen alapuknak. Tudhatók ennek részletei? Fókuszcsoport bevonásával történt vagy pszichológiai vizsgálatok eredménye ez?
#
sanya
Annyi észrevétel, hogy természetesen a legtöbb weboldal háttere azon egyszerű okból fehér, hogy így érhető el a legjobb kontraszt arány kijelzőn.
Mindig szívesen olvasom a leveleid. Nagyon hasznos infókat kapok tőled.
A színekkel eddig csak érzésre dolgoztam, de ezek szerint nagyon nem lőttem mellé.
Kós Attila: A te esetedben lehet, hogy egy fokkal visszafogottabb színeket alkalmaznék, mivel a termékképeid nagyon, nagyon jók, azokat kellene "nyomni" talán.

sanya:
nem végeztünk a témában kutatásokat, a felhasznált irodalmak listája a következő:
pro-webs.net/.../...
www.colormatters.com/.../
www.v7n.com/.../
janacolor.hu/.../szinek.html

Pálinkás Miklós:
Köszönjük!
Valóban nem (rendkívül ízléses), bár a személyes véleményem, hogy ez a színvilág akkor igazán jó ennél e termékkörnél, ha inkább időseket célzol.
Köszönjök a bejegyzést, mivel ez a téma ritkán kerül
előtérbe, a fontossága elenére.
Érthető a színek hatása a felhasznállók érzelmeire,
de én azt is nehezen tudom eldönteni, hogy milyen
érzelmi hatást hatna pozitívan webáruházaunk
vásárlóira.

Üdv: Zsolt
Mi a barnát és a világosbarnát használtuk, és nálunk a legfontosabb a bizalom. Amúgy ösztönösen a világos barna árnyalatait használtuk, de jó itt olvasni racionális alapokra helyezve a színhasználatot . A mi webáruházunk ékszerekkel foglalkozik. Nézzétek meg ha van kedvetek, hogyan használtuk a színeket. www.aranyekszerek.com
www.aranyekszerek.com
Nagyon tetszik a cikk, meg hogy hazai példákkal is van illusztrálva!
Adtam is neki egy linket egy rövid bekezdés keretén belül a honlapunk optimalizálásos aloldalán a usability részben.
Úgy szeretnék találkozni azzal, aki kitalálta, hogy a rózsaszín:
"Az igaz szerelem, a kapcsolatok, a nőiesség színe, amely erős nyugtató hatással bír."!

Körülbelül négy dolog késztet azonnali távozásra bármilyen internetes helyről:

1. Rózsaszín háttér, nyolc év feletti nőneműeknek szóló tartalommal.
2. "Programozókék" háttér fehér és rikítósárga betűkkel, vagy sötétzöld háttér rikítózöld, sárga és piros betűkkel.
3. Világos háttér világos betűkkel.
4. Bármilyen háttér ezerféle színű betűkkel.

Ez a négy a weboldalak, webáruházak halála. Idegesítő, erőltetett.
Kapeller Anikó: egyetértek :D, bár a fentieket profi dizájner amúgy sem alkalmazza. A rózsaszínt nem én találtam ki de kiegészítő színként (pl. egy valentin napi bannerbe) simán alkalmaznám.
Kérjük írd be a képen látható kódot
Biztonsági kód Új kódot kérek
Szeretnék e-mail értesítést kapni az új hozzászólásokról!
Ha szeretnél további webáruházas tippeket, iratkozz fel heti értesítőnkre!
Van már webáruházad?