Astăzi vom învăța importanța culorii în Web Design și cum să alegeți o schemă de culori plăcută. Acest articol face parte din seria noastră Basix, care are ca scop furnizarea de explicații practice și concise ale principiilor de proiectare pentru cei cu experiență mică de proiectare.
Înainte de a începe, aruncăm o privire prin Șabloanele noastre Web , dacă aveți nevoie de o temă profesionistă pentru următorul proiect. Există, de asemenea, o serie de exemple minunate de tematici de culori ale site-ului web.
Acum, să începem acest tutorial.
Pentru cine este scris acest articol:
Acest articol este scris pentru persoanele care abia încep să învețe principiile formale de design. Nu este un studiu cuprinzător despre modul de aplicare a culorii la un design (vom avea o mulțime de aceia în viitor), ci mai degrabă o prezentare generală pentru cei care caută sfaturi practice care îi vor ajuta să abordeze teoria culorii în cadrul contextul unui proiect de web design.
Scriu acest lucru pentru că întotdeauna mi-a fost greu să decid o schemă de culori care funcționează bine pentru un proiect; este probabil una dintre cele mai dure decizii pe care trebuie să le fac ca designer. Cu toate acestea, prin învățarea bazelor de teorie a culorilor și a unor instrumente excelente disponibile pe web, am reușit să-mi întăresc proiectele și să țin cont de această slăbiciune.
Câțiva candidați pentru publicul țintă:
- Un programator care caută sfaturi pentru ai ajuta să creeze un prototip atrăgător.
- Un designer aspirant care dorește o scurtă trecere în revistă a subiectului
- Cineva care nu înțelege diferența dintre Web Development și Web Design.
Într-o scurtă descriere, ce este teoria culorii?
Teoria culorilor acoperă de fapt o serie de lucruri, dar la nivelul cel mai de bază este interacțiunea culorilor într-un design prin complementare, contrast și vibrație.
Interacțiunea culorilor într-un design prin complementare, contrast și vibrație.
În timp ce prima parte a acestei definiții este simplă (și adesea blandă), ultimii trei termeni definesc teoria culorilor de bază:
complementarea
Complementarea se referă la modul în care vedem culorile în ceea ce privește relațiile lor cu alte culori.Atunci când culorile ocupă capăturile opuse ale spectrului de culori, ele îi determină pe oameni să considere un design atrăgător de vizibil prin stabilirea unui mediu fericit în care să poată locui ochiul. Mai degrabă decât să se acomodeze pentru o anumită zonă a spectrului de culori, . Există două utilizări comune ale complementării: schema de culori Triadic și Compus pe care o vom discuta mai târziu. Complementarea vă poate duce la noi culmi ale sofisticării de design atunci când puteți începe să stăpânească complexitatea combinațiilor de culori.
Contrast
Contrastul reduce efectul de ochi și concentrează atenția utilizatorului prin împărțirea clară a elementelor pe o pagină. Cel mai aparent exemplu de contrast este o selecție eficientă a culorii de fundal și text, după cum se arată mai jos:
Dacă aveți vreodată îndoieli, cea mai bună practică este de a alege o culoare foarte deschisă pentru fundal și o culoare foarte închisă pentru textul în sine. Acesta este un domeniu în care teoria culorii este crucială pentru utilizarea unui design web; În majoritatea proiectelor, zonele mari de text nu sunt un loc pentru a încerca să fii cu adevărat creativ – deci păstrați-l simplu și lizibil.
Odată cu stabilirea textului lizibil, contrastul poate, de asemenea, atrage atenția spectatorului asupra elementelor specifice ale unei pagini. Gândiți-vă la evidențierea unui manual: când doriți să vă atrageți atenția asupra unei anumite porțiuni a paginii, faceți zona înconjurătoare să arate diferit de restul textului. Același principiu se aplică și pentru Web Design: Folosirea unei varietăți de culori contrastante poate ajuta la focalizarea atenției spectatorului asupra anumitor elemente de pagină.
Dacă site-ul dvs. web are un fundal întunecat, concentrați-vă pe conținutul principal cu o culoare mai deschisă.
vivacitatea
Nu suna stupid, dar vibrația dictează emoția designului tău. Culorile mai luminoase îi determină pe utilizatori să se simtă mai energici ca urmare a designului, ceea ce este deosebit de eficient atunci când încercați să faceți publicitate unui produs sau să invitați un răspuns emoțional. Nuanțele mai întunecate relaxează utilizatorul, permițându-le minții să se concentreze asupra altor lucruri. Un exemplu extraordinar al acestui lucru este o comparație între CNN și Ars Technica:
Site-ul CNN are un banner roșu puternic în partea de sus, ceea ce conduce la emoții sporite de la utilizatori, deoarece acestea sunt stimulate de vibranța designului (și contrastul dintre culoarea roșie, alb și negru – schema principală de culoare a site-ului).
Ars Technica utilizează o schemă de culoare mai închisă pentru fundal și antetul său pentru a relaxa utilizatorul și pentru a-și concentra atenția asupra conținutului acestora. Prin aceasta, scrierea lor tehnică și detaliată este considerată în prim planul site-ului. Și, mai important, utilizatorul are dreptul să transfere energia mentală rezervată în mod tradițional pentru a răspunde culorilor vibrante pentru a înțelege conținutul articolului.
Cum aleg o schemă de culori efectivă?
Iată trei dintre structurile acceptate în mod obișnuit pentru o schemă de culori bună: triadic, compus și analog:
Schema de culori triadice
Compusă din 3 culori pe capete separate ale spectrului de culori. Există o modalitate foarte ușoară de a crea o schemă de culori Triadic:
- Luați o roată de culoare și alegeți culoarea de bază.
- Desenați un triunghi echilateral din acest punct.
- Cele trei puncte ale triunghiului vor forma schema dvs. tri-color.
Prin utilizarea unui triunghi echilateral, puteți asigura că culorile au o vibrație egală și se complimentează reciproc în mod corespunzător.
Schema Color Schema (cunoscută și sub numele de Split Complimentary)
Schema de culori compuse se bazează pe furnizarea unei game de culori complementare: două culori sunt alese dintre capetele opuse ale spectrului de culori. Procedând astfel, designerului i se acordă mai multă libertate în design, beneficiind în același timp de atracția vizuală a culorilor complementare.
Analog
O schemă de culoare analogică se bazează pe o selecție atentă a culorilor în aceeași zonă a spectrului de culori. De obicei, culorile sunt diferențiate de vibrația lor și de contrastul lor în comparație cu celălalt.
Două exemple de schemă de culoare analogică sunt:
- Nuanțe galbene și portocalii
- O selecție monocromatică (nuanțe de bază)
Doar începutul…
Frumusețea locului în care suntem în istorie chiar acum este că putem beneficia de secole de teoreticieni de culoare științifică și artistică. Există volume întregi care au fost scrise cu privire la minuția teoriei culorii, așa că îi voi încuraja pe aceia dintre voi care chiar vor să sapă adânc în acest subiect pentru a găsi una din numeroasele cărți academice disponibile pentru a valorifica unele dintre conceptele mai profunde. De asemenea, vom lansa articole mai aprofundate despre „teoria culorii pentru web designeri” în viitor, aici, pe Webdesigntuts + :).
Acum, să aruncăm o privire asupra unor instrumente excelente pe care le puteți utiliza pentru a experimenta pe cont propriu:
Modalități de a vă face viața mai ușoară
Din fericire, există câteva instrumente la dispoziția noastră care fac selecția culorilor extrem de ușoară atunci când sunt utilizate corespunzător. Și, cel mai bine, vor continua înțelegerea noastră cu privire la teoria culorilor.
Experimentând într-un mediu ghidat, suntem capabili să învățăm cum să aplicăm aceste principii fără a deveni frustrați când lucrurile nu funcționează perfect. Gândiți-vă la aceste unelte ca la un fel de „rețea de siguranță a culorii”, pentru a vă ajuta să vă explorați propria creativitate fără a fi nevoie să vă îndepărtați de regulile stabilite pentru combinațiile de culori plăcute.
Kuler
Un instrument dezvoltat de Adobe, Kuler are scopul de a oferi o modalitate intuitivă de a crea o paletă de culori. Fiecare culoare din paletă poate fi modificată individual sau selectată ca culoarea de bază, cu câteva clicuri simple. Paletele pot fi salvate și publicate, iar pe site-ul lor există o serie de intrări de comunitate excelente. Sub fiecare culoare, sunt furnizate codurile de export (inclusiv hexazecimal). Cu toate acestea, interfața poate fi greoaie uneori, ajustarea vibrației unei anumite culori poate modifica întreaga paletă (aș dori să aibă o caracteristică „de blocare” care împiedica schimbarea altor culori). În ansamblu, aș recomanda acest instrument pentru cei cu o înțelegere decentă a conceptelor și a răbdării atunci când lucrurile nu se desfășoară la fel de bine cum ar spera.
Observații finale și rezumat
Unul dintre aspectele cele mai grele de lucru cu culorile este că, uneori, atunci când culorile nu au fost încă aranjate într-un design, ele nu par să funcționeze bine împreună. Cu toate acestea, odată aplicate, armonia lor vizuală devine evidentă. Mi-am provocat o mulțime de frustrări prin ajustarea culorilor alese în Kuler înainte de a le aplica unui design, doar pentru a constata că schema de culori a fost modificată doar pentru a fi nepotrivită.
Încredere în teorie! Aplicați culorile alese prin intermediul unui principiu de culoare și apoi ajustați după cum este necesar. Făcând acest lucru vă va economisi mult timp și vă veți întări abilitățile de design, pe măsură ce veți începe să vedeți culoarea în moduri mai rafinate, artistice și chiar științifice!
rezumat
- Alegerea culorilor pe capetele opuse ale spectrului creează o armonie vizuală pentru ochi.
- Un contrast ridicat între elemente face textul ușor de citit și ghidează atenția cititorului.
- Cu cât culorile sunt mai strălucitoare, cu atât mai multă energie mentală vor consuma.
- Nu vă fie frică să folosiți unelte precum Kuler și Color Scheme Designer 3, ele vă fac viața mai ușoară și vă împiedică să deveniți frustrați de procesul de învățare.
Vă mulțumesc că ați citit primul meu articol, am avut o grămadă de distracție scriind-o. Vă rugăm să oferiți feedback în secțiunea de comentarii dacă vă simțiți așa de înclinat, vreau să fac aceste articole cât mai utile posibil.
Oh! Și dacă sunteți dornici să citiți mai multe, verificați un alt articol bazat pe teorie, care se referă la ceea ce am vorbit despre: ” Înțelegerea Ierarhiei Vizuale în Web Design” .
Dacă aveți nevoie de o temă pro pentru următorul proiect, atunci răsfoiți prin intermediul Șabloanelor Web . Există o mulțime de exemple de temă color de site-ul web pentru a deconstrui pe ThemeForest , de asemenea. Sau angajați un designer pe Envato Studio.
Imgine: Behance