Compararea culorilor Divi 4 și Divi 5

Culoarea stabilește tonul înainte de citirea unui singur cuvânt, dar culegătorii tradiționali de culori îngreunează obținerea consistenței adevărate ale mărcii. În loc de precizie, de multe ori obțineți ghicitori și aproximări destul de aproape.

De aceea, Divi 5 și -a reimaginat complet sistemul de culori. În această postare, o vom compara direct cu Picker -ul Color Divi 4 și vom arăta cât de mult mai puternic și mai flexibil a devenit.

Pickers de culori au comparat

Puneți -le unul lângă altul și veți vedea imediat cât de puternică este noua interfață. Picker-ul de culoare Divi 4 ne-a servit bine cu spectrul său curcubeu familiar și abordarea drag-to-select.

Ați trage acel cerc alb în jur pentru a alege culori, a lucra cu coduri hexagonale și a organiza lucrurile prin filele salvate, globale și recente. Acei mici triunghiuri albe pe mostre de culoare v -au spus care sunt culori globale.

Dincolo de aspect, Picker -ul de culoare Divi 4 a avut o bază excelentă. Instrumentul Magic Color a fost destul de deștept, trăgând din culorile paginii dvs. și alegerile recente pentru a sugera palete care au funcționat de fapt împreună. Această bătaie începe de la zero de fiecare dată.

Unde Divi 4 a fost limitat

Cu toate acestea, nu totul a fost perfect. Totul a folosit coduri Hex sau RGBA. Obținerea unei versiuni mai ușoare a albastru a însemnat să ghicești sau să folosești o altă aplicație pentru a -și da seama. Dacă brandul dvs. are nevoie adesea de 20% mai închisă sau 40% culori mai deschise decât culoarea principală a mărcii, Divi 4 nu ar putea face acest lucru pentru dvs.

Fiecare culoare trăia de la sine. Nu puteți construi sisteme de culori inteligente în care culorile sunt legate între ele în Divi în sine. Construirea raporturilor de contrast adecvate a luat o muncă manuală în afara Divi.

Care sunt cele 5 schimbări vizuale ale Divi

Divi 5 păstrează culegerea culorilor vizuale, dar adaugă glisoare precise cu multe alte opțiuni (vom discuta acest lucru în continuare). Fila globală a evoluat într -o pictogramă variabilă dinamică care se conectează direct la sistemul variabil al DIVI, care include culori.

Eșantioanele de culoare în sine au devenit mai inteligente; De fapt, vă arată cu ce tip de culoare lucrați și cum se conectează la sistemul dvs.

Ceea ce vedeți este Divi care se deplasează de la culegerea culorilor individuale la un sistem de culori. Divi 4 a fost construit pentru „Am nevoie de acest albastru specific.” Divi 5 a fost construit pentru „Am nevoie de un albastru cu 20% mai deschis decât culoarea mea principală și se actualizează automat atunci când îmi schimb culorile mărcii cu totul.”

Interfața trebuia să se schimbe pentru că ceea ce se schimbă.

Noul pictor de culori al Divi 5

Echipa noastră a reconstruit sistemul de culori, deoarece vechea abordare nu a putut face față fluxurilor de lucru moderne de design. Acest nou picker se concentrează în jurul nuanței, saturației și ușurinței (HSL), relațiilor relative de culoare și integrarea profundă cu sistemul variabil al Divi 5.

În loc să lucrați cu coduri Hex izolate, puteți acum să construiți familii de culori conectate, unde schimbarea unei culori actualizează automat toate variațiile conexe. Există glisoare separate pentru nuanță, saturație, lejeritate și opacitate, care vă permit să faceți ajustări precise. Interfața vă arată exact cu ce tip de culoare lucrați prin intermediul indicatorilor vizuali.

Movetele de culori afișează acum informații despre ei înșiși. Puteți vedea dacă o culoare este o valoare statică, o variabilă sau o culoare relativă cu modificări HSL aplicate. Sistemul arată toate detaliile de culoare pe care trebuie să le cunoașteți.

Cum funcționează de fapt noul sistem

Culorile relative încep cu o variabilă de culoare de bază și vă permit să aplicați variații. Alegeți -vă variabila albastră primară, reduceți ușurința cu 20%și economisiți -o ca variabilă „Royal Deep Blue”.

Divi 5's HSL Color Picker vs Divi 4's Color Picker

Ambele sisteme vă ajută să gestionați culorile pe site -ul dvs., dar funcționează în moduri complet diferite. Înțelegerea acestei diferențe explică de ce interfața a trebuit să se schimbe atât de dramatic și de ce noua abordare accelerează construirea.

Cum funcționează culorile globale ale Divi 4

Culorile globale ale Divi 4 au funcționat ca un sistem de paletă de bază. Salvați -vă un albastru de marcă o dată, apoi faceți clic pe el ori de câte ori aveți nevoie de acea nuanță exactă. Mai târziu, schimbați acel albastru pentru altul și urmăriți fiecare buton, antet și actualizare de fundal pe întregul site.

Majoritatea oamenilor au stabilit în acest fel trei sau patru culori principale ale mărcii. Acesta bate vânătoarea prin coduri hexagonale sau încearcă să -ți amintești dacă ai folosit #2E86C1 sau #3498DB pentru linkurile tale.

Problema a venit mai târziu când ai avut opt culori globale și nu -ți amintești de ce ai salvat acea nuanță de gri. A fost pentru text? Granițe? Suprapuneri de fundal? Culorile globale nu aveau etichete sau descrieri pentru a -ți face memoria.

De ce Divi 5 s -a mutat la variabile de proiectare

Variabilele de design gestionează acum mai mult decât doar culori. Fonturile, numerele de distanțare, imaginile și șirurile de text primesc același tratament. Totul trăiește într -un singur manager variabil în loc să plutească în jurul diferitelor panouri.

Fiecare variabilă primește un nume și o descriere adecvată. În loc de „Global Color 3”, îl puteți numi „Text de antet gri” sau „suprapunere de fundal subtilă”. Șase luni mai târziu, veți ști exact pentru ce este.

Dar iată unde lucrurile devin interesante. Variabilele se pot referi reciproc și pot forma relații. Stabiliți -vă verde ca bază. Creați un „mușchi ars” care ia acel verde și le reduce luminozitatea. Apoi, construiți o „umbră (mușchi ars)” care aduce această culoare arsă de mușchi și aruncă opacitatea la 15%.

Și, desigur, toate cele trei variații se actualizează automat dacă schimbați verde primar în portocaliu. Versiunea arsă rămâne mai puțin strălucitoare decât orice culoare alegeți, iar umbra se adaptează în consecință. Relațiile se lipesc.

Diferența cheie în practică

Culorile globale însemna să ai aceeași culoare în mai multe locuri. Variabilele înseamnă a avea relații de culoare care se adaptează împreună. Statele Hover rămân conectate la culorile de bază. Culorile de umbră se raportează la paleta de marcă în loc să trăiești ca griuri aleatorii. Sistemul menține aceste conexiuni fără a fi nevoie să lucrați în plus.

Configurarea sistemului de culori în Divi 4 vs Divi 5

Crearea unui sistem de culori adecvat determină dacă site -ul dvs. web arată profesionist sau ca un patchwork de alegeri aleatorii. Ambele versiuni DIVI oferă modalități de organizare a culorilor, dar abordările lor nu ar putea fi mai diferite. Iată cum să construiți sisteme de culori în fiecare versiune și de ce procesul contează pentru fluxul de lucru de proiectare:

Configurarea culorilor în Divi 4

Opțiunile dvs. de culoare modelează modul în care vizitatorii experimentează site -ul dvs. web. Aruncați o privire asupra abordării gestionării culorilor Divi 4 preluare:

1. Adăugați -vă culorile globale

Configurarea culorilor Divi 4 s -a bazat pe sistemul de culori globale și organizarea manuală. Ați începe să navigați la opțiunile de culoare ale oricărui element, apoi să creați culori globale navigând în fila „Global”, făcând clic pe pictograma Plus de lângă Picker Color sau editarea unei culori globale existente făcând clic pe ea. Interfața vă permite să introduceți coduri hexagonale direct sau să utilizați Picker Visual pentru a selecta culori.

Aveți deja o culoare aplicată pe care doriți să o convertiți? Faceți clic dreapta pe el și alegeți „Convertiți la Global”. Acest lucru adaugă acea culoare exactă la paleta dvs. globală și comută modulul pentru a utiliza versiunea globală. Este foarte util când vă dați seama că ar fi trebuit să faceți ceva global de la început.

Sugestii de culoare magică

Funcția Magic Color a Divi 4 construiește palete coordonate din alegerile dvs. de design existente. În loc să ghiciți ce culori funcționează împreună, acest instrument creează sugestii pe baza a ceea ce ați folosit deja.

Căutați cele trei puncte (elipse) sub Eyedropper de culoare activă. Faceți clic pe acele puncte pentru a obține o grămadă de sugestii de palete de culori. Divi privește ce culori ați folosit deja pe pagina dvs. și în proiectele recente și vă arată combinații care ar trebui să funcționeze împreună.

2. Aplicarea culorilor dvs. globale

Folosirea lor este destul de simplă odată ce ați configurat câteva culori globale. Faceți clic în orice modul în care doriți să aplicați o culoare. Apoi, accesați fila Design și găsiți setarea de culori pe care doriți să o schimbați.

Faceți clic pe Global pentru a vedea paleta dvs. de culori globale. Faceți clic pe orice swatch de culoare globală și se aplică imediat la modulul dvs.

3. Modificarea culorilor globale

Iată unde lucrurile devin interesante. Când doriți să schimbați o culoare globală, nu trebuie să vânați prin fiecare modul care îl folosește. Accesați orice setare a culorilor, faceți clic pe fila Global și găsiți culoarea pe care doriți să o editați.

Configurarea culorilor dvs. în Divi 5

Construirea unui sistem de culori adecvat în Divi 5 face patru pași. În urma acestei abordări, bate vechea metodă de ghicire a codurilor de culoare ori de câte ori aveți nevoie de o nuanță ușor diferită:

1. Creați -vă variabila de culoare de bază

Deschideți managerul variabil de design și adăugați culorile de marcă primare ca variabile de culoare primare și secundare existente. De asemenea, puteți adăuga mai multe culori, cum ar fi culori terțiare sau accent. Acestea devin culorile tale de fundație. Culorile dvs. de bază ar trebui să reprezinte paleta principală de marcă, care vă definește identitatea vizuală.

2. Construiți culori relative de la baza dvs.

Acum puteți crea variații de culoare legate de culorile de bază. Adăugați o nouă culoare în managerul variabil de design și alegeți culoarea de bază.

Utilizați glisoarele HSL pentru a -l regla: lejeritate mai mică cu 25% pentru textul de titlu, 20% pentru textul corpului; Creșteți ușurința cu 20% pentru stările de plutire sau schimbați saturația pentru fundaluri dezactivate. Oferiți aceste variații nume clare, cum ar fi „Orange Deep” și „Bright Crimson” sau „Hover State (Primary Color)”, „fundal mut (culoarea secundară)”.

Toate variabilele de design pot fi stivuite, astfel încât să puteți construi mai multe culori din cele create. Toți rămân conectați la sistem.

Dacă vă schimbați culoarea de bază mai târziu, aceste culori conexe se actualizează automat, păstrând relațiile intacte.

3. Aplicați variabile la elementele dvs.

Utilizați pictograma conținut dinamic în orice câmp color pentru a vă accesa variabilele. Interfața arată dacă fiecare culoare este statică, o variabilă sau o culoare relativă cu modificări HSL.

Alegeți din sistemul dvs. de culori organizat în loc să creați culori unice aleatorii care rup consistența.

Când schimbați proprietățile oricăreia dintre culorile dvs. sau culorile construite, totul moștenit de la acestea se va adapta automat la noile modificări. Nu este nevoie să frecați manual și să înlocuiți culorile atunci când decideți o actualizare a mărcii.

4. Construirea presetării care se referă la variabilele de culoare HSL

Construiește -ți strategia folosind presetări de grupuri de opțiuni pentru piese de proiectare specifice. Aceste presetări diferă de presetările de elemente. Grupuri de opțiuni presetă grupuri de stil țintă, cum ar fi culorile de fundal, bordură sau text folosind variabilele tale.

Salvați o umbră ca o presetare a grupului de opțiuni folosind o variabilă de culoare de umbră bazată pe culoarea dvs. primară.

Utilizați această presetare pe coloane, secțiuni, rânduri și module.

Creați presetări de grupuri de opțiuni separate pentru diferite culori: una pentru granițe cu culoarea accentului dvs., alta pentru text cu culoarea dvs. secundară, etc. Amestecați aceste presetări între elemente fără a schimba alte stiluri.

Presetările de elemente salvează configurațiile complete ale modulului, inclusiv conținut și toate stilurile. Realizarea unui element prestabilit pentru o blocare a butoanelor stilate în presetările grupului de opțiuni și variabilele de culoare utilizate. Aplicarea acestuia vă oferă instantaneu același buton.

5. Rularea culorilor pe site -ul dvs.

Caracteristica Extended Atributes duce acest lucru în continuare, permițându -vă să copiați proprietățile de proiectare între elemente. Când ați perfecționat o schemă de culori a unei pictograme folosind variabilele dvs., puteți extinde aceste atribute la alte pictograme de pe rândul, pagina sau întregul site.

Acest lucru îți menține relațiile de culoare în timp ce răspândești stil constant fără muncă manuală.

Divi 5's Găsirea și înlocuirea funcției de viteză până la procesul de conversie pentru site -urile existente cu culori statice împrăștiate. Faceți clic dreapta pe orice câmp de culoare și selectați „Găsiți și înlocuiți”.

Setați -vă domeniul de aplicare pentru a viza elemente specifice, secțiuni întregi sau întreaga pagină. Sub „Înlocuiți cu”, alegeți noua dvs. variabilă din fila Global. Verificați „Înlocuiți toate valorile găsite” pentru a schimba fiecare instanță a acelei culori cu variabila dvs.

Acest lucru funcționează perfect atunci când migrați modele mai vechi către noul sistem de culori. Puteți înlocui zeci de portocale similare, dar nu identice, în câteva secunde, cu o variabilă consistentă.

Toate aspectele funcționează împreună: Stabiliți -vă variabilele de culoare, utilizați găsiți și înlocuiți pentru a curăța neconcordanțele existente, apoi utilizați atribute extinse pentru a menține standardele de proiectare pe măsură ce construiți secțiuni noi. Apoi, construiți pagini în mod normal, deoarece stilurile pot fi aplicate cu ușurință folosind presetări de grupuri de opțiuni și elemente.

Noul Picker Color se va potrivi fluxului dvs. de lucru

Sistemul de culori al Divi 5 rezolvă problemele fluxului de lucru care au încetinit proiectele de ani buni. Nu mai trebuie să folosiți instrumente externe pentru a găsi nuanța potrivită. Glisoarele HSL vă oferă un control precis fără a părăsi constructorul.

Deciziile dvs. de culoare rămân conectate prin variabile de proiectare. Când vă schimbați culoarea principală a mărcii, culorile conexe se actualizează automat, păstrându -și relațiile. Acest lucru bate manual vânarea fiecărei variații albastre pe care le -ați creat prin ochi.

Încercați astăzi noul sistem de culori din Divi 5!