Potrivirea culorilor în designul web este o disciplină importantă care datează din Evul Mediu și este folosită pentru a crea lucrări remarcabile ale umanității. Deci haideți să încercăm să-l strângem într-un post mic!)
Desigur, o postare nu este suficientă pentru a înțelege întreaga esență a teoriei culorii, dar conține principalele teze și concepte ale acestei discipline.
Iată 5 pași de urmat pentru a alege schema de culori potrivită pentru site-ul tău.
Primul pas este cel mai important. Culoarea principală creează prima impresie a site-ului și, de asemenea, stabilește o legătură între brand-ul tău și emoțiile pe care publicul tău le trăiește. Toate acestea vă creează identitatea, așa că alegerea culorii principale ar trebui abordată foarte amănunțit.
Desigur, dacă marca ta este deja asociată cu o culoare, atunci acest pas va fi mult mai ușor.
În primul rând, trebuie avut în vedere faptul că culorile diferite evocă emoții diferite. Și acest fapt a fost confirmat științific. Chiar și nuanțe diferite ale aceleiași culori afectează emoțiile publicului în moduri diferite. Există întotdeauna un anumit grad de incertitudine, în funcție de asociațiile personale ale unei persoane, dar, în general, aceleași culori pot provoca aceleași emoții la diferiți oameni.
- Roșu: pasiune, agresivitate, relevanță.
- Portocaliu: agilitate, energie.
- Galben: entuziasm, fericire, atenție/avertisment.
- Verde: creștere, stabilitate, natură.
- Albastru: seninătate, deschidere.
- Albastru: siguranță, încredere, profesionalism.
- Alb: curățenie, sănătate.
- Mov: lux, mister, romantism (nuanțe deschise).
Deloc surprinzător, multe cutii folosesc o schemă de culori pe bază de albastru.
Amintiți-vă că proiectați pentru un anumit grup de oameni care pot avea emoții diferite decât ale dvs. În plus, merită să luăm în considerare atitudinile diferite față de aceeași culoare ale oamenilor de diferite genuri, culturi sau religii.
Atunci când alegeți culoarea principală, ar trebui să începeți prin a vă exclude concurenții din lista de culori considerate. După aceea, trebuie să luați în considerare ce fel de dispoziție ar trebui să creeze marca dvs. și ce emoții să evoce.
Determinați culoarea exactă (nuanța și saturația acesteia)
Când ați ales culoarea principală, trebuie să determinați nuanța și saturația acesteia. După cum sa menționat mai sus, tonul unei culori și saturația acesteia îi pot schimba sensul. De exemplu, nuanțele mai închise de galben (de exemplu, auriu) dau impresia de antichitate, nuanțele mai deschise nu vor da acest efect.
Regula generală este că nuanțele deschise creează un sentiment de energie, prospețime, distracție, nuanțe mai închise - stabilitate și profesionalism.
După aceea, trebuie să determinați valoarea numerică exactă a culorii în sistemele RGB, CMYK, HEX sau Pantone pentru a o utiliza în procesul de proiectare.
Dacă, de exemplu, ați ales o culoare care este deja folosită pe o resursă web și doriți să o aplicați sau să le aplicați, puteți utiliza serviciul Stylify Me, care vă va ajuta să determinați culorile folosite pe orice site.
Selectați tipul de schemă de culori
Înainte de a alege restul culorilor, trebuie să determinați cum vor interacționa acestea. Doriți o schemă de culori mai contrastantă sau o schemă de culori mai liniștită?
Puteți combina culorile după cum doriți, dar aici v-am prezentat cele mai comune scheme de culori.
Monocrom
Implica utilizarea diferitelor tonuri ale culorii de baza. Cel mai adesea folosit pentru stiluri de design minimalist.
Analogic
Culori similare care apar aproape una de alta pe roata de culori.
Gradient
Trecerea treptată de la o culoare la alta. Mai colorat decât analogic, dar poate distrage atenția de la alte elemente de design.
Contrast
Două culori opuse. Dacă te uiți la roata culorilor, atunci culorile care sunt opuse una cu cealaltă sunt cele mai contrastante. De exemplu, roșu și verde sau galben și violet. Folosirea acestei scheme de culori adaugă dinamism impactului vizual al designului.
Contrastele ajută la manipularea atenției utilizatorului, permițând sublinierea elementelor (butoanele) mai importante și ascunderea celor mai puțin semnificative.
Duplex
Creați imagini folosind doar 2 culori. - nu este atât o schemă de culori, cât un fel de decor al unei scheme de culori contrastante.
Pentru a spune simplu, duplexul arată grozav, este un efect vizual dinamic care „atrage” atenția utilizatorului.
Triadă
Trei culori echidistante una de alta pe roata de culori. Una dintre cele mai frecvent utilizate scheme de culori, triada este un standard de încredere. Este dificil să-l folosești corect, doar desenează un triunghi echilateral pe roata de culori și ai trei culori în triada ta.
Contrast împărțit (divizat).
Folosind o a treia culoare în plus față de două contrastante. Pe lângă schema contrastantă, este permis să se pună accent pe părțile necesare ale designului, dar are mai multe posibilități pentru aceasta.
Alege culori secundare
Definirea unei scheme de culori va ajuta la simplificarea selecției culorilor secundare. Dar toată lumea va trebui să lucreze la alegerea nuanțelor și a saturației, așa cum a făcut atunci când a ales culoarea primară.
Instrumentul simplu Paletton vă ajută să vizualizați diferite scheme de culori. Puteți alege culoarea principală și defini schemele de culori, iar Palettonul definește culorile de fundal.
Decide unde și cum vei folosi fiecare culoare
Deci ai o paletă grozavă de culori pentru proiectul tău... acum ce să faci cu ea? Aplicarea culorilor pe un site web este locul în care arta și priceperea unui designer se întâlnesc.
Accentele nu ar trebui folosite doar pe elemente de îndemn sau butoane importante. Le puteți aplica în diferite părți ale site-ului. De exemplu, evidențiați cuvintele importante din text, astfel încât utilizatorul să le acorde o atenție deosebită.
În primul rând, trebuie să proiectați site-ul în alb-negru. Folosind scara de gri pentru a determina importanța unui anumit element, construiți o ierarhie în funcție de importanța fiecărei părți a proiectului dumneavoastră.
Concluzie
Așadar, am aflat că alegerea unei combinații de culori în web design este o etapă importantă în designul site-ului web, care trebuie abordată cu atenție. Alegerea culorii principale este foarte importantă deoarece determină starea generală de spirit pe care o va avea site-ul dvs.
Tipul de schemă de culori afectează și emoțiile pe care un site le va evoca vizitatorilor. Tipul determină numărul de instrumente pe care le puteți utiliza atunci când determinați ordinea în care sunt utilizate culorile.
Băieți, ne punem suflet în site. Mulțumesc pentru
că descoperi această frumusețe. Mulțumesc pentru inspirație și pielea de găină.
Alăturați-vă nouă la Facebookși In contact cu
Schema nr. 1. Combinație complementară
Culorile complementare, sau complementare, contrastante sunt culorile care sunt situate pe părțile opuse ale roții de culori a lui Itten. Combinația lor arată foarte vie și energică, mai ales cu o saturație maximă a culorii.
Schema nr. 2. Triada - o combinație de 3 culori
O combinație de 3 culori la distanță egală. Oferă un contrast ridicat, menținând în același timp armonia. Această compoziție arată destul de plină de viață chiar și atunci când utilizați culori palide și desaturate.
Schema nr. 3. O combinație similară
O combinație de 2 până la 5 culori una lângă alta pe roata de culori (ideal 2-3 culori). Impresie: calm, primitor. Un exemplu de combinație de culori dezactivate similare: galben-portocaliu, galben, galben-verde, verde, albastru-verde.
Schema nr. 4. Combinație separat-complementară
O variantă a unei combinații de culori complementare, se folosesc doar culorile vecine în locul culorii opuse. O combinație de o culoare primară și două suplimentare. Această schemă arată aproape la fel de contrastantă, dar nu atât de intensă. Dacă nu sunteți sigur că puteți utiliza corect combinații complementare, utilizați combinații separate-complementare.
Schema nr 5. Caiet de exercitii - combinatie de 4 culori
O schemă de culori în care o culoare este cea principală, două sunt complementare și încă una accentuează accente. Exemplu: albastru-verde, albastru-violet, roșu-portocaliu, galben-portocaliu.
Schema Nr 6. Pătrat
Combinații de culori individuale
- Alb: se potrivește cu orice. Cea mai bună combinație cu albastru, roșu și negru.
- Bej: cu albastru, maro, smarald, negru, rosu, alb.
- Gri: cu fucsia, rosu, violet, roz, albastru.
- Roz: cu maro, alb, verde menta, masliniu, gri, turcoaz, albastru pal.
- Fuchsia (roz închis): cu gri, cafeniu, culoare lime, verde menta, maro.
- Roșu: cu galben, alb, maro, verde, albastru și negru.
- Roșu roșie: albastru, verde mentă, nisipos, alb crem, gri.
- Roșu vișiniu: azuriu, gri, portocaliu deschis, nisipos, galben pal, bej.
- Roșu crimson: alb, negru, culoare trandafir de damasc.
- Maro: albastru strălucitor, crem, roz, căpriu, verde, bej.
- Maro deschis: galben pal, alb crem, albastru, verde, violet, roșu.
- Maro închis: galben lămâie, albastru, verde mentă, roz violet, culoare lime.
- Maro roșcat: roz, maro închis, albastru, verde, violet.
- Portocaliu: albastru deschis, albastru, violet, violet, alb, negru.
- Portocaliu deschis: gri, maro, măsliniu.
- Portocaliu închis: galben pal, măsline, maro, cireș.
- Galben: albastru, violet, albastru deschis, violet, gri, negru.
- Galben lămâie: roșu cireș, maro, albastru, gri.
- Galben pal: fucsia, gri, maro, nuanțe de roșu, maro gălbui, albastru, violet.
- Galben auriu: gri, maro, azuriu, roșu, negru.
- Măsline: portocaliu, maro deschis, maro.
- Verde: maro auriu, portocaliu, salată, galben, maro, gri, crem, negru, alb crem.
- Culoare salată: maro, maro gălbui, căpriu, gri, albastru închis, roșu, gri.
- Turcoaz: fucsia, rosu visiniu, galben, maro, crem, violet inchis.
- Un electrician este frumos în combinație cu galben auriu, maro, maro deschis, gri sau argintiu.
- Albastru: roșu, gri, maro, portocaliu, roz, alb, galben.
- Albastru închis: violet deschis, albastru deschis, verde gălbui, maro, gri, galben pal, portocaliu, verde, roșu, alb.
- Liliac: portocaliu, roz, violet închis, măsline, gri, galben, alb.
- Mov închis: maro auriu, galben pal, gri, turcoaz, verde mentă, portocaliu deschis.
- Negrul este versatil, elegant, arată în toate combinațiile, cel mai bine cu portocaliu, roz, salată, alb, roșu, liliac sau galben.
Oamenii încă se ceartă dacă conținutul este principalul lucru. Dacă mă întrebați pe mine, sunt complet de acord cu ei, iar părerea mea se bazează pe propria mea experiență. Indiferent dacă este dominantă sau nu, există ceva care este la fel de important! Ce este asta, te întrebi? Știu că tuturor îi place să spună: „Nu judeca o carte după coperta ei”. Dar cum altfel plănuiți să atrageți atenția altcuiva decât coperta originală? Evident, atunci când atrageți atenția cuiva, puteți petrece restul efortului pe conținut. Va fi vorba despre culorile designului web și despre cum să le gestionezi.
O singură dată faci prima impresie.
Există întotdeauna o acțiune specifică pe care doriți să forțați un vizitator să acceseze site-ul dvs. Aceasta este acțiunea pe care ai pus cel mai mult accent. Poate fi un buton de abonare, un buton următor sau un buton de cumpărare.
Indiferent de buton, amintiți-vă întotdeauna că dacă este sau nu apăsat depinde de modul în care se simte vizitatorul când se află pe site-ul dvs.
În acest articol, vei afla despre cele mai populare 5 culori care vor face site-ul tău interesant și intrigant.
Pinterest folosește o varietate de roșii
Fără îndoială, roșul este considerat cea mai tare culoare. Dacă te uiți la paleta de culori Pinterest, vei observa imediat că roșul este culoarea lor primară.
Roșu este adesea asociat cu dragostea. Este o culoare puternică și dinamică care te poate face să te simți îndrăgostit de orice este aproape de acea culoare.
Această culoare este adesea văzută în decorarea stocului, deoarece intensitatea ei creează un sentiment de urgență.
Mai presus de toate, această culoare intensă îi poate face pe vizitatorii site-ului să se simtă excitați sau plini de satisfacții. Dar, în același timp, poate descuraja dorința de a fi pe el, așa că trebuie să fii mereu atent.
Utilizați roșu pentru a vă evidenția designul web. Se combină bine cu culorile alb, gri, albastru deschis sau argintiu.
Un exemplu practic de utilizare a roșului:
Ochiul uman vede roșu atunci când privește lumina cu o lungime de undă între 630 și 700 de nanometri. Lumina peste acest interval se numește infraroșu și nu este percepută de ochiul uman, dar poate fi identificată ca căldură. - Wikipedia
Utilizare mai largă a paletei de culori roșii (de către jimjim421):
10 asociații cu roșu:
- sânge
- război
- foc
- masculinitate
- pasiune
- seducţie
- constrângere
- energie
- vitejie
Amazon iubește portocalele bogate:
Portocaliul este o culoare caldă și activă, dar nu la fel de intensă ca roșul. Portocala este mai degrabă caldă decât fierbinte.
Plină de energie, această culoare vibrantă încurajează, mai degrabă decât să oblige sau să forțeze, oamenii să acționeze. Orange este doar ocazional perceput ca intens - necesită acțiuni precum cumpărarea, abonamentul, vânzarea sau urmărirea. Este recomandat să utilizați portocaliu dacă, după ce vă vizitați site-ul, doriți să lăsați oaspetele să se simtă motivat, vesel, creativ și entuziast.
Un exemplu practic de utilizare a portocaliului:
Utilizarea sporită a paletei portocalii cu manekineko:
10 asocieri cu portocaliu:
- optimism
- definiție
- foc
- un avertisment
- toamnă
- religie
- rezistenta
- compasiune
- Halloween
- organism
Culoarea albastra Facebook creează un sentiment de securitate:
Puteți găsi multe site-uri web de afaceri și corporative folosind albastru. Asociem aceasta culoare cu ceva fiabil, sigur, trezeste un sentiment de incredere si experienta. Astfel, nu este de mirare că fiecare om de afaceri căruia îi pasă de ce impresii va lăsa de pe site-ul companiei sale preferă să folosească culoarea albastră. Albastrul creează senzații complet opuse celor pe care le lasă roșu. Albastrul ne calmează și nu ar trebui să ne îngrijorăm prea mult.
Un exemplu practic de utilizare a albastrului:
Pun pariu că nu știai:
Un sondaj, care a fost realizat în Germania și publicat în 2009, a demonstrat că albastrul este culoarea preferată a 46% dintre bărbații chestionați și 44% dintre femei. - Wikipedia
Utilizarea mai largă a paletei de culori albastre de către entitydesigns:
10 asocieri cu albastru:
- veridicitatea
- prietenie
- magie
- baieti
- gratuitate
- politie
Puterea verdelui pe
Te simți neobișnuit de optimist acum? Lasă-mă să ghicesc - te uitai la ceva verde? Poate că te uitai doar la o plantă verde - asta, fără îndoială, te-a calmat și te-a făcut să privești lucrurile mai optimist.
Oricine are cumva legătură cu ecologia are mai multe oportunități de a folosi verdele în crearea site-urilor lor. Notați nota de 100 USD. Culoarea verde predomină aici! Site-uri precum Groupon au, de asemenea, mult verde în branding, deoarece se ocupă direct de bani. Verdele este foarte revigorant și relaxant, lăsând oamenilor un sentiment de echilibru și inspirație. Reprezintă echilibrul și armonia în design.
Un exemplu practic de utilizare a verdelui:
Pun pariu că nu știai:
În unele limbi, inclusiv chineza veche, thailandeză, japoneză veche și vietnameză, același cuvânt poate însemna atât albastru, cât și verde în același timp. Nu există surse naturale de colorant alimentar verde care să fi fost aprobate de Administrația pentru Alimente și Medicamente din SUA. - Wikipedia
Utilizarea mai largă a verde de către Skybluue2u:
10 asociații cu verdele:
- bani
- lăcomie
- invidie
- natură
- Arc
- sănătate
- tineret
- iarbă
- speranţă
Yahoo! și violet pe sigla lor
Culoarea violet este cel mai adesea asociată cu concepte precum imaginația, creativitatea, demnitatea, noblețea și abundența. Nuanțele vibrante de violet sunt asociate în mare parte cu primăvara și romantismul, în timp ce nuanțele mai închise de violet sunt asociate cu luxul și bogăția. Movul este folosit în lenjeria de pat drăguță și la modă, deoarece violetul este mai liniștitor decât orice altă culoare. Este considerată mai feminină și romantică decât masculină. Când te uiți la lucruri violet, pare în mod clar artificial, asta pentru că această culoare este foarte rară în natură. La fel ca și roșu, oamenii consideră că violetul este prea puternic și strălucitor, îi face să se simtă obligați să facă ceva, îi împinge într-un fel să facă o anumită acțiune. Prin urmare, ar fi eficient să împerechezi această culoare cu negru sau alb.
Un exemplu practic de utilizare a violetului:
Pun pariu că nu știai:
În aprilie 2007, oamenii de știință au sugerat că arheile timpurii ar fi folosit un pigment violet similar cu clorofila pentru a absorbi energia de la soare. Dacă acesta ar fi într-adevăr cazul, atunci zone vaste de oceane și coaste ar fi violet. Această teorie se numește Ipoteza Pământului Purple. - Wikipedia
Utilizarea crescută a violetului de
10 asocieri cu violet
- bogatie
- generozitate
- nobleţe
- rafinament
- romantism
- artă
- exotic
- spiritualitate
- luxos
- feminitate
1WD folosește în mod inteligent culorile monocrome
În mod obișnuit, culorile monocrome, cum ar fi alb, negru, gri închis și gri deschis ar trebui folosite ca fundal într-un design cu culori de accent preexistente și bine plasate, care sunt mai luminoase și mai saturate. Aruncă o privire pe site, 1stwebdesigner - 1WD. De asemenea, folosesc portocaliu ca culoare de accent strălucitoare - dar numai într-o combinație armonioasă cu tonuri de gri închis și gri deschis. Și, bineînțeles, alb (culoarea de fundal a site-ului). Negrul va reprezenta întotdeauna modernitatea, misterul, eleganța și puterea. Griul este o culoare neutră care reprezintă ceva calm și aproape necunoscut, ca o umbră. Deoarece gri poate arăta uneori noroios, albul va crea efectul opus. Albul echivalează curățenia, deschiderea, simplitatea și minimalismul.
Un exemplu practic de utilizare a culorii monocrome:
Pun pariu că nu știai:
Fotografia digitală monocromă captează doar nuanțele de negru care sunt percepute de senzorul camerei. În post-procesarea imaginilor color, puteți transforma lumina percepută combinând valorile mai multor canale. - Wikipedia
Utilizarea sporită a paletei monocrome de către munsteri
10 asocieri cu culori monocrome
- putere
- eleganţă
- spaţiu
- moliciune
- nevinovăţie
- pesimism
- depresie
- plictiseală
Care este culoarea ta favorita? Și ce sentimente și emoții trezește în tine?
Traducere - Datoria
De la autor: un web designer are în arsenalul său multe instrumente de interacțiune cu utilizatorii folosind culoarea. Potrivirea culorilor în designul web este un instrument de marketing eficient, cu toate acestea, ar trebui să fie folosită cu mare atenție, pentru a nu obține un design decupat care îi lasă pe utilizatori să se simtă inconfortabil și neliniștiți.
Acesta este, desigur, un exemplu extrem. Ideea principală a articolului meu este că designul ar trebui să fie nu numai funcțional și util, ci și atractiv din punct de vedere emoțional. Pentru a face acest lucru, trebuie să luați în considerare cu atenție paleta de culori a site-ului, care este un set de culori utilizate în dezvoltarea designului web.
Se impun cerințe destul de serioase asupra schemei de culori a site-ului, deoarece combinația de culori pentru design web nu numai că determină aspectul resursei dvs., ci va fi asociată și cu marca dvs. pe Internet. Majoritatea site-urilor au o paletă de 2 până la 4 culori, fără a lua în calcul alb-negru. Să încercăm să ne dăm seama cum să creăm cea mai atractivă și eficientă combinație de culori în designul site-ului tău web.
Alegerea culorii principale
Dacă aveți deja un logo gata făcut, atunci cel mai bine este să utilizați una dintre culorile sale ca principală. Dacă trebuie să selectați paleta site-ului de la zero, va trebui să utilizați o altă metodă. Analizați publicul țintă al resursei dvs. în ceea ce privește preferințele de culoare sociale sau specifice vârstei.
Luați un site web cu tematică de nuntă, de exemplu. Miresele noastre poartă rochii albe, simbolizând inocența și puritatea. În China, albul este considerat culoarea doliu, așa că miresele chineze se îmbracă în rochii roșii, deoarece roșul pentru chinezi este un simbol al iubirii, fericirii și norocului. Adăugați mai multă vopsea galbenă aici și obțineți culoarea puterii și a bogăției.
Cu toate aceste nuanțe culturale, este foarte dificil să găsești combinațiile perfecte de culori pentru design web care să se potrivească cu adevărat site-ului tău și să funcționeze pentru el. Prin urmare, multe companii care se respectă fac versiuni locale de site-uri pentru diferite țări și popoare.
Cele mai sigure culori sunt violet și albastru. Violetul este considerat culoarea bogăției, puterii și statutului social înalt peste tot, cu excepția Thailandei (în Thailanda este un simbol al durerii). Albastrul este asociat cu optimism, încredere, fericire. Adevărat, în Japonia înseamnă atrocitate, iar în India înseamnă tristețe.
Tipuri de contraste de culoare
Contrast în ton. Acest tip de contrast trebuie utilizat cu atenție, de preferință în combinație cu alte tipuri de contrast și numai atunci când este justificat. Cel mai pronunțat contrast în web design este combinația a trei culori: roșu, galben și albastru. Cu cât culorile combinate sunt mai departe de aceste trei în roata de culori, cu atât contrastul de ton este mai slab.
Contrastul de lumină și întuneric. Cea mai strictă pereche contrastantă constă, desigur, din alb și negru. Dintre culorile complementare, cel mai scăzut contrast de luminozitate este între verde și roșu, iar cel mai mare este între violet și galben.
Viziunea noastră este mai sensibilă nu la gradațiile de culoare ale obiectelor, ci la nuanțele luminozității lor. Pentru un web designer, abilitatea de a așeza armonios pete întunecate și luminoase în designul site-ului este cheia unui design eficient.
Rece și caldă. Nu este surprinzător faptul că tonurile reci și calde sunt asociate cu temperatura la oameni. Acest lucru se datorează faptului că atmosfera Pământului colorează obiectele îndepărtate în tonuri albăstrui.
Astfel, cu cât un obiect este mai departe de noi, cu atât ne imaginăm că este mai rece. Această proprietate este folosită în mod activ atât de artiști, cât și de designeri web pentru a evoca emoțiile dorite în utilizator.
Curs de minimalism
Astăzi, tendința este nuanțe luminoase și dinamice, minimalism și scheme monocrome care nu distrage atenția de la contrastul dintre culori. Atunci când este combinată cu un stil minimalist (folosind, de exemplu, butoane transparente sau caractere albe îndrăznețe), o schemă monocromă este ușor de încorporat într-un site web și este o plăcere de privit.
Majoritatea oamenilor din design web preferă să combine aceleași culori de fundal cu o paletă contrastantă de alte elemente. Prin urmare, logic ar fi să folosiți o paletă de 1-2 culori pentru fundalul site-ului și o paletă contrastantă pentru butoane și alte obiecte care cheamă la acțiune.
Probabil ați întâlnit cel puțin o dată serviciul web Twitter și ați observat că paleta sa de culori este formată din mai multe nuanțe de albastru. Știți deja că albastrul este cea mai sigură culoare de folosit pe web, așa că nu este surprinzător că Twitter o folosește, mai ales având în vedere popularitatea globală a serviciului, suportul său pentru un număr mare de limbi și, în consecință, culturi.
Culoarea ca ajutor de navigare
Un alt mod câștigător de utilizare a culorilor de fundal și de accent este de a crea un fel de „ierarhie a culorilor” care să învețe utilizatorul că o anumită culoare înseamnă o anumită acțiune pe site.
Să rezumam. Culoarea și capacitatea de a combina culorile în design web este cel mai important instrument pentru un web designer. Dacă îl utilizați corect și nu uitați de utilitatea site-ului, atunci puteți evidenția în mod profitabil conținutul, „direcționând” ușor și discret vizitatorul să efectueze anumite acțiuni.
Imaginați-vă că site-ul dvs. va fi vizitat de mii și milioane de oameni - de aceea ar trebui să faceți tot posibilul pentru ca utilizarea acestuia să fie cât mai simplă și confortabilă.
Sper că ați găsit acest material util. Abonați-vă la actualizările blogului nostru pentru a nu rata toată distracția. Pa!
Tendințe și abordări moderne în dezvoltarea web
Învață algoritmul de creștere rapidă de la zero în construirea site-ului
Teoria culorilor în designul web este un subiect vast care necesită multă practică pentru a înțelege specificul aplicării sale. Alegerea culorii depinde și de mediu și de specificul muncii designerului web însuși, deoarece privim culorile și nuanțele puțin diferit decât ilustratorii și artiștii.
Ne-am dedicat deja parțial materialelor colorării în web design și Photoshop. Dar astăzi vrem să vorbim și să ne uităm puțin la culori și paletele de culori în termeni generali, unde și cum este mai ușor și mai convenabil să le selectați combinațiile, ce să căutați și multe altele. În general, am adunat mai multe resurse pentru potrivirea culorilor, am găsit palete gata pregătite interesante și, de asemenea, dorim să aprofundăm puțin mai mult în unele puncte ale teoriei culorilor.
Teoria culorii cu mai multe paragrafe
Când proiectăm un site web, avem 16,8 milioane de culori din care să alegem. Și toate acestea trebuie combinate și selectate, iar dacă vă imaginați câte variante de astfel de combinații există, atunci ... este aproape nesfârșit. Dar culorile au sens. Imaginează-ți că ți se prezintă lucrul tău preferat. Ești mulțumit, ești bucuros. Acum imaginează-ți că un lucru este un lucru, dar culoarea lui este cea mai urâtă pentru tine. De exemplu, o nuanță de amestec de verde, galben și gri. O, vei fi entuziasmat, vei fi puternic, dar bucuria va dispărea.
Culorile au sens. Ele dau ton, afectează emoțional în același mod în care fontul are un impact uriaș asupra psihologiei umane.
Culorile primare sunt culorile principale pentru nuanțe. Ochiul uman percepe trei culori de bază: cyan, galben și magenta. Orice culoare pe care o vedeți în fața dvs. acum constă într-o combinație a acestor trei, dar în cantități diferite de luminozitate, nuanțe și multe altele. Da, da, imprimarea are loc în aceste culori.
Dimpotrivă, Internetul folosește RGB (roșu, verde, albastru) și valorile sale hexazecimale.
RGB (59, 89, 145) sau # 3b599b - Facebook albastru
RGB (0, 0, 0) sau # 000000 - negru
Fiecare două caractere din codul din 16 cifre indică culoarea de bază: roșu - 3b, verde - 59, albastru - 9b.
Rece cald
De asemenea, culorile durează pentru nuanțe reci (abundență de albastru și verde) și fierbinți (multe roșii și galbene). Culorile fierbinți în designul web evocă sentimente de căldură, pasiune. Sunt agresivi și îndrăzneți, dar simbolizează și faptul că unele lucruri trebuie oprite, așa că sunt folosite pentru mesaje critice, pictograme și multe altele.
Culorile reci aduc racoare, potrivite pentru teme de iarna, noapte, trist sau apa. Ei poartă în sine singurătate și frig, frică. Dar, între timp, sunt non-agresive și liniștitoare.
Temperatura
Temperatura imaginilor poate fi, de asemenea, modificată, rezultând o modificare a nivelului de culoare portocalie. Astfel, transformăm poza într-una mai caldă și mai veselă. Așa cum lumea pare mai fericită când soarele își aruncă razele galben-portocalii asupra ei. O scădere a temperaturii, pe de altă parte, face imaginea mai rece și mai puțin atractivă, ca și cum ar transmite natura într-o zi înnorată.
Nuanțe și umbre
Nuanțele se obțin prin adăugarea de alb la culoare, în același mod în care adăugați negru atunci când creați o umbră. Nuanțele și umbrele vă permit să creați culori și palete monocrome adăugând diferite cantități de alb și negru.
De exemplu, să luăm o culoare de prim plan de # 8dbdd8 (albastru deschis). Imaginea de mai jos prezintă o paletă monocromă în care cele două nuanțe din dreapta și din stânga sunt rezultatul adăugării unor cantități diferite de alb și negru.
Saturație, ton, lumină
De asemenea, culorile sunt distribuite în funcție de saturație, nuanță și luminozitate. Saturația face culoarea mai bogată și mai închisă. Când spunem albastru deschis sau verde închis, ne referim la saturație.
Nuanța determină diferența față de culoarea de bază a curcubeului (există șapte). Adică, de exemplu, „albastru verzui”. Nici asta, nici asta, ci doar tonul.
Luminozitatea definește o culoare în raport cu albul pur, cât de strălucitoare sau plictisitoare este. Ceva similar cu saturația, dar depinde de un parametru diferit.
Scheme de culori
Dacă luăm în considerare schemele de culori, atunci există doar patru dintre ele: monocrom (nuanțe ale unei singure culori primare), complementare (din două culori care se află pe părțile opuse ale roții de culoare), analog (trei culori care sunt lângă roata de culori). ), triadă sau triadică (cele trei culori care se află la colțurile triunghiului desenat deasupra roții de culoare).
Proiectarea unui aspect de flori
Aceasta este o teorie scurtă și ulterior ne vom referi pur și simplu la acest material. Dar și la începutul studiului web designului, această teorie este importantă, deși de multe ori ochii tăi pot înțelege că ceva arată complet diferit de ceea ce este descris în cifre. Cam albastru, dar simți că nu este suficient de saturat. Acestea sunt caracteristicile naturii dezvoltării fiecărei persoane. Acesta este motivul pentru care mulți designeri web merg cu capul în designul paletei de culori, la fel cum unii oameni se dedică studierii tipografiei. Aceștia experimentează diferite nuanțe, saturații, temperaturi în combinație cu alte variații și văd când, ce și cum funcționează.
Cu toate acestea, când vine vorba de culorile web, există un concept precum „culori sigure pentru web”. A apărut atunci când afișajele nu puteau transmite încă 16 milioane de culori. Dar dacă există culori atât de sigure, de ce altceva mai există? Dar, vezi tu, e frumos să știi de ce există și cum afectează alegerea culorilor în general.
Trebuie inteles, deoarece putem folosi orice culoare, cele mai bune proiecte web se obtin folosind grupa principala de culori. Și da, ai încredere în ochii tăi. Dacă nu le place ceea ce văd, atunci încearcă să schimbe.
Când este nevoie de ajutor
Dacă aveți dificultăți de proiectare în stadiul zero, atunci ideile pentru soluții de culoare pot fi întotdeauna găsite pe Internet. Doar vizitați site-ul cu palete de culori și personalizați-l pentru dvs., apoi colectați culorile dorite și lucrați cu ele în Photoshop. De exemplu, studiați webdesign-inspiration sau awwwards, sortați după culoare și găsiți inspirație.
Explorator de culori
Este o bibliotecă și un atelier pentru crearea unei palete de culori. Biblioteca conține seturi de palete pentru imprimare și web. Puteți alege o culoare și puteți vedea mai multe nuanțe și variații de tonuri.
Сolor fiul eweb
Selectează toate culorile și nuanțele pentru culoarea specificată. În plus, resursa oferă culori pentru combinare și combinație, paletă monocromă, analog, variații de saturație, tonuri, luminozitate și multe altele.
Copaso
Vă permite nu numai să ridicați o culoare prin operarea cu mai mulți parametri simultan, ci și apoi să asamblați o paletă în funcție de o anumită culoare. În prima versiune, am creat o culoare, iar în a doua, am creat o paletă și o gamă de nuanțe și tonuri de culoare.
Сolorotate
Aceasta este una dintre puținele aplicații mobile care vă permite să lucrați cu palete de culori pe smartphone sau tabletă. Dar există și o versiune pentru browserul PC. O caracteristică a proiectului este lucrul cu culoarea în 3D. Ni se oferă un con de flori. Fiecare punct pentru amestecarea unei nuanțe se mișcă doar în propriul său triunghi, iar conul în sine poate fi rotit la fel de convenabil.
În plus, există seturi de palete gata făcute pentru Crăciun, monocrome, moderne, citrice și altele.
Iubitorii de culoare
Site-ul a fost mult timp un catalog de scheme de culori personalizate. De regulă, include culori de design plat, precum și numeroase modele, texturi, fundaluri care sunt disponibile gratuit.
Paletele de culori pot fi selectate din fotografii și imagini. Am vorbit deja despre asta și despre resursele pentru asta. Ideea în ansamblu este interesantă și foarte utilă, citiți-o pe îndelete.
Profiluri de culoare
Dar, între timp, selecția paletei este încă jumătate din problema. Cel mai tare subiect în web design este alegerea profilurilor de culoare. Am atins acest subiect puțin mai devreme (link la începutul articolului), dar iată ce vrem să remarcăm acum. Fiecare monitor poate fi calibrat pentru un anumit profil de culoare. Acest lucru se face, de exemplu, în Windows 10 -> Control Panel -> Color Management. În consecință, anumite culori pot apărea diferit pe diferite monitoare.
Subiectul, așa cum am spus, este confuz și, prin urmare, mulți designeri web nu sunt întotdeauna siguri dacă au ales culoarea potrivită. SRGB este recomandat mai des, dar nu este necesar sau absolut cea mai bună soluție și alegere. Acest lucru se aplică și imaginilor care sunt salvate cu profiluri încorporate și aspecte ale site-urilor web. Cu alte cuvinte, înțelegerea acestui subiect poate dura mult timp.
Dar, între timp, mulți designeri încearcă să nu se gândească deloc la ele și lucrează implicit cu setările de pe computer și din Photoshop. Și asta este și adevărat, din moment ce chiar dacă sunteți de acord cu clientul/clientul asupra culorilor, tot nu veți putea afecta culorile de pe monitorul utilizatorului final.
Culorile materiale ale UI
Google, atunci când a creat regulile pentru designul materialelor, a detaliat și prevederile privind culoarea. Cu toate acestea, regulile sunt atât de simple în general încât pot fi aplicate cu ușurință oricărei interfețe, ceea ce le-a făcut populare.
Când vine vorba de alegerea culorilor, designul material urmează un stil similar cu designul plat. Construcțiile de materiale pentru aplicații și site-uri sunt disponibile gratuit pe Internet și, prin urmare, puteți vedea seturi de culori cu propriii ochi, puteți crea palete și multe altele.
Dacă decideți să lucrați doar cu un set de culori de la Google, atunci vă recomandăm să testați ambele instrumente pentru a vedea cum și cum se pot completa reciproc. Apoi, puteți utiliza suplimentar resursa de la 0 la 255, pentru a potrivi culorile în ceea ce privește luminozitatea și saturația.
Concluzie
Culoarea pe internet este în mare parte simplă și nu durează mai mult de câteva săptămâni pentru a-i înțelege fundamentele și teoriile. Dar dacă decideți să aprofundați în această teorie a culorii, atunci veți învăța foarte, foarte multe complexități, trăsături, modele, influențe și soluții. Poate că unii dintre voi vă vor învârti capul din abundența de informații; cineva va decide că „ nu trebuie să știe asta, a înțepat sigla cu o pipetă și a colorat site-ul". Dar cineva va decide să se uite în teorie din nou, și din nou; decide să se adâncească în „coșul de flori” și nuanțe, decide să înceapă să experimenteze.
Sperăm doar că materialele noastre colorate vă vor ajuta puțin în viitor în munca dumneavoastră la proiectele dumneavoastră. Ele vă vor ajuta să găsiți acea modalitate simplă de a înțelege cum funcționează culorile web prin practică, repetiție, având încredere în ochii tăi.
Sunt multe resurse pe selecția paletelor de culori, site-uri și pentru inspirație, dar când te așezi să „desenezi” propriul proiect în capul tău cumva... devine gol. Stai și te gândești: „ Ce nuanță de albastru aș lua... puțin mai închis sau puțin mai deschis... eh... și clientul nu a vrut să se gândească la asemenea fleacuri... pentru el, ceva care, desigur,... Lucruri mărunte ... "
Zilele de Anul Nou și petrecerea timpului liber sunt un motiv bun de creativitate, imaginație ușoară pentru propria plăcere, când, de exemplu, nu mai ai puterea să ieși și să te distrezi.
