Se non altro, il 2017 è stato un anno di colori nella progettazione di siti web. Le tendenze del colore hanno dominato la conversazione sul design, con tonalità più luminose e audaci come gran parte del paesaggio.
C'è una nuova tendenza di colore che combina molte di quelle opzioni luminose in palette di colori più grandi che potresti ora aspettarti: i modelli di colori dell'arcobaleno. Proprio così, più designer stanno cambiando con un sacco di colori e incorporando arcobaleno vivace, colori sfumati in progetti di design. Ed è davvero fantastico!
Ecco uno sguardo alla tendenza e alcune idee su come usare colori vividi che non siano vistosi.
Rainbow Animation for Engagement
Da quando Spotify è arrivato sulla scena, ha modellato le tendenze del design e ha spinto i confini di come si presenta il design. Il sito di musica è in costante aggiornamento e modifica il suo design e utilizza i micrositi per evidenziare generi e artisti specifici.
Il design del sito Web di London Grammar Moodmix utilizza un blob di colori rimbalzante per attirare l'attenzione dell'utente. L'animazione è interessante e ti fa venir voglia di allungare la mano e toccarla. E questo è l'obiettivo di questa animazione color arcobaleno. Si noti che la chiamata all'azione è proprio nel mezzo di tutto quel colore.
Il risultato è un design semplice con un'interessante animazione che guida gli utenti fino all'obiettivo del design. L'animazione funziona con molto colore a causa del movimento. Il blob non sarebbe vicino come interessante in un singolo colore.
Colore vs. Buio
I colori dell'arcobaleno possono essere difficili da usare a causa delle preoccupazioni sul contrasto. Mettere colori brillanti e in stile arcobaleno su uno sfondo scuro può risolvere la maggior parte di questi problemi.
I colori vivaci salteranno quasi da uno sfondo scuro.
Un altro nome ben noto nella progettazione e nello sviluppo di siti web, Github, utilizza i colori dell'arcobaleno per promuovere la sua conferenza quest'anno. Il semplice sito Web utilizza un divertente logo in stile arcobaleno e chiama i pulsanti di azione per la vendita dei biglietti. Ciò che è diverso in questo design da molti altri elementi estetici dell'arcobaleno è che il design è piuttosto piatto e non c'è un gradiente per i colori. Ogni riga nel logo è di un colore diverso come lo sono le lettere. Un gradiente viene utilizzato solo per il pulsante CTA.
Savee va in un'altra direzione con il colore dell'arcobaleno su uno sfondo scuro, utilizzando un sacco di immagini ad alto colore per creare un mosaico con un tocco arcobaleno. Mentre la maggior parte degli usi del colore arcobaleno fornisce una graduazione dal rosso al giallo al verde al blu, non è sempre il caso. Le tavolozze dei colori arcobaleno possono essere qualsiasi cosa con un uso di tonalità ampio.
Colore sottile
A volte gli usi migliori degli stili arcobaleno non saltano fuori dallo schermo. Southwest utilizza una tavolozza più sottile con sfumature arcobaleno sullo sfondo.
La scelta interessante quasi azzanna molte delle altre tendenze di colore dell'anno e il risultato è rinfrescante. Guardi il design quasi perché è così diverso rispetto a molti altri design di siti web in circolazione proprio adesso.
Anche con una tavolozza di colori arcobaleno più attenuata, ponete l'accento sul contrasto tra gli elementi di sfondo e in primo piano per garantire che ogni elemento sia facile da vedere e leggere. Questo è il problema più comune con i disegni in stile arcobaleno: contrasto insufficiente e leggibilità sfidante.
Logo arcobaleno
Prendi in considerazione l'utilizzo di colori arcobaleno per un semplice logo. Questo è probabilmente l'uso più difficile del colore dell'arcobaleno, ma può avere un effetto sorprendente.
È impegnativo a causa di tutti i luoghi e dei modi in cui potrebbe essere utilizzato un logo. Optare per i colori dell'arcobaleno potrebbe funzionare meglio per le piccole marche che non usano il logo in molte applicazioni. Sicuramente vorrai un'opzione secondaria anche quando un sacco di colori non funziona.
Richard Gazdik utilizza un logo arcobaleno per il suo portfolio e la successiva navigazione. Funziona quasi perfettamente grazie alle sue iniziali - RGB - e alla relazione con i colori selezionati. Non tutti avranno questa fortuna, ma dimostrano come un logo di alta qualità possa essere efficace in un semplice schema di progettazione.
Colore come punto focale
Il colore dell'arcobaleno può essere la cosa che attira gli utenti in un design con una forte prima impressione.
Ma c'è una linea sottile tra il colore dell'arcobaleno che si impegna e il colore dell'arcobaleno che può allontanare gli utenti. Ricordate alcuni dei design del sito web della fine degli anni '90 e dei primi anni 2000 quando quasi tutti i siti web avevano colori sgargianti ovunque (e lampeggianti)? Questo tipo di trattamento con i colori dell'arcobaleno può essere disastroso e allontanare gli utenti.
Lonsdale fa il contrario con un video in loop di liquido arcobaleno che è affascinante da guardare. Il movimento e i cambiamenti di colore sono audaci e ti fanno venir voglia di guardare. Lo sfondo arcobaleno è compensato dal tipo bianco e dagli elementi di navigazione per guidare gli utenti con il resto del design, che si attacca al colore delle immagini su uno sfondo bianco.
Codice colore ha un altro approccio con un sacco di colori vivaci in tutto il design. Il colore è usato per mettere il focus visivo sul prodotto sullo schermo: telefoni e orologi che mostrano app.
Crea uno sfondo coinvolgente
I blob arcobaleno potrebbero essere quasi una tendenza dei colori: animazioni liquide, stile di inchiostro, bolle di colore in movimento. Come elemento di sfondo, il colore dell'arcobaleno può aiutare a impostare il tono per un progetto e guidare il coinvolgimento degli utenti. (Pensa a quanto più ti piace attirare il colore rispetto a un singolo sfondo beige.)
Mentre molti di questi elementi di sfondo hanno qualche movimento sotto forma di animazione o video, non è necessario. Ciò che è comune tra i siti Web con sfondi arcobaleno è che essi sono spesso contenuti nella home page o nel disegno sopra il rotolo e il resto del sito Web è meno occupato.
Questa è una grande tecnica quando si tratta di impegno. C'è qualcosa con cui gli utenti possono connettersi, portandoli a contenuti che possono immergersi in qualcosa di più profondo.
Altre tecniche di gradiente
I colori dell'arcobaleno possono essere un'estensione di un'altra tendenza cromatica di quest'anno: il ritorno del gradiente.
Prova a sovrapporre un gradiente con un tocco arcobaleno. Scegli un cambio di colore completo dal rosso al blu, come SpicyWeb o scegli colori più trendy come Talkd.
In ogni caso, usare una sfumatura può essere un modo divertente per aggiungere colore senza sentirsi opprimenti. Funziona a schermo intero o in elementi più piccoli. Un gradiente può anche aiutare a incorporare i colori del marchio in una combinazione di colori in stile arcobaleno senza una riprogettazione di un sito Web completo.
Evidenzia qualcosa di diverso
Usa la tendenza del colore arcobaleno per evidenziare qualcosa di insolito o diverso nel tuo design. Poiché i colori arcobaleno sono così accattivanti, possono aiutare gli utenti con un modello di utente non convenzionale, attirare l'attenzione su un determinato bit di contenuto o parte dello schermo o contribuire a creare clic e conversioni.
Jony Guedj usa il colore per la navigazione. Gli elementi del menu non sono composti nel solito modo, si trovano nella parte inferiore dello schermo e funzionano solo con l'azione di scorrimento per visualizzare diversi video clip. Mentre in genere questo tipo di design non sarebbe consigliato, funziona qui. I colori dell'arcobaleno attirano l'attenzione degli utenti e aiutano le persone a capire come utilizzare il sito web.
Conclusione
La tendenza del colore arcobaleno è molto divertente.
Può essere difficile da usare se il colore ti intimidisce un po '. Ma inizia in piccolo con un elemento color arcobaleno per vedere come funziona. La maggior parte dei designer non sta convertendo interi siti web in progetti arcobaleno; usano il colore dell'arcobaleno per creare effetti visivi efficaci che attirano l'attenzione degli utenti. È probabile che la tendenza sia emersa.