Dopo anni di flat design, material e minimal, i gradienti hanno fatto il loro ritorno. Ovunque si guardi, i designer utilizzano dissolvenze di colore per aggiungere interesse visivo, creare coinvolgimento degli utenti e progettare qualcosa che vale la pena guardare.

Se non sei un fan dei gradienti, forse è il momento di ripensare alla tua posizione. Per aiutarti a convincerti, ho 10 motivi per amare e utilizzare le sfumature nei progetti di design del tuo sito.

1. Gli sfondi creano interesse

Un gradiente crea interesse visivo e aiuta a guidare gli utenti attraverso il design del tuo sito web

L’occhio atterrerà su un’area di colore e il passaggio tra le tonalità e le aree chiare e scure aiuta a spostare l’attenzione sullo schermo.

Le sfumature possono essere uno strumento di progettazione estremamente utile e accattivante per aggiungere una piccola scintilla a una moltitudine di progetti.

Ci sono molti modi per usare i gradienti, e una delle opzioni più popolari è usare un elemento di sfondo come immagini, testo e altro sovrapposti su di esso.

L’esempio seguente utilizza questa tecnica esatta. Il gradiente offre un luogo di riposo per gli occhi con colori tenui che aiutano a focalizzare maggiormente l’attenzione dalla parte superiore dello schermo fino all’angolo inferiore, dove si trova la direzione “Scopri di più”.

Il gradiente trasporta il resto della pagina, sotto la pergamena, in modo che l’utente ricordi sempre dove si trova. Fornisce anche un’area di tipo alone che evidenzia la navigazione principale.

Gradiente

2. Non solo sfondi

Come una sfumatura può essere usata in background, può anche essere come elemento in primo piano.

Le sfumature di colore sono una tecnica piuttosto versatile, che potrebbe contribuire alla loro popolarità generale.

Capovolgi l’utilizzo e una sfumatura in primo piano può essere utilizzata come riempimento per le scritte su uno sfondo più semplice per evidenziare e attirare l’attenzione sulle parole.

La scelta del colore deve essere intenzionale in modo da mantenere sempre un buon contrasto e una buona leggibilità.

Gradiente

3. Le sovrapposizioni possono riempire le immagini povere

Una sovrapposizione di colori può aggiungere ulteriore interesse a un’immagine che è un po povera.

Una sovrapposizione di sfumature non è una correzione per una bassa risoluzione o un’immagine un po brutta, ma può dare una scena più semplice al tutto.

Sovrapposizioni sfumate possono aiutare a stabilire il marchio, così come la voce, il tono e la personalità del sito web. I colori vivaci dicono qualcosa di molto diverso dalle opzioni più tenui.

Anche se questa tecnica può sembrare molto carina, come l’esempio di portfolio qui sotto, sta iniziando a essere un po troppo utilizzata.

Assicurati di fare qualcosa di leggermente diverso con una sovrapposizione di immagini piene e sfumate per distinguere il tuo design.

L’esempio seguente esegue la sparizione completa dell’immagine in modo che la parte inferiore della sfumatura crei una barra di colore uniforme nella parte inferiore dello schermo.

Sfumatura

4. Aiuta a spostare l’attenzione

Un gradiente elevato può aiutare a spostare l’attenzione attraverso un design.

La maggior parte degli utenti legge in un certo modo un modello a forma di F, iniziando in alto a sinistra e spostandosi verso il basso e attraverso lo schermo.

Utilizza le aree più chiare e scure di una combinazione di colori sfumati per spostare l’occhio da un punto iniziale, ad esempio un logo o un titolo, a una CTA importante sul lato opposto della pagina.

L’occhio andrà nelle aree di colore più chiare prima di spostarsi poi in spazi più scuri. Disegna e posiziona il colore sfumato per rinforzare questo movimento oculare.

Sfumatura

5. Crea qualcosa di unico

Mentre i gradienti stanno diventando sempre più popolari, il fatto che ogni combinazione di colori sia leggermente diversa li rende unici per gli utenti.

Una combinazione di colori killer può aiutare un utente a ricordare il tuo marchio e il tuo design.

Disegna i gradienti con lo scopo di aiutare a creare quella connessione. Ciò che è bello di un buon gradiente è che diventa quasi un colore su se stesso.

Se hai una grande sfumatura con cui lavorare, usalo come qualsiasi altro colore nella tavolozza del tuo marchio per stabilire una connessione visiva.

Gradienti

6. Enfatizza i colori del marchio

Usa una sfumatura se hai colori che si prestano ad essere abbinati. Per i nuovi marchi o siti web che cercano di affermarsi, questo può essere un modo solido per creare la connessione con gli utenti.

Pensa a come incorporare lo stesso stile di sfumatura in molteplici usi: sul sito web, per i social media in stampa o nelle campagne pubblicitarie. Vedendo lo stesso uso degli stessi colori con lo stesso gradiente, gli utenti associeranno questi colori con te.

L’esempio sotto, Community Sector Banking, fa esattamente questo. Le scelte di colore sono interessanti e il gradiente – nella foto e nella barra di navigazione in basso – rafforza la tavolozza dei colori e il suo rapporto con il marchio.

Sfumatura

7. Sono facili da creare (o generare)

Aggiungere un gradiente a un’immagine o crearne uno da zero può essere semplice come scegliere due o tre colori e quindi selezionare una forma per il gradiente dove i colori dovrebbero iniziare, fermarsi e sovrapporsi.

Le sfumature, in termini di forma sono direzionali, da sinistra a destra o su o giù; o radiale, dove le variazioni di colore emanano da un singolo punto in modo circolare. Un design può contenere uno o più stili di sfumature.

Scegliere i colori per il gradiente potrebbe essere il passo più difficile. Usando i colori che si trovano nelle vicinanze sulla ruota dei colori otterrai i gradienti più complementari e naturali.

Ma non è sempre quello con cui devi lavorare. In tal caso, ti consigliamo di giocare con i colori in modo da non finire con una brutta sfumatura nello spazio in cui le tue scelte di colori primari si incontrano.

Hai bisogno di fare un gradiente e non ti fidi delle tue capacità? Prova uno di questi strumenti:

  • WebGradients: raccolta gratuita di oltre 180 campioni sfumati premade in CSS, PNG, Sketch e Photoshop.
  • Gradient Buttons: CSS per pulsanti sfumati con stati hover animati
  • Gradient Wave Generator: CodePen per creare un’onda gradiente originale usando i tuoi colori.

Sfumature

8. Le sfumature sono più naturali

Anche se potrebbe non essere il tuo primo pensiero, i gradienti spesso hanno colori e combinazioni che sembrano naturali. Pensaci, non tutto in natura è una solida, unica sfumatura di verde.

Le sfumature sono una scelta naturale per questo motivo, in particolare quando si combinano colori che si sbiadiscono effettivamente l’uno nell’altro nel mondo naturale.

L’illustrazione sotto è un esempio troppo ovvio con un cielo che sfuma dal giorno (arancione) alla notte (blu).

Sfumature

9. Crea qualcosa di artistico quando non hai un grande effetto visivo

Una buona sfumatura può creare interesse visivo quando non si ha molto con cui lavorare.

L’uso di un colore brillante, come nell’esempio qui sotto, può aiutare a stabilire la presenza del tuo sito web.

I cambiamenti di colore sono abbastanza interessanti da poter essere spesso soli come elementi di design.

Pensa a come utilizzare e selezionare i colori in modo che creino la giusta attrazione emotiva per gli utenti.

Gradienti

10. Le sfumature sono on-trend

Le sfumature sono un elemento facile e altamente utilizzabile da aggiungere per un tocco di tendenza senza sentirsi opprimenti.

Con così tanti modi per usare un gradiente, ha molto senso che questa potrebbe essere la soluzione ideale.

E mentre i gradienti cadono in disgrazia di tanto in tanto, tendono a tornare piuttosto rapidamente a causa di un appello quasi universale.

Gradienti

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here