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.

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

Érdekessé tesznek

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 lehet akár az is a funkciójuk, hogy érdekessé tegyék a designt, így Téged is. Ehhez persze nem kell mindig előtérbe és a középpontba helyezni az erőteljes színeket.

Megkülönböztetnek a többiektől

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.

Egy erőteljes szín

Ezzel az erőteljes színnel egy hatásos hátteret is létrehozhatsz, mely maradandó nyomot hagy az emberekben, márpedig ez olyan fontos, mint a megkülönböztethetőség. De színes hátterekkel a weboldalad egyes szekcióit is kiemelheted.

Egy erős háttérszín egy weboldalon

Erősítik a márkád

Ha a weboldalad színeit sikerül összhangba hoznod a márka-színeiddel, akkor az egy erőteljesebb identitást eredményez számodra a weboldalad által. Ez nem azt jelenti persze, hogy mindig, mindenhol ugyanazt a színt kell használnod. Kiegészítheted más színekkel, melyek jól együttműködnek a fő színeddel, kiemelik, erőteljesebbé teszik azt.

Elmondhatsz velük egy történetet

Lehet, hogy meglepő, de a színek abban is segítenek, hogy elmondj egy történetet. Hiszen, ha egy oldaladon végig ugyanaz a szín dominál, akkor az keretbe helyezi a rajta található történetet. Ha viszont különböző színeket használsz az egyes szekciók esetében, akkor mindegyik egy különálló történetté válik.

Valamit kommunikálhatsz velük

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.

Mit üzennek a színeid a felhasználóknak?

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.

Narancssárga és zöld színek használata a weboldalon

A hideg színek

ezzel szemben 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.

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.

A színek hatása

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.

Milyen színeket használnak a legnagyobb márkák?

A színek nagyon sokat elmondanak egy cégről. Ráadásul a megfelelő szín választása nem csak a márka image-ére és könnyebb azonosíthatóságára van hatással, hanem közvetlenül befolyásolja az eladásokat.

Fontos tehát, hogy a megfelelő üzenetet küldd a célközönségednek a színeiddel is. Annál is inkább, mivel a márkád színei határozzák meg a weboldalad színeit is. Ha kihasználod a színek pszichológiáját, akkor azzal a cégeddel kapcsolatban elvárt érzéseket válthatod ki az emberekből. Ezért is választják ki tudatosan a nagy cégek az általuk használt színeket és árnyalatokat.

A Marketo vizsgálata szerint a top 100 márka 33 százaléka a kék színt használja, így ez a legnépszerűbb szín, aminek okaira hamarosan bővebben is kitérünk. Ugyanakkor a márkák 29 százaléka a piros színt használja, amivel már jóval óvatosabban kell bánni, de erről is lesz szó részletesen. A harmadik legnépszerűbb megoldás viszont a szürkeárnyalatok és a fekete használata, aminek megint csak megvannak a maga buktatói. Végül pedig a cégek 13 százaléka a sárgát, illetve arany színt használja.

Emellett a vizsgálatból az is kiderül, hogy a top 100 márka 95 százaléka mindössze egy vagy két színt használ. Ennek oka vélhetően az, hogy az egyszerűség miatt könnyebb következetesnek maradni a színhasználatnál.

A kék lett mára a legnépszerűbb szín a világon – de miért?

A kék egy olyan szín, aminek még neve sem volt az ókori görögöknél, mára a világ legkedveltebb és legtöbbet használt színévé vált, a legkiemelkedőbb a modern művészetben, de az interakciók tervezésénél és a közösségi appoknál is ez a kedvenc. Mi az oka ennek?

Erre a kérdésre próbálta megadni a választ a formfortought.com oldalán egy bejegyzésében Lauren Kelly. Egy tanulmány szerint 2015-re a kék lett a világ legnépszerűbb színe, és rendkívül elterjedté vált a médiában, miközben az ókori görögöknek még szavuk sem volt rá. Kérdés, hogy a kék szín terjedése vajon csak egy divathullám, vagy pedig valami komolyabb dolog áll mögötte?

Ha a művészeteket tekintjük, akkor egy elemzés alapján egyértelműen láthatjuk a kék szín népszerűségének növekedését. Martin Bellander elemzett több mint ezer festményt a színeik alapján.

A kék szín népszerűségének növekedése a művészetben

A kék szín népszerűségének növekedése a művészetben

A változás mögött több tényező is meghúzódhat, így az új anyagok megjelenése, a kék pigmentek olcsóbbá válása, az, hogy a művészet eltávolodott a portréfestészettől, de az is, hogy megváltozott a felhasználók preferenciája. A kék szín népszerűségének növekedése a művészetekben együtt járt azzal, hogy az appoknál, a hirdetéseknél és a nyomtatott designban is uralkodóvá vált. Ha megnézed a világ legsikeresebb közösségi alkalmazásait, akkor azt látod, hogy a legtöbb közülük kék: a Facebook, a Twitter, a Linkedin, a Tumblr, a Skype vagy a Behance.

A kéket gyakran azonosítják a nyitottsággal és a szabadsággal, olyan megnyugtató dolgokhoz kapcsolódik ez a szín az emberek fejében, mint az ég vagy az óceánok. Társítjuk hozzá a megbízhatóságot, a nyugalmat és az interakciót. Érdemes azt is megemlíteni, hogy az internet első éveiben a linkek, vagyis a kapcsolatok mind kék színben jelentek meg, így az emberek ezeket a kék jeleket keresték és ezekkel léptek interakcióba.

A kék szín népszerűsége világszerte

A kék szín népszerűsége világszerte

Ráadásul a kék az a szín, mely a legkevésbé érintett a színvakság által, vagyis az emberek legnagyobb része tisztán látja. Mark Zuckerberg is színvak, és ő is úgy magyarázta a Facebook kék színét, hogy ez a leggazdagabb szín a számára, hiszen a kék minden árnyalatát érzékeli. Ezzel szemben a piros vagy a zöld szín érzékelésével gondjai vannak a férfiak 7-10 százalékának, illetve a nők 0,4 százalékának.

A kék remek háttérszín is, mivel nyugalmat áraszt, ami azt jelenti, hogy az emberek jobban érzik magukat, amikor hosszabb ideig látják ezt a színt, ráadásul nem tolakodó és kevésbé fárasztja a szemet, mint más színek.

A kék pszichológiája kapcsán az is fontos, hogy az emberekben sokkal nagyobb a hajlandóság interakcióba lépni olyan dolgokkal és elköteleződni olyan dolgok által, melyek kék színűek. Ezt Zhu és Mehta állapította meg egy kutatásukban, ahol arra is felfigyeltek, hogy a kék növeli a kreativitást és a nyitottságot az interakciókban. Tökéletes szín tehát a közösségi appok és felhasználó felületek számára. Ugyanakkor olyan szempontból is kitűnő választás, amikor az emberek fogyasztói viselkedésére akarunk hatni, hiszen kékkel könnyen őket meggyőzni.

Mindezek miatt tehát nem valószínű, hogy a közeljövőben bealkonyul a kék színnek. De azt a következtetést is levonja a szerző, hogy ha valami olyasmit szeretnél tervezni, amit a legtöbb ember tisztán érzékel, nyitottan és pozitívan áll hozzá, és ami hatással van a fogyasztóként való viselkedésükre is, akkor a legjobb, amit tehetsz, ha kék színben gondolkodsz.

Néhány dolog, amit érdemes tudnod a piros színről

Amikor egy ember megszületik, akkor először csak fekete-fehérben látja a világot. Tulajdonképpen az első szín, amit látni fog: a piros. Ugyanez igaz azokra is, akiket agysérülés ér, és eleinte nem látják a színeket. A többi szín csak jóval később lesz érzéklehető számukra. A piros után a zöld, a sárga, majd a kék. A piros tehát egyike a három alapszínnek (piros, zöld, kék).

Az emberek számára a piros a legfontosabb szín, és egyetlen szín sem tud olyan erős érzelmi reakciót kiváltani belőlünk, mint a piros. A piros színnek a legnagyobb a hullámhossza (620-740 nanométer). Az ennél nagyobb hullámhosszt már nem látjuk, és az hőként, infravörösként érzékelhető. piros színű tárgyakat vizuálisan közelebbinek érezzük, mint amilyen távolságra vannak. A piros vonja elsőként magára tekintetet is, minden más szín közül. Ezért működik olyan hatékonyan megállító jelzésként is a jelzőlámpáknál.

A pszichológusok szerint a piros képes kiváltani a “harcolj vagy menekülj” reflexet az emberben. Ez az egyik legkorábbi evolúciós reakciónk, mely arra hivatott, hogy túléljük a veszélyes helyzeteket. Nem véletlen, hogy a pirost gyakran összekapcsoljuk a veszéllyel, a tűzzel, a vérrel, a haraggal. De persze az áldozattal, a szenvedéllyel és sok kultúrában a boldogsággal is.

Ezek olyan pszichológiai tények, ami mindannyiunkban rendkívül mélyen gyökereznek, és a webdesignereknek is figyelembe kell venni a tervezésnél. A pirossal könnyen ki lehet fejezni erős érzéseket, és ki is lehet vele váltani érzéseket, de fel is lehet vele hívni a figyelmet valamire. Nagyon sok múlik persze az árnyalaton is, hiszen egy sápadt piros inkább nőiességet és puhaságot jelezhet, vagy egy bíbor melegséget és kényelmet. A közepes árnyalatok boldogságot, szabadságot fejeznek ki, de persze vért, dühöt és szenvedélyt is. Látható, hogy elég sokoldalú színről van szó, és mindig a pontos árnyalattól függ, hogy elsősorban mit kommunikál.

Piros szín

Erőteljes hatása miatt mindenesetre elsődleges színként ritkán használjuk a webdesignban, ugyanakkor kiegészítő színként sokszor felbukkan a weboldalakon. A leggyakrabban a figyelem-felhívó képessége miatt alkalmazzák.

Ugyanakkor azt lehet mondani, hogy bátor döntés, amikor valaki a pirost kezdi használni a weboldalán, pont az árnyalatok nagyon eltérő érzelmi hatása miatt. Lehet hogy egy boldog, vibráló, szenvedélyes, inspiráló megjelenés lesz az eredmény, de lehet, hogy szomorú, agresszív és baljós hangulatot áraszt majd. Óvatosan kell tehát bánni vele.

Miért vigyázz a fekete szín használatával?

A fekete mindig is az egyik legvitatottabb szín volt a webdesignban. Sokan kedvelik, mások viszont erősen óva intenek a használatától. Amit a hatásáról tudni, hogy kifinomultságot, energiát, titokzatosságot, eleganciát, erőt és stílust sugall. És ezek mellett a fehérnek a tökéletes ellentéte. Ez pozitívum is lehet, hiszen erre gyakran szükség van a webdesignban.

A weboldalak egyik célja ugyanis is, hogy felkeltsék a figyelmet és valamivel kitűnjenek a többiek közül. A fekete tökéletesen alkalmas arra, hogy kiemeljen egy weboldalt, vagy azon bizonyos részeket. Például egy fehér háttér (vagy bármilyen más szín) esetében.

Érdemes tudni azonban, hogy a fekete a “legnehezebb” szín, és emiatt mást, más színnel már nehéz jobban kiemelni mellette. Ráadásul, ha a feketét háttérként alkalmazod, akkor minden kisebbnek látszik rajta, mint egy fehér háttéren. Ráadásul sokan a szokatlansága miatt megbízhatatlannak érzik, ami a cégről kialakult benyomásra is hatással lehet. Valamint az emberek számára kevésbé vonzó, mint más színek.

Sokan ugyanis úgy érzik, hogy a fekete lehangoló, pesszimista, szomorú és a negativitás színe. És ezt a hatást nem lehet befolyásolni, mert tudattalanul hat. Amikor a felhasználók megérkeznek egy weboldalra, arra számítanak, hogy az fehér lesz. És akkor érzik magukat biztonságban, a megszokott környezetükben, ha az a weboldal valóban fehér.

Egy másik nagy probléma fekete hátterek esetén: az olvashatóság romlása. Azért, mert ilyenkor nehezebb a szemünknek észlelni a színkülönbséget. Emiatt ne használd a feketét, ha túl sok a tartalmad, ne használj könnyű, vékony betűket, és vedd nagyobbra a szövegeket! Fontos az is, hogy sokkal több whitespace-t használj, mint fehér háttérnél tennéd. A használhatóságot is sokkal komolyabb tesztelned kell.

Ahol jól használhatod a feketét:

  • A kihangsúlyozott részek
  • A fejléc, lábléc, navigáció
  • Kommentek
  • Felugrók

A fejlécnél és a láblécnél nem is hat meglepően egy fekete háttér, ráadásul ezek a weboldal tartalmának keretét is adják, így segítséget jelenthetnek a megértésben. Ugyanez igaz a többi felsorolt elemre, melyek a fekete szín által jól megkülönböztethetők a fő tartalomtól. További részleteket találsz még a sötét tónusú weboldalak tervezéséről, ha tovább görgetsz lefelé.

Miért ne használj tiszta feketét sem a betűknél, sem a háttereknél?

De ha mindezek ellenére fekete színt használsz a weboldaladon, akkor arra mindenképpen figyelj, hogy milyen árnyalatot alkalmazol. A feketét mindig árnyalnod kell valamivel, tehát ne használj tiszta feketét, hanem a fő színeddel kevert feketét vagy egy szürkét. A természetben ugyanis soha nem találkozol a tiszta feketével (#000000), így ez zavaró a szemnek.

De nem csak ez a gond, hanem az is, hogy a tiszta fekete és a fehér párosítása – akár fekete betű látható fehér háttéren, akár fordítva – fárasztja a szemet. Ennek oka, hogy a fehér a 100 százalékos világosságú szín, míg a fekete 0 százalékos. Ez pedig nagyon nagy kontrasztot jelent, aminél nehezebbé válik a szem munkája. Így ez hosszú távon fárasztó a felhasználónak, és gyorsan felhagy a szövegeid olvasásával.

Ezért árnyald a feketét valamilyen színnel vagy akár egy sötétszürkét is használhatsz, ha betűről van szó. A szürkének is van persze sokféle árnyalata, és a túlságosan világos szürkék megint csak nem használhatók. A nagy kontraszt általánosságban is javítja az olvashatóságot, a túl nagy viszont megint rontja. Meg kell találnod tehát a megfelelő egyensúlyt a kontraszt esetében is.

Ugyanakkor persze vannak olyan felhasználók, akiknek gond lehet a látásával. Ők jobban tudják olvasni a nagy kontrasztú szövegeket.

Ha bizonytalan vagy abban, hogy mennyire fekete feketét használhatsz, vagy mekkora kontrasztot kell tartanod, akkor érdemes egy kontraszt-ellenőrző eszközzel megvizsgálni a designt. Ez megmutatja, hogy mikor túl alacsony az általad használt kontraszt a WCAG 2.0-ás szabvány szerint. Azt ugyanakkor nem jelzi, hogy mikor túl sok már a kontraszt. Ennek meghatározása a designerre vagy a tesztekre marad.

A színek hiánya is jelzés

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.

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.

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. Néhány tanács, amit érdemes betartani:

  1. Egy világos, telítettebb szín általában jobb megoldás. A világosabb, telítettebb színek biztonságosabb választásnak tekinthetők, mert kellemesebb a hatásuk a legtöbb felhasználó számára. Ezek olyan színek, melyekben kevés a fekete, de a fehér is. Ezektől a világos színektől a vizuális design szellősebb, könnyebb lesz, míg ha több feketét adnál hozzá, akkor nehezebbé, súlyosabbá válna. A világos színek barátságosabbak és hívogatóbbak az emberek számára, arra bátorítják őket, hogy kapcsolatba lépjenek veled, és némi időt töltsenek a weboldaladon a kedvező első benyomás hatására.
  2. Vizsgáld meg a színed sötét és világos háttér előtt is! Gyakori hiba a szín kiválasztásánál, hogy nem gondolják át a háttér és a környezet lehetséges változásait. Tehát, ha már van egy elképzelt színed, akkor ellenőrizd sötét és világos háttér előtt is, hogy még mindig úgy jelenik-e meg, ahogy azt szeretnéd. Még mindig a megfelelő üzenetet közvetíti? Az sokkal rosszabb, amikor későn derül ki, hogy a kiválasztott színed egy sötétebb képre vagy háttérre is rá kell tenni, és teljesen használhatatlanná válik.
  3. Fekete vagy fehér overlay használatával bővítsd a színpalettád! Félig áttetsző overlay használatával világosíthatod vagy sötétítheted a színeid. Erre elsősorban akkor lehet szükséged, amikor fokozni akarod a kontrasztot, de nem szeretnéd felborítani a következetes színhasználatot. Ilyenkor egy 50 százalékos áttetszőséggel érdemes kezdeni a próbálkozást.
  4. Figyelj a trendekre is! Amikor színt választasz, akkor azért nézz körül a weben, hogy milyen színeket használnak a korszerű weboldalak. Természetesen nem kell szolgai módon loholnod a divat után, azonban jó ha tisztában vagy azzal, milyen színek jellemzőek a korra, így a weboldalad sem néz ki idejétmúltnak.

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) egy-egy weboldalról 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 mondjuk 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.

Más webes szoftvereket is használhatsz azonban színpaletták generálására:

  • Coolors – segítségével automatikusan hozhatsz létre színsémákat. De ahhoz is segítséget nyújt, hogy színvakok szemszögéből lásd az egyes színeket, ami segíthet a megfelelő szín kiválasztásában.
  • Adobe Color CC – a színkerék segítségével jól átláthatod a lehetőségeket, és válthatsz a különböző színkombinációk között: analóg, monokróm, komplementer színek, árnyalatok kiválasztását teszi lehetővé.
  • Colormind – egy intelligens eszköz, melynek segítségével fotókból képezhetsz színpalettát.
  • Canva Color Palette Generator – ennek segítségével is képekből nyerhetsz ki színeket.

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.