Színek a weboldalon: hogyan válaszd ki, és miként kombináld őket?

színek
Tartalomjegyzék
Bővített tartalomjegyzék

A színek kiemelt fontosságúak a weboldalaknál, hiszen a színek révén is kommunikálunk a weboldalunk látogatóival. A színeket veszik észre először a felhasználók, amikor egy weboldalra tévednek, és ezek azonnal hatnak az érzelmeikre. Nagyon fontos tehát a gondos színválasztás, valamint a színek megfelelő kombinálása, amihez adunk néhány hasznos tanácsot, és bemutatjuk azt az 5 lépéses folyamatot, amivel magad is kiválaszthatod a legjobb színeket a weboldaladra.

Amikor a saját weboldalunk kialakításáról van szó, akkor minden lehetőséget meg kell ragadni, hogy azt kellően vonzóvá és jól használhatóvá tegyük a felhasználók számára. Az első benyomást másodpercek, tizedmásodpercek alatt alakítjuk ki nemcsak személyes kapcsolatainkban, hanem a weboldalak esetében is. A felhasználók pár másodperc alatt eldöntik, hogy egy weboldalon tovább nézelődnek-e vagy visszalépnek. Ezen rövid idő alatt pedig nem a szöveges tartalmak, hanem az általános benyomás számít, amit a színekkel és az elrendezéssel alakíthatunk elsősorban. De kezdjük azzal, hogy

Mire használhatod a színeket a weboldaladon?

Ha jól alkalmazod a színeket, akkor erőfeszítés nélkülivé teheted a felhasználók számára a weboldalad befogadását, ha viszont túlzásokba esel, hibásan használod a színeket, akkor csak zavart okozol. Amikor valamire fel akarod hívni a felhasználóid figyelmét, fel akarsz kelteni bennük bizonyos érzéseket, esetleg valamilyen cselekvésre akarod bírni őket, akkor azt a megfelelő színek párosításával is elérheted (több más webdesign-eszköz használata mellett). A színek erősítik vagy épp módosítják azt az üzenetet, amit az emberek felé közvetítesz. Ha rosszul választod meg a színeket, hibás színkombinációkat használsz, akkor a felhasználók nem is fognak tudomást venni a tartalmaidról vagy arról, hogy milyen akciót vársz el tőlük.

A színek érzéseket váltanak ki, ezért gondosan kell eljárni a kiválasztásuknál. Az nem elegendő ok egy szín használatára a weboldaladon, hogy egy szín neked nagyon tetszik. A színek kiválasztásánál figyelembe kell venned a terméked vagy szolgáltatásod jellegét, azt hogy milyen stílusú weboldalt szeretnél létrehozni, de a közönség igényeinek figyelembe vétele is legalább ennyire fontos, hiszen alkalmazkodnod kell hozzájuk a színekkel.

Abban a korban, amikor a weboldalak egyre jobban hasonlítanak egymáshoz, a színeknek – mint webdesign-eszköznek – nagyon nagy a jelentőségük. Nem csak annyi a szerepük, hogy feltűnő vagy épp szép legyen a weboldalad, hanem funkciójuk van. Ezért is érdemes egy kicsit átgondolni, hogy mikor, miért, hogyan, mire használjunk színeket.

FELHÍVJÁK A FIGYELMET ARRA, AMIT SZERETNÉL KIEMELNI

A weboldalak kiindulási állapotukban jellemzően szürkeárnyalatosak: a háttér fehér, a szöveg fekete. A színeket más design-eszközök mellett arra használhatod, hogy valamire – amit ki szeretnél emelni – felhívd a figyelmet. Ha az egész weboldal színes, akkor ez nem megy. Ezért használd a színeket elsősorban olyan fontos elemeknél, mint a gombok, címek, linkek.

Vibrant

KIFEJEZHETED AZ EGYÉNISÉGED

Amikor már biztos vagy benne, hogy a színek felhívják a felhasználók figyelmét az általad fontosnak tartott elemekre, akkor ezen túl “egy nagy vallomás” megtételére is felhasználhatsz színeket. Erre a célra egy egyedi, szokatlan színt érdemes kiválasztani, mely ugyanakkor jelentéssel bír a weboldalara, cégedre nézve, és el is mond rólad valamit.

Irányítják a felhasználóidat

Mint azt már az első pontban is említettük, a színek vezetik a felhasználók tekintetét, azzal, hogy magukra irányítják a figyelmet. Ezt azonban finomabban is képesek megtenni annál, mint ami az első példában szerepel. Vagyis nem kell feltétlenül élénk színeket használnod ahhoz, hogy irányítsd az emberek figyelmét az oldalon.

Színekkel is tudunk kommunikálni

A színek meghatározzák, hogy mennyire bíznak meg az olvasók az oldalunkban, a cégünkben, bennünk, milyen tulajdonságokat társítanak hozzánk. A színek azonnali, szinte ösztönös reakciókat váltanak ki az emberekben. Ugyanakkor azért beszélünk “szinte ösztönösről”, mert a színek kultúrafüggőek is. Az európai kultúrkörben az alábbi alakult ki:

  • a kék stabilitást, hűséget és nyugalmat áraszt,
  • a sárga blodogságot, optimizmust, fiatalságot,
  • a zöld sikert, reményt, a gyógyulást fejezi ki,
  • a fekete erőt, professzionalizmust és a rejtélyt jelent,
  • a fehér a tisztaságot, ártatlanságot,
  • a piros a szenvedélyt, a szexualitást és az intenzitást,
  • a bíbor a méltóságot, a spiritualitást, és a luxust,
  • a narancssárga energiát, vidámságot, melegséget sugároz.

Egy jó weboldal esetében tehát úgy kell alkalmaznunk a színeket, hogy az illeszkedjen ahhoz az elváráshoz amilyen képet ki akarunk alakítani magunkról.

A hiányukkal is kommunikálhatsz

Mindezek mellett persze nincs minden weboldalnak szüksége színekre, ilyenre is akad példa bőven. A szürkeárnyalatos színsémákkal is el lehet érni a kívánt hatásokat, ha jól alkalmazzuk. Pont azáltal tudnak hatni ezek a weboldalak, hogy nincsenek rajtuk színek. A sötét tónusú és a fekete-fehér weboldalakkal bejegyzésünk végén külön is foglalkozunk.

A hideg, a meleg és a semleges színek

Először ejtsünk szót az egyes színek jelentéséről, ebbe azonban nem mélyedünk bele, csak a főbb csoportokat ismertetjük.

A meleg színek

A meleg színek élénkítő hatásúak, dinamizmust közvetítenek, melegséget, kifelé fordulást, intenzív örömöt mutatnak. Amennyiben túlzásba visszük a használatukat, akkor viszont már agresszivitást vagy versengést sugározhatnak. Különösen hasznosak akkor, amikor a felhasználók figyelmét a weboldal egy számunkra fontosnak tartott pontja felé szeretnénk irányítani, hiszen ezen színekkel hatékonyan odavonzhatjuk a tekintetüket. A meleg színek közé tartozik a sárga, a narancssárga, a barna vagy a piros.

A hideg színek

Ezzel szemben a hideg színek nyugodtságot, passzivitást, csendességet és megfelelő használat esetén hozzáértést, megfontoltságot fejezhetnek ki. Emellett ezek a színek mintegy tágítják a tereket a weboldalakon. A nyugodtság érzetének megteremtésével elérhetjük azt, hogy a felhasználók tovább maradjanak a weboldalunkon. Ugyanakkor a hideg színeket sokszor kombinálják meleg színekkel is, hogy kiegyensúlyozzák a hatásukat. A hideg színek közé tartozik a lila, a kék vagy a zöld.

Semleges színek

A semleges színek közé a fehér, a fekete és a szürke tartozik, melyek szintén nyugalmat sugároznak, azonban emellett eleganciát, kifinomultságot és komolyságot is. Ugyanakkor, ha nem egészítjük ki őket más színekkel, akkor unalmassá válnak. A fehér mellé jól illenek a különböző meleg színek, melyekkel együtt rendezettséget, eleganciát és harmóniát fejeznek ki.

Sajnos nagyon sok esetben a különböző színek használata rosszul történik, így csak összezavarják, elbizonytalanítják a látogatót. A túl sok színt használó weboldalak esetében megfigyelhető, hogy azokon a felhasználók kevesebb időt töltenek. Ennek az az oka, hogy kellemetlenül érinti őket a szinte szemet fájdító színkavalkád. A titok tehát abban rejlik, hogy ismerni kell az egyes színek jelentését, hogy a megfelelő használat segítségével tudjunk pozitív érzéseket kelteni, a felhasználók tudatalattijára hatva pozitív benyomásokat kialakítani.

De nézzük, hogy

Hogyan válaszd ki a megfelelő színeket a weboldaladra?

Habár egy weboldalon az általános webdesign-tanácsok szerint csupán néhány színt szabad használni, ennek a pár színnek a kiválasztása sem olyan egyszerű. Aki még nem gyakorlott a webdesignban, könnyen el tud veszni a színek áradatában.

1. Az alapszín kiválasztása

Kezdjük azzal, hogyan válaszd ki az alapszínt, melyből kiindulhatsz. A nehézséget itt az okozza, hogy a rendelkezésedre álló több millió színből kell kiválasztanod a számodra leginkább megfelelőt, ami aztán az alapja lesz az egész weboldaladnak, a cégednek. Minden más szín ebből az egy színből lesz eredeztethető, úgyhogy fontos, hogy jól válassz.

A kezdő szín kiválasztásához nem elegendő csak rábökni egy színre a szinte végtelen szélességű színpalettán, vagy azt választani, amelyik tetszik neked, hanem meg is kell tudnod indokolni a választásod. Túlgondolni persze nem érdemes a dolgot, csak a színválasztás mögött álljon ott a megfelelő racionális ok.

  • Egyrészt válogass azon színek közül, melyek már a rendelkezésedre állnak! Azaz, ha például van már egy logód, akkor kezdő színnek egy abban szereplő szín megfelelő lehet.
  • Kerüld a konkurencia színeit! Ha a versenytársaidnak már vannak erős, bevett márka-színei, akkor azokat ne használd fel a színsémádban!
  • Vedd figyelembe a célközönséged! Gondold át, hogy kik fogják használni a weboldalad, és milyen érzéseket akarsz kiváltani belőlük.
  • Ne ragadj le a sztereotípiáknál! Ha például fiatal lányok fogják használni a weboldalad, akkor sem kell feltétlenül rózsaszínben pompáznia. A klisék elkerülésével a hitelességed is erősítheted.
  • Ha ezek után sem tudod, mi legyen a kezdőszín, akkor írd le azokat a szavakat, melyek a cégedhez kapcsolhatók, mert ezek kiadhatnak valami színt. De azt is megteheted, hogy átnézed, hogy az egyes színeknek mi a jelentése, mit vált ki a felhasználókban, és ez alapján választod ki a leginkább megfelelőt.

A kezdő színnek egy olyan egyszerű színnek kell lennie, mint a piros, a zöld, a kék, a sárga, vagy a rózsaszín. A következő lépés

2. a megfelelő árnyalat kiválasztása.

Itt azonban ehelyett, hogy a Photoshopban ráböknél a kiválasztott szín valamely árnyalatára, inkább már elkészült művek alapján határozd meg a legjobb színt. Ehhez felhasználhatod a Dribbble vagy a Designspiration oldalát. Mindkettőnél a menüben a “Colors” linkre kattintva a színek széles választékával találkozol.

A Dribbble oldala

A Dribbble oldala

Láthatóak az árnyalatok is, melyek közül kiválaszthatod a Neked leginkább megfelelőt. Ha inkább friss, energikus hatást akarsz kelteni, akkor válassz a világosabb színek közül, ha komolyabb benyomásra vágysz, akkor a sötétebb tónusúak közül. Az egyes színekre való kattintás után felbukkanó alkotásoknál láthatod a színeket, melyekből összeállnak, de valamilyen color picker alkalmazással (például a Colorzillával) is meghatározhatod a neked tetsző szín pontos kódját.

3. Hozd létre a színpalettád!

Miután megvan a kiválasztott színed HEX értéke, a következő lépés, hogy ebből egy színpalettát képezz. Ez nem olyan nagy méretű vagy bonyolult, mint elsőre gondolod. A legtöbb kész színpalettán sokkal több színt láthatsz, mint amire szükséged van, így aztán nem is könnyű a választás. De ha 5-6 színt jelenítenél meg a weboldaladon, akkor abból egy káosz lenne. Tulajdonképpen csak 2 színre van szükséged:

  • az alapszínedre, amit már kiválasztottál,
  • és egy másik, hangsúlyos színre.

Ezek mellé már legfeljebb csak olyan semleges színek kerülnek, mint

  • a fehér,
  • a sötétszürke, és esetleg
  • egy világosszürke.

Ha ezzel az 5 színnel tervezed meg a weboldalad, akkor sokkal jobb eredményt kapsz, mint ha mindenféle színeket, mindenféle elvek alapján kombinálnál.

Most tehát a hangsúlyos színed kiválasztására lesz szükség, melyet csak egészen kicsi arányban fogsz használni a weboldaladon, például a call to action gomboknál, és egyéb kiemelendő elemeknél. A kiválasztáshoz nyisd meg a Paletton oldalát, ahol írd be az alapszíned HEX kódját (1. lépés). Ezután rákattintasz az “add complementary” gombra (2. lépés). Ha az eredményt megfelelőnek találod, akkor nincs is más dolgod. Ha viszont nem teszik a kapott szín, akkor a 3. lépésnél jelzett ikonokra kattintva más kiegészítő színekhez juthatsz.

A Paletton használata színválasztáshoz

A Paletton használata színválasztáshoz

A Paletton természetesen nem véletlenszerűen dobálja ki neked a színeket, neked azonban nem az elméleti háttér megértése a feladatod, mindössze annyi, hogy kimásold a kiegészítő szín színkódját.

4. Jöhetnek a semleges szürkék

Megkaptad a két fontos színt, ami mellé már csak semleges színeket kell választanod a kötelező fehér mellett. A legtöbb esetben egy világosabb és egy sötétebb szürke tökéletesen elegendő és megfelelően használható a weboldalaknál. A sötétebbet a szövegeknél használhatod, míg a világosabbat olyan esetekben, amikor el kell térned a fehértől, alapvetően a háttereknél.

A szürkéknél ismét bevetheted a korábban már említett Dribbble-t és a Designspirationt, de ha gyakorlott vagy a Photoshop használatában, akkor Erica Schoonmaker technikájával az alapszínnel jól harmonizáló szürkéket is ki tudsz választani. Ehhez nem kell mást tenni, mint két négyzetet létrehozni a Photoshopban, melyek közül az egyik a #424242, míg a másik a #fafafa színkódot kapja. Ezután a színekre rá kell húzni egy layert, ami az alapszíned színkódját kapja. Ezután az átlátszóságot 5 és 40 százalék között változtatva lehet beállítani. Így kapsz két újabb szín, melynek nagyban harmonizálnak az alapszíneddel, mégis semleges színek. Ha ez túl bonyolult lenne, akkor nyugodtan maradhatsz az eredeti szürkéknél is. Ezzel kész is a színpalettád, most már csak alkalmaznod kell a kapott színeket a weboldaladon.

5. Használd a kapott színeket!

Érdemes először fekete-fehérben összerakni a weboldalad, mert így jobban megmutatkoznak a hibák, hiányosságok a használatában. Erre a működő fekete-fehér vázra húzhatod fel a színeket. Az alapszíned használhatod a nagyobb részeken, míg a kontrasztos kiegészítő színt a kisebb elemeknél, például gomboknál, esetleg ikonoknál. Minél kevesebbet használod az utóbbi színt, annál kiemelkedőbb lesz.

A sötétszürkédet a szövegeknél veted be, de kerülhet belőle a logókba és az ikonokba is, melyeknél nem árt, ha a szürke mellett a színeid közül is válogatsz, mert erősíti a hatást. A fehér és a világosszürke fogja adni a hátteret. Utóbbinak nem feltétlenül kell megjelennie a designban, de ha jól használod, akkor előnyös lehet az eredményre nézve.

Elképzelhető, hogy később további színekre is szükséged lehet, de a felsorolt eszközökkel ezeket is könnyedén hozzáteheted a színpalettádhoz, és bármikor használatba veheted őket. Ezzel a lényeg már meg is van, de azért pillantsunk bele a részletekbe!

Miért fontos a megfelelő színkontraszt? És hogyan alakítsd ki?

Nem csak maguk a színek, hanem az általuk kialakított kontraszt is hatékony eszköz a webdesignban.

  • A kontraszt által tudunk megkülönböztetni vizuális elemeket egy oldalon, ennek segítségével különülnek el a háttértől.
  • A kontraszt segítségével hívhatod fel valamire a figyelmet.
  • A kontraszttal tesszük világossá a felhasználók számára, hogy adott esetben két vagy több különböző dologról van szó.
  • De a megfelelő színkontraszt azért is rendkívül fontos, mert hozzájárul egy szöveg olvashatóságának javításához.

Amikor egy szövegről van szó, akkor a kontraszt segítségével határozhatjuk meg, hogy mi az, ami kiemelt fontosságú benne. A fontosabb részeket kontrasztos színek használatával jobban kiemelhetjük a háttérből. Ugyanakkor, ha az a célod, hogy bizonyos információkat elrejts a felhasználók elől, akkor olyan színeket kell alkalmaznod, melyek szinte beleolvadnak a háttérbe!

Digital Agency Birmingham

KISEBB ERŐFESZÍTÉS, JOBB FELHASZNÁLÓI ÉLMÉNY a kontraszt révén

A megfelelő kontraszt alkalmazása révén a felhasználók is sokkal hatékonyabban képesek befogadni egy weboldalt, kisebb erőfeszítést jelent számukra megtalálni az őket érdeklő információkat. Ezáltal jelentősen javul a felhasználói élmény. Az igényesen kialakított színkontrasztokat használó weboldalak barátságosnak és frissnek tűnnek, mivel mérséklik az interakcióhoz szükséges erőfeszítést. A felhasználók ezáltal időt és energiát takarítanak meg.

Ez azért is fontos, mert mint tudjuk: a felhasználók csak átfutják a weboldalakat, és nem betűről betűre átolvassák annak tartalmát. Gyorsan rápillantanak egy weboldalra, és azon akad meg a szemük először, amit Te kiemelsz számukra. Felfigyelnek bizonyos betűkre, formákra és képekre. Erős kontrasztot használva meghatározhatod az útjukat a weboldalon, és a fontos elemeket könnyen észrevehetővé teheted.

HOGYAN HASZNÁLD A SZÍNKONTRASZTOT?

Ha valamely elemet ki akarsz emelni a weboldaladon, akkor használj erős kontrasztot, például világos színeket egy sötét háttéren. A kontraszt azonban nem csak sötét és világos párosítását jelenti, hiszen vannak természetesen kontrasztos színek.

A kontrasztos színek kiválasztása azonban attól is függ, hogy hol használod őket. Például a Coca-Cola esetében a fizikai tárgyon, egy kólásdobozon remekül működik a piros szín háttérként. Ugyancsak használható nyomtatott hirdetéseknél vagy tévéreklámokban. De mi lenne akkor, ha a Coca-Cola weboldalának a háttere lenne piros?

A piros szín weboldalon csak akkor működne együtt a fehérrel, ha a fehér egy szövegdoboz lenne a piroson, és a szövegdobozba feketék lennének a betűk. Ezáltal még el is tudnák olvasni az emberek a szöveget. Egy fekete szöveget a piros háttéren viszont rendkívül nehéz lenne olvasni. De ugyanez igaz a zöld és piros vagy a piros és kék párosítására.

A színkontraszt remek eszköz arra, hogy kiemeljük a CTA-nkat a weboldalon, amihez nem is kellenek brutálisan erős és elütő színek. Annyi is elég, mint a fenti példán, ahol a szín és a whitespace egyből a weboldal közepére vezeti a tekintetet.

A kontraszt mértékének meghatározása nem egyszerű feladat. Ha túlzásba esel, akkor már nem kiemelsz valamit, hanem csak megzavarod az embereket, és nehezebben fogják felismerni a lényeget. Hiba lehet, ha túl sokszor használod a színkontrasztot, de az is előfordulhat, hogy túlságosan erős kontrasztot alakítasz ki.

Fontos, hogy milyen színeket választasz, miként párosítod őket. Figyelembe kell venned a színek jelentését, mely annak függvényében változhat, hogy kik is alkotják a célközönségedet. Nem árt megvizsgálni, hogy felhasználóid számára milyen jelentéssel bírnak egyes színek, és csak ezután dönthetsz a kiválasztásuk mellett.

Azt is figyelembe kellene venned, hogy a felhasználók egy jelentős része rosszul látja a színeket. Az emberek 4,5 százaléka esetében merül ez fel problémaként, ami elsőre talán nem tűnik soknak, de az adat alapján csak Magyarországon több mint 400 ezer emberről van szó. A nagyobb része egyébként férfi, mert a férfiaknak 8 százalékának van gondja a színekkel.

A leggyakoribb a piros-zöld színvakság. Ez azt jelenti, hogy a zöldet és a pirost nem zöldnek és pirosnak látják, hanem valami más színként. Ez még inkább beszűkíti a lehetőségeid, hiszen ha zöld a háttered vagy a betűszíned, akkor a felhasználóid egy része nem látja azt rendesen, vagy ahogy Te azt elképzeled. Szöveg esetén például nehezen tudják elolvasni a szavakat. Hogy mennyire az függ az általad választott árnyalattól és a színvakság súlyosságától.

A színek és a kontraszt tehát segítenek átadni az üzeneteidet a felhasználóknak már azelőtt, hogy egyáltalán tisztában lennének az ilyen irányú szándékaiddal. A designerek számára a színek és a kontraszt fontos kommunikációs eszközt jelentenek, melyet azonban ésszerűen kell alkalmazni, különben nem lesz hatékony a kommunikáció.

Milyen színeket kerülj a weboldaladon?

Néhány tanács azzal kapcsolatban is, hogy melyek azok a színek, színpárosítások, melyek eszedbe se jussanak, amikor a weboldalad színeit tervezgeted!

NEONSZÍNEK

A neonszínek élénkek, erősek, megtöltik élettel a weboldalad, de sajnos fárasztják a szemet és így a felhasználókat is. A neonszíneket nehéz olvasni, sötét és világos háttérrel való párosításuk is gondot okozhat. Túlságosan hangsúlyosak, elterelik az emberek figyelmét a fő üzenetről.

Ami még elfogadható, ha visszaveszel a neonszínek erejéből, így egy sötétebb, visszafogottabb megjelenést kapsz, esetleg csak kisebb méretű elemeknél használod őket.

VIBRÁLÓ SZÍNPÁROK

A vibrálás annak az eredménye, hogy két erősen telített színt párosítasz. Ilyenkor a színek szinte mozognak a kijelzőn, ami nyilvánvalóan csak zavarja a felhasználókat. A kezdetben talán izgalmas hatást egy idő után túlságosan agresszívnek érzik az emberek, a szemüket pedig fárasztja. Ezért nem célszerű ilyen vibráló hatásra törekedni, kivéve talán akkor, ha egy reklámnak fel kell hívnia magára a figyelmet.

Vibráló hatást azzal érhetsz el, ha erősen telítettek a színek, komplementer színekről van szó, egymástól 180 fokra találhatók a színkörön, illetve ha szürkeárnyalatúvá változtatod őket, akkor nagyon kicsi lesz a két szín közötti kontraszt. Egy klasszikus példa a piros és a zöld párosa.

Ha mindenképpen vibráló színpárokat akarsz használni, akkor legalább válaszd el őket egymástól egy semleges színnel.

VILÁGOS SZÍN A VILÁGOS SZÍNEN

Az ilyen párosításokat nagyon nehéz olvasni. Nagyon gyakran fordul elő olyankor, amikor egy fehér szöveg egy fotóra kerül, és azon belelóg a világos részekbe. Ilyenkor a betűk már szinte nem is láthatók.

Ha nálad is előfordul ez a hiba, akkor mindenképpen át kell gondolnod a designt. A legegyszerűbb megoldás, ha választasz egy másik háttérképet, ahol ez nem okoz gondot. Ha nincs ilyen képed, akkor helyezd a szöveget egy színes dobozba, és így kerüljön a háttérképre.

SZIVÁRVÁNY

A szivárvány mindenféle színében pompázó weboldalak nem működnek. Csak gondolj arra, hogy hány színekkel kapcsolatos szabályt szegnek meg. A felhasználók figyelmét ugyan magukkal ragadják, de amint rájönnek, hogy a tartalom dekódolhatatlan a színek miatt, ott fogják hagyni.

Ha mégis sokféle színt akarsz használni, akkor a kártyaalapú design mellett teheted ezt meg, mert a színek ezeknél mindig egy-egy elemhez kapcsolódnak. Ez nagyobb rugalmasságot enged a színek használatánál, ugyanakkor a rendezettség érzetét kelti.

TISZTA FEKETE

Ami a nyomtatott designban jól használható, az a webdesingban nem feltétlenül működik. Ilyen a teljesen fekete szín (#000000) használata. A valóságban ilyen fekete nem létezik, csak különféle árnyalatok. A feketéid ezért mindig tartalmazzanak más színeket is, így egy sokkal jobb eredményt kapsz. Minél inkább a szürke felé mozdul a feketéd, annál könnyebb lesz befogadni. Olyan színnel próbáld árnyalni a feketét, mely valamiképpen kapcsolódik a márkádhoz, és a feketére mindig úgy gondolj, hogy a többi színnel összhangban kell lenni.

Hogyan használj élénk színeket a weboldaladon?

A wedesignerek általában akkor használnak élénk színeket egy weboldalon vagy egy applikációban, amikor fel akarják hívni a fontos elemekre a felhasználók figyelmét, esetleg könnyen megjegyezhetővé akarják tenni a weboldalt számukra. Hiszen különbözni kell ahhoz, hogy az emberek felfigyeljenek és emlékezzenek rád. Itt most nem arról van szó, hogy egy-egy call to action (CTA) gombnál élénk színt használsz, hanem arról, amikor az egész weboldaladat ezek a színek határozzák meg.

Egyetlen élénk szín használata

Az egyik, és egyben legnépszerűbb megoldás, amikor egyetlen élénk színnel töltöd ki a weboldaladat, illetve ennek különféle árnyalatait és tónusait is beveted. Az ilyen színpaletták vizuálisan rendkívül erősek, különösen, ha sikerül egy figyelemfelkeltő betűtípussal kombinálni. Mindenképpen belevésődnek az emberek emlékezetébe, ha egy ilyen oldallal találkoznak.

Ha kiválasztottad a megfelelő színt, akkor amellett már csak feketét vagy fehéret használj kiegészítő színként, mert így kevésbé megterhelő és könnyebben befogadható az emberek számára kisméretű kijelzőn a látvány.

Egyetlen élénk szín használata (sydneystockholm.com.au/)

Egyetlen élénk szín használata (sydneystockholm.com.au/)

Két élénk szín használata (duotone)

A technika korábban a nyomtatásban volt népszerű, azonban online is elterjedté vált az utóbbi években. Vizuálisan mindenképpen kiemelkedő megoldás, és viszonylag könnyen elkészíthető Photoshop vagy más képszerkesztő használatával. Előnye, hogy nem csak nagy kijelzőkön, hanem mobilokon is jól mutat a duotone megjelenés.

A két élénk szín kombinációját a domináns kép elkészítésénél érdemes használni. Ehhez válassz ki egy jó minőségű fotót, melyen tisztán és világosan kivehető annak tárgya. Ha túl sok dolog látható egy fotón, akkor ezzel a megoldással értelmezhetetlenné válhat a kép.

ket-szin-hasznalata

Ezután válaszd ki a színeket, melyek jól visszaadják a kép hangulatát. Emlékezz arra, hogy a különböző színek, különböző érzelmeket képesek kiválatani. Mindehhez egyébként nem is muszáj módosítani az eredeti képet a weboldaladnál, ha a Colorfilter.css-t használod a CSS kódban.

Overlay használata

Ebben az esetben egy meglévő képre vagy videóra egész egyszerűn ráhúzol egy félig átlátszó színt. Ha egy erőteljes és telített színt használsz – mondjuk egy material design színt -, akkor modern megjelenést kapsz eredményül. Ezzel a megoldással erősítheted a meglévő fotód hatását, illetve befolyásolhatod az általa kiváltott érzelmet.

szin-overlay

A overlayt bevetheted egy kártya alapú webdesignnál az egyes kártyákon, a videótartalmaknál, vagy a call to action kihangsúlyozásához. Amikor egyetlen színt használsz overlayként, akkor mindenképpen járj el gondoan a telítettség és az átlátszóság meghatározásánál. Egy kevésbé átlátszó és telített szín képes teljesen magára vonni a figyelmet, azaz elterelni magáról a fotóról, míg a világosabb színek esetén nagyobb hangsúly kerül a képre.

Hogyan tervezz sötét tónusú weboldalakat?

Nem könnyű feladat azokat a weboldalakat jól megtervezni, melyeken a sötét színek dominálnak. Ha biztonságos megoldásra törekszünk, akkor inkább világos témát használunk, többek között a jobb olvashatóság érekében. De általában a céges logók sem szoktak működni sötét weboldalakon. Ennek ellenére, ha egy igazán egyedi weboldalt szeretnénk, érdemes megkockáztatni a sötét színek használatát.

Ha ügyesen csináljuk, akkor ezáltal egy komoly kreativitást, eleganciát, kifinomultságot és professzionalizmus sugalló weboldalt kapunk. Ehhez azonban kell a szakértelem, a jártasság és a tapasztalat a weboldaltervezésben, különben nagyon félre lehet menni. Ráadásul nem is alkalmazható minden típusú weboldal esetében. Fotózással, művészettel, divattal foglalkozó oldalak számára remek választás lehet, sőt akadnak webáruházak is, melyek használják, ugyanakkor például egy sok szöveget és semmi egyebet nem tartalmazó blog számára inkább egy világos weboldal a jobb megoldás.

sötét-tónusú-weboldal-05

Figyelembe kell azt is venni, hogy vajon illeszkedik-e a márkánkhoz a sötét tónus. Ha úgy érezzük, hogy passzol a brand image-éhez, témájához, képes azt erősíteni a hangulatával, akkor meg lehet kockáztatni. Ehhez azonban először elemezni kell a márkát, végig kell gondolni, hogy milyen kifejezésekkel írnánk körül, illetve mi is a termék vagy szolgáltatás, amit kínál, és hogy a logó illeszkedik-e a sötét színpalettához.

Mikor működik jól egy sötét felhasználói felület?

A designerek gyakran olyan esetekben választják a sötét színeket egy weboldalnál, amikor drámai hatást akarnak elérni, érzelmeket szeretnének kiváltani. Általában a szórakoztatáshoz kapcsolódó felületek – konzolok, tévé és mozialkalmazások (például a Netflix) – is inkább sötét témákat használnak. Nem véletlenül. Ennek oka, hogy ezeket többnyire este szoktuk használni, jellemzően mérsékelten megvilágított szobában. A lényeg itt az, hogy a színpalettának igazodnia kell az eszközhöz, a tartalomhoz, a tevékenységhez és a környezethez is. Ezt kell elsősorban szem előtt tartani.

A sötét téma használatának előnyei:

  • Erős, drámai hatás, feltűnő látvány.
  • Elegancia, luxus, presztízs kifejezése.
  • Titokzatosság.
  • A felhasználó figyelmének jobb irányítása.
  • A vizuális hierarchia és az információs architektúra támogatása.

Ugyanakkor olyan felületen nem szabad használni sötét témát, ahol sok a szöveg. Csak olyan esetekben, ahol elszórva, kisebb egységekben található szöveges információ, és a hangsúly elsősorban a vizualitáson van. A szövegeknél ekkor is erős kontrasztot kell kialakítani: vagy tiszta fehéret vagy más élénk színt használva a betűknél.

A legnagyobb gond: az olvashatóság romlása

Sokszor merül fel a sötét tónusú weboldalakkal szemben, hogy olvashatósági, átfuthatósági szempontból nem a legjobb megoldást jelentik. A fekete alapon világos betűk olvasása meg tudja terhelni a felhasználók szemét, ennek következében sok időt nem is fognak eltölteni tartalmaink befogadásával.

Másfelől viszont az is igaz, hogy a világító kijelzők hosszas nézése szintén fárasztja a szemet. A megerőltetés miatt felléphet fejfájás, nyakfájdalom, homályos látás, vagy égő, szúró érzés a szemben. Nem véletlen, hogy sok felület éppen emiatt inkább sötét témát használ, mivel az csökkenti a szem terhelését.

Ugyanakkor szövegolvasás tekintetében a sötét téma ellene megy a konvencióknak, és itt ne csak az online környezetre gondoljunk, hanem a nyomtatásra is. Ugyanakkor fontos megjegyezni, hogy a rossz olvashatóságért nem csak a sötét háttér lehet felelős. Az olvashatóságért ugyanis jelentős mértékben felel a tipográfia és az elemek megfelelő elrendezése is, akár sötét, akár világos tónusú weboldalról van szó. Ha sikerül kiválasztani a legjobban olvasható betűtípust, a megfelelő méretet és a színt, valamint kellő figyelmet fordítunk a negatív tér kialakítására és a sortávolságra, akkor egész jó eredményt érhetünk el.

Jó választás lehet, ha a címeknél – vagyis a nagyobb betűméreteknél – valamilyen sans serif betűtípust használunk, amit a kenyérszövegeknél egy serif betűtípussal kombinálunk. (A betűtípusok megfelelő választásához és kombinálásához itt egy kis segítség.) Emellett alapvetően érdemes nagyobb betűméretet használni, mint világos témáknál, és a white space-t, azaz a negatív teret is alapvetően nagyobbra kell venni. Ebbe beletartozik az is, hogy az egyes betűk és a sorok között is esetleg nagyobb távolságot tartunk, ahogy a bekezdések is lehetnek rövidebbek és jobban elválasztottak, mint világos témáknál. A lényeg azonban az, hogy kevés legyen a szöveges tartalom, mert egyébként zsúfoltnak hat majd a weboldal, és könnyen felborul a képek és a szöveg egyensúlya.

sötét-tónusú-weboldal-02

Tehát mikor elfogadható egy sötét téma használata?

  • Amikor a márka színei ezt lehetővé teszik.
  • Amikor letisztult, minimalista a design, és csak néhány tartalmi típus található az oldalon.
  • Amikor az megfelelően illeszkedik a használathoz.
  • Ha csökkenteni kell a szem terhelését.

Mikor nem működik egy sötét felhasználói felület?

Egy sötét téma tehát nem működik sok szövegnél, sok adatnál, illetve akkor sem, amikor túlságosan széles a különféle tartalmi típusok skálája (szöveg, kép, videó, táblázatok, mezők, stb.). A legnagyobb kihívást a megfelelő kontraszt kialakítása jelenti. Ez hatással van az olvashatóságra, ami viszont befolyásolja a használhatóságot, így pedig meghatározza a felhasználói élményt.

Míg fehér háttéren valamennyi szín működőképes, sötét háttér esetében nagymértékben szűkül a használható színek köre. Emiatt nem szabad olyan esetekben sötét témát használni, amikor formok, ikonok, grafikák jelennek meg az oldalon szövegek és esetleg táblázatok mellett. Adott esetben alkalmazható sötét és világos témák keveréke is, ahol bizonyos elemek fehér háttéren jelennek meg, míg mások sötét háttéren.

Mikor ne használj tehát sötét témát?

  • Amikor sok a szöveg az oldalon.
  • Amikor vegyes a tartalom.
  • Ha sok az űrlap, a táblázat vagy egyéb funkciók jelennek meg.
  • Amikor a designhoz sok szín használata szükséges.

HOGYAN HASZNÁLJUNK SZÍNEKET a sötét tónusú weboldalon?

Egy sötét témánál érdemes csínján bánni a színekkel, mivel nagymértékű alkalmazásuk esetén zsúfolttá, zűrzavarossá teszik a weboldalt. Nem is lehet mindenféle színsémát rápakolni egy sötét tónusú alapra, alaposan végig kell gondolni, hogy milyen színeket tudunk alkalmazni. Érdemes egyébként a színek számát kettőben maximálni, és úgy használni őket, hogy vezessék a látogató tekintetét. A sötét tónusú weboldalaknak éppen az az előnye a világos témákkal szemben, hogy még inkább rá tudjuk irányítani a felhasználók figyelmét egy-egy általunk fontosnak vélt dologra.

Egyszerűség a színeknél: monokróm és fekete-fehér weboldalak

Sokszor esik szó a weboldalak egyszerűsítéséről megoldásként a különféle design és felhasználói élmény problémákra. Ebbe rendszerint beleértjük a színsémák egyszerűsítését, hogy 2-3 színre érdemes redukálni a színek számát. De nem muszáj itt megállni: az is lehetséges, hogy csak egyetlen színt használj a weboldaladon, sőt csak fekete és fehéret.

Hogyan használj monokróm színeket a weboldaladon?

Habár egyetlen szín használata elsőre ijesztőnek tűnhet, azonban, ha jól csinálod, akkor az eredmény lenyűgöző és egyedi lesz. Egy monokróm weboldal mindig eredeti és megjegyezhető, ráadásul nagyon rugalmas megoldás. De vannak további előnyei is:

  • Leegyszerűsíti a tervezést, hiszen nem kell a különféle színek kiválasztásával és kombinálásával foglalkozni.
  • Harmonikus és egységes lesz a weboldal megjelenése.
  • Leegyszerűsíti a weboldalt: rendezettebb és tisztább lesz a megjelenés.
  • A szín nem vonja magára a figyelmet, hagyja a tartalmat érvényesülni.
  • A sokszor nem megfelelő erős és élénk színek helyett professzionálisabb hatást érhetsz el a monokróm palettán használt kevésbé harsány színekkel.

Monokróm kialakításnál elsősorban az árnyalatokat használhatod design-eszközként.

  • Alapszín: ez a fő színed, amit kiválasztasz a színpalettáról. Ez a kezdőpont.
  • Színfokozat: ez a 12 tiszta szín egyike a színkeréken.
  • Tónus: adhatsz a színhez feketét, így sötétebb árnyalatot kapsz, vagy fehéret, amivel világosabbat.
  • Szürkével keverve a színt, annak intenzitásán változtathatsz.
  • Praktikus okokból legtöbbször a fekete és a fehér még megjelenik a szín és annak árnyalatai mellett a monokróm weboldalakon.

Néhány tanács a használathoz

Egyszerűsíts!

Egyetlen színnek is rendkívül sok árnyalata és intenzitása van. Ez azonban nem azt jelenti, hogy mindegyik variációt használnod kellene. Annyit alkalmazz csak, amennyivel el tudod különíteni az egyes designelemeket. Például a három színből álló kialakítás nagyon elterjedt, melybe megjelenik egy szövegszín, egy háttér és egy további szín a grafikáknak.

Néha elég lehet a szürke is

Ha a fekete és a fehér melltett a szürke különböző árnyalatait veted be, akkor egy egészen kifinomult és mininális kialakítású designt kaphatsz.

Nem kell szigorúan ragaszkodni a monokróm megjelenéshez

Olykor előfordul, hogy egy szigorúan monokróm kialakítás nem praktikus. Ilyenkor a jobb hatékonyság érdekében megszegheted a szabályokat, miközben a megjelenésed továbbra is a monokróm jellegzetességével bír. Például

  • használhatsz feketét és fehért a színeden kívül.
  • Kiegészíted egy hangsúlyos színnel a monokróm palettádat, ha fel akarod hívni a figyelmet egy call to actionre.
  • Vagy használhatsz színeket ugyanazon színcsaládból, mely bár nem monokróm, mégis ugyanazt a hatást érheted el vele a vizuális harmóniát és a rendezettséget tekintve.

Fekete-fehér: amikor minden színt túl soknak érzünk

Sokszor érzünk mindenféle színt túlságosan is harsánynak, működésképtelennek. Ilyenkor nyúlhatunk a fekete és a fehér használatához, melyektől azonban sokan félnek, mondván: elrettenti a felhasználókat, akik aztán nem is mélyednek el az oldal tartalmában.

Ugyanakkor a fekete vagy a fehér hátterek erős kontrasztot biztosítanak a rajtuk lévő szövegnek, a felhasználót ráadásul semmilyen szín nem zavarja meg a szöveg vagy a képek befogadásában, teljes mértékben a tartalomra tud koncentrálni.

siberia

Habár fekete-fehér weboldalaknál a designer vállát már nem nyomja a megfelelő színséma kiválasztásának terhe, ugyanakkor nehézségként felmerül, hogy most már színek nélkül kell megoldani a weboldal jó használhatóságát. A színek már nincsenek segítségére design-eszközként, úgyhogy valamivel kompenzálnia kell a hiányukat.

Ez pedig komoly erőfeszítést igényelhet a részéről, be kell vetnie a legjobb képességeit, hogy működő és látványos oldalt tudjon összerakni. Ilyenkor szükségesek a kreatív megoldások, és a designer minden tudása. Viszont az akadályok átugrálása kétségtelenül hozzájárul a fejlődéséhez is.

12 szabály színválasztáshoz

Ezen összefoglaló szabályok betartásával könnyebb kiválasztani a megfelelő színeket a weboldaladra, és amelyek figyelembe vételével harmonikus színsémákat tudsz kialakítani:

  1. Olyan színeket válassz, melyek kiváltják az általad elvárt érzelmeket a felhasználóidból!
  2. Olyan színeket használj, melyek jellemzőek az iparágadra és összhangban vannak a felhasználóid elvárásaival, ugyanakkor meg is ragadják őket!
  3. Alkalmazd a 60-30-10-es szabályt! Ami azt mondja ki, hogy a kiválasztott három színt 60, 30 és 10 százalékos arányban érdemes használni.
  4. Próbálj meg pozitív pszichológiai válaszokat előidézni a felhasználóidnál a kiválasztott színekkel!
  5. Legyél megkülönböztethető, vagyis használj egyedi színeket, melyek csak a Te márkádra, weboldaladra jellemzőek, így egy sajátos karaktert adnak neki!
  6. Készíts egy márka-personát, azaz színekkel egészítsd ki a márkád személyiségét!
  7. Ne félj az eltérő színsémák használatától a különböző oldalakon!
  8. Vezesd a felhasználóid tekintetét élénk színekkel!
  9. A színkombinációdban legyenek olyan kontrasztos színek is, melyeket a gomboknál, linkeknél, CTA-knál tudsz használni úgy, hogy azok felhívják magukra a figyelmet.
  10. Kerüld a rövid életű szín-trendeket!
  11. Figyelj a konkurencia színhasználatára is, és attól eltérő, de releváns színeket alkalmazz!
  12. Használj kompatibilis színeket, vagyis figyelj arra, hogy azok minden eszközön jól mutassanak, jól használhatók legyenek!

És végül egy infografika az egyes színek érzelmi, pszichológiai hatásáról a megfelelő választáshoz:

A színek pszichológiája

Címkék: ,

A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.