Színek a weboldalon: hogyan válaszd ki, és miként kombináld őket? (Frissítve, 2022.11.21.)

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.  (Frissítés, 2022.11.21. – Egy új fejezettel bővítettünk: A színek pszichológiája)

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.

É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. 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.

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?

Frissítés, 2022.11.21.:

A színek pszichológiája

A színek hatását tekintve sok tévhit és leegyszerűsítés kering, sok mindent hallhatsz, ezek azonban nem minden helyzetben állják meg a helyüket. Ilyen például az, hogy „használj piros színű CTA-t, mert az megkétszerezi a konverzióid számát”. Vagy, ha „rossz” színt választasz, akkor az csődbe is viheti a cégedet.

Sokan sok mindent állítanak a színekről, ezek az állítások azonban gyakran nem kellően megalapozottak, csak mendemondákon, hiedelmeken alapulnak, nem kutatásokon. De miért ennyire ellenmondásos a színek megítélése? És miért nem legyinthetsz az egészre, és mehetsz mégsem a saját fejed után a színek kiválasztásánál?

Mert a színek hatással vannak az emberekre, ha tudatosan alkalmazod őket, akkor jobb weboldalt vagy hirdetéseket hozhatsz össze. Önmagában azonban, ha felsoroljuk a színek hatását, az nem sokat mond.

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 széles körben elfogadott, hogy

• a kék stabilitást, hűséget és nyugalmat áraszt,
• a sárga boldogsá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 úgy kell alkalmaznunk a színeket, hogy az illeszkedjen ahhoz az elváráshoz amilyen képet ki akarunk alakítani magunkról. A színek megfelelő kiválasztásával felkelthetjük az emberek figyelmét, érzelmi reakciókat válthatunk ki, befolyásolhatjuk a döntéseket és a viselkedést.

Az előbbi felsorolás ugyanakkor nem tudományos alapokon nyugszik, egy erős leegyszerűsítés, mely arról szól, hogy használd ezt meg ezt a színt, és máris a megfelelő irányba tudod manipulálni az embereket. Ami olykor igaz, más helyzetekben viszont nem.

A tudomány azonban ennél árnyaltabb képet közvetít, és ez alapján azt lehet kijelenteni, hogy a színeknek van némi hatása. Ha rápillantasz a vizsgálatokra, akkor ezen a területen azt fogod találni, hogy az egyik kutatás szerint valamely szín kivált egy adott hatást, egy másik kutatás szerint nem. És minden egyes vizsgálatra találhatsz egy ellentétes eredményt hozót.

Ráadásul a tudósok az első színpszichológiával kapcsolatos kutatásokat illetően meglehetősen szkeptikusak, mondván: azok nem felelnek meg a mai követelményeknek.

Érdemes egyébként a biológiai magyarázatokból kiindulni, ha színekről van szó. Onnan, hogy az emberek miként értelmezik azokat a színeket, melyek a többi ember arcán megjelennek. Ezt ugyanis ugyanúgy olvassuk tudat alatt, ahogy a testbeszédet. Az embereken megjelenő színeket dekódoljuk, és ezekből következtetünk az érzéseikre, a szexuális érdeklődésükre, az egészségi állapotukra, a szándékaikra, stb.

Ha például valaki elpirul, akkor azt egyrészt nyíltabbnak, őszintébbnek látjuk, ha pedig nem, akkor akár hazugnak. Ugyanez a pirosság az arcon egy erőszakos szituációban már egész más jelentéssel bír, de megint más a jelentése, ha valakinek az egészségi állapotáról van szó, esetleg egy romantikus helyzetről.

Mindezek alapján tehát azt mondhatjuk, hogy a színek jelentése kontextustól is függ, ezért is nem lehet egyszerű szabályokat kapcsolni egy-egy színhez. A tudomány pedig nem könnyíti meg a helyzetet, inkább csak bonyolítja, és ha nincsenek egyszerű válaszok, akkor a neten kialakulnak ilyenek, így aztán sok a téves elképzelés, az általánosítás a színekkel kapcsolatban.

Mindenesetre nézzük meg, hogy a konszenzus, most mit állít a színekkel kapcsolatban:

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

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

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. 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 működik.

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.

Mit tud a szürke szín?

Amikor a minimalizmus 2015-ben elkezdett hódítani a webdesignban, az magával hozta színek visszafogottságát, illetve két szín dominancáját: a fehérét és a szürkéét. Miközben eddig arról beszéltünk, hogy a különböző színek milyen érzelmi hatást váltanak ki, addig itt vannak a semleges színek, például a szürke, mely sokkal finomabb, mélyebb szinten hat a felhasználóra.

Használat háttérként

Ha van egy széttöredezett tartalmad, például egy kártya-alapú designnál, akkor a szürke színű háttér egy elég erős támogatást jelent, mely segít felhívni a figyelmet a fontos tartalmi elemekre. Egy szürke háttér szinte észrevétlenül van jelen a weboldalakon, ugyanakkor képes arra, hogy a tartalmi részeket kiemelje.

Űrlapoknál és mezőknél

A különböző beviteli mezők megtervezése trükkös részei a webdesignnak. Az olyan weboldalak, melyek sok mezőt tartalmaznak, nehezen áttekinthetők, és kicsi az esély arra, hogy ezek a mezők kitöltésre kerülnek. A szürke szín azonban egyrészt segít kiemelni az egyébként unalmas beviteli mezőket, másrészt egységekre tagolhatók a különböző mezők, így könnyebbé válik a befogadásuk. Az alábbi képen jól látható, hogy milyen mértékben javítható egy űrlap designja a szürkeárnyalatok megfelelő alkalmazása által:

Javítja az olvashatóságot

A tiszta fekete – mint azt korábban már jeleztük – fárasztja a szemet, hiszen a tiszta fehér és a tiszta fekete között túl erős a kontraszt, ami nehezebbé teszi a szem számára az olvasást. Ezzel szemben, ha szürke betűkkel írunk egy szöveget fehér háttérre, akkor 58 százalékkal javul annak olvashatósága. Arra persze figyelni kell, hogy okosan válaszd ki a megfelelő szürkeárnyalatot, mivel a világos szürke a túl kicsit kontraszt miatt szintén gondot okoz a szemnek.

Hagyja érvényesülni a többi színt

A szürke a semlegessége miatt nem nyomja el a színeket, hanem hagyja őket kibontakozni. Fontos, hogy mivel a szürkének sokféle árnyalata van (sötéttől a világosig), minden színnek képes együttműködni. Vagyis, ha azt szeretnéd, hogy a weboldaladnak valamely szín adjon határozott karaktert, de nem akarsz harsány lenni és túlzásokba esni, akkor helyezd azt kis mennyiségben egy szürke alapra.

A különböző szín-trendek tehát jönnek és mennek, azonban a szürke mindig marad. Hiszen ez egy olyan szín, mely maximálisan rugalmas használatot tesz lehetővé, és szinte minden designnál alkalmazható különböző mértékben.

Frissítés, 2021.12.21.:

Tudod, melyik a „legkattintékonyabb” szín?

Van egy szín, mely a Shutterstock adatai alapján a többi színnél sokkal inkább képes aktivitásra ösztönözni az embereket. Hogy ez miért, mikor fontos? Például a CTA-knál, ha konverziókat remélsz a weboldaladon.

A Shutterstock minden évben kiadja a színtrendekről szóló jelentését, mely az adott időszak legnépszerűbb színeit szokta bemutatni a letöltések alapján. A 2021 végén napvilágot látott jelentésében ugyanakkor azt is meghatározta az adatai alapján, hogy mely szín teljesít a legjobban a médiában, vagyis melyik szín hozza a legnagyobb átkattintási arányt és a legtöbb konverziót a marketing és hirdetési kampányoknál.

Fontos megjegyezni, hogy ez a szín, nem csak a 2021-es évben teljesített a legjobban, ugyanis több év digitális hirdetés termését vizsgálta át a júliusban alapított Shutterstock.AI, hogy megtalálja a „legkattintékonyabb” színsémát. A győztes pedig: a zöld. Illetve annak minden árnyalata.

Az adatok azt mutatták, hogy a zöld árnyalatai domináltak az átkattintásoknál és a konverzióknál – írta a Shutterstock. Vagyis, ha nagyon fontos számodra a konverzió, akkor fontold meg a zöld valamely árnyalatának használatát a CTA-gombjaidnál!

Hogyan befolyásolja a színhasználatot, hogy milyen korosztálynak készül a weboldalad?

Amennyiben a weboldaladnak van egy specifikus célközönsége, és ez a célközönség jellemzően valamilyen életkorú – tehát nem ölel fel minden korcsoportot a gyerekektől az idősekig -, akkor a színválasztásnál érdemes tekintettel lenni az adott korcsoport szín-preferenciáira.

A DesignMantic vizsgálata szerint a tizenéves korosztály (vagyis a 19 évesnél fiatalabbak) a nagy-kontrasztú színekhez, a sötétebb tónusokhoz és az élénk árnyalatokhoz vonzódnak. Körükben a fiúk a sötétszürkét, a farmer-kéket és a fehéret kedvelik, a lányok inkább a feketét, a pirosat és a narancssárgát.

A fiatal felnőtteknél, vagyis a 20-30 éves korosztályban már változik a helyzet: ők a világosabb tónusokhoz vonzódnak. A férfiak a világoskéket, az ezüstöt és a sötétbarnát kedvelik, míg a nők a homok-aranyat, a cseresznyepirost és a padlizsánlilát.

Mivel itt az árnyalatok is fontosak, ezért érdemes az infografikát is tanulmányozni:

Courtesy of: Designmantic.com

Az is látható, hogy ahogy öregszünk, úgy tolódik el a színspektrum a világosabb színek irányába. A férfiak 30 és 40 éves kor között az oxford kéket, egy világosabb kéket és a világosszürkét kedvelik, míg a nők a sötétebb magentát, a smaragdzöldet és a világoslilát.

A középkorú férfiak 40 és 55 év között a feketét, a ködös szürkét és a füstös zöldeskéket szeretik, míg a nők a barackszínt, a fenyőzöldet és a sötétlilát. 55 felett a férfiaknál megjelennek a bézs árnyalatok és a világoskék, míg a nőknél egy világosabb lime, a halvány rózsaszín, és egy fehér árnyalat.

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

A színek kiválasztásának folyamata:

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. az árnyalat kiválasztása

Ahelyett, 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.

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 sokszor 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é pedig elegendőek lehetnek az olyan semleges színek, mint

• a fehér vagy a fekete,
• 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 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ínek!

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 színeidnél a 60-30-10-es szabályt!

Ha ez előbbiek alapján megvannak a színeid, akkor is é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 aztán fel a színeket.

Az alapszíned használhatod a nagyobb részeken, míg a kontrasztos hangsúlyos 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. Ha gondban vagy az arányokkal, akkor alkalmazd a 60-30-10-es szabályt, ami azt mondja, hogy

• 60 százalékban az elsődleges színedet használd
• 30 százalékban a másodlagos, kiegészítő színed
• 10 százalékban pedig a hangsúlyos színed

Ezek az arányok a valós életből származnak, azonban a digitális termékeknél is megállják a helyüket. A 60-30-10-es arány az egyensúly érzését kelti, és elősegíti azt, hogy a tekintet az egyik CTA területtől a másikig mozduljon, vezetve a felhasználót a felületen. Ezen arány kellemes a szemnek, így könnyebben befogadhatóvá válik a felület teljes kompozíciója. Alkalmazásával elkerülheted azt, hogy a weboldalad vagy alkalmazásod nyomasztóan színessé váljon.

Ez a gyakorlatban így néz ki:

De az elsődleges és másodlagos színt fel is cserélheted az arányokat betartva, csak a hangsúlyos színed aránya nem változzon!

A sötétszürkédet emellett 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!

Milyen egyéb lehetőségek vannak színkombinációkra?

Amiről eddig szó volt a legegyszerűbb és legbiztosabb választás egy fő és egy kontrasztos, kiegészítő szín használatával. Ilyen mondjuk egy kék-narancssárga kombináció, amivel nem lehet melléfogni. E mellett azonban más megoldások vannak.

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

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

A monokróm színpaletta – amely mostanában elég népszerű – csak egy fő színt és annak árnyalatait használja, valamint semleges színeket. Hiányzik tehát a kontrasztos, kiegészítő szín. Ez a megoldás maximális harmóniát és természetességet eredményez. A monokróm oldalak figyelemfelkeltőek és megjegyezhetőek a felhasználó számára, hiszen egy színnel kommunikálnak, ami beleég az emberek agyába.

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: nem kell a különféle színek kiválasztásával és kombinálásával foglalkozni.
• Leegyszerűsíti a weboldalt: rendezettebb és tisztább, harmonikus és egységes lesz a weboldal megjelenése.
• 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.

Frissítés, 2021.08.18.:

Hogyan hozz létre monokróm színpalettát a weboldaladhoz?

Monokróm színpalettával elég könnyű harmonikus, kiegyensúlyozott webdesignt kialakítani. Ehhez a fent felsorolt eszközökkel rajzolhatod meg az árnyalatokat. A dolog nem túl bonyolult, ezért a kezdő designerek előszeretettel használják, de azért elmondjuk lépésről-lépésre, hogyan hozhatsz össze egy monokróm színpalettát a weboldaladhoz.

1. Válassz egy színt!

Első lépésként válassz ki egy színt, amelynek megfelelőnek találod az üzenetét, az érzelmi töltetét, vagy csak ezt használod a már meglévő logódban. A Webshark esetében ez a szín a #563069.

2. Hozz létre ebből tíz másolatot!

Most tedd 10-szer a kijelzőre a kiválasztott színedet!

3. Változtasd meg a fényerősséget!

Az alapszínünk HEX-ben tehát #563069. Ha ezt áttesszük HSB-be, akkor 280, 54%, 41%, illetve egyszerűbben: 280 54 41 lesz. Az utolsó érték a fényerősség, amit változtatni tudunk. Mivel 10 négyzetet rajzoltunk fel, így tízes lépésekben, tehát 1-től 91-ig. Ha ezt megtesszük, így fog kinézni a színpalettánk:

#020103, #170d1c, #2c1936, #41244f, #563069, #6b3c82, #80489c, #9453b5, #a95fcf, #be6be8

Mint látható, világosodik a színünk.

4. Válassz ki ebből 3-4 színt!

Végül utolsó lépésként válassz ki ebből néhány színt: egy sötétebbet, egy világosabbat és egy még világosabbat. Például így, de alkalmazhatsz közöttük kisebb vagy nagyobb kontrasztot, céltól függően.

Hogyan alkalmazd ezeket a színeket?

Ha megvan a három színed, akkor nagyon elterjed a webdesignban a 60-30-10-es szabály alkalmazása, vagyis, hogy a fő árnyalatod teszi ki a design 60 százalékát, a másodlagos színed 30 százalékot foglal el, míg a kontrasztos szín 10 százalékot. Nem kell pontosan betartani, a lényeg inkább az, hogy legyen egy háttérszíned és ahhoz képest egy kontrasztos színed:

Néhány további tanács:

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 minimá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.

Frissítés, 2021.08.31.:

Hogyan használj analóg színeket a weboldaladon?

Analóg színek esetében úgynevezett szomszédos színekről van szó, amikor a színkeréken nem túl távol elhelyezkedő plusz színek jelennek meg a kiválasztott fő szín mellett. A legegyszerűbben úgy értheted meg az analóg színek lényegét, ha például a korábban említett Paletton alkalmazásban a második, „Adjacent” lehetőségre kattintasz. Ekkor kapsz még két szín a kiválasztott színed mellett, illetve az „add complementary”-ra kattintva megkapod a kontrasztos színt is. Ugyanakkor vannak más, kézi megoldások is, mindjárt mutatjuk hogyan is lehetséges.

Az analóg színek esetében alapvetően arról van szó, hogy van egy alapszíned, mely középen helyezkedik el a másik két színhez képest, melyek tartalmazzák részben az alapszínt is. Az analóg színek gyakran jelennek meg a természetben, harmonikusak, kellemesnek és megnyugtatónak hatnak, jól passzolnak egymáshoz, így jól lehet őket használni a webdesignban is.

Az analóg színek mindig elegánsnak is tisztának látszanak. Nincs feszültség közöttük. Az analóg színek között alapvetően nincs kontraszt, ezért kontrasztos színt a legegyszerűbben úgy lehet két analóg szín mellé tenni, hogy ha például az analóg színeid a meleg színek közé sorolhatók, akkor egy mellettük lévő hideg színt választasz. Ilyenkor van egy domináns színed, egy kiegészítő színed és egy kontrasztos színed, természetesen a fekete, a fehér vagy a szürkék mellett.

Ha nem a Palettonnal, hanem manuálisan akarsz létrehozni egy analóg színpalettát, akkor azt úgy teheted meg, hogy első lépésként kiválasztod az alapszíned. A Webshark esetében ez a #563069:

A következő lépésként ezt helyezd el ötször a felületre, majd a HEX kódot alakítsd át HSB-re (Hues, Saturation, Brightness), az így kapott színkódnál az első (H) értéket kell változtatni 30-as lépésekben.

A Webshark alapszíne 280, 54, 41, vagyis lesz belőle 220, 54, 41; 250, 54, 41; 310, 54, 41 és 340, 54, 41. (Változtathatsz azonban a telítettségen és a fényerősségen is, ha kontrasztosabb színeket szeretnél kapni.) Az eredmény így néz ki:

Ezen öt színből bármely egymás mellett lévő hármat kiválaszthatod, kapsz egy analóg színpalettát.

Frissítés, 2021.09.16.:

Hogyan használj triád színeket a weboldaladon?

A triád színek esetében a színek a színkeréken egy egyenlő szárú háromszöget rajzolnak ki, ha összekötöd őket, vagy így is ábrázolható:

A három szín között elég nagy a kontraszt, így van egy vibráló hatása, ha mind a hármat alkalmazod a weboldalon. Ha a triád elvek alapján szervezed a weboldalad vagy alkalmazásod színeit, akkor egy nagyon életteli, vidám felhasználói felületet kapsz eredményül. A Burger King vagy a Firefox hasonló triádot használ a logójában:

Elsősorban az a jellemző egy triád színsémára, hogy ha azonos mértékben használnánk a benne lévő három színt, akkor egyik szín sem tudna uralkodni a másikon, mindegyiknek azonos lenne a súlya. De mivel a triád színséma meleg színei nagyon intenzívek, ezért kellemetlen érzést is kelthetnek, egyforma arányú megjelenés mellett.

Ráadásul a triád színek még akkor is erőteljes hatásúak, ha pasztell, telítetlen színeket használsz. Ezen erőteljes hatás miatt a designereknek nagyon óvatosan kell kezelniük őket, oda kell figyelni az egyensúly kialakítására, hogy a szándékolt hatást elérhessék. Ezt úgy tudják megtenni, hogy hagyják az egyik színt dominálni, a másik kettő pedig másodlagos, illetve kontrasztos színként jelenik meg.

Hogyan hozz létre triád színsémát?

Ha a Palettont használod, akkor csak rá kell kattintani a triád opcióra, miután felvitted a fő színedet:

Ugyanakkor manuálisan összehozhatsz egy triád színsémát. Ehhez először határozd meg a fő színedet, ami a Webshark esetében továbbra is a #563069, ami HSB-ben kifejezve 280, 54, 41. Ezt háromszor felviszed a felületre, akkor ezt kapod:

Ezt követően megváltoztatod a színárnyalat értékét, vagyis a H-t a HSB-ből: először hozzáadsz 120-at, majd kivonsz belőle 120-at. Az így kapott színek: 40 (#695630) és 160 (#306956). Ez így fog kinézni:

A kapott színeknél aztán változtathatod a többi paramétert is, ha nem megfelelő a kontraszt. Tehát például ebben az esetben világosabbá teheted valamelyik színt, hiszen elég sötét az alapszín, így sokkal kiemelkedőbb lesz a kontrasztos színed is:

A használatnál már csak arra figyelj, hogy a fő színt használd a legnagyobb arányban, a többi színt ennél mindenképpen kisebb arányban.

Frissítés, 2021.09.24.:

Hogyan használj tetrád színsémát a weboldaladon?

Ez a négyszínű színséma, mely a legveszélyesebb, legagresszívebb színséma, ahol a színek egyenlő távolságra vannak egymástól, és ahogy a triádnál, itt sincs alapértelmezetten domináns szín. Hatása hasonló is a triádhoz, vagyis lesz egy vibráló és erős hatású palettád, amit elég nehéz jól kezelni. A Google és a Microsoft logójánál láthatod, hogy miről is van szó:

A tetrád színséma egy kettős komplementer séma, tehát két komplementer színpárt használ, mely mindig vibráló, színes, és kicsit ijesztő lehet amiatt, hogy feszültség van a színek között. Ugyanakkor széles teret kínál a variációkra, és ha az egyik színt dominánsá teszed, akkor jó lehet a hatása. Enélkül nehéz harmóniát elérni a weboldalon és kiegyensúlyozatlannak hat a design. Emellett pedig figyelned kell a meleg és a hideg színek egyensúlyára is.

A létrehozásához használhatod a Palettont, ahol a tetrád színséma kiválasztására és az alapszíned megadására van csak szükség, és máris kidob egy megoldást, amit persze lehet még csiszolni az egyes paraméterek változtatásával:

Ugyanakkor manuális módszerrel is nekiállhatsz az elkészítésnek. Ki kell választanod az alapszínt, majd azt négyszer elhelyezni a lapon. Ezután a trükk annyi, hogy az alapszínnél a színárnyalatot (hue, azaz H) eltolod 30 ponttal, így lesz két színed. Ezután az alapszíned H értékéhez is hozzáadsz 180 pontot, illetve a másik színhez is. Így kapsz további két színt.

Az első lépés:

HSB-ben az alapszínünk: 280, 54, 41. A H értékhez hozzáadva 30 pontot, 310-et kapunk. Ez így néz ki:

Ezután hozzáillesztjük a kapott színekhez a másik kettőt 180 pont hozzáadásával:

Ahhoz, hogy ez jól használható színpaletta legyen, érdemes korrigálni a telítettségen és a fényerőn is az utolsónak megkapott színek esetében. Ezáltal jobb kontrasztot érhetünk el, hatásosabb lehet a kontrasztos színünk.

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 jó színkontraszt vonzóbbá teszi a weboldalad:

• 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!

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.

Ráadásul, ha megfelelő kontrasztot hozol létre a weboldaladon, akkor több ember fogja tudni használni azt. Vilgászerte mintegy 300 millió ember számít színvaknak, illetve 2,2 milliárd embernek van valamilyen látással kapcsolatos problémája, mely megnehezíti számára a digitális eszközök használatát.

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?

Először is érdemes színkontraszt-ellenőrző eszközt használnod. Ha követed a WCAG 2 írányelveit, akkor használhatóbbá teszed a weboldalad. Ha kellően kontrasztosak a weboldalelemek, akkor a felhasználók könnyebben felismerik:

• a felhasználói felület egyes elemeit
• a weboldal tartalmát
• a navigációs menüt
• a logót

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.

Frissítés, 2022.07.12.:

Mikor és hogyan teszteld a színkontrasztot?

Lehet, hogy neked tetszik két szín párosítása, vagy mindenképpen használni akarod a márkaszíneidet a weboldalon, azonban ez nem csak ízlés vagy márkaidentitás kérdése: a rossz színkontraszt használhatatlanná teheti a weboldalad. Még azon emberek számára is, akik nem küzdenek valamilyen színlátás-problémával, gondot okozhat a szövegek olvasása, ha rossz a színkontraszt.

A legfontosabb nem az, hogy jól nézzenek ki bizonyos színösszeállítások a weboldaladon vagy hogy erősítsék a márkád, hanem az, hogy könnyen feldolgozható legyen az emberek számára a tartalom. Ehhez meg kell felelni a WCAG színkontraszt szabványoknak.

A WCAG három szintet különböztet meg: A, az AA és az AAA szinteket. Ha a legmagasabb szintet célzod meg, akkor a lehető legjobban használhatóvá teszed a weboldalad mindenki számára. Az AA szint esetében a szintkontraszt-arány a háttér és a szöveg között már legalább 4,5 az 1-hez, a felület elemei a grafikák és a közelükben lévő színek között 3 az 1-hez. Az AAA szintnél a szöveg és háttér között 7 az 1-hez a kontrasztarány. Utóbbi kapcsán a W3 dokumentációja is megjegyzi, hogy nem minden típusú tartalom esetében lehetséges elérni a megfelelő értéket.

Az is előfordul persze, hogy jók az arányok, mégis úgy látod, hogy nehezen olvasható a szöveg. Ilyenkor nyugodtan emeld meg a kontrasztot, hiszen csak javulni fog általa a felhasználói élmény.

Mikor kezdj neki a színkontrasztok tesztelésének?

Ideális esetben egyből a weboldalad tervezésének kezdetén, amikor szóba kerülnek a színek, megkezdődhet a színpárosítások ellenőrzése. Amikor tehát kigondolod a színpalettád és elkészülnek az első színes tervek, érdemes ellenőrizni az ott megjelenő színek használhatóságát akadálymentességi szempontból.

Erről az első körös tesztelésről sokan lemaradnak, úgyhogy bármikor tesztelheted a weboldalad színeit. Sőt, igazából a színek tesztelése egy folyamatos munka, ha gyakran változtatod az oldalad megjelenését.

Ugyanakkor ne ess abba a hibába, hogy azt hiszed, tesztelés nélkül is meg tudod állapítani, hogy megfelelő-e a kontrasztarányod. Ha nincs valamilyen látásproblémád, akkor nem fogod tudni megmondani, hogy a weboldaladon a színek elérik-e a megfelelő kontrasztarányt.

Milyen eszközökkel ellenőrizheted a színkontrasztot?

Ehhez valamilyen színkontraszt-ellenőrző eszközre lesz szükséged. Íme néhány:

WebAim Contrast Checker

WebAim Contrast Checker egy egyszerű eszköz, amivel tesztelheted a színkontrasztokat. Csak vidd be a háttér és a rajta lévő szín HEX-kódját, és megadja a kontrasztarányt, illetve jelzi, ha nem felel meg a WCAG AA vagy AAA szabványának. Ha ez lenne a helyzet, akkor egy csúszkával módosíthatsz rajta egészen addig, amíg a megfelelő arányt el nem éred.

WAVE Web Accessibility Evaluation Tool

A WAVE Web Accessibility Evaluation Tool máshogy működik, mint az előbbi eszköz. Itt a weboldalad URL-jét kell megadnod, hogy automatikusan tudja tesztelni többek között a színeket is. A WAVE-ből bővítmény is elérhető Chrome és a Firefox böngészőkre. Amit problémát okozhat, hogy nem csak színkontraszttal kapcsolatban ad adatokat, illetve az automatikus, CSS színértékeken alapuló működés miatt olykor hibázik. Így nem árt ellenőrizni az eredményeket manuálisan is.

Colour Contrast Analyser (CCA)

A Colour Contrast Analyser (CCA) egy ingyenes eszköz, melyet le tudsz tölteni a számítógépedre. Beírhatsz hex kódot, CSS színformátumot vagy használhatod a színkiválasztó eszközt, hogy ellenőrizd a kontrasztarány, hogy az megfelel-e az AA vagy AAA szinteknek.

Colour Contrast Check

A Colour Contrast Check segítségével könnyen meg tudod mondani, hogy a színeid megfelelnek-e a WCAG 2 AA vagy az AAA szabványnak. Ehhez be kell írnod a háttér hex értékét valamint a szöveg hex értékét. Az eredménynél pedig láthatsz egy „igen”-t vagy egy „nem”-et. 

Accessible Color Generator

Az Accessible Color Generator lehetővé teszi, hogy beírj színeket hex kód alapján, aztán tesz egy javaslatot – azt figyelembe véve, hogy az AA vagy az AAA szintet célzod meg – nagyobb és kisebb betűméret esetén is.

Color Safe

A Color Safe a WCAG irányelvek betartásával hoz létre színpalettákat. Ehhez először ki kell választanod egy színt, egy szövegméretet, betűtípust, majd kapsz egy színpalettát, ami megfelel a WCAG-követelményeknek.

APCA Contrast Calculator

Az APCA Contrast Calculator egy olyan eszköz, melyet az American College Personnel Association által lefektetett irányelvek alapján készítettek el. Kiemelkedő azért, mert nem csak egy egyszerű, hanem egy úgynevezett „full font matrix” eszközt is elérhetővé tesz. Előbbi alkalmas arra, hogy ellenőrizd a szöveged mérete és a színkontrasztok megfelelnek-e az APCA-szabványnak.

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 észszerűen kell alkalmazni, különben nem lesz hatékony a kommunikáció.

Frissítés, 2022.10.04.:

Hogyan tedd akadálymentessé a weboldalad?

Egy vizsgálat szerint 12 férfiből 1 színvak, míg a nőknél 200-ból 1. Habár a színvakok is ugyanolyan tisztán látják a dolgokat, mint általában az emberek, nem képesek felismerni a piros, a zöld vagy a kék színt. Mivel a weboldaladat nyilván a legtöbb ember számára használhatóvá akarod tenni, ezért láthatóvá kell tenni számukra ezeket a színeket. De hogyan?

Használj mintákat és textúrákat!

Ha a felületeiden adatokat fejeznek ki a színek, például grafikonok, infografikák esetében, akkor rendkívül fontos, hogy ezeket láthatóvá tedd mindenki számára. Ilyenkor a legegyszerűbb megoldás, ha az egyes elemek között nem csak a színek tesznek különbséget, hanem mondjuk egy minta vagy textúra megjelenése.

Ugyanakkor, ha a minták helyett a kapcsolódó szöveget, számokat írod az egyes elemekre, az is jobban feldolgozhatóvá, illetve könnyebben megérthetővé teszi az ábrákat.

Linkek aláhúzása

A színek a linkeknél is megjelennek, mivel jellemzően egy szövegszíntől eltérő színnel jelöljük őket. Egy színvak számára azonban adott esetben nagyon nehéz észrevenni egy kék színnel írt szöveget, ha nem látja a kék színeket. Ilyenkor csak akkor veszi észre, hogy linkről van szó, ha az egérmutató a link fölé kerül. Itt a legjobb megoldás, ha nem csak színnel jelöljük a linkeket, hanem aláhúzással is.

Emeld ki az elsődleges gombot!

Ha az aktív állapotot a gomboknál csak egy eltérő szín jelzi, akkor nem biztos, hogy látni fogják, melyik gomb aktív. Ahogy tehát a linkeknél, úgy a gomboknál is egy további vizuális elemmel jelölni kell a különbözőséget. Ezt megteheted úgy, hogy az aktív ikonokat kitöltött ikonként jelölöd, míg a többi ikont csak körvonallal. De akár keretet vagy aláhúzást is kaphatnak az aktív ikonok.

Kerülj el néhány színkombinációt!

Végül meg kell említeni, hogy akadnak olyan színkombinációk, mely különösen nagy kihívást jelent a színvakok számára, ezért érdemes elkerülni őket a weboldaladon. Ilyen többek között a

• zöld és fekete
• zöld és szürke
• kék és szürke
• világoszöld és sárga
• zöld és kék
• kék és lila
• zöld és barna
• zöld és piros.

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. Ennek ellenére mostanában trendinek számítanak, és találunk jó megoldásokat is.

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.

Frissítés, 2022.09.23.:

Mire figyelj, ha színes weboldalt szeretnél?

Kifejezetten színes oldalakat elég nehéz úgy készíteni, hogy ne váljanak a felhasználók számára nyomasztóvá. Ugyanakkor, ha mégis megugorjuk ezt az akadályt, akkor kiemelkedő, a többiekétől eltérő és emlékezetes weboldal lesz a jutalmunk. Ezekre az alapelvekre érdemes figyelni:

Egyensúlyozd ki a színeket fehérrel!

A weboldalakon egy design használhatósága az egyensúlyon is múlik. Így van ez az elrendezésnél, de a színeknél is. Ha erős színeket használsz, akkor kell, hogy egy kis szünetet adj a felhasználóknak: semleges színekkel, feketével, fehérrel vagy szürkével egyensúlyt alakíthatsz ki. Ezek a semleges színek szolgálhatnak például háttérként.

Ha elegendő negatív teret hagysz a színek körül, akkor még inkább felhívod rájuk a figyelmet, érdekessé, izgalmassá teszed a weboldalt, ugyanakkor egyensúlyba kerül a design, hiszen ellenpontozod az erős szín jelenlétét egy nagyobb teret elfoglaló semleges színnel.

Legyen feltűnő a szín!

Ha színes weboldalt szeretnél, akkor ne félszívvel csinálj, használj valóban erős, karakteres színeket. Egy erőteljes szín, egy egyszerű képpel nagyon figyelemfelkeltő kombinációt hozhat létre. Ha van a márkaszíneid között erős szín, akkor használd azt. Egy erős szín felkelti a látogató figyelmét és behúzza a weboldalba, miközben az egyszerű kép nem konkurál vele, hanem megerősíti a szín jelenlétét.

Figyelj a képek és a szín egyensúlyára!

Ha nem akarsz túlságosan figyelemfelkeltő lenni, akkor az előbbinél használhatsz nagyobb képet is a weboldaladon, mely egy kicsit háttérbe szorítja a színt, ugyanakkor, ha az a szín elég feltűnő, akkor még tud érvényesülni. Játszhatsz a kép és a szín egyensúlyával, és úgy alakíthatod, ahogy az számodra vagy a látogatóid számára a legjobb legyen. Arra azonban figyelj, hogy a kép és a színed legyen összhangban, tehát a képnél használt színek ne üssenek el nagyon a fő színtől. Nem feltétlenül kell azonos színeket használni, de legyen meg közöttük a harmónia.

Mono színpaletta használata

Az előbbire jó megoldás, ha egyetlen szín különböző árnyalatai jelennek meg a weboldaladon, még a fotók esetében is. Így biztosan elkerülöd, hogy zűrzavaros és nyomasztó legyen a weboldal, inkább kifinomultnak és elegánsnak fog hatni.

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ó a látvány az emberek számára.

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.

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áltani. 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.

Használj overlayt!

Ha túl sok erős színt használsz, és aggódsz, hogy a látogatóknak egy kicsit sok lehet, akkor egy ovarlay megoldhatja a problémát. Fekete vagy fehér overlay visszafogja a színeket, ráadásul elegendő kontrasztot adhatsz a színekre helyezett szövegnek is.

Az is egy megoldás, ha 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.

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 gondosan a telítettség és az átlátszóság beállítá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.

Használd ki az erős színed hatását!

Az is fontos egy webdesignban, ha erős színeket használsz, hogy ne csak öncélúan helyezd el a weboldalon a színt, tehát ne csak a látvány legyen fontos, hanem próbáld meg vezetni a felhasználói tekintetét. Használd ki, hogy az erős színek felhívják magukra a figyelmet. Ennek legegyszerűbb példája, amikor a CTA-gomboknál jelennek meg az erős színek.

Frissítés, 2022.10.17.:

Hogyan használhatsz neon színeket a weboldaladon?

Egy korábbi fejezetben említettük, hogy nem igazán ajánlott a weboldalakon neonszíneket használni, ugyanakkor azt is megjegyeztük, hogy egyre népszerűbbek, és meg lehet oldani úgy a neonszínek megjelenítését a weboldalon, hogy az ne tegye tönkre annak használhatóságát.

De egyáltalán miért próbálkoznak a tervezők neonszínek alkalmazásával a weboldalakon? Elsősorban a különbözőség miatt, és mert energikusabbá, vidámabbá teszik a megjelenést. Ugyanakkor nagy kihívás neonszíneket beilleszteni a webdesignba, mert nem egyszerű biztosítani a megfelelő megjelenést a jó kontrasztot. A legjobb megoldás, ha visszafogottságra törekszünk a neonszínek használatánál, sötét alapra helyezzük őket, és csak ott jelennek meg, ahol kontrasztra van szükség.

Hiszen a neon egy erős, rendkívül élénk árnyalata a színeknek, és gyakorlatilag bármilyen színből lehet neonszín, bár jellemzően a sárgát (pl. #DFFF00) szokták alkalmazni. Itt van néhány további lehetőség a sárgán kívül:

• Zöld #39FF14
• Piros #FF3131
• Narancssárga #FF5E00
• Magenta #EA00FF
• Lila #BC13FE
• Kék #0FF0FC

A neonszínek lehetnek részei a weboldal színpalettájának, de alapvetően a kontrasztos, kiemelt elemeknél érdemes használni őket. A hátterek tipikusan sötétek vagy egyszerűen feketék, melyeken erőteljesen ki tud emelkedni a neonszín.

Ezzel meg is oldódik a kontraszt problémája, mely akkor jelentkezik, ha ugyanezt a neonsárgát egy világos vagy fehér háttérre helyezzük. Ezen a képen látható a sárga egy világos háttéren:

Itt pedig sötét háttérre kerül:

Mint látható, a neonszínek használhatósága leginkább a kontraszt függvénye. A neonszínek gyenge kontrasztnál és kis méretben gyakorlatilag olvashatatlanok. Ha neonszínt akarsz használni, akkor hasonlóképpen kell mindegyik neon-árnyalatra gondolni, mint ha fehéret használnál a weboldaladon. A fényessége ugyanis hasonló, és így biztosabb designdöntéseket hozhatsz.

A másik fontos dolog: az egyensúly. Ha túl sok a neonszín a weboldalon, az nyomasztó lehet a látogatók számára. Ez az oka annak, hogy általában csak a kiemelésre használják a neonszíneket.

Végül érdemes figyelembe venni azt is, hogy milyen hangulatot akarsz sugározni és hogy mi a weboldalad témája. A neonszínek vidámak és felszabadultak, egy komoly tartalomhoz nem passzolnak.

De néha elég ennyi is:

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. A lényeg tehát az, hogy nem minden weboldalnak kell sötétítenie, annak ellenére, hogy ez most trend, és egyre több és nagyobb mobilalkalmazás, weboldal kap sötét designt.

Figyelembe kell 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.

A másik fontos dolog a sötét tónusú weboldalakkal kapcsolatban, hogy a sötét nem egyenlő a feketével. A sötét háttér sem csak fekete lehet. És egészen addig sötét felületről beszélhetünk, amíg az oldalon szereplő elemeknek több mint a fele sötét tónusú.

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

Lássunk néhány példát elrontott sötét felhasználói felületre!

A rossz példák segítségével lehet talán a legkönnyebben felismerni, hogy hol lehet hibázni egy sötét felhasználói felülettel.

Az első példán könnyű meglátni a hibát: a sötét háttéren egyszerűen nem látszik a fekete színű termék.

Mint látható, sötét háttéren nem működik minden kép, azaz nagyon odafigyelve kell kiválasztanunk a megfelelő képet, ha sötét felületet készítünk.

De itt a következő példa, melyen már nehezebb kiszúrni a hibát:

Itt figyeltek arra, hogy olyan színeket használjanak, melyek jól láthatók a sötét felületen, azaz kontrasztosak. Túl sok van azonban belőlük, és mind erősek. Látható itt élénkpiros, sárgászöld, neonkék, és mindez egyben olyan, mintha egy nightklubban járnánk. Ennyi élénk szín együtt nem működik, vagy ki kellene hagyni közülük néhányat, vagy visszafogni őket.

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.

Néhány design-tipp sötét témájú weboldalakhoz

Kerüld a tiszta feketét!

Ezt korábban ugyan már említettük, de érdemes ismét felhívni rá a figyelmet: a tiszta fekete (#000000) nem természetes, túl nagy kontrasztot jelent egy tiszta fehérrel kombinálva, zavarja a szemet. Háttérként egyébként is sokkal alkalmasabb egy sötét szürke árnyalat, a material design ajánlás például #121212 háttérként. Egy világos szöveg ezen a háttéren enyhébb kontrasztot jelent.

Kerüld a telített színeket sötét témáknál!

Azok a telített színek, melyek jól néznek ki világos felületeken, nagyon vibrálóvá válnak feketén, így szinte lehetetlen olvasni őket. A világosabb tónusok sokkal jobban olvashatók sötét háttéren, miközben nem veszíti el erejét emiatt a design, hiszen a kontraszt megfelelő lesz, mindössze nem zavarja a szemet.

Figyelj az olvashatóságra!

Mindig figyelj arra, hogy a szöveged mennyire olvasható sötét háttéren. Ahhoz, hogy a világos szöveg jól olvasható legyen, a háttérnek elég sötétnek kell lennie. A material design irányelv szerint a kontrasztaránynak legalább 15,8:1-nek kellene lennie.

Kerüld a tiszta fehéret!

A tiszta fehér szín (#FFFFFF) vibrálni fog akkor is, ha sötétszürke háttérre helyezed. Ezért is ajánl a material design sötétebb fehéret szövegként. A világos szövegek sokkal erőteljesebbnek hatnak sötét háttéren, mint fordítva. Ez az oka annak is, hogy érdemes keskenyebb betűtípusokat használni sötét témáknál. A Google material design irányelvei egyébként meghatározzák, hogy mikor milyen átlátszóságot érdemes használni sötét háttéren, fehér betűknél:

Nem használhatsz árnyékokat

Míg világos témáknál árnyékokat használunk, hogy kifejezzük egy elem kiemelését, addig ezt nem lehet megtenni sötét háttéren, mert nem látszik az árnyék. Ehelyett a sötét felületeken megvilágítást kell alkalmazni, amit egy színes felületet jelent a megemelt elem esetében. Minél nagyobb a kiemelés, annál világosabb a felülete.

Ha lehet, bízd rá a felhasználókra!

Appoknál megoldható, hogy a felhasználó választhasson világos vagy sötét téma között. Nem jó ezt a döntést kizárólag a rendszerre bízni.

Fekete-fehér weboldalak: 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.

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.

Gradiens a webdesignban: miért jó? És hogyan használd a színátmeneteket?

A való világban ritkán találkozunk a színekkel azok tiszta formájában, mivel minden tárgy színátmeneteket jelenít meg, hiszen a fény árnyékokat képez. A gradiensek tehát nem jelentenek újdonságot a szemünknek. Míg régen szinte tiltott volt a webdesignban, ma a gradienseket egyre több weboldalon veszik elő a designerek, hogy érdekessé, vonzóbbá tegyék. Ha nem is vagy a színátmenetek rajongója, az itt leírtak alapján gondold át a hozzáállásod!

Miért hasznosak a gradiensek?

A 2014-ben népszerűvé váló flat designnak megvannak a maga korlátai. Az egyik a színek és stílusok számának korlátozottsága, hiszen nagyon szabályozott színpalettát használ a flat. Ugyanakkor ha hozzátesszük a gradienseket, mint lehetőséget, akkor mindjárt nagyot nő az alkotói szabadság: segítségükkel figyelemfelkeltő vizuális design hozható létre. Ráadásul mélységet és dimenziókat visz a designba, ezáltal megoldva a szigorúan használt flat elvek egyik nagy problémáját.

A gradiensekkel mélység és a valóság érzetét lehet kelteni egy nem természetes tárgy esetén is. A gradiensek tehát egy “új színt” hoztak pár éve a designba. Sokkal több lehetőséget kínálnak, mint amikor egyetlen színhez vagyunk kötve. Ugyanakkor a színátmenetek használatánál is ugyanúgy figyelembe kell venni a színek hatását a kívánt eredmény elérése érdekében. Ha megtalálod a megfelelő színeket, akkor kapsz egy egyedi színt, amit bárhol használhatsz.

A gradiensek megjelenése tehát egy nagyon kellemes változás a flat és a material design után, vagy mellett. Már ha sikerül jó színátmeneteket létrehozni. A legtöbb probléma abból származik, hogy nem hatnak természetesnek. Először gondolj arra, hogy amikor felnézel a tiszta égre, akkor milyen színátmenetekben jelenik meg a kék. A flat színekből vagy a weboldalakon használt színekből ezek a természetes átmenetek hiányoznak. A weboldalakon ezért megfontoltan kell őket használni, hogy természetes legyen a megjelenésük.

Hol és mikor használhatod a gradienseket?

1. Háttereknél

Színátmenetekkel érdekesebbé teheted az egyébként unalmas háttereket. A színátmenetek abban is segítenek, hogy a felhasználók tekintete bejárja a weboldalt az egyik árnyalat felől a másik felé haladva.

2. Betűknél

Egy színátmenet nem csak a háttérben jelenhet meg, hanem az előtérbe helyezett elemeknél is. Így például a címsorban megjelenő szövegeknél. Egy egyszínű háttérre helyezve a színátmenetes szöveg felhívja magára a figyelmet.

3. Overlaynél

Overlay használatával pedig érdekesebbé tehetsz egy unalmas képet. Ha a sima overlay helyett gradienst alkalmazol, akkor az ugyan nem fog rendbe rakni egy rossz minőségű képet, azonban izgalmasabbá teszi azt. A gradiensek ilyen formán történő alkalmazása segítséget jelent a márkád hangvételének megteremtésében, a weboldal személyiségének kialakításában.

4. Ha vezetni akarod a tekintetet

Egy jól megtervezz színátmenet segít a felhasználó tekintetének mozgatásában. A legtöbb weboldalon F-mintában olvasnak az emberek: vagyis elindulnak a bal felső sarokból, majd jobbra és lefelé tartanak. A színátmenet azonban felülírhatja ezt, és mondjuk a logótól a call to actionig vezetheti a felhasználók tekintetét. A szem a világos irányából a sötét felé tart.

5. Ha fel akarod hívni egy elemre a figyelmet

Ha jó a felhasználói élmény, akkor az szépen vezeti a felhasználót a termék felé. Ha a weboldalad egy-egy elemét ki akarod hangsúlyozni, akkor nagyobb vizuális súlyt kell neki adni. Ezt megteheted gradiens segítségével is.

6. Ha emlékezetessé akarod tenni a weboldalad és a márkád

Habár a színátmenetek is egyre népszerűbbekké válnak, vagyis tele lesz velük a web, egy-egy jól kiválasztott színkombináció még a dömpingben is emlékezetessé tehet egy-egy weboldalt a felhasználók számára. Egy gradiens segíthet abban, hogy kapcsolatot teremts a közönséggel, és hogy a márkád megmaradjon az emberek fejében. Használhatod akár egy logónál, és az mindjárt izgalmasabbá válik:

7. Ha trendi akarsz lenni

Ha gradienseket használsz a weboldaladon, akkor a legegyszerűbb eszközzel éred el azt, hogy korszerűnek nézzen ki az oldalad, és mégse ess túlzásokba. Természetesen idővel a színátmenetek mostani divatja ismét feledésbe fog merülni, de idővel visszatérnek megint, hiszen a tulajdonságaik továbbra is megmaradnak, és így jól használhatók bármely designban.

Hogyan hozz létre színátmeneteket?

Egy gradiens hozzáadása egy képhez vagy csak a gradiens létrehozása mindössze annyiból áll, hogy kiválasztasz két vagy három színt, majd azzal kitöltesz egy formát. A színátmenet tarthat balról jobbra, fentről lefelé, vagy épp sugárirányban kifelé.

Ne véletlenszerűen válassz színeket!

A nehézséget a megfelelő színek kiválasztása jelenti. Ha olyan színeket választasz, melyek közel esnek egymáshoz a színkeréken, akkor azok természetesnek hatnak majd. Ugyanakkor az egymással átellenben lévő színek soha nem nyerők. Például a színkeréken az egymással szemben álló piros és zöld szín az alábbi eredményt adja:

Ha nem bízol a képességeidben, hogy megfelelő színeket választottál-e, akkor akad néhány eszköz, amit kipróbálhatsz:

• Webgradients és uigradients.com – ahol számos előre elkészített színátmenet közül választhatsz különféle formátumokban. Olyan színátmeneteket láthatsz, melyek teljesen természetesnek néznek ki. Az itt megjelenő weboldalak egy jó kezdőpontot kínálhatnak a Te weboldaladnak vagy más terméked számára.
• Gradient buttons – animált hoverrel kiegészített színátmenetes gombokhoz kínál CSS-eket.
• Gradient Wave Generator – a saját színeidet használva hozhatsz lére gradienseket.

Válaszd ki a megfelelő típust!

A színátmenetek készítésének vannak, vagy legalábbis lehetnek szabályai. Egyrészt tudni kell, hogy többféle típusa van a gradienseknek. Az első a lineáris színátmenet, ahol a színek egy egyenes vonal mentén alakulnak át egymásba, itt fokozatos az átmenet egyik színből a másikba.

Ugyanakkor létezik sugárirányú gradiens, ami hasonló a lineárishoz, de egy középpontból változik a szín. Ennél meghatározható, hogy hol legyen a középpont, valamint annak mérete.

És létezik kúpos színátmenet is, mely annyiban hasonlít az előzőhöz, hogy kör alakú és itt is az elem közepe a szín kiindulópontja.

Legyen lágy az átmenet

A színek közötti átmenetnek kellően lágynak, folyamatosnak kell lennie. Ideális esetben a felhasználó nem láthat olyan részeket, ahol egyik szín a másikba változik, csak egy folyamatos átmenetet.

Fejezzen ki érzelmet vagy hangulatot!

Mint azt már számtalanszor elmondtuk, a színek érzelmeket váltanak ki. Ezt a tulajdonságukat használjuk ki arra, hogy egy mélyebb szinten lépjünk kapcsolatba a közönséggel. Ha gradienseket használsz, akkor is mindig tartsd észben, hogy milyen érzelmet akarsz kiváltani a közönségedből, amikor ők kapcsolatba kerülnek a termékeddel. Ha energikus atmoszférát akarsz kialakítani, akkor használja piros, narancssárga, sárga színátmenetet, de ha nyugalmat mutatnál, akkor egy sötétkék-világoskék átmenet lehet a Te megoldásod.

Lágy, lineáris gradiensek készítése

Ha egy igazán lágy színátmenetet akarsz készíteni, akkor egymáshoz közeli színeket kell választanod. Például így:

A fenti gradiensnél a zöld eltérő árnyalatait használta a szerző: G208-ról G163-ra változtatva. A két szín egymáshoz közel áll, és mivel a teljes fényérték ~600 és ~550 között mozog, így igen lágy átmenetet képez. Tehát ha az egyes színelemeket egymáshoz közeliekre cseréled, akkor ilyen lágy gradienseket kapsz.

Kicserélhető az RGB színek egyike vagy másika is, így mindegyik színátmenet kicsit másként fog kinézni, de harmonikus marad, ha nincs nagy eltérés. Ha túlságosan nagymértékben módosítasz rajtuk, akkor furcsa lesz a hatás. Erre itt a példa:  

Az elsőnél csak kismértékű módosításra került sor, így a gradiens tulajdonképpen úgy néz ki, mint egy flat szín, és egészen természetes a megjelenése. A másodiknál viszont a zöld már drasztikusabb változáson esett át.

Amit fontos megjegyezni, hogy ha a színeidnek alacsony a fényértéke (mint például az R239 G50 B50), akkor a tovább csökkentett fényérték révén több fekete adódik a színhez, így a változás drámaibbnak tűnik. Vagyis a fényérték egy fontos tényező.

Ha lágy gradienseket akarsz létrehozni, akkor figyelembe kell venned a fényértéket és a színt is. A szerző tapasztalata szerint a piros, a zöld és a kék együttes értékének legalább 400-nak kell lennie. Az ennél alacsonyabb fényérték már túl sok feketét jelent, ami piszkos kinézetet eredményez.

A lényeg azonban az, hogy nem könnyű matematikai szabályt létrehozni arra, hogy mitől néz ki kellően lágynak egy színátmenet. Elsősorban sokat kell próbálkozni, és így kialakul, hogy mi az, ami működik, és mi az, ami nem.

Ugyanakkor arról ne feledkezz meg, hogy figyeld a környezetedben felbukkanó tárgyak színeit. Ezeken minden esetben színátmenetek jelennek meg, még ha elsőre flat színeket is látsz. Az emberi szem a színeket flat színekre redukálja, mert így könnyebben tudja megérteni és megértetni a többi emberrel azt, hogy milyen színt lát.

Ennek ellenére, ha figyelünk, akkor látjuk a valódi színeket, vagyis azt, hogy egy tárgyon nem csak egyetlen szín jelenik meg, hanem még egy csomó árnyalat is. Ha ezeket megfigyelve használjuk a színeket a felhasználói felületeken, akkor sokkal természetesebbnek fognak tűnni, mint a sima flat színek.

Az igazán jó színátmeneteket a természet hozza létre

Azon elgondolkodtál már, hogy miért néz ki néhány gradiens harmonikusnak, míg mások furcsák és idegesítőek? Általában azokat a színátmeneteket tekintjük szépnek, melyek hasonlóan a természetben is megjelenő színátmenetekhez. Tehát, ha olyan színeket kombinálsz, melyek a természetben soha nincsenek együtt, akkor az nem fog tetszeni az embereknek. Márpedig az emberi szem elég pontosan képes különbséget tenni a valós és hamis színek között.

A természet színátmenetei hatnak az emberek számára igazán harmonikusnak. Az egyik legjobb inspirációt az ég kínálja, és itt nem csak a kékre kell gondolni. Fotókat nézegetve el sem hiszed, hogy az ég milyen színeket tud produkálni: megjelenik a narancssárga, a sárga, a lila, a piros és a kék mindenféle árnyalatban. A legszebb színátmenetek hajnalban és alkonyatkor láthatók. Érdemes tehát a természetből, illetve a természetről készült fotókból ötleteket szerezni. Ilyen módon megtalálhatod a legjobb színkombinációkat a weboldaladra.

Olykor találkozhatunk például a zöld és a piros kombinációjával, pedig itt két olyan színről van szó, melyek nagyon speciálisak és erősek, ráadásul a természetben soha nem képeznek színátmenetet. Ha az égre nézel akkor olyan gradienseket látsz a kéken kívül, mint a narancs-lila, lila-piros, kék-lila, de olyat nem, hogy zöld-piros.

A kék és a narancs is furcsán hat egymás mellett, ugyanis ezek között a természetben általában megjelenik vagy egy piros vagy egy lila szín. Ha egymás mellé teszed a narancssárgát és a kéket, akkor ütik egymást, viszont ha elhelyezel közöttük egy lilát, akkor kevésbé lesz zavaró a kontrasztjuk.

Mik azok a mono gradiensek? És miért lehetnek hasznosak?

A mono gradiensek esetében két népszerű trend találkozik: a monokróm weboldalaké és a színátmenetek használatáé. A monokróm weboldalakhoz tartozik az a megoldás, amikor gradiensekkel teszik egy kicsit izgalmasabbá a designerek a mindössze egy színt használó, azaz monokróm oldalakat. Ez az úgynevezett mono gradiens.  

Mi az a mono gradiens?

A mono gradiens a monokróm színpaletta használatának kiterjesztése. Ebben az esetben két olyan színt használunk, melyek árnyalata és telítettsége hasonló. Segítségével létrehozható egy színátmenet, amit a designban sok dologra lehet használni. 

Egy mono gradiens lehet nagyon visszafogott, mint például amikor két olyan színt használsz, melyek között alig van különbség, és szinte nem is érzékelhető az átmenet. Ugyanakkor egy pirosból lilába történő átmenet már látványosabb eredményt ad.

A klasszikus mono gradiens azonban két, majdnem azonos szín közötti átmenet, melynek hatása éppen a visszafogottságában rejlik. A színárnyalattól függően a gradiens lehet olyan puha is, hogy első pillantásra talán észre sem veszed. Ennek ellenére jól működik akár háttérként, akár gombként. 

Mire használható?

Egy mono gradienssel felhívhatod a figyelmet egy elemre a weboldalon – akár egy eltérő színnel -, ha csak annál az elemnél jelenik meg a színátmenet.

Mono gradienst azonban használhatsz overlayként vagy háttérként is. Utóbbi esetében nem árt figyelembe venni, hogy a gradiensek sokszor nehezen használhatók háttérként, mert előfordulhat, hogy a háttér valamely részén rosszul olvashatóvá válik a szöveg. A mono gradienseknél ez kevésbé jellemző, mivel a háttér mindenhol hasonlóan sötét vagy világos, így megfelelő marad a kontraszt.

Néhány további tipp a színek kiválasztásához

Ha megfogadod az alábbi tanácsokat, jobb döntéseket hozhatsz a színválasztás során.

1. Mindig fekete-fehérben tervezz először!

Habár a legtöbben színesben gondolkodunk, amikor egy weboldal designját tervezzük, célszerű inkább szürkeskála használatával megalkotni a weboldal első terveit. Ezáltal jobban oda tudsz figyelni a megfelelő vizuális hierarchia kialakítására, mint ha azzal foglalkoznál, hogy hol és hogyan használd, illetve kombináld a színeket.

2. Vedd figyelembe a vizuális súlyt!

A vizuális súly minden tárgy természetes tulajdonsága, melynek nagysága azt jelzi, hogy mennyire képes magára vonni az emberek figyelmét. A vizuális súlyt három tényező határozza meg:

• a tárgy mérete (minél nagyobb a méret, annál nagyobb a vizuális súly)
• a tárgy körüli negatív tér (minél nagyobb a whitespace, annál nagyobb az esélye, hogy a felhasználó felfigyel a tárgyra)
• a tárgy színe (kontrasztos szín használatával könnyebben észrevehető egy tárgy)

Ha azt akarod, hogy a weboldaladon valamely elemet észrevegyenek a látogatók, akkor adj neki nagyobb vizuális súlyt. Ez jelen esetben egy kontrasztos szín használatát jelenti.

3. Illeszkedjenek a színek a márkádhoz!

A márkád színeinek kulcsszerepet kell játszaniuk a weboldalad színeinek meghatározásakor. Ha még csak most alakítod a márkád színeit, akkor próbálkozz meg merész színkombinációkkal, mert ezekre jobban felfigyelnek az emberek. Mostanában egyre több márka használ erős színeket.

4. Kiegyensúlyozott színsémát válassz!

Arra ugyanakkor figyelj a színek meghatározásánál, hogy egy rossz választással ne zavard össze a felhasználóidat. Meg kell próbálnod harmóniát kialakítanod. Ennek kapcsán érdemes figyelembe venni két alapelvet:

• 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.
• Legfeljebb három színt használj! Hacsak nem vagy igazi virtuóza a színekkel való játéknak, akkor jobb megoldás, ha visszafogod a színek számát a weboldaladon. Ha mégis úgy érzed, hogy több színre lenne szükséged, akkor inkább egy adott szín sötétebb és világosabb variációival próbálkozz!

Azt is figyelembe kell venned, hogy milyen érzéseket akarsz kiváltani a látogatókból, és hogy a színek jellemzőek-e az iparágadra, összhangban vannak a felhasználóid elvárásaival, ugyanakkor meg is ragadják őket.

4. Gondolj eszközként a színekre!

A színek nem csak dekorációként szolgálnak, hanem funkcióik vannak: a designerek a színeket funkcionális elemként használják. A felhasználókat nem csak a forma, hanem a színek is befolyásolják, amikor kapcsolatba lépnek egy weboldallal. Mire használható például egy szín:

• a statikus és interaktív elemek megkülönböztetésére
• egy elem állapotának leírására
• a felhasználó figyelmének felhívására egy fontos üzenetre
• a felhasználó tekintetének irányítására

6. Ne feledkezz meg a hozzáférhetőségről!

Ez elsősorban azt jelenti, hogy a megfelelő kontrasztarányt használd a színeknél is: azaz például a szöveg és a háttér esetében. Ugyanakkor az is beletartozik, hogy ha valami közölni akarsz a felhasználóval, akkor azt ne kizárólag egy szín alkalmazásával próbáld elérni. Ennek oka, hogy az emberek egy jelentős része rosszul látja a színeket. A hozzáférhetőség mértékének elemzésére érdemes használnod teszt eszközöket is, melyek megmutatják, hogy hol vannak hiányosságok a designban ebből a szempontból.

Frissítés, 2022.04.01.:

Milyen hibákat követhetsz el a színválasztásaidnál?

Ha jól választasz színeket, az új látogatókat hoz a weboldaladra, erősíti a márkádat, több konverziót eredményez. Nehéz azonban jól választani, hiszen sok a szín, melyeket még alkalmazni is kell a designban. Így nem csodálkozhatunk azon, hogy elég sokan hibáznak a színválasztásnál. Lássunk néhány hibát!

Nem figyelsz az akadálymentességre

A webdesignban is egyre nagyobb hangsúly helyeződik az akadálymentességre, ugyanakkor sokan még nem tudatosították, hogy a látási hibával rendelkezők számára is megfelelő weboldalakat kellene tervezni. Pedig sok millióan vannak a világon olyanok, akik nem látnak megfelelően bizonyos színeket vagy nem észlelik a gyenge kontrasztokat. Ha nem figyelsz arra, hogy elegendő kontrasztot alakíts ki a színeid között, akkor az nehezebbé teszi a weboldalad használatát. 

A trendeket hajtod

Vonzó lehet mindig a trendek élén járni vagy felrúgni a desgin-konvenciókat, azonban ha a szokatlan és merész színválasztással keresztre feszíted a weboldal használhatóságát, abból nem lesz hatékony felhasználói felület. Az csak zavarba ejti az embereket, akiknek a megszokottnál sokkal nagyobb erőfeszítést kell tenniük, hogy megértsék az oldalad. Ráadásul, ha egy szín kimegy a divatból, akkor idejétmúltnak fog kinézni a weboldalad, és állhatsz neki újratervezni az egészet. 

Túl sok színt használsz

Tapasztaltad már, hogy amikor belecsöppensz egy színkavalkádba, akár egy fizikailag létező helyen vagy tárgy esetében, akár a weben, akkor szinte elkezdesz fuldokolni. Lehetnek szépek az élénk színek is, azonban csínján kell velük bánni. Ha túl sok színt használsz, azok elkezdik egymást gyengíteni, és nem leszel képes elérni velük a kívánt hatást.

Egy színpaletta színeinek száma semmiképpen nem haladhatja meg a hatot, de sokkal jobb, ha ennél is kevesebb: három vagy négy színt használsz. És ebbe már beleértjük a semleges színeket is. Az egyik lesz a domináns színed, egy másik a semleges szín, és még egy vagy kettő kontrasztos szín jöhet hozzá. Ilyenkor is figyelj azonban a negatív terek megfelelő használatára, hogy érvényesüljenek a színek.

Elfeledkezel a felhasználóról

Sokan úgy terveznek weboldalt, hogy eszükbe sem jut, hogy az  felhasználóknak kell, hogy megfeleljen. A színválasztást nem a Te ízlésednek kellene meghatároznia, hanem annak, hogy mennyire jól használható egy színpaletta, illetve, hogy mit mutatnak a vizsgálatok és a tesztek a weboldal használhatóságáról.

Nem próbálsz megkülönböztethető lenni

Ha ugyanazt a színpalettát használod, amit a konkurencia, mert mondjuk az iparágadban az a megszokott, és nem mersz ettől elszakadni, akkor beleolvadsz közéjük és a színekkel már nem tudod magad megkülönböztetni, hogy felfigyeljenek rád az emberek. Úgyhogy készítsd piackutatást, vizsgáld meg, hogy a konkurencia milyen színeket használ, majd próbálj meg eltérni ettől.

Nagyon egyedi akarsz lenni

Ugyanakkor nem jó beleesni a másik végletbe sem, vagyis, hogy a színekkel elkezdesz görcsösen eredetieskedni. A színek pszichológiáját nem szabad figyelmen kívül hagyni, vagyis azt, ahogy a színek az emberekre hatnak. Ha ezzel nem törődsz, akkor nem éred el a szándékolt hatást az embereknél, ami pedig ki fog hatni a weboldalad teljesítményére is. Tehát próbálj meg olyan színt választani, ami újnak és frissnek hat az iparágadban, ugyanakkor ne riassza el az embereket, és be tudják azonosítani a színeid alapján, hogy ki vagy és mit akarsz.

Tiszta feketét használsz

Azt már említettük korábban is, hogy a tiszta fekete szín használata nem javasolt, egy hófehér háttérre rátéve betűként fárasztani fogja a szemét az olvasónak. Sok designer azt hiszi, hogy a jó olvashatóság miatt szükséges jó kontraszt miatt kiváló választás lesz a tiszta fekete, ez azonban nem így van. Ahogy a túl kicsi, úgy a túl nagy kontraszt sem jó, mert nagyobb terhet ró a felhasználókra, miközben olvasnak. Úgyhogy a tiszta fekete helyett valamilyen árnyalatot használj!

Címkék: színek, webdesign