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

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

A színek kiemelt fontosságúak a weboldalaknál, hiszen a színek révén is kommunikálunk a weboldalunk látogatóival. A színeket veszik észre először a felhasználók, amikor egy weboldalra tévednek, és ezek azonnal hatnak az érzelmeikre. Nagyon fontos tehát a gondos színválasztás, valamint a színek megfelelő kombinálása, amihez adunk néhány hasznos tanácsot, és bemutatjuk azt az 5 lépéses folyamatot, amivel magad is kiválaszthatod a legjobb színeket a weboldaladra. (Frissítés, 2019. 03. 11. – Kibővítettük a utolsó fejezetet: Tippek a megfelelő színek kiválasztásához) Amikor a saját weboldalunk kialakításáról van szó, akkor minden lehetőséget meg kell ragadni, hogy azt kellően vonzóvá és jól használhatóvá tegyük a felhasználók számára. Az első benyomást másodpercek, tizedmásodpercek alatt alakítjuk ki nemcsak személyes kapcsolatainkban, hanem a weboldalak esetében is. A felhasználók pár másodperc alatt eldöntik, hogy egy weboldalon tovább nézelődnek-e vagy visszalépnek. Ezen rövid idő alatt pedig nem a szöveges tartalmak, hanem az általános benyomás számít, amit a színekkel és az elrendezéssel alakíthatunk elsősorban. De kezdjük azzal, hogy

Mire használhatod a színeket a weboldaladon?

Ha jól alkalmazod a színeket, akkor erőfeszítés nélkülivé teheted a felhasználók számára a weboldalad befogadását, ha viszont túlzásokba esel, hibásan használod a színeket, akkor csak zavart okozol. Amikor valamire fel akarod hívni a felhasználóid figyelmét, fel akarsz kelteni bennük bizonyos érzéseket, esetleg valamilyen cselekvésre akarod bírni őket, akkor azt a megfelelő színek párosításával is elérheted (több más webdesign-eszköz használata mellett).

A színek erősítik vagy épp módosítják azt az üzenetet, amit az emberek felé közvetítesz. Ha rosszul választod meg a színeket, hibás színkombinációkat használsz, akkor a felhasználók nem is fognak tudomást venni a tartalmaidról vagy arról, hogy milyen akciót vársz el tőlük.

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

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

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

Érdekessé tesznek

Abban a korban, amikor a weboldalak egyre jobban hasonlítanak egymáshoz, a színeknek – mint webdesign-eszköznek – nagyon nagy a jelentőségük. Nem csak annyi a szerepük, hogy feltűnő vagy épp szép legyen a weboldalad, hanem lehet akár az is a funkciójuk, hogy érdekessé tegyék a designt, így Téged is. Ehhez persze nem kell mindig előtérbe és a középpontba helyezni az erőteljes színeket.

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

Amikor már biztos vagy benne, hogy a színek felhívják a felhasználók figyelmét az általad fontosnak tartott elemekre, akkor ezen túl “egy nagy vallomás” megtételére is felhasználhatsz színeket. Erre a célra egy egyedi, szokatlan színt érdemes kiválasztani, mely ugyanakkor jelentéssel bír a weboldalara, cégedre nézve, és el is mond rólad valamit. Egy erőteljes szín Ezzel az erőteljes színnel egy hatásos hátteret is létrehozhatsz, mely maradandó nyomot hagy az emberekben, márpedig ez olyan fontos, mint a megkülönböztethetőség. De színes hátterekkel a weboldalad egyes szekcióit is kiemelheted. Egy erős háttérszín egy weboldalon

Erősítik a márkád

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

Elmondhatsz velük egy történetet

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

Valamit kommunikálhatsz velük

A színek meghatározzák, hogy mennyire bíznak meg az olvasók az oldalunkban, a cégünkben, bennünk, milyen tulajdonságokat társítanak hozzánk.

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

A meleg színek

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

A hideg színek

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

A semleges színek

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

A színek hatása

A színek azonnali, szinte ösztönös reakciókat váltanak ki az emberekben. Ugyanakkor azért beszélünk “szinte ösztönösről”, mert a színek kultúrafüggőek is. Az európai kultúrkörben az alábbi alakult ki:

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

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

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

A színek nagyon sokat elmondanak egy cégről. Ráadásul a megfelelő szín választása nem csak a márka image-ére és könnyebb azonosíthatóságára van hatással, hanem közvetlenül befolyásolja az eladásokat. Fontos tehát, hogy a megfelelő üzenetet küldd a célközönségednek a színeiddel is. Annál is inkább, mivel a márkád színei határozzák meg a weboldalad színeit is. Ha kihasználod a színek pszichológiáját, akkor azzal a cégeddel kapcsolatban elvárt érzéseket válthatod ki az emberekből. Ezért is választják ki tudatosan a nagy cégek az általuk használt színeket és árnyalatokat.

A Marketo vizsgálata szerint a top 100 márka 33 százaléka a kék színt használja, így ez a legnépszerűbb szín, aminek okaira hamarosan bővebben is kitérünk. Ugyanakkor a márkák 29 százaléka a piros színt használja, amivel már jóval óvatosabban kell bánni, de erről is lesz szó részletesen.

A harmadik legnépszerűbb megoldás viszont a szürkeárnyalatok és a fekete használata, aminek megint csak megvannak a maga buktatói. Végül pedig a cégek 13 százaléka a sárgát, illetve arany színt használja. Emellett a vizsgálatból az is kiderül, hogy a top 100 márka 95 százaléka mindössze egy vagy két színt használ. Ennek oka vélhetően az, hogy az egyszerűség miatt könnyebb következetesnek maradni a színhasználatnál.

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

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

Erre a kérdésre próbálta megadni a választ a formfortought.com oldalán egy bejegyzésében Lauren Kelly. Egy tanulmány szerint 2015-re a kék lett a világ legnépszerűbb színe, és rendkívül elterjedté vált a médiában, miközben az ókori görögöknek még szavuk sem volt rá. Kérdés, hogy a kék szín terjedése vajon csak egy divathullám, vagy pedig valami komolyabb dolog áll mögötte? Ha a művészeteket tekintjük, akkor egy elemzés alapján egyértelműen láthatjuk a kék szín népszerűségének növekedését. Martin Bellander elemzett több mint ezer festményt a színeik alapján.

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

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

A változás mögött több tényező is meghúzódhat, így az új anyagok megjelenése, a kék pigmentek olcsóbbá válása, az, hogy a művészet eltávolodott a portréfestészettől, de az is, hogy megváltozott a felhasználók preferenciája. A kék szín népszerűségének növekedése a művészetekben együtt járt azzal, hogy az appoknál, a hirdetéseknél és a nyomtatott designban is uralkodóvá vált.

Ha megnézed a világ legsikeresebb közösségi alkalmazásait, akkor azt látod, hogy a legtöbb közülük kék: a Facebook, a Twitter, a Linkedin, a Tumblr, a Skype vagy a Behance. A kéket gyakran azonosítják a nyitottsággal és a szabadsággal, olyan megnyugtató dolgokhoz kapcsolódik ez a szín az emberek fejében, mint az ég vagy az óceánok. Társítjuk hozzá a megbízhatóságot, a nyugalmat és az interakciót. Érdemes azt is megemlíteni, hogy az internet első éveiben a linkek, vagyis a kapcsolatok mind kék színben jelentek meg, így az emberek ezeket a kék jeleket keresték és ezekkel léptek interakcióba.

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

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

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

A kék remek háttérszín is, mivel nyugalmat áraszt, ami azt jelenti, hogy az emberek jobban érzik magukat, amikor hosszabb ideig látják ezt a színt, ráadásul nem tolakodó és kevésbé fárasztja a szemet, mint más színek. A kék pszichológiája kapcsán az is fontos, hogy az emberekben sokkal nagyobb a hajlandóság interakcióba lépni olyan dolgokkal és elköteleződni olyan dolgok által, melyek kék színűek. Ezt Zhu és Mehta állapította meg egy kutatásukban, ahol arra is felfigyeltek, hogy a kék növeli a kreativitást és a nyitottságot az interakciókban.

Tökéletes szín tehát a közösségi appok és felhasználó felületek számára. Ugyanakkor olyan szempontból is kitűnő választás, amikor az emberek fogyasztói viselkedésére akarunk hatni, hiszen kékkel könnyen őket meggyőzni. Mindezek miatt tehát nem valószínű, hogy a közeljövőben bealkonyul a kék színnek. De azt a következtetést is levonja a szerző, hogy ha valami olyasmit szeretnél tervezni, amit a legtöbb ember tisztán érzékel, nyitottan és pozitívan áll hozzá, és ami hatással van a fogyasztóként való viselkedésükre is, akkor a legjobb, amit tehetsz, ha kék színben gondolkodsz.

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

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

A piros tehát egyike a három alapszínnek (piros, zöld, kék). Az emberek számára a piros a legfontosabb szín, és egyetlen szín sem tud olyan erős érzelmi reakciót kiváltani belőlünk, mint a piros. A piros színnek a legnagyobb a hullámhossza (620-740 nanométer). Az ennél nagyobb hullámhosszt már nem látjuk, és az hőként, infravörösként érzékelhető. piros színű tárgyakat vizuálisan közelebbinek érezzük, mint amilyen távolságra vannak.

A piros vonja elsőként magára tekintetet is, minden más szín közül. Ezért működik olyan hatékonyan megállító jelzésként is a jelzőlámpáknál. A pszichológusok szerint a piros képes kiváltani a “harcolj vagy menekülj” reflexet az emberben. Ez az egyik legkorábbi evolúciós reakciónk, mely arra hivatott, hogy túléljük a veszélyes helyzeteket. Nem véletlen, hogy a pirost gyakran összekapcsoljuk a veszéllyel, a tűzzel, a vérrel, a haraggal.

De persze az áldozattal, a szenvedéllyel és sok kultúrában a boldogsággal is. Ezek olyan pszichológiai tények, ami mindannyiunkban rendkívül mélyen gyökereznek, és a webdesignereknek is figyelembe kell venni a tervezésnél.

A pirossal könnyen ki lehet fejezni erős érzéseket, és ki is lehet vele váltani érzéseket, de fel is lehet vele hívni a figyelmet valamire. Nagyon sok múlik persze az árnyalaton is, hiszen egy sápadt piros inkább nőiességet és puhaságot jelezhet, vagy egy bíbor melegséget és kényelmet. A közepes árnyalatok boldogságot, szabadságot fejeznek ki, de persze vért, dühöt és szenvedélyt is. Látható, hogy elég sokoldalú színről van szó, és mindig a pontos árnyalattól függ, hogy elsősorban mit kommunikál. Piros szín Erőteljes hatása miatt mindenesetre elsődleges színként ritkán használjuk a webdesignban, ugyanakkor kiegészítő színként sokszor felbukkan a weboldalakon. A leggyakrabban a figyelem-felhívó képessége miatt alkalmazzák. Ugyanakkor azt lehet mondani, hogy bátor döntés, amikor valaki a pirost kezdi használni a weboldalán, pont az árnyalatok nagyon eltérő érzelmi hatása miatt. Lehet hogy egy boldog, vibráló, szenvedélyes, inspiráló megjelenés lesz az eredmény, de lehet, hogy szomorú, agresszív és baljós hangulatot áraszt majd. Óvatosan kell tehát bánni vele.

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

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

A fekete tökéletesen alkalmas arra, hogy kiemeljen egy weboldalt, vagy azon bizonyos részeket. Például egy fehér háttér (vagy bármilyen más szín) esetében. Érdemes tudni azonban, hogy a fekete a “legnehezebb” szín, és emiatt mást, más színnel már nehéz jobban kiemelni mellette. Ráadásul, ha a feketét háttérként alkalmazod, akkor minden kisebbnek látszik rajta, mint egy fehér háttéren. Ráadásul sokan a szokatlansága miatt megbízhatatlannak érzik, ami a cégről kialakult benyomásra is hatással lehet.

Valamint az emberek számára kevésbé vonzó, mint más színek. Sokan ugyanis úgy érzik, hogy a fekete lehangoló, pesszimista, szomorú és a negativitás színe. És ezt a hatást nem lehet befolyásolni, mert tudattalanul 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.

A színek hiánya is jelzés

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

Sajnos nagyon sok esetben a különböző színek használata rosszul történik, így csak összezavarják, elbizonytalanítják a látogatót. A túl sok színt használó weboldalak esetében megfigyelhető, hogy azokon a felhasználók kevesebb időt töltenek. Ennek az az oka, hogy kellemetlenül érinti őket a szinte szemet fájdító színkavalkád.

A titok tehát abban rejlik, hogy ismerni kell az egyes színek jelentését, hogy a megfelelő használat segítségével tudjunk pozitív érzéseket kelteni, a felhasználók tudatalattijára hatva pozitív benyomásokat kialakítani.

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

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

1. Az alapszín kiválasztása

Kezdjük azzal, hogyan válaszd ki az alapszínt, melyből kiindulhatsz. A nehézséget itt az okozza, hogy a rendelkezésedre álló több millió színből kell kiválasztanod a számodra leginkább megfelelőt, ami aztán az alapja lesz az egész weboldaladnak, a cégednek. Minden más szín ebből az egy színből lesz eredeztethető, úgyhogy fontos, hogy jól válassz. A kezdő szín kiválasztásához nem elegendő csak rábökni egy színre a szinte végtelen szélességű színpalettán, vagy azt választani, amelyik tetszik neked, hanem meg is kell tudnod indokolni a választásod. Túlgondolni persze nem érdemes a dolgot, csak a színválasztás mögött álljon ott a megfelelő racionális ok.

  • Egyrészt válogass azon színek közül, melyek már a rendelkezésedre állnak! Azaz, ha például van már egy logód, akkor kezdő színnek egy abban szereplő szín megfelelő lehet.
  • Kerüld a konkurencia színeit! Ha a versenytársaidnak már vannak erős, bevett márka-színei, akkor azokat ne használd fel a színsémádban!
  • Vedd figyelembe a célközönséged! Gondold át, hogy kik fogják használni a weboldalad, és milyen érzéseket akarsz kiváltani belőlük.
  • Ne ragadj le a sztereotípiáknál! Ha például fiatal lányok fogják használni a weboldalad, akkor sem kell feltétlenül rózsaszínben pompáznia. A klisék elkerülésével a hitelességed is erősítheted.

Ha ezek után sem tudod, mi legyen a kezdőszín, akkor írd le azokat a szavakat, melyek a cégedhez kapcsolhatók, mert ezek kiadhatnak valami színt. De azt is megteheted, hogy átnézed, hogy az egyes színeknek mi a jelentése, mit vált ki a felhasználókban, és ez alapján választod ki a leginkább megfelelőt. A kezdő színnek egy olyan egyszerű színnek kell lennie, mint a piros, a zöld, a kék, a sárga, vagy a rózsaszín. Néhány tanács, amit érdemes betartani:

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

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

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

A Dribbble oldala

A Dribbble oldala

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

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

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

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

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

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

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

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

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

A Paletton természetesen nem véletlenszerűen dobálja ki neked a színeket, neked azonban nem az elméleti háttér megértése a feladatod, mindössze annyi, hogy kimásold a kiegészítő szín színkódját. Más webes szoftvereket is használhatsz azonban színpaletták generálására:

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

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

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

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

Ha ez túl bonyolult lenne, akkor nyugodtan maradhatsz az eredeti szürkéknél is. Ezzel kész is a színpalettád, most már csak alkalmaznod kell a kapott színeket a weboldaladon.

5. Használd a kapott színeket!

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

A sötétszürkédet a szövegeknél veted be, de kerülhet belőle a logókba és az ikonokba is, melyeknél nem árt, ha a szürke mellett a színeid közül is válogatsz, mert erősíti a hatást.

A fehér és a világosszürke fogja adni a hátteret. Utóbbinak nem feltétlenül kell megjelennie a designban, de ha jól használod, akkor előnyös lehet az eredményre nézve.

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

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

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

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

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

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

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

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

HOGYAN HASZNÁLD A SZÍNKONTRASZTOT?

Ha valamely elemet ki akarsz emelni a weboldaladon, akkor használj erős kontrasztot, például világos színeket egy sötét háttéren. A kontraszt azonban nem csak sötét és világos párosítását jelenti, hiszen vannak természetesen kontrasztos színek. A kontrasztos színek kiválasztása azonban attól is függ, hogy hol használod őket.

Például a Coca-Cola esetében a fizikai tárgyon, egy kólásdobozon remekül működik a piros szín háttérként. Ugyancsak használható nyomtatott hirdetéseknél vagy tévéreklámokban. De mi lenne akkor, ha a Coca-Cola weboldalának a háttere lenne piros? A piros szín weboldalon csak akkor működne együtt a fehérrel, ha a fehér egy szövegdoboz lenne a piroson, és a szövegdobozba feketék lennének a betűk. Ezáltal még el is tudnák olvasni az emberek a szöveget. Egy fekete szöveget a piros háttéren viszont rendkívül nehéz lenne olvasni. De ugyanez igaz a zöld és piros vagy a piros és kék párosítására. A színkontraszt remek eszköz arra, hogy kiemeljük a CTA-nkat a weboldalon, amihez nem is kellenek brutálisan erős és elütő színek. Annyi is elég, mint a fenti példán, ahol a szín és a whitespace egyből a weboldal közepére vezeti a tekintetet. A kontraszt mértékének meghatározása nem egyszerű feladat. Ha túlzásba esel, akkor már nem kiemelsz valamit, hanem csak megzavarod az embereket, és nehezebben fogják felismerni a lényeget.

Hiba lehet, ha túl sokszor használod a színkontrasztot, de az is előfordulhat, hogy túlságosan erős kontrasztot alakítasz ki. Fontos, hogy milyen színeket választasz, miként párosítod őket. Figyelembe kell venned a színek jelentését, mely annak függvényében változhat, hogy kik is alkotják a célközönségedet. Nem árt megvizsgálni, hogy felhasználóid számára milyen jelentéssel bírnak egyes színek, és csak ezután dönthetsz a kiválasztásuk mellett

Azt is figyelembe kellene venned, hogy a felhasználók egy jelentős része rosszul látja a színeket. Az emberek 4,5 százaléka esetében merül ez fel problémaként, ami elsőre talán nem tűnik soknak, de az adat alapján csak Magyarországon több mint 400 ezer emberről van szó. A nagyobb része egyébként férfi, mert a férfiaknak 8 százalékának van gondja a színekkel. A leggyakoribb a piros-zöld színvakság. Ez azt jelenti, hogy a zöldet és a pirost nem zöldnek és pirosnak látják, hanem valami más színként. Ez még inkább beszűkíti a lehetőségeid, hiszen ha zöld a háttered vagy a betűszíned, akkor a felhasználóid egy része nem látja azt rendesen, vagy ahogy Te azt elképzeled. Szöveg esetén például nehezen tudják elolvasni a szavakat. Hogy mennyire, az függ az általad választott árnyalattól és a színvakság súlyosságától.

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

Milyen színeket kerülj a weboldaladon?

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

NEONSZÍNEK

A neonszínek élénkek, erősek, megtöltik élettel a weboldalad, de sajnos fárasztják a szemet és így a felhasználókat is. A neonszíneket nehéz olvasni, sötét és világos háttérrel való párosításuk is gondot okozhat. Túlságosan hangsúlyosak, elterelik az emberek figyelmét a fő üzenetről. Ami még elfogadható, ha visszaveszel a neonszínek erejéből, így egy sötétebb, visszafogottabb megjelenést kapsz, esetleg csak kisebb méretű elemeknél használod őket.

VIBRÁLÓ SZÍNPÁROK

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

Vibráló hatást azzal érhetsz el, ha erősen telítettek a színek, komplementer színekről van szó, egymástól 180 fokra találhatók a színkörön, illetve ha szürkeárnyalatúvá változtatod őket, akkor nagyon kicsi lesz a két szín közötti kontraszt. Egy klasszikus példa a piros és a zöld párosa. Ha mindenképpen vibráló színpárokat akarsz használni, akkor legalább válaszd el őket egymástól egy semleges színnel.

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

Az ilyen párosításokat nagyon nehéz olvasni. Nagyon gyakran fordul elő olyankor, amikor egy fehér szöveg egy fotóra kerül, és azon belelóg a világos részekbe. Ilyenkor a betűk már szinte nem is láthatók. Ha nálad is előfordul ez a hiba, akkor mindenképpen át kell gondolnod a designt. A legegyszerűbb megoldás, ha választasz egy másik háttérképet, ahol ez nem okoz gondot. Ha nincs ilyen képed, akkor helyezd a szöveget egy színes dobozba, és így kerüljön a háttérképre.

SZIVÁRVÁNY

A szivárvány mindenféle színében pompázó weboldalak nem működnek. Csak gondolj arra, hogy hány színekkel kapcsolatos szabályt szegnek meg. A felhasználók figyelmét ugyan magukkal ragadják, de amint rájönnek, hogy a tartalom dekódolhatatlan a színek miatt, ott fogják hagyni. Ha mégis sokféle színt akarsz használni, akkor a kártyaalapú design mellett teheted ezt meg, mert a színek ezeknél mindig egy-egy elemhez kapcsolódnak. Ez nagyobb rugalmasságot enged a színek használatánál, ugyanakkor a rendezettség érzetét kelti.

TISZTA FEKETE

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

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

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

Egyetlen élénk szín használata

Az egyik, és egyben legnépszerűbb megoldás, amikor egyetlen élénk színnel töltöd ki a weboldaladat, illetve ennek különféle árnyalatait és tónusait is beveted. Az ilyen színpaletták vizuálisan rendkívül erősek, különösen, ha sikerül egy figyelemfelkeltő betűtípussal kombinálni. Mindenképpen belevésődnek az emberek emlékezetébe, ha egy ilyen oldallal találkoznak. Ha kiválasztottad a megfelelő színt, akkor amellett már csak feketét vagy fehéret használj kiegészítő színként, mert így kevésbé megterhelő és könnyebben befogadható az emberek számára kisméretű kijelzőn a látvány.

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

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

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

A technika korábban a nyomtatásban volt népszerű, azonban online is elterjedté vált az utóbbi években. Vizuálisan mindenképpen kiemelkedő megoldás, és viszonylag könnyen elkészíthető Photoshop vagy más képszerkesztő használatával. Előnye, hogy nem csak nagy kijelzőkön, hanem mobilokon is jól mutat a duotone megjelenés. A két élénk szín kombinációját a domináns kép elkészítésénél érdemes használni. Ehhez válassz ki egy jó minőségű fotót, melyen tisztán és világosan kivehető annak tárgya. Ha túl sok dolog látható egy fotón, akkor ezzel a megoldással értelmezhetetlenné válhat a kép. ket-szin-hasznalata Ezután válaszd ki a színeket, melyek jól visszaadják a kép hangulatát. Emlékezz arra, hogy a különböző színek, különböző érzelmeket képesek kiválatani. Mindehhez egyébként nem is muszáj módosítani az eredeti képet a weboldaladnál, ha a Colorfilter.css-t használod a CSS kódban.

Overlay használata

Ebben az esetben egy meglévő képre vagy videóra egész egyszerűn ráhúzol egy félig átlátszó színt. Ha egy erőteljes és telített színt használsz – mondjuk egy material design színt -, akkor modern megjelenést kapsz eredményül. Ezzel a megoldással erősítheted a meglévő fotód hatását, illetve befolyásolhatod az általa kiváltott érzelmet. szin-overlay A overlayt bevetheted egy kártya alapú webdesignnál az egyes kártyákon, a videótartalmaknál, vagy a call to action kihangsúlyozásához. Amikor egyetlen színt használsz overlayként, akkor mindenképpen járj el gondoan a telítettség és az átlátszóság meghatározásánál. Egy kevésbé átlátszó és telített szín képes teljesen magára vonni a figyelmet, azaz elterelni magáról a fotóról, míg a világosabb színek esetén nagyobb hangsúly kerül a képre.

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

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

Ennek ellenére, ha egy igazán egyedi weboldalt szeretnénk, érdemes megkockáztatni a sötét színek használatát. Ha ügyesen csináljuk, akkor ezáltal egy komoly kreativitást, eleganciát, kifinomultságot és professzionalizmus sugalló weboldalt kapunk. Ehhez azonban kell a szakértelem, a jártasság és a tapasztalat a weboldaltervezésben, különben nagyon félre lehet menni.

Ráadásul nem is alkalmazható minden típusú weboldal esetében. Fotózással, művészettel, divattal foglalkozó oldalak számára remek választás lehet, sőt akadnak webáruházak is, melyek használják, ugyanakkor például egy sok szöveget és semmi egyebet nem tartalmazó blog számára inkább egy világos weboldal a jobb megoldás. sötét-tónusú-weboldal-05 Figyelembe kell azt is venni, hogy vajon illeszkedik-e a márkánkhoz a sötét tónus. Ha úgy érezzük, hogy passzol a brand image-éhez, témájához, képes azt erősíteni a hangulatával, akkor meg lehet kockáztatni. Ehhez azonban először elemezni kell a márkát, végig kell gondolni, hogy milyen kifejezésekkel írnánk körül, illetve mi is a termék vagy szolgáltatás, amit kínál, és hogy a logó illeszkedik-e a sötét színpalettához.

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

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

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

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

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

Sokszor merül fel a sötét tónusú weboldalakkal szemben, hogy olvashatósági, átfuthatósági szempontból nem a legjobb megoldást jelentik. A fekete alapon világos betűk olvasása meg tudja terhelni a felhasználók szemét, ennek következében sok időt nem is fognak eltölteni tartalmaink befogadásával. Másfelől viszont az is igaz, hogy a világító kijelzők hosszas nézése szintén fárasztja a szemet. A megerőltetés miatt felléphet fejfájás, nyakfájdalom, homályos látás, vagy égő, szúró érzés a szemben. Nem véletlen, hogy sok felület éppen emiatt inkább sötét témát használ, mivel az csökkenti a szem terhelését.

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

Jó választás lehet, ha a címeknél – vagyis a nagyobb betűméreteknél – valamilyen sans serif betűtípust használunk, amit a kenyérszövegeknél egy serif betűtípussal kombinálunk. (A betűtípusok megfelelő választásához és kombinálásához itt egy kis segítség.) Emellett alapvetően érdemes nagyobb betűméretet használni, mint világos témáknál, és a white space-t, azaz a negatív teret is alapvetően nagyobbra kell venni.

Ebbe beletartozik az is, hogy az egyes betűk és a sorok között is esetleg nagyobb távolságot tartunk, ahogy a bekezdések is lehetnek rövidebbek és jobban elválasztottak, mint világos témáknál. A lényeg azonban az, hogy kevés legyen a szöveges tartalom, mert egyébként zsúfoltnak hat majd a weboldal, és könnyen felborul a képek és a szöveg egyensúlya. sötét-tónusú-weboldal-02 Tehát mikor elfogadható egy sötét téma használata?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Egyszerűsíts!

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

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

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

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

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

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

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

Sokszor érzünk mindenféle színt túlságosan is harsánynak, működésképtelennek. Ilyenkor nyúlhatunk a fekete és a fehér használatához, melyektől azonban sokan félnek, mondván: elrettenti a felhasználókat, akik aztán nem is mélyednek el az oldal tartalmában. Ugyanakkor a fekete vagy a fehér hátterek erős kontrasztot biztosítanak a rajtuk lévő szövegnek, a felhasználót ráadásul semmilyen szín nem zavarja meg a szöveg vagy a képek befogadásában, teljes mértékben a tartalomra tud koncentrálni. siberia Habár fekete-fehér weboldalaknál a designer vállát már nem nyomja a megfelelő színséma kiválasztásának terhe, ugyanakkor nehézségként felmerül, hogy most már színek nélkül kell megoldani a weboldal jó használhatóságát. A színek már nincsenek segítségére design-eszközként, úgyhogy valamivel kompenzálnia kell a hiányukat. Ez pedig komoly erőfeszítést igényelhet a részéről, be kell vetnie a legjobb képességeit, hogy működő és látványos oldalt tudjon összerakni. Ilyenkor szükségesek a kreatív megoldások, és a designer minden tudása. Viszont az akadályok átugrálása kétségtelenül hozzájárul a fejlődéséhez is.

Hogyan használj színátmeneteket a weboldaladon?

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. A weboldalakon mégis megfontoltan kell őket használni, hogy természetes legyen a megjelenésük.

A gradiensek megjelenése 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 gradiensekkel tehát mélység és a valóság érzetét lehet kelteni egy nem természetes tárgy esetén is. Gradiens a természetben

 

A gradiensek egy “új színt” hoznak 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 mennyiségüket, akkor kapsz egy egyedi színt, amit bárhol használhatsz.

Márpedig egyre több weboldalon veszik elő őket 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!

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. Színátmenet egy weboldal hátterénél

 

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. Gradiens egy weboldalon

 

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

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

A legnehezebb része a munkának a megfelelő színek kiválasztása. Ha olyan színeket választasz, melyek közel esnek egymáshoz a színkeréken, akkor azok természetesnek hatnak majd. 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.

Ugyanakkor a színátmenetek készítésének vannak, vagy legalábbis lehetnek szabályai. Ezeket vizsgálta Erkan Kerti, a Prototypr blogon.

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: Egy lágy színátmenet

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:  Egy erősebb gradiens

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.

Színátmenetek a természetben

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.

Néhány 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.

Erős színek a Mailchimpnél

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.

Címkék: ,

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