07. 05. 2018
S gradienty se na internetu setkáváte čím dál častěji. Kde se tato móda vzala? A jak pomáhá při tvorbě webových stránek?
Gradienty jsou v UX designu jedním z nejskloňovanějších trendů roku 2018. Ačkoliv bylo jejich používání ještě pár let nazpět spíše vzpomínkou na devadesátkové webdesignerské amatérství, dnes s nimi ve svém vizuálním stylu nešetří ani ti největší z největších. Od rebrandingu v roce 2016 je zapojuje třeba Instagram, ještě častěji se o nich ale mluví v souvislosti s vizuálem hudební aplikace Spotify. Proč taková změna? A co to vlastně tenhle trendy styl znamená?
Gradienty v grafickém designu vyjadřují pozvolný přechod z jedné barvy do druhé. Designér tak v podstatě může tvořit nové odstíny a přicházet s neotřelými návrhy, jaké by s pomocí základních barev nedokázal. Používání gradientů věrněji napodobuje reálný svět, ve kterém se s jednolitou barvou také nesetkáte. Na každý objekt totiž působí hra světel a stínů. A právě takové vnímání barev je pro lidské oko přirozené, což dnes on-line prostředí často odráží v tlačítkách, na pozadí nebo třeba v provedení loga. Najdete je ostatně i v některých titulních obrázcích na našem blogu i v celkovém vizuálním pojetí webu Modrého ducha
Zatraktivněte svůj web hrou světel a stínů. Pracujte s gradienty jako Modrý duch.
Že umí gradienty vcelku nenápadně zachytit pozornost lidí surfujících po internetu, se vědělo už v 90. letech. Jenže v roce 2014 Google představil svůj Material design – vizuální styl, který dnes stále můžete vidět na Gmailu, Google Maps i YouTube. Ve stejném roce přišli vývojáři z Windows se svým design language Metro. Na síti se najednou objevilo něco nového a svěžího, jednoduchého na pochopení, grafika navíc vypadala dobře na mobilních zařízeních s nízkým rozlišením. Před čtyřmi lety tak grafici při tvorbě webových stránek začali používat téměř výhradně flat design – jasné, jednobarevné plochy byly považovány za univerzální kvalitu.
Gradienty vhodně použité na pozadí obrázku nebo textu vzbuzují zájem a podporují cíle stránky. Pomocí barevných přechodů totiž dokáží oko návštěvníka intuitivně navést od světlejších do tmavších odstínů, na tlačítko s výzvou k akci nebo přimět k dalšímu scrollování. To je také důvod, proč na mnohých webech pozadí směrem dolu tmavne. Barevné přechody zvýrazní také nápisy, kde pomohou dát důraz důležitému sdělení. U psaných textů je ale vždy potřeba hlídat kontrast s pozadím. Populární jsou různé odstíny při překrývání nevýrazných obrázků. Hlavně neotřelé barevné kombinace se návštěvníkovi stránek okamžitě vryjí do mysli.
Používání barevných přechodů s sebou nese také technické problémy. Problém vzniká například při zobrazení na některých monitorech s větším kontrastem. V takovém případě se gradienty nezobrazují plynule, ale v pruzích. Stejný problém vzniká u tisku – v tom případě je ale možné jej řešit třeba přidáním „šumu“.
Další tipy na využití gradientů hledejte třeba v článku serveru WebdesignDepot 10 Reasons to Love and Use Gradients. Ukázky gradientů si prohlédněte na stránce WebGradients, o něco víc zábavy s barevnými přechody zažijete na serveru uiGradients. Ještě praktičtější a zajímavější ukázky, včetně vizuálu k iPhonu X od Apple, najdete ve výčtu Trendy Gradients in Web Design na Awwwards.com. Co na ně říkáte?
Praktický
Inspirující
Zábavný
Nic moc
