Share
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ă pro 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.
Acest articol este scris pentru persoanele care abia încep să învețe principiile formale de design. Nu este un studiu cuprinzător privind 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 culorilor în cadrul contextul unui proiect de web design.
Am scris acest lucru pentru că întotdeauna mi-a fost greu să decid asupra unei scheme 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.
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ții.
Interacțiunea dintre culori într-un design prin complementare, contrast și vibrații.
În timp ce prima parte a acestei definiții este simplă (și adesea blandă), ultimii trei termeni definesc teoria culorilor de bază:
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ă tind să se adapteze pentru o anumită zonă a spectrului de culori, . Există două utilizări comune ale complementării: schema de culori Triadic și Compound, 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.
Contrastul reduce efectul ocular ș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 esențială pentru folosirea 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 atrage atenția spectatorului asupra elementelor specifice ale unei pagini. Gândiți-vă la evidențierea unui manual: atunci 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: Utilizarea 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ă.
Acest principiu se aplică și culorilor analogice (pe care le vom discuta ulterior):
Nu suna stupid, dar vibrația dictează emoția designului tău. Culorile mai luminoase îi determină pe utilizatori să se simtă mai energic ca rezultat al designului dvs., 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 foarte bun al acestui lucru este o comparație între CNN și Ars Technica:
Iată trei dintre structurile acceptate în mod obișnuit pentru o schemă de culori bună: triadic, compus și analog:
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:
Prin utilizarea unui triunghi echilateral, puteți asigura că culorile au vibrații egale și se complimentează reciproc în mod corespunzător.
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.
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:
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 doresc cu adevărat să sapă adânc în subiect pentru a găsi una dintre numeroasele cărți academice disponibile pentru a valorifica unele dintre conceptele profunde. Vom lansa, de asemenea, articole mai aprofundate despre "teoria culorii pentru web designeri" în viitor, aici pe Webdesigntuts + :).
Acum, să ne uităm la câteva instrumente excelente pe care le puteți utiliza pentru a experimenta pe cont propriu:
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.
Prin experimentarea într-un mediu ghidat, suntem capabili să învățăm cum să aplicăm aceste principii fără a deveni frustrați atunci 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ții plăcute de culori.
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 poate fi aleasă 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, codurile de export sunt furnizate (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 pentru atunci când lucrurile nu funcționează la fel de bine cum sperau.
Acest instrument devine repede alegerea mea preferată pentru începători absolut, cei cu puțină răbdare sau oameni cu un termen limită. Oferind un selector foarte simplu și controlat, Color Scheme Designer oferă o barieră de intrare foarte scăzută și alegerea principiilor de culoare prezintă o varietate de opțiuni. În timp ce nu îi învață pe utilizatori de ce culorile funcționează bine (roata dinamică de culoare a lui Kuler este mult mai eficientă în acest sens), rezultatele sale sunt excelente ca punct de plecare sau pentru a termina un prototip.
Opțiunile sale mai avansate sunt foarte utile: caracteristici cum ar fi abilitatea de a ajusta saturația și contrastul paletei întregi, suprapunerile cu culori orb și previzualizările site-urilor sunt lucruri pe care sper să le implementeze foarte curând. Cu toate acestea, consider că acest instrument nu ar trebui să fie instrumentul principal folosit de cei care doresc să învețe teoria culorilor - deoarece face prea multă muncă pentru utilizator și nu le permite să experimenteze intuitiv menținând în același timp elementele de bază ale fiecărui principiu de culoare.
Da, există o mulțime de alte site-uri în care puteți găsi scheme de culori excelente ... și de fapt vom fi rotunjite aceste site-uri în sus și analizându-le în viitorul apropiat (căutați site-ul pentru resursele noastre roundups atunci când iese).
Pentru a termina acest articol, să examinăm un site folosind câteva din principiile pe care le-am discutat. Gamers with Jobs este un site dedicat unei analize mai mari a jocurilor video, prin caracteristicile sale, podcast-uri și forumuri.
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 ajustând culorile alese de la Kuler înainte de a le aplica unui design, doar pentru a constata că schema de culori a fost modificată doar pentru a fi neatins.
Încredere în teorie! Aplicați culorile alese prin intermediul unui principiu de culoare și atunci ajustați după cum este necesar. Acest lucru vă va economisi mult timp și vă va întări abilitățile de proiectare pe măsură ce veți începe să vedeți culoarea în moduri mai rafinate, artistice și chiar științifice!
Vă mulțumesc pentru că ați citit primul meu articol, am avut o mulțime 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 tocmai am vorbit: "Înțelegerea ierarhiei vizuale în Web Design".
Dacă aveți nevoie de o temă pro pentru următorul dvs. proiect, atunci răsfoiți prin intermediul Șabloanelor Web. Există o mulțime de exemple de temă color de site web pentru a deconstrui pe ThemeForest, de asemenea. Sau angajați un designer pe Envato Studio.
Accentsconagua