Nejprve si rozebereme aktuální trendy v digitálním designu, nejprve Gradienty, jedno z nejčastěji zmiňovaných témat ve výsledcích našeho průzkumu trendů, který jsme provedli díky spolupráci uživatelů a poroty Awwwards. Kompletní výsledky průzkumu si prohlédněte v naší knize TEĎ. Současná krajina pro digitální myslitele.

Gradienty jsou trendy už nějakou dobu, zpočátku se vracely konvenčním způsobem v pozadích a obrázcích. Společnost Spotify je znovu zpopularizovala použitím duotónových gradientů nad fotografiemi jako charakteristického prvku značky ve svých kampaních a mikrostránkách. Zde najdete malý návod, jak vytvořit duotónové gradienty ve Photoshopu.

V letošním roce jsme se setkali s různými vícebarevnými gradienty s pestrou paletou barev a nepravidelnými tvary s efekty rozmazání a zkreslení. Gradienty se v současné době používají mnoha způsoby, ale z hlediska trendů je nejcharakterističtější jejich rozšíření na sekundární prvky v rámci kompozice, jako jsou hover, nadpisy, 3D prvky, ikony a další.

• 

Pravděpodobně iPhone X představuje paradigma trendů roku 2018. Na jeho vstupní stránce, v reklamách a v mnoha prvcích propagačních kampaních se nad nadpisy, texty nebo dokonce izotypem používají gradienty různých tónů. Na pozadí a zejména v designu na domovské obrazovce iPhonu X však gradienty NEJSOU rovnoměrné jako tradiční lineární nebo radiální gradienty, ale vícebarevné s nepravidelným prolínáním.

Gradienty ve 3D? Vertexová barva a styl colormap

Mluvit o gradientech ve 3D se zdá být samozřejmé, protože osvětlení scény generuje gradaci světla na povrchu objektu, ale to, co je tomuto trendu vlastní, je právě použití gradientů jako textury objektu, někdy napodobující techniky vertexové barvy a gradientu colormap. Obě techniky plní více než čistě dekorativní funkci, protože se používají k reprezentaci dat nebo mapování 3D objektů.

Typy gradientů

Barvy můžeme míchat více způsoby, přičemž nejčastěji se jedná o lineární nebo radiální gradienty s různými parametry, jako je poloměr, orientace, krytí nebo barevné body. Co je nyní v módě, jak jsme viděli v případě iPhoneX, je používání nerovnoměrných prolínání, která využívají gradientní sítě nebo jiné techniky. Pomocí gradientní sítě narušujeme povrch gradientu a vytváříme tak volný tvar. Můžeme se setkat s mnoha typy gradientů, jako jsou monotónní, duotónní, vícebarevné, gradientní rampy atd. jak ukazuje následující grafika.

Užitečné nástroje pro gradienty CSS

Pro znovuvytvoření těchto efektů v CSS je k dispozici spousta nástrojů, které umožňují jejich vytvoření prostřednictvím vizuálních editorů, prostým zkopírováním a vložením kódu CSS, jak můžete vidět zde: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool. Hue

  

• Zjemňující gradienty

  

• UI Gradients

  

Stáhněte si zdrojový soubor Gradients!

Zapojte se do práce s gradienty, stáhněte si zdrojový soubor zdarma ve vektorovém formátu .ai nebo pdf a provádějte vlastní designové experimenty s gradienty z plakátu.

Stáhněte si ZDE

Sbírka gradientů Awwwards

Jako vždy jsme pro vás připravili výběr SOTD a nominací, abyste mohli vidět tyto efekty v praxi, doufáme, že najdete inspiraci ve sbírkách Awwwards nebo v naší knize, TEĎ. A Contemporary Landscape for Digital Thinkers, která pojednává o hlavních trendech webdesignu tohoto roku.

• 
• 
• 3D model ve WebGL
• 

Ve WebGL

• 

.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage In Parallax