Come creare un sistema di colore con Divi 5

Le scelte di colore casuali raramente portano a un design coeso. Se stai costruendo siti Web in modo professionale, hai bisogno di un sistema intenzionale. È possibile creare un sistema di colore reale all'interno di Divi 5 utilizzando la gestione del colore e le variabili di design. Questi sono i colori che hai impostato direttamente nell'editor visivo, puoi accedere in qualsiasi campo di colore e avere molte altre comodità (che ti mostreremo di seguito).

Questo post ti mostrerà come impostare un sistema di colori flessibile e scalabile in Divi 5.

Cos'è un sistema di colori?

Un sistema di colori è fondamentalmente una tavolozza di colori pre-pianificata utilizzata in modo coerente sul tuo sito. Aiuta tutto ad apparire intenzionalmente in stile piuttosto che messo insieme casualmente. Per un buon sistema, di solito è necessario:

• Colore primario : colore marchio principale.
• Colore secondario : supporta e contrasta con il primario.
• Colore di testo : chiaro e leggibile per intestazioni e paragrafi.
• Accento : altri colori per avvisi, avvisi e altre cose importanti (opzionale).
• Colori di sfondo : in genere neutri o tinte sottili.

La regola 60-30-10 si applica al colore nel web design. Generalmente, i colori neutri (come sfondi di sezione e spazio negativo) verrebbero utilizzati per il 60%del design, un colore primario per il 30%e i colori secondari/accenti per il restante 10%.

Come scegliere i colori del sito web

I colori del marchio e i colori utilizzati sul tuo sito Web non sono decisioni da prendere leggermente. La creazione di una tavolozza di colori intenzionale dipende dall'abilità, dalla psicologia dei colori, dall'industria e dalla differenziazione del marchio del tuo designer. Ma una volta che hai i colori di base e le risorse del marchio (come le variazioni del logo), puoi iniziare a creare un sistema di progettazione.

Puoi svolgere alcune attività rapide per prepararti alla costruzione del tuo sito Web se hai risorse di progettazione limitate. Innanzitutto, fai una frenetica lettura della psicologia del colore. Cerca quali valori del marchio vuoi trasmettere (fiducia, giovinezza, innovazione, ecc.) E cerca di abbinare i colori in base a tali valori. Quindi, guarda alcuni marchi riconoscibili per famiglie che ritieni adatto ai valori del tuo marchio. Quali colori usano? Come li usano attraverso il loro sito Web, spot pubblicitari e post sociali?

I valori della tua azienda potrebbero anche essere determinati dal tipo di lavoro che svolgi. I fabbri e gli idraulici devono essere affidabili, quindi il blu è un ottimo modo per comunicarlo. I pianificatori e i paesaggi finanziari si occupano di crescita e sostenibilità (nei rispettivi campi), quindi il verde è un buon ancoraggio lì. I coltivatori di fiori, i centri di assistenza all'infanzia e i ristoranti possono appoggiarsi a rossi e gialli per collegare energia e vitalità ai loro marchi. Una volta che hai un'idea generale, usa qualcosa come Coors per creare una semplice tavolozza.

Costruire il tuo sistema di colore in Divi 5

Divi 5 viene fornito con il Design Varble Manager, che è il modo più semplice per gestire i colori globali. In esso, hai quattro colori globali pre -assegnati con cui lavorare fuori dalla scatola. Sono:

1. Colore primario
2. Colore secondario
3. Testo di testo Colore
4. Colore del testo del corpo

Passaggio 1: definisci i colori della base come variabili

Nella barra laterale a sinistra di Divi, apri il gestore variabile di design. Trova la sezione Colors e dovresti vedere questi quattro diversi impostazioni predefinite.

Queste quattro etichette non possono essere eliminate, ma puoi scegliere di quale colore impostare ciascuno. Oltre a questi quattro, puoi aggiungere tutti i colori che desideri facendo clic sul pulsante Aggiungi colore globale . Vai avanti e inserisci i valori esagonali dei colori dal generatore di colori.

Queste variabili diventano immediatamente disponibili ovunque nel costruttore visivo di Divi, che è super utile. Ma assicurati di salvarli!

Passaggio 2: crea sfumature e tinte con colori HSL

Usando i filtri HSL di Divi, possiamo creare tinte (versioni più chiare dei nostri colori) e sfumature (versioni più scure dei nostri colori). Per questo progetto, faremo solo variazioni per i colori primari e secondari. È possibile utilizzare un generatore di tavolozza di colori per creare queste varianti di colore.

Il primo passo qui è creare un altro colore globale. Tuttavia, invece di incollare un valore esadecimale, selezionare un colore esistente per creare variazioni (sfumature e tinte).

Ora, dobbiamo applicare un filtro a quel colore di base per creare una variazione. Fai clic sul chip a colori, quindi seleziona "Filtro colore", o fai clic sul campione di colore per la nuova variabile di colore relativo.

Fallo per ciascuna delle tue varianti di colore. Assicurati di fornire i nomi riconoscibili delle varianti di colore e salva.

Ad esempio, poiché il colore primario è abbastanza scuro, possiamo aggiungere alcune tinte più chiare e un paio di tonalità più scure. Questo dovrebbe darmi molte opzioni quando applichiamo il mio sistema di colore a un design di una pagina.

Ripeti i passaggi precedenti per i colori secondari e/o accenti. Quando si crea queste varianti, selezionare sempre un colore di base e quindi applicare i filtri sopra di esso. In questo modo, se mai cambi il tuo colore primario, queste varianti seguiranno l'esempio.

Applicare i tuoi colori nei disegni con Divi

Le tue variabili esistono ora. È ora di usarli. Inizieremo con una pagina Divi vuota e lavoreremo in sequenza verso un layout ben progettato.

Passaggio 1. Crea un wireframe della tua pagina

Puoi iniziare da un wireframe anziché da una pagina vuota, che può aiutarti a capire meglio il tuo sistema di colore. Una volta compreso la struttura e il flusso generale di una pagina, puoi iniziare a fare le tue scelte di design. Puoi anche usare uno dei numerosi pacchetti di layout premade di Divi o siti di avviamento. Non importa se hanno già colori definiti; Possiamo facilmente cambiarli.

Per questo esempio, abbiamo scelto di modificare il pacchetto di layout di consulenza e utilizzare il layout della homepage. Se fai qualcosa di simile, puoi importare i preset. Tuttavia, vorrai modificare i colori in quei preset. Per motivi di semplicità, modificheremo gli stili direttamente a livello di modulo/elemento.

Passaggio 2. Tipografia e colore

Per impostazione predefinita, Divi usa i colori globali di intestazione e testo del corpo, rendendo il tuo testo pulito e leggibile. Puoi sempre sovrascrivere queste scelte di colore predeterminate modificando il colore del testo su moduli o preset, ma non dovresti farlo troppo spesso.

Notare come il colore dell'intestazione non èt nel modulo. Divi assegna automaticamente il colore globale alle intestazioni e al testo del corpo per te. Naturalmente, puoi prevalerlo selezionando un colore diverso.

Puoi personalizzare il colore che i collegamenti possono renderli più evidenti e attrarre clic.

Potrebbero esserci altri moduli (oltre ai moduli di intestazione e testo) con il testo che si desidera modellare. Moduli come il modulo di contatto, il timer per il conto alla rovescia e il modulo blog possono richiedere tutti i colori da applicare in modo univoco.

Passaggio 3. Pulsanti di styling

I pulsanti di Divi sono semplici per impostazione predefinita e assumono il colore principale. Ma non sei costretto a questa decisione se vuoi qualcosa di diverso. Aprire il pannello Impostazioni del modulo, passare alla scheda Design e selezionare il pulsante . In Impostazioni dei pulsanti, abilitare "Utilizzare stili personalizzati per il pulsante". Imposta il tuo sfondo sul tuo colore globale preferito e il testo del tuo pulsante su un colore leggibile, come il bianco.

Se si dispone di due pulsanti fianco a fianco o più pulsanti nella pagina, è possibile creare un pulsante separato predefinito per uno stile del pulsante secondario usando il colore secondario o un altro accento.

Crea stati hover con tinte e/o sfumature

Gli stati hover aggiungono interazione e un senso di scopo. Usa le tinte e le sfumature precedenti con gli stili del mouse. È ovvio implementare sui pulsanti, ma può essere usato sottilmente altrove.

Fai clic sull'icona del cursore accanto all'opzione colore di sfondo per abilitare gli stati hover. Imposta il colore del tuo background hover. Quando gli utenti si librano sul pulsante, risponde visivamente, guidando l'interazione naturalmente.

Passaggio 4. Creazione di sezioni con preset di colori e gradienti

Le sezioni in Divi hanno sfondi trasparenti per impostazione predefinita. Ciò significa che se lasciati unsit, di solito si mostreranno come bianco. Puoi aggiungere un po 'di intrighi creando variazioni di colore neutro in base alla tonalità di uno dei tuoi colori principali.

Questo colore di sfondo è vicino al nero, ma condivide la stessa tonalità di base del colore primario per dargli una coesione sottile "su tema".

Puoi anche sperimentare gradienti usando le tue varianti di colore. Il trucco qui non è usare troppe combinazioni di colori. Vuoi un design disciplinato e coeso basato su abbinamenti a colori e gerarchia.

Un promemoria è in ordine a questo punto. Vuoi salvare la maggior parte di questi abbinamenti e decisioni di colore in preset (gruppo di opzioni o preset di elementi). Dopo aver creato e implementato le variabili di progettazione nel design tramite preset, puoi utilizzare il tuo sistema di progettazione per creare pagine successive molto più rapidamente. Ciò ti garantisce anche di lavorare con modelli di progettazione coerenti in tutto il tuo sito.

E se in seguito determinate che un colore è leggermente spento, è possibile regolare i valori HSL del colore di base e tutte le istanze di quel colore (e tutti i colori relativamente creati in base a quel colore) cambieranno per te.

Avvolgimento del tuo sistema a 5 colori

Un sistema di colori ponderato è una delle vittorie più semplici nel web design e Divi 5 ti dà gli strumenti per farlo funzionare per te. Con pochi passaggi, puoi:

• Definisci i colori del tuo marchio core come variabili di design riutilizzabili
• Estenderli in utili tonalità e tinte con filtri HSL
• Applicali in modo coerente su testo, pulsanti, forme e sezioni
• Salva le tue scelte come preset in modo che ogni nuova pagina segua le stesse regole

Il payoff è più grande dell'estetica. Un sistema di colori solidi crea chiarezza, dirige i visitatori verso l'azione e rende il tuo marchio coeso attraverso ogni angolo del tuo sito. E poiché tutto in Divi è guidato da variabili, una regolazione a un colore di base può immediatamente incresparsi attraverso un intero sito. Ciò significa meno armeggiare e più fiducia che il tuo design si terrà insieme mentre si ridimensiona.