A jelenlegi digitális design trendeket boncolgatjuk, elsőként a Gradients-t, az egyik legtöbbet említett témát az Awwwards felhasználói és a zsűri együttműködésének köszönhetően végzett trendfelmérésünk eredményeiben. Tekintse meg a felmérés teljes eredményeit a MOST című könyvünkben. A Contemporary Landscape for Digital Thinkers.

A gradiensek már egy ideje divatosak, kezdetben hagyományos módon a hátterekben és a képekben tértek vissza. A Spotify tette őket ismét népszerűvé azzal, hogy a márkára jellemző elemként duotone gradienseket alkalmazott a fotók felett a kampányaiban és a microsite-okon. Itt találsz egy kis bemutatót arról, hogyan hozhatsz létre duotone gradienseket photoshopban.

Az idei évben különböző többszínű gradienseket láthattunk vibráló színpalettákkal és szabálytalan formákkal, elmosódási és torzítási hatásokkal. A gradienseket jelenleg sokféleképpen használják, de a trendek szempontjából a legjellemzőbb, hogy használatukat kiterjesztik a kompozíción belüli másodlagos elemekre, például a hoverekre, címekre, 3D elemekre, ikonokra és így tovább.

• 

Az iPhone X a 2018-as trendek paradigmáját képviseli. A landing page-jén, a hirdetésekben és a promóciós kampányok számos elemén különböző árnyalatú gradienseket használnak a címek, szövegek vagy akár az izotípus felett. A hátterekben és különösen az iPhone X kezdőképernyőjének kialakításában azonban a gradiensek NEM egységesek, mint a hagyományos lineáris vagy radiális gradiensek, hanem többszínűek, szabálytalan elegyítéssel.

Gradients in 3D? Vertex color és colormap stílus

Kézenfekvőnek tűnik gradiensekről beszélni a 3D-ben, hiszen a jelenet megvilágítása a fény gradációját generálja az objektum felületén, de ami ennek az irányzatnak a velejárója, az éppen a gradiensek használata az objektum textúrájaként, néha a vertex color és colormap gradiens technikákat imitálva. Mindkét technika több mint pusztán dekoratív funkciót szolgál, mivel adatok ábrázolására vagy 3D objektumok leképezésére használják őket.

A gradiensek típusai

A színeket többféleképpen keverhetjük, a leggyakoribbak a lineáris vagy radiális gradiensek különböző paraméterekkel, például sugárral, orientációval, opacitással vagy színpontokkal. Ami mostanában divatos, ahogy azt az iPhoneX esetében is láthattuk, az a nem egyenletes keverések használata, amelyek gradiens hálót vagy más technikákat használnak. A gradiens hálóval a gradiens felületét torzítjuk el, hogy szabad alakzatot hozzunk létre. Sokféle gradienstípussal találkozhatunk, mint például monoton, duoton, többszínű, gradiens rámpák, stb, amint azt az alábbi grafika is mutatja.

Hasznos eszközök a CSS-gradiensekhez

Az ilyen hatások CSS-ben történő újraalkotásához rengeteg eszköz áll rendelkezésre, amelyek lehetővé teszik ezek létrehozását vizuális szerkesztőkön keresztül, egyszerűen a CSS-kód másolásával és beillesztésével, amint azt itt láthatjuk: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Töltse le a Gradients forrásfájlt!

Foglalkozz a gradiensekkel, töltsd le a forrásfájlt ingyenesen .ai vagy pdf vektor formátumban, hogy saját tervezési kísérleteket végezhess a poszteren szereplő gradiensekkel.

LETÖLTÉS ITT

Awwwards Gradients Collection

Mint mindig, most is készítettünk egy válogatást a SOTD-kből és a jelöltekből, hogy láthasd ezeket az effekteket használatban, reméljük, találsz inspirációt az Awwwards gyűjteményekben vagy a könyvünkben, MOST. A Contemporary Landscape for Digital Thinkers című könyvben, amely az év főbb webdesign trendjeit tárgyalja.

• 
• 
• WebGL 3D modell WebGL-ben
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Címlap Parallaxisban