Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-06-130 komment

Miért és 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.

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.

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

Kategória: Design | Címke: , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.