Trasformare i colori del marchio del tuo cliente in un sistema a 5 colori

I colori del marchio di solito iniziano con i codici esagonali che vengono applicati attraverso intestazioni, pulsanti e sfondi. Inizialmente è abbastanza semplice, ma man mano che il layout cresce, spesso hai bisogno di variazioni di colore più chiare, stati al bosco o accenti complementari. Gestire questo manualmente può diventare disordinato.

Il nuovo sistema di colore in Divi 5 lo rende più semplice permettendoti di definire una tavolozza una volta e costruire tonalità connesse dalla tavolozza dei colori iniziali. Ogni colore rimane in sintonia, anche se il design si evolve. In questa guida, imparerai come creare un sistema di colori flessibile e scalabile che mantenga tutto coerente sul sito del tuo cliente.

Comprendere il sistema di colore di Divi 5

Se hai lavorato con i colori globali in Divi 4, sai già quanto sia utile definire un colore una volta e applicarlo sul tuo sito. Divi 5 si basa sulla stessa idea, ma questa volta trasforma il colore in un sistema completo che si ridimensiona con te.

Iscriviti al nostro canale YouTube

Ecco i tre principali aggiornamenti:

Si inizia con le variabili di design. Definite la tavolozza del tuo marchio all'interno della scheda Colors in variabile manager e questi valori diventano le tue fondamenta. Una volta definiti, sono pronti per l'uso in qualsiasi modulo o sezione. E quando il marchio si evolve lungo la linea, devi solo aggiornare le variabili in un unico posto. Tutto ciò che è collegato ad essi si regola da solo.

Il secondo aggiornamento è il filtro a colori HSL. I cursori ti consentono di regolare la tonalità, la saturazione e la leggerezza, dandoti un maggiore controllo quando si lavora con tono e contrasto.

Se il tuo verde primario sembra troppo duro per uno sfondo, puoi ammorbidirlo leggermente, regolare la luminosità e salvare quella versione come variabile. Questo sarà un colore nuovo di zecca, ma è ancora collegato al colore originale.

Questo apre anche spazio per pensare nelle relazioni piuttosto che nei valori isolati. Puoi collegare le variabili insieme in modo che si rimangono sempre una certa distanza da un'altra, come più scura, più leggera, leggermente più calda o più sottomessa. Questi sono chiamati colori relativi, che è il terzo miglioramento.

Un colore hover, ad esempio, può essere definito come il 20% più scuro rispetto al primario. Se il colore primario cambia, lo stato del mouse mantiene la sua relazione senza bisogno di aggiustamenti manuali.

Questo sistema in tre parti crea un sistema di colori di lavoro flessibile e messo a terra. Non stai solo applicando colori un modulo alla volta; Stai costruendo una tavolozza che può spostare se necessario mantenendo il design coerente e pulito.

Impara tutto sul nuovo sistema di colori di Divi

Se finora hai fatto affidamento sui codici esadecimali, questo è il punto in cui quel flusso di lavoro inizia a sentirsi limitato. E questo è il tuo spunto per passare a un sistema di colori pronto per il futuro.

Trasformare i colori del marchio del tuo cliente in un sistema a 5 colori

Ora che sai come funziona il sistema di colore di Divi 5, attraversiamo quello che sembra in un vero progetto. Per questo esempio, abbiamo importato il layout della home page di realtà aumentata dalla Biblioteca Divi.

Costruiamo uno scenario. Supponiamo che un cliente desideri aggiungere un colore complementare per bilanciare il verde audace utilizzato in tutto il sito. Invece di aggiungerlo manualmente in alcuni punti, prendiamo questo come un'opportunità per spostare il layout sul sistema di colore di Divi 5 in modo da non dover apportare modifiche manuali in futuro se richiesto di nuovo.

Se guardi attraverso il layout, noterai che lo stesso verde appare in diversi punti, come titoli, pulsanti e elementi di accento. Ognuno utilizza un codice esadecimale fisso. Il nostro obiettivo è sostituire quelli con variabili di colore e costruire una tavolozza in grado di adattarsi ai cambiamenti in seguito.

Normalmente, aggiornare un layout come questo significherebbe modificare ogni modulo a mano. Ma nei prossimi passaggi, useremo variabili di colore, filtri HSL e logica dei colori collegati per costruire qualcosa di più stabile. Puoi seguire lo stesso layout o utilizzare il tuo progetto come base.

1. Salva il colore primario del tuo cliente come variabile di design

Se il tuo client ha condiviso un nuovo codice esadecimale o ti stai attaccando con un colore del marchio esistente, il primo passo è aggiungerlo a Design Varble Manager. Questo diventa il tuo colore di base e sarà la base per le varianti di colore che costruisci attorno ad esso.

Aggiunta di un colore primario

Per iniziare, aprire il gestore variabile e passare alla scheda Colors .

Il pannello può già includere valori predefiniti per testo primario, secondario, di intestazione e del corpo. Nel campo di colore primario, inserisci il codice esadecimale per il colore del marchio principale e fai clic su Variabili Salva.

Aggiunta di un colore secondario

Successivamente, creeremo una versione relativa di questo colore secondario usando la base come base. In questo modo, qualsiasi cambiamento futuro al colore di base porterà automaticamente.

In questo esempio, dal momento che stiamo aggiungendo un colore complementare per bilanciare il verde esistente, lo assegneremo come colore secondario. Lo sfondo del layout è nero, quindi questo abbinamento si distingue chiaramente.

Se stai lavorando solo con un colore per ora, sentiti libero di lasciare lo slot secondario impostato su nero.

Fai clic sul campione di colore secondario per aprire la finestra del colore. Tutti i valori salvati saranno elencati sotto i colori globali, con il colore primario elencato per primo.

Selezionalo. Questo porta il colore di base come punto di partenza.

Ora, fai di nuovo clic sul campione per riaprire la finestra, quindi aprire il menu a discesa dei filtri a colori . Ciò rivela i cursori HSL, dove è possibile regolare la tonalità, la saturazione e la leggerezza.

Usa questi cursori per modellare il nuovo colore. Una volta che ne sei felice, salva. E proprio così, hai un colore secondario collegato al primario.

Se desideri mantenere il colore secondario nero ma comunque collegarlo al primario, gira sia la leggerezza che la saturazione cursori fino a -100.

Per creare invece un'ombra più scura, lasciare la tonalità e la saturazione così com'è e ridurre solo la leggerezza.

A questo punto, puoi sperimentare liberamente. Regola i valori fino a quando il tono sembra giusto per il tuo design. Sia che il nuovo colore si fonda dolcemente con la tavolozza del marchio o si distingua come un contrasto, rimarrà collegato al primario ed evolverà con esso.

2. Costruisci i colori di supporto utilizzando le regolazioni HSL

Con i tuoi colori primari e secondari in posizione, il passo successivo è espandere la tavolozza. Questi colori di supporto danno alla tua stanza di design per respirare. Aggiungono flessibilità, contrasto sottile e ritmo visivo in tutto il layout.

Per creare queste varianti, aprire il pannello HSL e regolare i cursori:

• Crea tonalità più chiare per sezioni o sfondi che necessitano di contrasto senza attirare l'attenzione.
• Usa toni leggermente più scuri per pulsanti, stati al mouse o titoli audaci che devono distinguersi.
• Spostare leggermente la tonalità o la saturazione per formare colori di accento. Questo colore è ottimo per divisori, icone o altri piccoli punti salienti visivi.

Ti mostreremo come farlo una volta e puoi seguire lo stesso approccio per definire tutti i nuovi colori che desideri. Supponiamo che vogliamo creare una versione hover del colore secondario. Creeremo una nuova variabile di colore , gli daremo un nome chiaro, regoleremo i cursori per ottenere il tono giusto e salvarlo.

Ora che la variabile viene salvata, possiamo applicarla allo stato del mouse di un pulsante, come qualsiasi altro colore.

Mentre aggiungi colori di supporto, prova a pensarli come espressioni tonali del marchio, variazioni che riflettono diversi livelli di enfasi, contrasto o umore. Ad esempio, i toni morbidi funzionano bene per gli sfondi, quelli audaci attirano l'attenzione su inviti all'azione e i toni silenziosi sono utili per sovrapposizioni o testo secondario.

Potresti tecnicamente creare tutti questi manualmente usando i codici esadecimali. E se stai costruendo solo un sito di una pagina, potrebbe andare bene. Ma nel momento in cui il tuo cliente vuole cambiare un colore fondamentale, ogni scorciatoia inizia a mostrare i suoi limiti. Quello che intendiamo è che non traccetti di quanti posti hai usato una tonalità di sfondo su un sito Web. In quello scenario, la costruzione di queste varianti come variabili connesse richiede un po 'più di tempo in anticipo, ma una volta che saranno in atto, manterranno il tuo design coerente, non importa quanto spesso le cose cambiano.

3. Sostituire i colori statici esistenti con variabili

Con le tue nuove variabili di colore salvate, è tempo di sostituire i valori esadecimali codificati utilizzati in tutto il layout. È qui che spostarsi da statico a dinamico inizia a fare davvero la differenza, non solo in coerenza, ma in che modo diventa facile mantenere il design nel tempo.

Inizia scansionando il layout per eventuali elementi ancora utilizzando valori di colore fisso. Ciò potrebbe includere pulsanti, intestazioni, sfondi, icone o divisori di sezione. Ovunque il colore del marchio sia stato applicato manualmente ora è un'opportunità per collegarlo al tuo nuovo sistema.

Per fare ciò, Divi offre due opzioni: estendi gli attributi e trova e sostituisci. Entrambi ti consentono di aggiornare più elementi rapidamente, ma ognuno brilla in una situazione leggermente diversa.

• Utilizzare gli attributi estendi quando hai già applicato la variabile corretta a un elemento e vuoi abbinare il resto.
• Usa Trova e sostituisci quando si desidera scambiare un valore esagonale specifico ovunque appaia, anche se viene applicato su diversi elementi.

Cominciamo con gli attributi estendi.

Usando gli attributi estendi

In questo esempio, vogliamo assegnare il nuovo colore secondario a tutti gli H2 nel layout. Inizieremo applicandolo solo a uno di loro.

Una volta fatto ciò, faremo clic con il pulsante destro del mouse sull'elemento e selezioneremo gli attributi estendi. Nel pannello che appare, imposteremo l'ambito su intera pagina e il tipo di elemento su testo.

Con un clic, ogni H2 attraverso la pagina adotta lo stesso colore secondario, che rimarrà sincronizzato perché è legato al tuo colore primario se quel colore di base cambia mai.

Usando Trova e sostituire

Ora proviamo a trovare e sostituire, il che funziona particolarmente bene quando si desidera scambiare un valore di colore specifico attraverso il sito.

In questo caso, vogliamo aggiornare il colore del testo del corpo. Per fare ciò, andremo su Impostazioni> Design> Colore del testo del corpo , fai clic con il pulsante destro del mouse e scegliere Trova e sostituire. Quindi , ci passeremo sul campo Valore Sostituisci e selezioneremo la nostra nuova variabile.

Questo è tutto ciò che serve. Ogni istanza di quel vecchio colore è ora aggiornato con la tua nuova variabile.

Non c'è un singolo metodo che devi seguire qui. Estendi gli attributi è il modo più veloce per trasportare tale modifica in elementi simili se hai già aggiornato un modulo manualmente. Se stai ancora lavorando con i codici esadecimali statici e vuoi cambiarli in blocco, trova e sostituire ti aiuterà a muoverti rapidamente.

Scegli qualunque approccio semplifica la pulizia. Una volta fatto, vedrai il vero vantaggio di questo sistema: come il tuo design risponde quando cambi solo un colore.

Testare la tua nuova combinazione di colori

Tutto ciò che hai fatto è stato nell'impostazione. Ora è quando l'intera configurazione inizia a mostrare il suo valore.

Con il tuo sistema in atto, prova a cambiare il colore primario. L'intero layout risponderà in pochi secondi: sfondi, pulsanti, effetti di mouse e qualsiasi altro elemento connesso si aggiorneranno istantaneamente.

Gli aggiornamenti futuri sono anche più facili che mai. Supponiamo che il tuo cliente desideri passare da Neon Green a un giallo più caldo, il che significa aggiornare manualmente l'intero sito Web, ogni pagina e ogni modulo.

Sembra doloroso, ma non per te. Basta aggiornare il colore primario e il resto del sito segue.

O forse è il Black Friday e hanno chiesto una combinazione di colori rossa-oro-nero. Aggiorna il tono primario a un tono d'oro, quindi modifichi il secondario in un rosso più profondo. Il layout si adatta all'istante, fino all'ultimo dettaglio.

In alcuni casi, il colore del marchio potrebbe rimanere lo stesso, ma il secondario ha bisogno di un aggiornamento. Si tratta solo di regolare i cursori HSL. Non è necessario toccare ogni pulsante o sfondo singolarmente.

Gran parte del lavoro di colore consiste nel mantenere l'equilibrio. Mantieni le variazioni allineate anche quando il colore core cambia. Questo sistema ti dà un modo per controllare il tono, il contrasto e l'enfasi attraverso il tuo design senza dover ripercorrere i passi.

E ricorda, quello che abbiamo fatto qui è solo una pagina. Poiché le variabili di design sono globali, questa configurazione si estende all'intero sito, tra cui intestazioni, piè di pagina, post sul blog, landing page e qualsiasi altra cosa connessa alla tua tavolozza.

Ciò significa che ogni aggiornamento futuro, che sia una campagna stagionale, un aggiornamento del marchio o una nuova direzione del colore, parte da un unico posto. Aggiorni alcune variabili e guardi tutto corrisponde alla tua nuova combinazione di colori.

Divi rende il tuo flusso di lavoro a colori a prova di futuro

Non è difficile scegliere una tonalità di blu. Ciò che è difficile è mantenere quel blu coerente tra dozzine di moduli, layout, pagine e campagne e aggiornarlo in seguito senza rompere qualcosa nel processo.

Divi 5 lo semplifica completamente. Con strumenti come il nuovo sistema a colori, i filtri HSL e le variabili di progettazione, puoi gestire l'intera identità visiva da un unico posto. Sapere che ogni colore, attraverso ogni layout, rimarrà coerente e facile da aggiornare è ciò che Divi 5 promette.

E questo è solo uno dei tanti che abbiamo realizzato negli ultimi mesi, tra cui Loop Builder, Flexbox Layout e un'interfaccia completamente reinventata per i moderni web designer. Se non li hai ancora esplorati, ora è il momento perfetto.