Vom diseca tendințele actuale în designul digital, în primul rând Gradientele, una dintre cele mai menționate teme în rezultatele sondajului nostru de tendințe, realizat datorită colaborării utilizatorilor și juriului Awwwards. Consultați rezultatele complete ale sondajului în cartea noastră ACUM. A Contemporary Landscape for Digital Thinkers.

Gradientele sunt la modă de ceva vreme, ele au revenit inițial în mod convențional în fundaluri și imagini. Spotify le-a făcut din nou populare prin aplicarea de gradiente duotone peste fotografii ca element caracteristic al brandului în campaniile și microsite-urile sale. Puteți găsi aici un mic tutorial despre cum să creați gradiente duotone în photoshop.

În acest an am văzut diverse gradiente multicolore cu palete de culori vibrante și forme neregulate cu efecte de blur și distorsiune. Gradientele sunt utilizate în prezent în mai multe moduri, dar cel mai caracteristic, în ceea ce privește tendințele, este faptul că utilizarea lor este extinsă la elementele secundare din cadrul compoziției, cum ar fi hovers, titluri, elemente 3D, pictograme și multe altele.

• 

Iphone X reprezintă paradigma tendințelor din 2018. În landing page-ul său, în reclame și în multe dintre elementele din campaniile sale promoționale, sunt folosite gradiente de diferite tonuri deasupra titlurilor, textelor sau chiar a izotipului. Cu toate acestea, în fundaluri și, mai ales, în designul de pe ecranul de pornire al iPhone X, gradientele NU sunt uniforme precum cele tradiționale liniare sau radiale, ci multicolore, cu amestecuri neregulate.

Gradiente în 3D? Stilul vertex color și colormap

Pare evident să vorbim despre gradienți în 3D, din moment ce iluminarea scenei generează o gradație de lumină pe suprafața obiectului, dar ceea ce este inerent la această tendință este tocmai utilizarea gradienților ca textură a obiectului, imitând uneori tehnicile de gradient vertex color și colormap. Ambele tehnici servesc mai mult decât o funcție pur decorativă, fiind folosite pentru a reprezenta date sau a cartografia obiectelor 3D.

Tipuri de gradienți

Potem amesteca culorile în mai multe moduri, cele mai comune fiind gradienții liniari sau radiali cu diferiți parametri precum raza, orientarea, opacitatea sau punctele de culoare. Ceea ce este la modă în acest moment, așa cum am văzut în cazul iPhoneX, este utilizarea amestecurilor neuniforme care folosesc ochiuri de gradient sau alte tehnici. Cu mesh-ul de gradient distorsionăm suprafața gradientului pentru a genera o formă liberă. Putem găsi mai multe tipuri de gradienți, cum ar fi monotone, duotone, multicolore, rampe de gradienți etc., așa cum este demonstrat în graficul următor.

Utilizarea instrumentelor pentru gradienți CSS

Pentru a recrea aceste efecte în CSS există o mulțime de instrumente disponibile care permit crearea lor prin intermediul editorilor vizuali, prin simpla copiere și lipire a codului CSS, așa cum puteți vedea aici: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Download the Gradients Source File!

Implică-te cu gradienții, descarcă gratuit fișierul sursă în format vectorial .ai sau pdf pentru a face propriile experimente de design cu gradienții din poster.

DOWNLOAD HERE

Awwwards Gradients Collection

Ca de obicei, am făcut o selecție de SOTD-uri și nominalizați, astfel încât să puteți vedea aceste efecte în uz, sperăm că puteți găsi inspirație în colecțiile Awwwards sau în cartea noastră, ACUM. A Contemporary Landscape for Digital Thinkers (Un peisaj contemporan pentru gânditorii digitali), care discută principalele tendințe de web design ale anului.

• 
• 
• WebGL Model 3D În WebGL
• 

.

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