Share
Bine ați venit la a zecea lecție a seriei noastre Web Design for Kids, totul despre Color.
În acest tutorial vom sari în teoria culorilor, modalități diferite de utilizare a culorilor în CSS, semnificația anumitor culori și revizuirea modului de selectare a culorilor perfecte pentru site-urile noastre. Vom încheia câteva sfaturi pentru utilizarea culorii pe web.
Nu uitați să puneți întrebări în secțiunea de comentarii din partea de jos a acestei pagini!
Teoria culorii implică o mulțime de lucruri, dar accentul principal se uită la modul în care culorile se comportă unul cu altul într-un design. Noi numim un grup de culori alese pentru a fi utilizate împreună a Paleta de culori. O paletă de culori bine concepută va avea culori care complement unii pe alții și ai bine contrast și vibratia. Vom vorbi despre ce înseamnă aceste cuvinte într-un moment.
Alegerea culorilor potrivite și știind de ce anumite culori funcționează și alții nu pot determina dacă designul nostru va funcționa sau nu. Soluția de culoare slabă poate face ca site-ul nostru să fie dificil de folosit, sau textul nostru imposibil de citit și utilizatorul va părăsi site-ul nostru.
Înainte de a ajunge prea departe în tutorialul nostru să vorbim despre câteva terminologii de bază de culoare pe care le vom menționa foarte mult. Vom folosi acești termeni pentru a ne ajuta să înțelegem mai bine ce face fiecare culoare atât de unică.
A nuanţă este(mai mult sau mai puțin) culoarea unui obiect. Când ne referim la lucruri ca "roșu" sau "galben" vorbim despre nuanța lor.
Culoare saturare se referă la cât de viu sau puternică este o culoare. O saturație scăzută creează o culoare care apare spălată, în timp ce o saturație ridicată produce o culoare foarte intensă.
strălucire se referă la luminozitatea sau întunericul unei culori. Acest lucru merge de la negru (fără luminozitate) la alb (luminozitate completă).
Roata de culoare se bazează pe roșu, galben și albastru și este destul de bine cunoscută printre artiști. Ca designeri, înțelegerea modului în care sunt create culorile ne ajută să înțelegem mai bine culorile complement reciproc și de ce.
Roata din stânga a mașinii de mai jos arată cele trei culori primare. Cu aceste trei culori putem crea toate celelalte culori.
Roata din dreapta masinii de mai sus arata culorile secundare prea: culorile create prin amestecarea culorilor primare. De exemplu, albastru și galben fac verde, în timp ce albastru și roșu fac purpuriu.
Roata de culori stânga a mașinii de mai jos arată încă un strat: culori terțiare. Acestea sunt culorile create prin amestecarea a primar și secundar culoare. De exemplu, amestecarea albastru cu purpuriu creează un violet albastru închis.
Există un număr de sisteme de culoare (modalități de descriere a culorilor), dar numai anumite sisteme sunt potrivite pentru web.
RGB înseamnă "Red Green Blue" și descrie modul în care vedem culorile pe afișajele electronice. Aceste trei culori pot fi combinate pentru a produce multe alte culori. Cele trei valori sunt listate în ordine și fiecare interval este de la 0 la 255.
corp fundal: rgb (138,138,226);
CSS de mai sus produce un fundal portocaliu-galben pe o pagină. În paranteze puteți vedea diferite valori roșii, verzi și albastre.
Am folosit numai culoarea hexazecimal valoarea de până acum în această serie, dar putem folosi o culoare în CSS în multe moduri diferite.
Vizitați acest site pentru o listă rapidă de valori Hex și RGB pentru 500 de culori specifice.
HSL înseamnă "Hue Saturation Lightness" și valoarea este alcătuită din trei numere în ordinea respectivă.
Putem declara același galben-portocaliu pe corpul unei pagini utilizând o valoare HSL în locul valorilor Hex sau RGB ale culorii:
corp fundal: hsl (43,100%, 57%);
Prima valoare aici, 43, reprezintă un unghi pe un cerc de culoare. Aceasta este ceea ce ne dă nuanţă. Roșu este 0 sau 360 de grade, în timp ce verde este de 120 de grade și albastru este de 240 de grade.
A doua valoare ne dă un procentaj din saturare pentru culoare, cu 100% aici fiind o saturație completă.
Valoarea finală, lumină, determină cât de deschisă sau întunecată este nuanța. 100% este alb, 0% este negru și orice între ele va stabili o combinație a celor două.
Valoarea pe care o folosim în CSS depinde în întregime de noi, dar valorile HSL sunt mai ușor de ghicit prin selectarea unei valori a unghiului care se deplasează în sens invers acelor de ceasornic de la roșu (0) și apoi se adaugă procentul de saturație și ușurință dorită.
Există un număr limitat de culori care au nume pe care le putem folosi în CSS, fără numere.
corp fundal: verde;
O listă completă a acestor nume de culori poate fi găsită aici.
Dacă avem vreodată o valoare Hex și avem nevoie de valoarea RGB sau HSL a acelei culori (sau invers!), Există niște instrumente care vor face acest lucru pentru noi, cum ar fi rgb.to și Colorrrs.
Culorile au multă semnificație. În funcție de țara în care trăiți, o anumită culoare poate fi folosită pentru a însemna pericol, dragoste, fericire sau rău. Culorile pot face ca utilizatorii să reacționeze cu anumite sentimente, astfel că înțelegerea acestora este importantă pentru a comunica mesajul nostru utilizatorului.
Uitați-vă la această diagramă care arată modul în care diferite culori înseamnă lucruri diferite în diferite culturi.
Să discutăm pe scurt câteva semnificații din spatele celor trei culori primare: galben, roșu și albastru.
Galben atrage atenția utilizatorului mai mult decât orice altă culoare și de obicei reprezintă fericirea și soarele. Pe de altă parte, galbenul poate însemna și "prudență", după cum se arată în mai multe semne de circulație.
Utilizarea galbenului pe web poate fi foarte captivantă, deci este mai bine să nu o excesați și să vă asigurați că evidențiază numai informații importante.
În funcție de țara în care trăiți, roșul poate însemna orice, de la pericol, la mânie, la energie, la iubire și fericire. Indiferent ce ar însemna, roșu este întotdeauna folosit pentru a reprezenta un extrem sentiment sau acțiune.
În designul web, roșu este adesea folosit pentru a comunica ștergerea sau erorile. Este o culoare îndrăzneață care atrage atenția utilizatorului astfel încât să poată funcționa bine ca o culoare accentuată. Prea mult roșu pe un site poate fi copleșitor și poate fi dificil de a spune ce este deosebit de important.
Albastrul reprezintă atât calm cât și tristețe în cea mai mare parte și este o culoare foarte populară pe web.
Sentimentul creat prin utilizarea de albastru în modele va depinde în mare măsură de ce nuanță și nuanță selectăm. În timp ce un albastru închis va comunica puterea și fiabilitatea, un albastru mai deschis va fi mai distractiv și prietenos.
Cele mai multe site-uri vor avea o serie de culori care funcționează pentru a da ierarhie și a seta sentiment a unui design. Selectarea culorilor noastre poate fi la fel de importantă ca toate celelalte decizii de proiectare pe care am avut de făcut până acum, așa că trebuie să avem un ochi bun pentru ce culori lucrează împreună, indiferent dacă am realizat sau nu un contrast bun în întreaga pagină și dacă culorile poartă același simț sau înțeles ca și conținutul nostru.
Iată o altă privire la paleta principală de culori folosită în seria Tuts + Town tutorial:
Culorile mai ușoare sunt folosite ca fundaluri, în timp ce culorile mai întunecate sunt folosite pentru text sau pentru a evidenția anumite secțiuni.
În general, culorile existente peste unul de celălalt pe roata de culoare sunt considerate plăcute ochiului. Acestea sunt complementar culorile - când sunt combinate, produc o nuanță de gri. Este posibil ca culorile care se află unul lângă celălalt pe roata de culori să funcționeze bine împreună, dar s-ar putea să fie necesară o ajustare a saturației și luminozității pentru a obține potrivirea potrivită.
Am mai atins un pic contrast în tutorialul precedent privind elementele de bază ale designului, dar să luăm o scurtă privire.
Contrastul corect reduce dimensiunile ochiului și face clar ierarhia vizuală. Cel mai bun exemplu de contract bun vs. rău poate fi văzut prin compararea anumitor combinații de culori de fundal și text.
Imaginea de mai sus arată un contrast scăzut în stânga, cu contrast mai bun în partea dreaptă. Textul cu contrast scăzut este greu de citit și ne doare ochii, creând un efect neclar.
Există instrumente care ne furnizează liste de palete de culori minunate din care să alegeți, care poate fi un economizor de timp real și poate servi ca o mare inspirație.
Coolors.co este unul dintre cei mai ușori utilizatori de selecție de culori disponibili în prezent.
Ne furnizează palete de culori frumoase pe care le putem personaliza și schimba apăsând bara de spațiu.
Adobe Color este un alt instrument de selecție a culorilor care folosește foarte mult roata de culoare uimitoare pe care am vorbit-o mai devreme.
Putem schimba roata de culori, determinând paleta noastră și apoi efectuăm ajustări ulterioare pentru fiecare culoare individuală.
Adobe Color ne permite, de asemenea, să salvăm paletele noastre preferate și să navigăm pe cele populare, pre-selectate.
Atunci când alegeți culori pentru web și le aplicați elementelor de pe pagină, este important să păstrați câteva lucruri în minte pentru a vă asigura că aceste culori îmbunătățesc experiența utilizatorului.
Contrastul este atât de important încât, atunci când aveți dubii, mergeți cu cea mai sigură opțiune; chiar dacă pare un pic "plictisitor"! Unele dintre cele mai importante îndatoriri pe care le avem ca designeri se asigură că lucrurile sunt funcționale, ușor de utilizat și ușor de citit. Contrastul slab va împiedica utilizatorii să nu poată citi conținutul nostru minunat.
Deci, în timp ce este bine să fii aventuros cu alegerile de culoare ale tale, aceste alegeri nu trebuie să scape niciodată de funcționarea generală a site-ului sau să te distragă de conținut.
Instrumentele de selectare a paletelor de culori, cum ar fi Coolors, ne vor furniza adesea cinci culori. Cinci culori ne permit să avem una sau două culori dominante și câteva culori mai puțin dominante pentru lucruri precum butoane și link-uri.
Având mai mult de cinci culori diferite, modelele noastre riscă să fie inconsecvente și dificil de urmărit; deși alb, negru și gri nu ar trebui să fie luate în considerare aici.
Este foarte important să nu vă îndepărtați de utilizarea culorilor, care este, în general, acceptabilă de o mulțime de oameni. De exemplu, majoritatea oamenilor sunt obișnuiți să verde, adică "adăugați", iar roșu înseamnă "ștergeți". Reversarea acestui lucru pe site-ul nostru ar reprezenta o decizie de proiectare proastă, deoarece nu este ceea ce se așteaptă și probabil va confunda utilizatorii.
În acest tutorial am discutat despre teoriile și regulile de culoare și cum să le selectăm în mod corespunzător și să le folosim pe web. Fiecare culoare are un mesaj propriu. Trebuie să ne asigurăm că acest mesaj corespunde cu cel al conținutului nostru, prin alegerea atentă a paletelor.
Înainte vom termina seria noastră cu câteva gânduri finale și diferite moduri în care putem împărtăși munca noastră cu prietenii și familia online.
Ne vedem în jurul orașului!
Accentsconagua