Transformarea culorilor mărcii clientului dvs. într -un sistem de culori Divi 5

Culorile mărcii încep de obicei cu codurile hexagonale aplicate pe rubrici, butoane și fundaluri. Este suficient de simplu inițial, dar pe măsură ce aspectul crește, de multe ori aveți nevoie de variații de culori mai deschise, de stări pline sau de accente complementare. Gestionarea asta manual poate fi dezordonată.

Noul sistem de culori din Divi 5 face acest lucru mai ușor, permițându -vă să definiți o paletă o dată și să construiți nuanțe conectate de la paleta inițială de culori. Fiecare culoare rămâne în sincronizare, chiar și pe măsură ce designul evoluează. În acest ghid, veți învăța cum să creați un sistem de culori flexibil, scalabil, care menține totul consecvent pe site -ul clientului dvs.

Înțelegerea sistemului de culori al Divi 5

Dacă ați lucrat cu culori globale în Divi 4, știți deja cât de util este să definiți o culoare o dată și să o aplicați pe site -ul dvs. Divi 5 se bazează pe aceeași idee, dar de data aceasta, transformă culoarea într -un sistem complet care se scalează cu tine.

Abonați -vă la canalul nostru YouTube

Iată cele trei upgrade -uri majore:

Începe cu variabile de design. Vă definiți paleta de marcă în fila Colors în Variable Manager, iar aceste valori devin fundația dvs. Odată definite, sunt gata de utilizare în orice modul sau secțiune. Și atunci când marca evoluează în linie, trebuie să actualizați doar variabilele într -un singur loc. Totul legat de ele se ajustează de la sine.

Al doilea upgrade este filtrul de culoare HSL. Glisoarele vă permit să reglați nuanța, saturația și ușurința, oferindu -vă mai mult control atunci când lucrați cu ton și contrast.

Dacă verde primar se simte prea dur pentru un fundal, îl puteți înmuia ușor, puteți regla luminozitatea și puteți salva acea versiune ca variabilă. Aceasta va fi o culoare nouă, dar este încă legată de culoarea originală.

Acest lucru deschide, de asemenea, spațiu pentru a gândi în relații, mai degrabă decât în valori izolate. Puteți lega variabilele împreună, astfel încât unul rămâne întotdeauna la o anumită distanță de alta, cum ar fi mai întunecat, mai deschis, ușor mai cald sau mai supus. Acestea se numesc culori relative, care este a treia îmbunătățire.

O culoare plasă, de exemplu, poate fi definită ca 20% mai închisă decât primarul. Dacă se schimbă culoarea primară, starea de hover își păstrează relația fără a avea nevoie de ajustări manuale.

Acest sistem în trei părți creează un sistem de culori de lucru flexibil și împământat. Nu aplicați doar culori un modul la un moment dat; Construiți o paletă care se poate schimba după cum este necesar, păstrând designul dvs. consecvent și curat.

Aflați totul despre noul sistem de culori al Divi

Dacă te -ai bazat pe coduri hexagonale până acum, acesta este punctul în care fluxul de lucru începe să se simtă limitat. Și acesta este indicatorul dvs. pentru trecerea către un sistem de culori gata pentru viitor.

Transformarea culorilor mărcii clientului dvs. într -un sistem de culori Divi 5

Acum că știți cum funcționează sistemul de culori al Divi 5, să trecem prin cum arată într -un proiect real. Pentru acest exemplu, am importat aspectul paginii de pornire a realității augmentate din biblioteca Divi.

Să construim un scenariu. Să presupunem că un client dorește să adauge o culoare complementară pentru a echilibra verde îndrăzneț utilizat pe întregul site. În loc să -l adăugăm manual în câteva spoturi, să luăm acest lucru ca o șansă de a schimba aspectul în sistemul de culori al Divi 5, astfel încât nu trebuie să facem modificări manuale în viitor, dacă este solicitat din nou.

Dacă te uiți prin aspect, vei observa că același verde apare în mai multe locuri, cum ar fi titluri, butoane și elemente de accent. Fiecare folosește un cod Hex fix. Scopul nostru este să le înlocuim pe cei cu variabile de culoare și să construim o paletă care să se poată adapta mai târziu la modificări.

În mod normal, actualizarea unui aspect ca acesta ar însemna editarea fiecărui modul de mână. Dar, în următorii câțiva pași, vom folosi variabile de culoare, filtre HSL și logică de culoare conectată pentru a construi ceva mai stabil. Puteți urma același aspect sau puteți utiliza proiectul ca bază.

1. Salvați culoarea principală a clientului dvs. ca variabilă de design

Dacă clientul dvs. a împărtășit un nou cod Hex sau rămâneți cu o culoare de marcă existentă, primul pas este să -l adăugați la managerul variabilului de design. Aceasta devine culoarea ta de bază și va fi baza pentru variațiile de culoare pe care le construiești în jurul ei.

Adăugarea unei culori primare

Pentru început, deschideți managerul variabil și treceți la fila Colors .

Panoul poate include deja valori implicite pentru textul primar, secundar, titlu și corp. În câmpul de culoare primară, introduceți codul Hex pentru culoarea principală a mărcii și faceți clic pe salvați variabilele.

Adăugarea unei culori secundare

În continuare, vom crea o versiune relativă a acestei culori secundare folosind primarul ca bază. În acest fel, orice modificări viitoare ale culorii de bază vor trece automat.

În acest exemplu, din moment ce adăugăm o culoare complementară pentru a echilibra verdele existent, o vom atribui ca culoare secundară. Fundalul aspectului este negru, așa că această împerechere iese în evidență clar.

Dacă lucrați cu o singură culoare deocamdată, nu ezitați să lăsați slotul secundar setat pe negru.

Faceți clic pe swatch -ul secundar de culoare pentru a deschide fereastra de culoare. Toate valorile salvate vor fi listate sub culori globale, cu culoarea primară listată mai întâi.

Selectați -l. Acest lucru aduce culoarea de bază ca punct de plecare.

Acum, faceți clic din nou pe swatch pentru a redeschide fereastra, apoi deschideți meniul vertical al filtrelor de culoare . Acest lucru dezvăluie glisoarele HSL, unde puteți regla nuanța, saturația și lejeritatea.

Folosiți aceste glisoare pentru a modela noua culoare. Odată ce ești mulțumit de asta, salvează. Și exact așa, aveți o culoare secundară conectată la primar.

Dacă doriți să mențineți culoarea secundară neagră, dar totuși să o conectați la primar, transformați atât ușurinirea , cât și glisoarele de saturație până la -100.

Pentru a crea o nuanță mai întunecată, lăsați nuanța și saturația așa cum este și reduceți doar ușurința.

În acest moment, puteți experimenta liber. Reglați valorile până când tonul se simte potrivit pentru designul dvs. Indiferent dacă noua culoare se îmbină ușor cu paleta de marcă sau iese în evidență ca un contrast, va rămâne legată de primar și va evolua cu aceasta.

2. Construiți culori de susținere folosind ajustări HSL

Cu culorile primare și secundare în loc, următorul pas este extinderea paletei. Aceste culori de susținere oferă camerei tale de design pentru a respira. Acestea adaugă flexibilitate, contrast subtil și ritm vizual pe tot parcursul aspectului.

Pentru a crea aceste variații, deschideți panoul HSL și reglați glisoarele:

• Creați nuanțe mai deschise pentru secțiuni sau fundaluri care au nevoie de contrast, fără a atrage atenția.
• Folosiți tonuri ușor mai întunecate pentru butoane, stări de plutire sau titluri îndrăznețe care trebuie să iasă în evidență.
• Mutați ușor nuanța sau saturația pentru a forma culori de accent. Această culoare este excelentă pentru divizori, pictograme sau alte aspecte vizuale mici.

Vă vom arăta cum să o faceți o dată și puteți urma aceeași abordare pentru a defini toate noile culori pe care le doriți. Să zicem că vrem să facem o versiune hover a culorii secundare. Vom crea o nouă variabilă de culoare , vom da un nume clar, vom regla glisoarele pentru a obține tonul corect și pentru a -l salva.

Acum că variabila este salvată, o putem aplica în starea de trecere a unui buton, ca orice altă culoare.

Pe măsură ce adăugați culori de susținere, încercați să le gândiți la ele ca la expresii tonale ale mărcii, variații care reflectă diferite niveluri de accent, contrast sau dispoziție. De exemplu, tonurile moi funcționează bine pentru fundaluri, cele îndrăznețe atrag atenția asupra apelurilor la acțiune, iar tonurile dezactivate sunt utile pentru suprapuneri sau text secundar.

Puteți crea din punct de vedere tehnic toate acestea folosind coduri Hex. Și dacă construiți doar un site de o pagină, ar putea fi bine. În momentul în care clientul dvs. dorește să schimbe o culoare de bază, fiecare scurtătură începe să -și arate limitele. Ce ne referim este că nu ați urmări câte locuri ați folosit o nuanță de fundal pe un site web. În acest scenariu, construirea acestor variații ca variabile conectate necesită puțin mai mult timp în avans, dar, odată ce vor fi la locul lor, vă vor menține designul în mod consecvent, indiferent cât de des se schimbă lucrurile.

3. Înlocuiți culorile statice existente cu variabile

Cu noile dvs. variabile de culoare salvate, este timpul să înlocuiți valorile hex -codate cu coduri hard, utilizate pe tot parcursul aspectului. Acesta este locul în care trecerea de la statică la dinamică începe să facă o diferență reală, nu doar în consecvență, ci în cât de ușor devine menținerea designului în timp.

Începeți prin scanarea machetei pentru orice elemente care încă folosesc valori de culoare fixe. Aceasta poate include butoane, rubrici, fundaluri, pictograme sau divizoare de secțiune. Oriunde ar fi aplicat manual culoarea mărcii este acum o oportunitate de a o conecta la noul dvs. sistem.

Pentru a face acest lucru, Divi vă oferă două opțiuni: extindeți atributele și găsiți și înlocuiți. Ambele vă permit să actualizați rapid mai multe elemente, dar fiecare strălucește într -o situație ușor diferită.

• Utilizați Atributele Extindeți atunci când ați aplicat deja variabila corectă pe un element și doriți să potriviți restul.
• Folosiți Find and Replace atunci când doriți să schimbați o valoare hexagonală specifică oriunde apare, chiar dacă este aplicată pe diferite elemente.

Să începem cu atributele extinse.

Utilizarea atributelor extinse

În acest exemplu, dorim să atribuim noua culoare secundară tuturor H2 -urilor din aspect. Vom începe prin a -l aplica doar unul dintre ei.

După ce s-a terminat, vom face clic dreapta pe element și vom selecta atributele Extindeți. În panoul care apare, vom seta domeniul de aplicare pe întreaga pagină și tipul de element la text.

Cu un singur clic, fiecare H2 de pe pagină adoptă aceeași culoare secundară, care va rămâne în sincronizare, deoarece este legată de culoarea principală dacă acea culoare de bază se schimbă vreodată.

Folosind descoperirea și înlocuirea

Acum să încercăm să găsim și să înlocuim, ceea ce funcționează mai ales când doriți să schimbați o valoare specifică a culorii pe site.

În acest caz, dorim să actualizăm culoarea textului corpului. Pentru a face acest lucru, vom merge la Setări> Design> Culoarea textului Body , faceți clic dreapta și alegeți Find și înlocuiți. Apoi , vom trece peste câmpul înlocuitor Value și vom selecta noua noastră variabilă.

Asta este tot ce trebuie. Fiecare instanță a acelei culori vechi este acum actualizată cu noua dvs. variabilă.

Nu trebuie să urmați aici o singură metodă. Extindeți atributele este modul mai rapid de a transporta această schimbare pe elemente similare dacă ați actualizat deja un modul manual. Dacă tot lucrați cu coduri hexagonale statice și doriți să le schimbați în vrac, găsiți și înlocuiți vă va ajuta să vă deplasați rapid.

Alegeți orice abordare facilitează curățarea. După ce s -a terminat, veți vedea beneficiul real al acestui sistem: modul în care designul dvs. răspunde atunci când schimbați o singură culoare.

Testarea noii tale scheme de culori

Tot ce ai făcut a fost despre înființare. Acum este când întreaga configurație începe să -și arate valoarea.

Cu sistemul dvs. în loc, încercați să schimbați culoarea primară. Întregul aspect va răspunde în câteva secunde - fundaluri, butoane, efecte de hover și orice alte elemente conectate se vor actualiza instantaneu.

Actualizările viitoare sunt, de asemenea, mai ușoare ca niciodată. Să presupunem că clientul dvs. dorește să treacă de la un verde neon la un galben mai cald, ceea ce înseamnă actualizarea întregului site web, fiecare pagină și fiecare modul manual.

Sună dureros, dar nu pentru tine. Doar actualizați culoarea primară, iar restul site -ului urmează.

Sau poate este Black Friday și au cerut o schemă de culori roșie-auriu-auriu. Actualizați primarul la un ton de aur, apoi reglați secundarul într -un roșu mai profund. Aspectul se adaptează instantaneu până la ultimul detaliu.

În unele cazuri, culoarea mărcii ar putea rămâne aceeași, dar secundarul are nevoie de o actualizare. Aceasta este doar o chestiune de a regla glisoarele HSL. Nu este nevoie să atingeți fiecare buton sau fundal individual.

O mare parte din munca de culoare se referă la menținerea echilibrului. Păstrați variații aliniate chiar și atunci când culoarea de bază se schimbă. Acest sistem vă oferă o modalitate de a controla tonul, contrastul și accentul pe designul dvs., fără a fi nevoie să vă retrageți pașii.

Și amintiți -vă, ceea ce am făcut aici este o singură pagină. Deoarece variabilele de proiectare sunt globale, această configurație se extinde pe întregul dvs. site, inclusiv anteturi, subsoluri, postări pe blog, pagini de destinație și orice altceva conectat la paleta dvs.

Asta înseamnă că fiecare actualizare viitoare, fie că este o campanie sezonieră, o actualizare a mărcii sau o nouă direcție de culoare, pornește dintr -un singur loc. Actualizați câteva variabile și urmăriți că totul se potrivește cu noua dvs. schemă de culori.

Divi îți face fluxul de lucru color

Nu este greu să alegi o nuanță de albastru. Ceea ce este greu este să păstrezi acel albastru consecvent pe zeci de module, machete, pagini și campanii și actualizarea mai târziu, fără a rupe ceva în acest proces.

Divi 5 simplifică asta complet. Cu instrumente precum noul sistem color, filtrele HSL și variabilele de proiectare, vă puteți gestiona întreaga identitate vizuală dintr -un singur loc. Știind că fiecare culoare, pe fiecare aspect, va rămâne consecvent și ușor de actualizat este ceea ce promite Divi 5.

Și asta este doar unul dintre mulți pe care i -am făcut în ultimele luni, inclusiv Loop Builder, FlexBox Layout și o interfață complet reimaginată pentru designerii web moderni. Dacă nu le -ați explorat încă, acum este momentul perfect.