Înțelegerea culorilor relative în designul web

În designul web, chiar și cele mai simple decizii se pot înmulți. Ceea ce începe ca o alegere de proiectare unică se extinde rapid în zeci de variații vizuale pentru interacțiuni, fundaluri, granițe și multe altele. Construcția dvs. poate deveni aglomerată cu valori nepotrivite și modificări manuale fără un sistem consistent.

Sintaxa relativă a culorilor în CSS oferă o abordare mai inteligentă și mai scalabilă. Vă permite să definiți variații vizuale bazate pe o singură sursă, menținând designul coerent și ușor de gestionat. În mod normal, acest lucru necesită scrierea codului personalizat. Dar cu Divi 5, puteți utiliza aceste tehnici moderne vizual, chiar de la început. Să aruncăm o privire mai atentă.

Probleme comune de gestionare a culorilor

Acea culoare perfectă a mărcii pe care o alegeți se poate înmulți rapid în zeci de variații împrăștiate pe site -ul dvs. Iată câteva probleme care contribuie la această problemă:

Gestionarea variațiilor pentru o singură culoare

Începi cu un albastru de bază și ai nevoie rapid de zeci de variații. Picker -ul de culori al constructorului dvs. de pagini devine o mizerie. Albastru deschis, albastru mai deschis, albastru închis, albastru mai închis, albastru decolorat - fiecare este salvat ca o culoare separată.

Blue -ul dvs. de marcă se întinde pe douăzeci de nuanțe diferite pe site -ul dvs. Unele secțiuni folosesc albastrul original, altele folosesc o versiune mai ușoară pe care ai făcut -o acum trei săptămâni, iar butoanele tale folosesc acea nuanță mai întunecată pe care ai făcut -o pentru un contrast mai bun.

Niciuna dintre aceste culori nu se conectează la celelalte. Când clientul tău vrea violet în loc de albastru, te confrunți cu actualizarea fiecărei culori de mână. Veți petrece ore întregi făcând clic prin module. Vânzi în fiecare umbră. Speri ca nu -ți lipsește niciunul.

O colecție de multe nuanțe albastre similare din stânga se transformă în purpuri împrăștiate, fără legătură, din dreapta, deoarece actualizarea lor una câte una este obositoare și necesită o consistență constantă. Și mai mult, aceste variații de culoare sunt de obicei blocate și nu au nicio legătură.

Problema opacității

Mulți constructori de pagini includ controale de transparență, care pot fi un coșmar pentru consistența culorilor. Puteți crea o suprapunere albastră perfectă cu 60% opacitate, dar mai târziu, aveți nevoie de același roșu de vedere pentru o secțiune diferită.

Constructorul dvs. de pagini nu -și amintește de amestecul exact, așa că ați lăsat oculare glisorul de opacitate și încercați să se potrivească cu ceea ce ați făcut înainte.

Încercările 1, 2 și 3 variază în umbră și transparență, deoarece globarea oculară nu dă rezultate precise chiar și cu controale precise.

Unii constructori de pagini vă permit să salvați culori transparente. Alții nu. Terminați cu o grămadă de albastru cu aspect similar.

Toate sunt ușor diferite. Designul dvs. pierde consecvența. Nu puteți recrea în mod fiabil aceeași culoare transparentă în diferite module. De fiecare dată când aveți nevoie de transparență, începeți de la zero. Ghiciți la valori de opacitate. Sper că se potrivesc cu designul dvs. existent.

Crearea de variabile manual

Majoritatea constructorilor de pagini oferă o anumită formă de economisire a culorilor, dar devine rapid de nejustificat. Salvați culori cu nume generice precum „Yellow 1”, „Yellow 2” și „Galben Light”.

Șase luni mai târziu, nu ai idee care galben face ce. Paleta dvs. de culori salvată devine o mizerie de culori cu aspect similar, cu nume fără sens. Biblioteca dvs. de culori crește fără niciun sistem organizațional. Aveți trei portocale diferite care arată aproape la fel, dar servesc diverse scopuri.

O grilă de multe eșantioane de culori cu nuanțe suprapuse și nume inconsistente, neclare, contribuie la o paletă înfricoșătoare, confuză, dificil de organizat sau de utilizat eficient.

Membrii echipei își adaugă variațiile de culoare, creând nuanțe duplicate cu nume diferite. Orange -ul dvs. de marcă există ca „portocaliu”, „brand portocaliu”, „portocaliu primar” și „portocal principal”. Nimeni nu știe pe care să -l folosească.

Unii dezvoltatori încearcă să rezolve acest lucru scriind variabile CSS personalizate. Acest lucru le oferă un control mai bun asupra relațiilor de culoare.

Dar acum ați creat un obstacol tehnic. Membrii echipei dvs. non-tehnologice nu mai pot actualiza culorile, iar clienții dvs. nu pot face singuri schimbări simple de culoare. Devii responsabil pentru fiecare ajustare minoră a culorii.

Ce culori relative sunt în CSS (și de ce ai nevoie de ele)

Culorile relative îți rezolvă problemele de culoare. Alegeți o culoare a mărcii. CSS face toate versiunile de care aveți nevoie. Cele ușoare pentru fundaluri. Cele întunecate pentru granițe. Cele clare pentru suprapuneri. Toate de la o culoare de pornire.

CSS funcționează ca un instrument de culoare dinamică. Îi spui: „Faceți acest galben mai ușor.” CSS face treaba. Butonul tău roșu trebuie să se estompeze atunci când se plimbă. CSS adaugă transparența. Antetul tău albastru are nevoie de o margine mai închisă. CSS o creează imediat.

Fluxurile de lucru tradiționale au necesitat mai mult efort manual. Designerii au făcut seturi de culori în Photoshop. Coderii au folosit instrumente precum SASS. Constructorii de site -uri au trebuit să ghicească la culorile potrivite. CSS se ocupă acum de acest lucru automat.

Cum CSS creează culori din culori

Cuvântul „de la” spune CSS să folosească o culoare existentă ca punct de plecare. Oferiți CSS o culoare și rupe acea culoare în bucăți pe care le poate folosi.

Culoarea ta de pornire devine baza. CSS îl împarte în părți. Sume roșii, sume verzi, sume albastre. Sau nuanță, luminozitate și saturație dacă preferați aceste controale.

Puteți începe cu orice format de culoare. Folosiți o culoare hexagonală ca #E91E63. Spuneți CSS să lucreze cu acesta ca HSL pentru schimbări ușoare de luminozitate. Ieșiți -l ca RGB dacă codul dvs. are nevoie de asta. CSS convertește totul automat.

Codul urmează un model simplu. În primul rând, spuneți de unde să obțineți culoarea și apoi spuneți ce să schimbați în legătură cu asta. Puteți păstra totul la fel, dar adăugați transparență sau puteți schimba nuanța, dar păstrați luminozitatea. Ambele funcționează la fel.

Spargerea culorilor în piese

Formate diferite de culoare vă oferă instrumente diferite. RGB vă permite să schimbați separat roșu, verde și albastru. HSL vă oferă controale de nuanță, saturație și lejeritate.

Iată cum funcționează. Scrii RGB (din #FF4081 RGB). CSS ia acel cod hex de roz și îl împarte în numere roșii, verzi și albastre. Apoi puteți utiliza aceste numere oricum doriți. Modelul rămâne același: Funcția culorilor (de la Channel1 Channel2 Channel3).

Așadar, în loc să scrieți culori de la zero, construiți pe o culoare existentă și schimbați doar piesele pe care doriți să le schimbați.

Fiecare parte este convertită pentru a se potrivi cu ceea ce ați ales. Convertirea acelui hex roz vă oferă r = 255, g = 64, b = 129. Folosiți-le așa cum este sau schimbați-le cu Calc ().

Puteți amesteca și potrivi canalele. Vrei ca toți pixelii roșii să fie la fel? Utilizați RGB (de la var (–Color) ggg). Acest lucru ia valoarea verde și o folosește pentru roșu, verde și albastru, creând un ton gri din culoarea originală.

Sprijinul browserului și alte considerente

Site -urile mari nu pot ignora vizitatorii, deoarece trebuie să se acomodeze cu toată lumea. Vechile versiuni ale Safari funcționează diferit. Versiunile cromate gestionează unele lucruri în felul lor. Firefox, este propriu. Veți ajunge să scrieți trei versiuni diferite de cod pentru un efect de culoare.

Toată această muncă suplimentară necesită timp de la lucruri mai bune. Puteți îmbunătăți funcționalitatea site -ului și puteți adăuga caracteristici pe care oamenii le doresc.

Mulți dezvoltatori folosesc în mod selectiv culori relative. Instrumentele interne și proiectele personale funcționează bine de când controlați browserul. Site -urile de marketing și munca cu clienții au nevoie de o planificare mai atentă.

Tehnologia funcționează excelent acolo unde este acceptată. Întrebarea este dacă complexitatea suplimentară se potrivește cronologiei proiectului și a echipei sau a capacității tehnice a clientului. Dar pentru majoritatea cazurilor, ar fi excesiv și un aerian pentru majoritatea membrilor echipei.

Acesta este exact motivul pentru care echipa Divi a intervenit. Am văzut designeri web care se luptă cu compatibilitatea browserului, în timp ce lipseau instrumente de culoare puternice. Soluția noastră din Divi 5 ia cele mai bune părți ale culorilor relative și le înfășoară într -un sistem care funcționează peste tot și nu necesită codificare.

Cum Divi 5 face ușor culorile relative

Acum, știți puterea culorilor relative; Cu toate acestea, s -ar putea să fi realizat că nu este la fel de ușor de implementat. Divi 5 a adoptat o abordare diferită și a construit flexibilitatea culorii chiar în interfața sa vizuală. Dar să aflăm ce este Divi exact.

Ce este Divi?

Divi este cel mai popular constructor de pagini WordPress. Prioritizează designul vizual și vă oferă un control complet asupra designului dvs.

Puteți urmări schimbările dvs. în direct, puteți ajusta dimensiunile fonturilor sau distanțarea liniei și puteți vedea imediat rezultatele pe pagina dvs. Obțineți acces la peste 200 de module care merg oriunde le doriți. Blocurile de text, rubricile și piesele de conținut funcționează ca o echipă. Nu există șabloane rigide care să -ți strângă ideile în forme incomode.

Iată ce face Divi diferit: peste 2000 de machete pregătite construite pentru întreprinderile reale. Acestea nu sunt șabloane de început de bază. Fiecare proiectare vizează industrii specifice. Veți găsi machete care vorbesc limba publicului dvs. și se potrivesc cu nevoile dvs. de afaceri.

Săriți blues -ul paginii goale cu site -uri rapide Divi

Site -urile rapide Divi remediază care intimidează pânza goală care ucide proiecte înainte de a începe. Obțineți site -uri web profesionale de pornire cu un design solid pe care echipa noastră de design îl construiește folosind imagini originale și lucrări de artă pe care nu le veți găsi nicăieri în altă parte.

Dacă doriți ceva mai personalizat, Divi Quick Sites funcționează cu Divi AI pentru a construi machete personalizate pe baza detaliilor afacerii dvs. Descrieți firma de consultanță sau restaurantul dvs. și produce pagini relevante cu conținut specific industriei.

Acestea nu sunt filme de bază: primiți titluri reale, conținut scris și imagini care se potrivesc tipului dvs. de afaceri. Chiar proiectează anteturi și subsoluri, paginile de produse și șabloane de postare pe blog, printre altele, pentru tine.

Puteți seta fonturile și culorile mărcii dvs. de la început sau lăsați AI să le aleagă pentru dvs. AI funcționează în aceste orientări. După aceea, totul rămâne complet editabil, astfel încât să puteți ajusta tipografia până când se potrivește nevoilor dvs. exacte.

Controlul complet asupra designului site -ului dvs., acum cu AI

Constructorul de teme vă pune la dispoziție de design pe întregul dvs. site. Creați anteturi personalizate care să reflecte personalitatea mărcii dvs. Construiți machete de blog care mențin cititorii angajați cu articole lungi. 404 de pagini pot rămâne la brand cu fonturi potrivite și stil.

Divi AI, după cum am menționat anterior, pune AI chiar în fluxul de lucru de design. Creați titluri care sună ca și cum le -ați scris și descrieri de produse care vă surprind vocea de marcă.

Editarea foto se poate face în interiorul constructorului. Spuneți AI ce schimbări doriți într -o imagine și se ocupă de modificări.

Aveți nevoie de imagini proaspete? Le creează și acestea.

Completați secțiuni de pagini care se potrivesc perfect afacerii dvs.

Plus fragmente de cod atunci când ai nevoie de ele.

Divi 5: Următoarea evoluție

Divi 5 intră în testarea alfa cu o misiune clară: pentru a îmbunătăți performanța procesului dvs. de proiectare web. Am ascultat feedback real despre ceea ce te încetinește și ce te -ar ajuta.

Tot ceea ce îți place la actualul Divi rămâne pus. Am făcut -o doar să funcționeze mai bine. Interfața pare mai curată. Paginile se încarcă mai repede decât înainte. Controalele răspund corect atunci când faceți clic pe ele.

Am reconstruit fundația folosind standardele web de astăzi. Aceasta înseamnă mai puține erori ciudate și performanțe mai ușoare în general.

Petreci mai puțin timp luptându -te cu constructorul și mai mult timp proiectate. Site -urile dvs. arată mai profesionist, deoarece consistența se întâmplă automat. Clienții obțin site -uri web mai bune, deoarece vă puteți concentra pe nevoile lor în loc de probleme tehnice.

Versiunea Alpha este gata să fie utilizată pe site -uri web noi, deși nu recomandăm să convertiți site -urile dvs. DIVI 4 existente în Divi 5.

Ce este nou în Divi 5

Divi 5 aduce modificări majore la modul în care construiți site -uri web. Versiunea publică alfa funcționează excelent pentru proiecte noi în acest moment. Echipele noastre de dezvoltare livrează noi funcții la fiecare două săptămâni, cu mai multe actualizări majore deja lansate de la începutul Alpha.

Iată câteva actualizări cheie:

• Codebase moderne accelerează lucrurile prin încărcarea numai a modulelor de care ai nevoie de fapt, eliminând codul balon care a încetinit DIVI 4.
• Un sistem complet de aspect FlexBox include acum șabloane de rând noi, centrare automată verticală, ambalare a conținutului și distribuție de distanțare prin controale vizuale.
• Un constructor de bucle nou care repetă module, grupuri sau secțiuni cu conținut dinamic și acceptă bucle cuibărite pentru structuri de date complexe.
• Culorile relative cu HSL asigură un control dinamic al culorilor bazat pe valorile de nuanță, saturație și lejeritate.
• Sistemul bazat pe HTML-5 înlocuiește complet codurile scurte , ceea ce înseamnă mai puține erori și o mai bună compatibilitate WordPress.
• Interfața Visual Builder a obținut un makeover complet, cu moduri ușoare și întunecate, panouri andocate, ferestre cu file, comenzi rapide de la tastatură și o vedere îmbunătățită a straturilor cu pesmet.
• Punctele de întrerupere responsabile personalizabile înlocuiesc cele trei fixe ale Divi 4, oferindu -vă mai mult control cu scalarea pânzei pentru a vedea exact modul în care modelele privesc diferite dimensiuni ale ecranului.
• Grupurile de module funcționează ca containerele versatile care împletesc elemente legate de elemente, astfel încât să le puteți modela ca unități sau să le mutați fără a pierde relații.
• Variabilele de proiectare vă permit să setați culori, fonturi, numere, imagini, text și adrese URL la nivel global pe întregul site.
• Presetările de grupuri de opțiuni economisesc proprietăți specifice de design, cum ar fi tipografia sau umbrele care funcționează prin diferite tipuri de module.
• Unitățile avansate CSS acceptă acum funcții Clamp (), Calc (), Min () și Max () prin interfața vizuală fără a scrie cod.
• Sistemul de interacțiuni creează pop-up-uri, comutații, efecte de defilare și efecte de mișcare a mouse-ului fără pluginuri externe.

Ce se întâmplă ...

• Modulele WooCommerce reconstruite de la zero folosind arhitectura DIVI 5 cu compatibilitate completă și compatibilitate variabilă.
• Inspectorul de elemente va oferi noi instrumente de depanare și dezvoltare pentru utilizatorii avansați.
• De asemenea, modulul de carusel de grup vă poate ajuta să creați un carusel compus din grupuri, apoi să dezvoltați conținutul pentru fiecare diapozitiv folosind setul complet de elemente Divi pentru a proiecta orice stil de carusel pe care îl doriți.

Construirea paletelor care se extind cu Divi 5

Picker -ul dvs. de culoare devine o mizerie atunci când aveți nevoie de zeci de variații de culoare a mărcii dvs. Divi 5 rezolvă acest lucru conectând fiecare nuanță la o culoare de bază. Pașii de mai jos vă arată cum să construiți un sistem de culori scalabil și întreținut.

1. Configurarea fundației dvs. de culori primare

Deschideți constructorul vizual și găsiți pictograma managerului variabil în bara laterală din stânga. Faceți clic pe el pentru a vedea fundația de culoare a site -ului dvs. Divi 5 vine cu variabile de culoare prestabilite care vă așteaptă deja: culorile primare, secundare, rubricii și corpului.

Nu puteți șterge aceste variabile prestabilite, dar le puteți schimba valorile. Acest lucru funcționează perfect, deoarece aceste patru culori gestionează majoritatea site -urilor web. Faceți clic pe variabila de culoare primară și introduceți culoarea principală a mărcii dvs. Aceasta devine fundamentul pentru orice altă variație de culoare de pe site -ul dvs.

Variabila dvs. de culoare principală ar trebui să reflecte cea mai saturată versiune a culorii mărcii dvs. Gândiți -vă la aceasta ca la versiunea pură, nediluată, înainte de a crea fundaluri mai ușoare sau de a adăuga efecte de transparență. Acest lucru vă oferă cea mai mare gamă atunci când construiți variații mai târziu.

Culoarea secundară funcționează bine pentru accente, butoane sau cele mai importante momente care trebuie să iasă în evidență de culoarea brandului principal. Setați -vă culoarea rubricii la ceva care citește bine pe fundalurile dvs. Culoarea corpului rămâne de obicei gri închis sau negru pentru lizibilitate.

Aceste patru variabile presetate se conectează la întregul sistem al Divi. Când construiți module, aceste culori apar ca opțiuni rapide. Schimbați -vă primarul de la albastru la verde aici și fiecare modul folosind acea actualizare a variabilei primare instantaneu pe site -ul dvs.

Evitați să creați mai devreme variabile personalizate excesive. În schimb, începeți cu aceste patru presetări. Majoritatea site -urilor web ar putea avea nevoie doar de aceste culori de bază, cu variații create prin controalele relative ale culorilor Divi 5. Dar, desigur, dacă aveți nevoie, puteți adăuga cât mai multe variabile doriți.

2. Crearea nuanțelor de culoare cu controale HSL

Acum, adăugați o altă variabilă de culoare. De data aceasta, veți construi o nuanță din culoarea dvs. primară în loc să setați o nouă culoare de bază. În culoarul culorilor, selectați variabila de culoare primară din listă.

Acum vedeți trei glisoare: nuanță, saturație și lejeritate. Acestea controlează modul în care se schimbă culoarea ta de bază.

Nuanța se mișcă în jurul roții de culoare de la 0 la 360 de grade. Lăsați acest lucru singur atunci când faceți nuanțe de aceeași culoare. Saturația trece de la 0% la 100% și controlează cât de vie arată culoarea ta. La 0%, orice culoare devine gri. La 100%, obțineți intensitate completă.

Lumina de ușurință rulează de la 0% la 100%. Acest glisor vă creează nuanțele reale. La 0, obțineți forma pură a culorii voastre. Mutați -l până la 50% pentru nuanțe mai deschise. Renunțați la -20% pentru nuanțe mai întunecate.

Puteți amesteca și potrivi aceste culori HSL pentru a construi culori și variații noi, după cum este necesar.

Să creăm două variații ale culorii noastre primare. Adăugați o variabilă și numiți noua nuanță ceva clar, cum ar fi „Lumina primară” sau „Întunericul primar”. Repetați acest proces pentru a crea mai multe nuanțe. O configurație tipică folosește baza primară de bază la 30% ușurință pentru fundal și altele, și întuneric la -15% lejeritate.

De asemenea, puteți adăuga nuanțe atât de deschise și mai închise pentru culoarea dvs. secundară.

3. Construirea variabilelor de culoare cuibărită

Ați făcut lumină primară și întuneric primar în pasul 2. Acum puteți construi mai multe culori din acele nuanțe.

Faceți o nouă variabilă numită „Shadow de fundal de card”. Alegeți lumina principală din listă. Scăderea opacității la 50%. Acest lucru vă oferă o nuanță abia acolo pentru fondurile de carduri. În continuare, creați „Buton Hover”. Alegeți întuneric primar. Drop LightREness încă 10% pentru a -l face și mai întunecat. Acum, butoanele tale pot fi o culoare mai închisă atunci când oamenii trec peste ei.

Puteți construi și culori personalizate din nuanțele dvs. Faceți „Text Shadow” culegând butonul. Stabiliți opacitatea la 15%. Acum, umbra dvs. de text se conectează la Button Hover, care se conectează la Dark Primary, care se conectează la primar.

Încercați „accent de frontieră” de la lumina primară. Saturația de bump până la 100% pentru a face să apară mai mult. Acest lucru vă oferă o frontieră strălucitoare care se potrivește încă cu marca dvs. Fiecare lanț devine mai lung. Toate cele cinci culori urmăresc înapoi la o alegere primară.

Adăugați nuanțe similare pentru culoarea secundară pentru o selecție frumoasă de culori din care să selectați.

4. Aplicarea culorilor relative pe site -ul dvs.

Ți -ai construit fundația de culoare și ai creat toate acele nuanțe. Acum vine partea practică: implementarea lor pe site -ul dvs. web.

Deschideți orice modul în Visual Builder. Faceți clic pe o opțiune de culoare pentru fundaluri, text sau granițe. Variabilele dvs. de culoare salvate apar chiar în interiorul culorii. Nu va trebui să vă amintiți numele sau codurile Hex.

Alegeți culoarea principală pentru butoanele principale. Alegeți lumina primară pentru fundalul secțiunii. Folosiți întuneric primar pentru granițe și accente subtile precum butoanele CTA. Fiecare selecție se conectează la sistemul de culori de bază.

Variabilele dvs. de culoare funcționează peste tot: anteturi, subsoluri, machete de blog și pagini de produse. Membrii echipei și clienții dvs. pot alege culori fără a ghici. Ei văd „lumină primară” în loc de coduri hexagonale aleatorii în culegător. Numele clare înseamnă mai puține greșeli și lucrări de proiectare mai rapide. Toată lumea știe ce culoare servește ce scop.

Acest sistem bazat pe variabile previne inconsecvența vizuală. Nu va trebui să salvați zeci de blues similare sau să vă întrebați ce nuanță să utilizați pentru efecte de hover. Variabilele dvs. vă oferă structură, păstrând în același timp flexibilitatea proiectării.

5. Actualizarea culorilor când este nevoie

Clientul dvs. decide că vor albastru de miezul nopții în loc de albastru. Cu gestionarea tradițională a culorilor, acest lucru înseamnă ore de cernere prin module și actualizarea manuală a fiecărei nuanțe sau actualizarea unei grămadă de culori globale simultan. Cu culorile relative ale Divi 5, schimbați o variabilă și urmează orice altceva.

Fundalurile tale ușoare primare devin verzi deschise. Granițele primare întunecate se deplasează la un verde închis. Culorile cu buton se adaptează la un albastru mai închis. Toate acele relații cuibărite pe care le -ați construit rămân intacte.

Umbra de fundal a cardului a avut o opacitate de 15% a luminii primare. Devine 15% opacitate a noii lumi primare verzi fără ca tu să o atingi. Umbra dvs. de text se conectează la Button Hover, care se conectează la întunericul primar, care se conectează la primar.

Vechea cale a însemnat recrearea armoniei culorilor de la zero de fiecare dată. Păstrați relațiile în timp ce schimbați fundația, iar designul dvs. rămâne echilibrat.

Culorile tale, regulile tale

Utilizarea inconsistentă a culorii subminează un design bun. Ați salvat nuanțe aleatorii cu nume fără sens, vânați prin module pentru actualizări și reconstruind paletele de la zero de fiecare dată când clienții se răzgândesc.

Culorile relative ale lui Divi 5 încheie acest coșmar al fluxului de lucru. Construiți o dată de la o culoare de bază și urmăriți automat fiecare actualizare a variației pe site -ul dvs. Sistemul se ocupă de compatibilitatea browserului, menține relațiile și îți menține organizarea culorii, așa că nu va trebui să te joci cu CSS.

Următorul dvs. proiect merită o mai bună gestionare a culorilor. Descărcați Divi 5 și vedeți cum se simte designul organizat.