Articles

Gradienti web ispiratori e dove trovarli

I gradienti web stanno tornando sono tornati come elemento di design per il mondo online. Sono diventati un modo semplice per dare vita al tuo sito web.

Se sono ben applicati danno all’occhio una sensazione unificata che invita l’utente a rimanere sul sito web. Questa sensazione nasce dalla mancanza di bordi duri e rotture nella struttura della pagina.

web gradients - nyc_pride Come puoi vedere nell’esempio precedente, il gradiente calma l’azione dell’immagine di sfondo per renderla adatta ad essere lo sfondo di questo design dell’interfaccia utente.

Vuoi sapere il motivo?

Il segreto è che l’armonia che un gradiente diffonde deriva da fenomeni in natura dove per lo più non appaiono bordi aspri. Tutto ha una forma organica o transizioni morbide.

Inoltre, gli esseri umani hanno una grande visione dei colori e godere di vedere i colori. Immagina un gradiente in bianco e nero. Dipende dal caso, ma molto probabilmente non sembra che i gradienti grandi e colorati siano preferiti in molti casi.

Perché pensi che a tutti piaccia guardare i tramonti?

web gradients-sunset gradient

O semplicemente mette la testa verso il cielo?

web gradients - nature gradient

L’utilizzo dei gradienti sullo sfondo di una pagina web può anche essere un modo discreto per guidare la vista del visitatore attraverso il contenuto senza dover posizionare fastidiose frecce in primo piano.

Il primo piano dovrebbe essere usato comunque per le informazioni importanti e lo sfondo può soddisfare uno scopo subordinato.

Applicato ad elementi come pulsanti e icone gradienti può anche portare ad un facile effetto 3D.

Non è sempre facile trovare il gradiente adatto e applicarlo correttamente con tutti questi vantaggi.

Non preoccuparti. C’e ‘ una soluzione.

Ci sono molti strumenti online che offrono già molti gradienti preparati solo per ispirazione o direttamente per integrarli facilmente nel tuo sito web.

Ora devi solo scoprire quale strumento si adatta meglio alle tue esigenze.

Iniziamo.

Inspirational web gradients

web gradients - symodd

Come accennato, symodd è un classico esempio di come i buoni gradients web possano funzionare come uno sfondo semplice che è comunque interessante e accattivante.

web gradients - qards

Non solo utilizza Qards un gradiente come sfondo, ma vengono applicati anche a quasi ogni singolo elemento, specialmente alle icone e ai pulsanti.

web gradients - gogoro

Gogoro utilizza un gradiente in una forma che lo rende più dinamico e supporta lo scopo del marchio.

Come puoi vedere su questi siti web, si tratta di trovare il giusto equilibrio e usare i colori con moderazione.

Non è un gradiente ispiratore:

web gradients - badExample

Questo gradiente è così brutto che devo scusarmi presentandolo qui perché fa così male all’occhio. Ha troppi colori che sono tutti molto diversi. Inoltre, il semplice testo nero in primo piano sembra spostato e viene soppresso dal gradiente.

Quindi, se dopo aver visto questi esempi non sei ancora del tutto sicuro di poter applicare un gradiente in grado di supportare il tuo progetto nel modo in cui dovrebbe, puoi approfondire il web e la progettazione grafica.

Non abbastanza?

WEB DESIGN PROFESSIONAL

Scopri di più sul nostro corso di firma.
Scegli il programma migliore
per studiare ONLINE o a scuola.

VISUALIZZA IL CORSO

Segui questa guida per ottenere una migliore comprensione dei tipi di gradiente e consigli sulle migliori pratiche.

where e dove trovarli

web gradients - uiGradients
web gradients - uiGradients

uiGradients è molto facile da usare perché ha solo due schermate principali. Dopo il caricamento è possibile vedere direttamente un gradiente casuale su tutto lo schermo.

Con le frecce ai lati, è possibile passare all’interno della grande offerta di tutti i tipi di gradienti. La seconda schermata mostra tutti i gradienti come un elenco da scorrere e ordinare per colore.

L’atmosfera creata dai gradienti web è supportata dal suo nome individuale. Come caratteristica speciale, puoi anche ruotare il gradiente per vedere come appare da un’altra prospettiva.

Per le persone che vogliono contribuire con il gradiente creato alla comunità, esiste l’opzione per aggiungere il gradiente alla raccolta tramite GitHub. Questo rende la varietà di gradienti quasi illimitata.

uiGradients fornisce tre modi per salvare il gradiente scelto. Se si desidera ricreare il gradiente in un software di progettazione grafica o codice si può semplicemente copiare il codice colore esadecimale.

Per un’implementazione diretta nel tuo sito web, puoi ottenere il codice CSS.

Per salvare il gradiente come ispirazione basta scaricare il file JPEG.

WebGradients

web gradients - WebGradients

Questo strumento inizia mostrando la raccolta di 180 web gradients come una lunga lista che puoi scorrere. Una volta che si desidera vedere più di un gradiente basta cliccare sulla selezione e il colore verrà mostrato su tutto lo schermo.

Ogni gradiente ha un nome in modo da rendere più concreta la loro possibile applicazione in seguito.

WebGradients è gestito da itmeo, una società che fornisce più strumenti digitali online. Il loro servizio gradiente, in questo caso, è gratuito a meno che non si desidera scaricare un file di schizzo o Photoshop.

Come in uiGradients hai anche tre possibilità per salvare la tua nuova ispirazione gradiente trovata qui.

Per ogni gradiente, è possibile salvare un file PNG di grandi dimensioni per utilizzarlo come sfondo per il proprio design grafico.

Per utilizzare i colori esatti e il gradiente in un software di progettazione grafica o codice, è possibile copiare il codice colore esadecimale o ottenere la versione CSS del gradiente.

coolHue

web gradients - coolHue

Questa raccolta di gradients è già mostrata quando apri il sito per la prima volta. È possibile scegliere entro 60 gradienti colorati. Basta scorrere in ogni caso sei tessere di fila di questa varietà di gradiente.

Sfortunatamente, non c’è modo di visualizzare il gradiente a grandezza naturale.

La bella aggiunta per coolHue è l’animazione quando si passa sopra le piastrelle gradiente che ti dà un’impressione tangibile di esso.

I gradienti web ti consegneranno la loro atmosfera solo attraverso i colori. Ecco perché non hanno nomi in questo strumento. Pertanto, nell’angolo in basso a destra, hai più opzioni per Sketch e Photoshop.

Quando si passa il mouse sul gradiente selezionato vengono visualizzate altre due opzioni. È possibile copiare il codice CSS per una facile implementazione nel codice o scaricare un piccolo file PNG.

Se vuoi usare i colori esatti puoi semplicemente copiare il codice colore esadecimale da sotto il gradiente.

ColorSpace

colorspace

ColorSpace offre la possibilità di scegliere e applicare un colore sfumato in 10 direzioni diverse. Per applicare un colore è possibile scegliere dal menu colore che si apre, lo stesso che si trova in un software di editing di immagini. È inoltre possibile incollare un codice colore esadecimale del colore in modo da ottenere i colori esatti che si desidera utilizzare.

Il gradiente viene applicato sullo sfondo su tutto lo schermo. Questo ti dà una sensazione molto buona dell’umore dei colori e ti motiva a scegliere il colore che ritieni possa essere più adatto al soggetto pertinente che potresti cercare.

Con ColorSpace puoi anche copiare l’URL del gradiente di colore scelto. Ciò rende molto facile condividere le opzioni di colore senza dover salvare un file e quindi inviarlo come allegato o inviare le specifiche di ciò che è il colore. Possono solo vedere cosa stavi guardando cliccando sul link che hai inviato e avranno tutte le informazioni di cui hanno bisogno, i codici esadecimali e il codice CSS.

Tuttavia, se preferisci salvare un file immagine, sfortunatamente questo sito web non ti offre questa opzione.

Ultimate CSS Gradient Generator

web gradients - Ultimate CSS Gradient Generator

Ora veniamo agli strumenti più complessi che in questo caso come dice già il nome vengono utilizzati solo per l’integrazione nel codice CSS.

L’interfaccia è divisa in quattro parti e ricorda un tipico software di progettazione grafica. È possibile regolare o creare preset, visualizzare questo risultato in una piccola anteprima e dare un’occhiata al codice CSS completo.

L’ultimo generatore di gradiente CSS è una parte dell’estensione per il browser ColorZilla. Il suo strumento gradiente offre possibilità illimitate per creare gradienti web.

Puoi aggiungere tutti i colori che vuoi, regolare tonalità e saturazione come lo sai dal tuo software di progettazione grafica, invertire il gradiente e impostare i colori, l’opacità e la posizione del gradiente.

Oltre a ciò, puoi salvare il tuo gradiente creato nei preset, c’è solo un modo per esportarlo con il codice CSS o SASS.

Ma prima di questo, è possibile impostare la dimensione del gradiente, modificarne l’orientamento in direzioni diverse e scegliere il formato del colore tra cinque opzioni date.

Problemi da decidere?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

Quale strumento di gradienti web è meglio usare dipende sempre dal tuo progetto, dal tempo che hai e dal livello di individualità o da altri requisiti di qualità.

La tabella sopra può aiutarti a decidere quale strumento utilizzare al meglio per il risultato che desideri avere.

Ricorda la cosa più importante?

Non usare troppi colori – la migliore pratica di oggi è usare solo due colori che non sono troppo diversi.

Quello a cui dovresti anche prestare attenzione è il design generale del tuo gradiente, il modo in cui lo applichi al tuo progetto in seguito e come si adatta al suo ambiente.

uiGradients offre tutte le caratteristiche visive importanti come si può vedere sul tavolo. Questo strumento ti fa immaginare il gradiente per il tuo progetto nel miglior modo possibile.

Se vuoi approfondire l’adattamento del gradiente per un progetto web di alta qualità, puoi combinare uiGradients con il generatore di gradiente CSS Ultimate importando il codice CSS o l’immagine scaricata.

Ora sei pronto a farlo da solo. Se si decide di lavorare con gradienti fatecelo sapere su Twitter.

WEB DESIGN PROFESSIONAL

Scopri di più sul nostro corso di firma.
Scegli il programma migliore
per studiare ONLINE o a scuola.

VISUALIZZA CORSO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.