Keresés
Header Háttér

Webshark Blog

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

2018-05-160 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. 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!

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.

De most nem arról lesz szó, hogy miként kellene megjelenniük a színátmeneteknek ahhoz, hogy egy weboldal-elem úgy nézzen ki, mintha a valóságból lépett volna elő. Ez a szkeuomorfizmusra volt jellemző. Ma a design nem azért van, hogy valami szebb, hanem hogy jobban használható legyen. A design egy megoldást jelent egy problémára. Attól pedig, hogy megmutatod, miként néz ki valami a valóságban, még nem feltétlenül jelzed a felhasználóknak hogyan működik. Vagyis nem oldod meg a problémát.

A felhasználói problémák megoldására a design különböző eszközöket használ: tipográfiát, pszichológát, művészetet. De ide tartoznak a színek is. Mint arról már hosszan írtunk: a színeket megfontoltan kell kiválasztani, hogy hatékony legyen a weboldalad, miközben egyedivé is tesz. Nagyon sok weboldal használja ugyanazokat a színeket a logóiban és a felületein. Ezektől a színektől függenek és nehezen tudják ezeket megváltoztatni. Természetesen rendkívül sok szín létezik, amiből válogatni lehet, de amikor gradienseket kezdünk használni, akkor hirtelen megnő a lehetőségek száma.

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.

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

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.

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.

Érdemes azonban figyelembe venni azt is, ami korábban már többször elhangzott: a természettől érdemes kölcsönözni színátmeneteket, hiszen ezek 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.

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.