Confrontare i raccoglitori a colori di Divi 4 e Divi 5

Il colore imposta il tono prima che venga letta una singola parola, ma i raccoglitori di colori tradizionali rendono difficile ottenere una vera coerenza del marchio. Invece di precisione, spesso si ottengono congetture e approssimazioni da vicino.

Ecco perché Divi 5 ha reinventato completamente il suo sistema di colore. In questo post, lo confronteremo direttamente con il raccoglitore a colori di Divi 4 e mostreremo quanto sia diventato più potente e flessibile.

I raccoglitori di colori sono confrontati

Mettili fianco a fianco e vedrai immediatamente quanto sia potente la nuova interfaccia. Il raccoglitore a colori di Divi 4 ci ha servito bene con il suo familiare spettro arcobaleno e approccio trascinatore.

Trasciareresti quel cerchio bianco per raccogliere colori, lavorare con codici esadecimali e organizzare le cose attraverso le schede salvate, globali e recenti. Quei piccoli triangoli bianchi sui campioni di colore ti hanno detto quali erano colori globali.

Oltre all'aspetto, il raccoglitore a colori di Divi 4 aveva un'ottima base. Lo strumento Magic Color era piuttosto intelligente, tirando dai colori della tua pagina e delle scelte recenti per suggerire palette che hanno effettivamente funzionato insieme. Questo battito inizia da zero ogni volta.

Dove Divi 4 si è limitato

Tuttavia, non tutto era perfetto. Tutto usava solo codici esagonali o RGBA. Ottenere una versione più leggera del tuo blu significava indovinare o usare un'altra app per capirlo. Se il tuo marchio ha spesso bisogno del 20% più scuro o del 40% di colori più chiari rispetto al colore principale del marchio, Divi 4 non potrebbe farlo per te.

Ogni colore viveva da solo. Non è possibile creare sistemi di colori intelligenti in cui i colori sono correlati tra loro all'interno di Divi stesso. Costruire rapporti di contrasto adeguati ha portato il lavoro manuale al di fuori di Divi.

Quali sono i 5 cambiamenti visivi di Divi

Divi 5 mantiene il raccoglitore di colori visivi ma aggiunge cursori precisi con molte più opzioni (ne discuteremo ulteriormente). La scheda globale si è evoluta in un'icona variabile dinamica che si collega direttamente al sistema variabile di Divi, che include i colori.

Gli stessi campioni di colore divennero più intelligenti; In realtà ti mostrano con quale tipo di colore stai lavorando e come si collega al tuo sistema.

Quello che stai vedendo è che Divi si muove dalla raccolta dei colori individuali a un sistema a colori. Divi 4 è stato costruito per "Ho bisogno di questo blu specifico". Divi 5 è stato costruito per "Ho bisogno di un blu più leggero del 20% rispetto al mio colore principale e agli aggiornamenti automaticamente quando cambio del tutto i colori del mio marchio".

L'interfaccia ha dovuto cambiare perché ciò che fa è cambiato.

Il nuovo raccoglitore a colori di Divi 5

Il nostro team ha ricostruito il sistema di colori perché il vecchio approccio non è riuscito a gestire i moderni flussi di lavoro di progettazione. Questo nuovo picker è incentrato sulla tonalità, la saturazione e la leggerezza (HSL), le relative relazioni di colore e l'integrazione profonda con il sistema variabile di Divi 5.

Invece di lavorare con codici esadecimali isolati, ora puoi creare famiglie di colori connesse in cui il cambiamento di un colore aggiorna automaticamente tutte le varianti correlate. Ci sono cursori separati per tonalità, saturazione, leggerezza e opacità, che ti consentono di apportare regolazioni precise. L'interfaccia ti mostra esattamente con quale tipo di colore stai lavorando attraverso gli indicatori visivi.

I campioni di colore ora visualizzano informazioni su se stessi. Puoi vedere se un colore è un valore statico, una variabile o un colore relativo con modifiche HSL applicate. Il sistema mostra tutti i dettagli di colore che devi sapere.

Come funziona effettivamente il nuovo sistema

I colori relativi iniziano con una variabile di colore di base e consentono di applicare le variazioni. Scegli la tua variabile blu primaria, riduci la leggerezza del 20%e salvala come variabile "Royal Deep Blue".

Il raccoglitore a colori HSL di Divi 5 vs Divi 4's Color Picker

Entrambi i sistemi ti aiutano a gestire i colori sul tuo sito ma lavorano in modi completamente diversi. Comprendere questa differenza spiega perché l'interfaccia ha dovuto cambiare in modo così drammatico e perché il nuovo approccio accelera la costruzione.

Come funzionano i colori globali di Divi 4

I colori globali di Divi 4 hanno funzionato come un sistema di palette di base. Salva il blu del tuo marchio una volta, quindi fai clic su ogni volta che hai bisogno di quell'ombra esatta. Più tardi, scambia quel blu con uno diverso e guarda ogni pulsante, intestazione e aggiornamento in background attraverso l'intero sito.

La maggior parte delle persone ha creato tre o quattro colori principali del marchio in questo modo. Batte la caccia attraverso i codici esagonali o il tentativo di ricordare se hai usato #2e86c1 o #3498db per i tuoi link.

Il problema è arrivato più tardi quando avevi otto colori globali e non ricordavi perché hai salvato quella particolare tonalità di grigio. Era per il testo? Borde? Sovrapposizioni di sfondo? I colori globali non avevano etichette o descrizioni per correre la memoria.

Perché Divi 5 si è trasferito nelle variabili di progettazione

Le variabili di design ora gestiscono più dei semplici colori. Fonti, numeri di spaziatura, immagini e stringhe di testo ottengono tutti lo stesso trattamento. Tutto vive in un manager variabile invece di fluttuare pannelli diversi.

Ogni variabile ottiene un nome e una descrizione adeguati. Invece di "Global Color 3", puoi chiamarlo "Testo di intestazione grigio" o "Sottile Overlay di sfondo". Sei mesi dopo, saprai esattamente a cosa serve.

Ma ecco dove le cose diventano interessanti. Le variabili possono fare riferimento a vicenda e formare relazioni. Imposta il tuo verde primario come fondazione. Crea un "muschio bruciato" che prende quel verde e ne riduce la luminosità. Quindi, costruisci una "ombra (muschio bruciato)" che porta questo colore muschio bruciato e lascia cadere l'opacità al 15%.

E, naturalmente, tutte e tre le variazioni si aggiornano automaticamente se si cambia il verde principale in arancione. La versione bruciata rimane meno luminosa di qualsiasi colore che scegli e l'ombra si adatta di conseguenza. Le relazioni si attaccano.

La differenza chiave nella pratica

I colori globali significavano avere lo stesso colore in più punti. Le variabili significano avere relazioni di colore che si adattano insieme. Gli stati del mouse sono connessi ai colori di base. I colori dell'ombra si riferiscono alla tavolozza del tuo marchio invece di vivere come grigi casuali. Il sistema mantiene queste connessioni senza che tu debba fare un lavoro extra.

Impostazione del sistema di colore in Divi 4 vs Divi 5

La creazione di un sistema di colore adeguato determina se il tuo sito Web sembra professionale o come un patchwork di scelte casuali. Entrambe le versioni Divi offrono modi per organizzare i tuoi colori, ma i loro approcci non potrebbero essere più diversi. Ecco come creare sistemi di colore in ogni versione e perché il processo è importante per il flusso di lavoro di progettazione:

Impostazione dei colori in Divi 4

Le tue scelte di colore modellano il modo in cui i visitatori sperimentano il tuo sito web. Dai un'occhiata all'approccio alla gestione del colore Divi 4.

1. Aggiungi i tuoi colori globali

La configurazione dei colori di Divi 4 si basava sul sistema di colori globali e sull'organizzazione manuale. Inizieresti navigando verso le opzioni di colore di qualsiasi elemento, quindi crea i colori globali navigando nella scheda "globale", facendo clic sull'icona Plus accanto al selettore di colori o modificando un colore globale esistente facendo clic su di esso. L'interfaccia ti consente di inserire direttamente i codici esagonali o utilizzare il selettore visivo per selezionare i colori.

Hai già un colore applicato che vuoi convertire? Fai clic con il tasto destro su di esso e scegli "Converti in globale". Questo aggiunge quel colore esatto alla palette globale e cambia il modulo per utilizzare la versione globale. È molto utile quando ti rendi conto che avresti dovuto fare qualcosa di globale dall'inizio.

Suggerimenti di colore magico

La funzione di colore magico di Divi 4 costruisce palette coordinate dalle tue scelte di design esistenti. Invece di indovinare quali colori lavorano insieme, questo strumento crea suggerimenti in base a ciò che hai già usato.

Cerca i tre punti (ellissi) sotto l'occhio del tuo colore attivo. Fai clic su quei punti per ottenere un sacco di suggerimenti per tavolozza dei colori. Divi guarda quali colori hai già usato sulla tua pagina e nei progetti recenti e ti mostra combinazioni che dovrebbero lavorare insieme.

2. Applicazione dei colori globali

Usarlo è piuttosto semplice una volta che hai creato alcuni colori globali. Fai clic su qualsiasi modulo in cui si desidera applicare un colore. Quindi, vai alla scheda Design e trova l'impostazione del colore che si desidera modificare.

Fai clic su Global per vedere la tua tavolozza di colori globale. Fai clic su qualsiasi campione di colore globale e si applica immediatamente al tuo modulo.

3. Modifica dei tuoi colori globali

Ecco dove le cose diventano interessanti. Quando vuoi cambiare un colore globale, non è necessario cacciare ogni modulo che lo usa. Basta andare a qualsiasi impostazione del colore, fare clic sulla scheda globale e trovare il colore che desideri modificare.

Impostazione dei colori in Divi 5

Costruire un sistema di colore adeguato in Divi 5 prende quattro passaggi. Seguire questo approccio batte il vecchio metodo di indovinare i codici a colori ogni volta che hai bisogno di una tonalità leggermente diversa:

1. Crea la tua variabile di colore base

Apri il Design Varble Manager e aggiungi i colori del marchio primario come variabili di colore primario e secondario esistenti. Puoi anche aggiungere più colori, come colori terziari o accenti. Questi diventano i tuoi colori di fondazione. I tuoi colori di base dovrebbero rappresentare la tua tavolozza del marchio principale, che definisce la tua identità visiva.

2. Costruisci colori relativi dalla tua base

Ora puoi creare varianti di colore collegate ai colori della base. Aggiungi un nuovo colore nel Design Varble Manager e scegli il colore di base.

Utilizzare i cursori HSL per regolare: una minore leggerezza del 25% per il testo di intestazione, 20% per il testo del corpo; Aumentare la leggerezza del 20% per gli stati hover o cambiare saturazione per sfondi silenziosi. Dai a queste varianti nomi chiari come "Deep Orange" e "Bright Crimson" o "Hover State (colore primario)", "Sfondo silenzioso (colore secondario)."

Tutte le variabili di design possono essere impilate, in modo da poter costruire più colori da quelli creati. Rimangono tutti connessi al sistema.

Se si cambia in seguito il colore di base, questi colori correlati si aggiornano automaticamente, mantenendo intatte le relazioni.

3. Applica variabili ai tuoi elementi

Utilizzare l'icona del contenuto dinamico in qualsiasi campo di colore per accedere alle variabili. L'interfaccia mostra se ogni colore è statico, una variabile o un colore relativo con modifiche HSL.

Scegli dal tuo sistema di colori organizzato invece di creare colori unici casuali che rompono la coerenza.

Quando si modificano le proprietà di una delle tue basi o di colori costruiti, tutto ereditato da quelli si adatterà automaticamente ai nuovi cambiamenti. Non è necessario strofinare e sostituire manualmente i colori quando si decide un aggiornamento del marchio.

4. Building Preset che riferiscono le variabili di colore HSL

Costruisci la tua strategia utilizzando i preimpostazioni del gruppo di opzioni per parti di progettazione specifiche. Questi preset differiscono dai preset di elementi. Gruppi di opzioni PRESETTI GRUPPI TARGET INSIGLIO come sfondo, bordo o colori di testo usando le tue variabili.

Salva un'ombra come un gruppo di opzioni preimpostato usando una variabile di colore ombra in base al colore primario.

Usa questo preimpostazione su colonne, sezioni, righe e moduli.

Crea preset di gruppi di opzioni separati per colori diversi: uno per i bordi con il colore accento, un altro per il testo con il colore secondario, ecc. Mescola questi preset tra gli elementi senza cambiare altri stili.

I preset di elementi salvano le configurazioni complete del modulo, inclusi contenuti e tutti gli stili. Fare un preimpostazione di un elemento per un pulsante in stile blocchi nei preset del gruppo di opzioni e nelle variabili di colore utilizzate. Applicarlo istantaneamente ti dà esattamente lo stesso pulsante.

5. Sollevare i colori sul tuo sito

La funzione Attributi Extent lo porta oltre permettendoti di copiare proprietà di progettazione tra elementi. Quando hai perfezionato la combinazione di colori di un'icona usando le tue variabili, puoi estendere quegli attributi ad altre icone attraverso la tua riga, pagina o intero sito.

Questo mantiene le tue relazioni di colore mentre si diffonde uno stile coerente senza lavoro manuale.

La funzione di Divi 5 accelera il processo di conversione per i siti esistenti con colori statici sparsi. Fare clic con il pulsante destro del mouse su qualsiasi campo di colore e selezionare "Trova e sostituisci".

Imposta l'ambito su elementi specifici, intere sezioni o tutta la pagina. In "Sostituisci con", scegli la nuova variabile dalla scheda Global. Controlla "Sostituisci tutti i valori trovati" per scambiare ogni istanza di quel colore con la tua variabile.

Funziona perfettamente quando si migrano progetti più vecchi sul nuovo sistema di colori. È possibile sostituire dozzine di arance simili ma non identiche in pochi secondi con una variabile coerente.

Tutti gli aspetti lavorano insieme: stabilire le variabili di colore, utilizzare trova e sostituire per ripulire le incoerenze esistenti, quindi utilizzare gli attributi estendi per mantenere gli standard di progettazione mentre si costruiscono nuove sezioni. Quindi, costruisci pagine normalmente, poiché gli stili possono essere facilmente applicati utilizzando il gruppo di opzioni e i preset di elementi.

Il nuovo raccoglitore a colori si adatterà al tuo flusso di lavoro

Il sistema a colori di Divi 5 risolve i problemi del flusso di lavoro che hanno rallentato i progetti per anni. Non è più necessario utilizzare strumenti esterni per trovare l'ombra giusta. I cursori HSL ti danno un controllo preciso senza lasciare il costruttore.

Le tue decisioni di colore rimangono connesse attraverso le variabili di design. Quando si cambia il colore del marchio principale, i colori correlati si aggiornano automaticamente pur mantenendo le loro relazioni. Questo batte manualmente a caccia di ogni variazione blu che hai creato per occhio.

Prova oggi il nuovo sistema di colore in Divi 5!