Andremo a sviscerare le attuali tendenze del design digitale, per primo Gradients, uno dei temi più menzionati nei risultati del nostro sondaggio sulle tendenze, realizzato grazie alla collaborazione degli utenti e della giuria di Awwwards. Guarda i risultati completi del sondaggio nel nostro libro NOW. A Contemporary Landscape for Digital Thinkers.

I raggi sono di tendenza da un po’, inizialmente sono tornati in modo convenzionale negli sfondi e nelle immagini. Spotify li ha resi di nuovo popolari applicando i gradienti duotone sulle foto come elemento caratteristico del marchio nelle sue campagne e micrositi. Qui puoi trovare un piccolo tutorial su come creare gradienti duotonali in photoshop.

Quest’anno abbiamo visto vari gradienti multicolori con palette di colori vibranti e forme irregolari con effetti di sfocatura e distorsione. I gradienti sono attualmente utilizzati in molti modi, ma il più caratteristico, in termini di tendenze, è il loro uso esteso a elementi secondari all’interno della composizione, come hover, titoli, elementi 3D, icone e altro.

• 

L’iPhone X rappresenta il paradigma delle tendenze del 2018. Nella sua landing page, negli annunci e in molti degli elementi delle sue campagne promozionali, vengono utilizzati gradienti di varie tonalità sopra i titoli, i testi o anche l’isotipo. Tuttavia, negli sfondi e soprattutto nel design della homescreen dell’iPhone X, i gradienti NON sono uniformi come i tradizionali gradienti lineari o radiali, ma multicolore con sfumature irregolari.

Gradienti in 3D? Stile vertex color e colormap

Sembra ovvio parlare di gradienti in 3D, dal momento che l’illuminazione della scena genera una gradazione di luce sulla superficie dell’oggetto, ma ciò che è inerente a questa tendenza è proprio l’uso dei gradienti come texture dell’oggetto, a volte imitando le tecniche vertex color e colormap gradient. Entrambe le tecniche servono più di una funzione puramente decorativa, dato che sono usate per rappresentare dati o mappare oggetti 3D.

Tipi di gradienti

Possiamo fondere i colori in molteplici modi, i più comuni sono gradienti lineari o radiali con diversi parametri come raggio, orientamento, opacità o punti colore. Quello che va di moda adesso, come abbiamo visto nel caso dell’iPhoneX, è l’uso di miscele non uniformi che usano mesh a gradiente o altre tecniche. Con il gradient mesh distorciamo la superficie del gradiente per generare una forma libera. Possiamo trovare molti tipi di gradienti come monotono, duotono, multicolore, rampe di gradienti, ecc, come dimostrato nel seguente grafico.

Strumenti utili per i gradienti CSS

Per ricreare questi effetti nei CSS ci sono molti strumenti disponibili che permettono di crearli attraverso editor visuali, semplicemente copiando e incollando il codice CSS, come potete vedere qui: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Scarica il file sorgente dei gradienti!

Goditi i gradienti, scarica gratuitamente il file sorgente in formato vettoriale .ai o pdf per fare i tuoi esperimenti di design con i gradienti del poster.

Scarica qui

Awwwards Gradients Collection

Come sempre abbiamo fatto una selezione di SOTD e nominati in modo che tu possa vedere questi effetti in uso, speriamo tu possa trovare qualche ispirazione nelle Awwwards Collection o nel nostro libro, NOW. A Contemporary Landscape for Digital Thinkers che discute le principali tendenze del web design dell’anno.

• 
• 
• Modello 3D WebGL In WebGL
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Homepage In Parallax