Usklađivanje boja u web dizajnu je važna disciplina koja datira iz srednjeg vijeka i koristi se za stvaranje izvanrednih djela čovječanstva. Pa hajde da pokušamo da to uguramo u jedan mali post!)
Naravno, jedan post nije dovoljan za razumijevanje cijele suštine teorije boja, ali sadrži glavne teze i koncepte ove discipline.
Evo 5 koraka koje trebate poduzeti kako biste odabrali pravu shemu boja za svoju web stranicu.
Prvi korak je najvažniji. Glavna boja stvara prvi utisak o sajtu, a takođe uspostavlja vezu između vašeg brenda i emocija koje vaša publika doživljava. Sve to stvara vaš identitet, pa odabiru glavne boje treba pristupiti vrlo temeljito.
Naravno, ako je vaš brend već povezan s bojom, onda će ovaj korak biti mnogo lakši.
Prvo, mora se imati na umu da različite boje izazivaju različite emocije. I ova činjenica je naučno potvrđena. Čak i različite nijanse iste boje na različite načine utiču na emocije publike. Uvijek postoji određeni stepen neizvjesnosti, ovisno o ličnim asocijacijama osobe, ali općenito, iste boje mogu izazvati iste emocije kod različitih ljudi.
- Crvena: strast, agresija, relevantnost.
- Narandžasta: agilnost, energija.
- Žuta: entuzijazam, sreća, pažnja/upozorenje.
- Zelena: rast, stabilnost, priroda.
- Plava: spokoj, otvorenost.
- Plava: sigurnost, povjerenje, profesionalnost.
- Bijela: čistoća, zdravlje.
- Ljubičasta: luksuz, misterija, romantika (svetle nijanse).
Nije iznenađujuće da mnoge limenke koriste shemu boja na bazi plave boje.
Zapamtite da dizajnirate za određenu grupu ljudi koji mogu imati drugačije emocije od vaših. Osim toga, vrijedno je razmotriti različite stavove prema istoj boji ljudi različitih spolova, kultura ili religija.
Prilikom odabira vaše glavne boje, trebali biste početi tako što ćete isključiti svoje konkurente sa liste razmatranih boja. Nakon toga morate razmisliti kakvo bi raspoloženje vaš brend trebao stvoriti i koje emocije izazvati.
Odredite tačnu boju (njenu nijansu i zasićenost)
Kada odaberete glavnu boju, morate odrediti njenu nijansu i zasićenost. Kao što je gore navedeno, ton boje i njena zasićenost mogu promijeniti njeno značenje. Na primjer, tamnije nijanse žute (na primjer, zlatne) odaju dojam antike, svjetlije nijanse neće dati ovaj efekat.
Opšte je pravilo da svijetle nijanse stvaraju osjećaj energije, svježine, zabave, tamnije nijanse - stabilnost i profesionalnost.
Nakon toga potrebno je odrediti tačnu numeričku vrijednost boje u RGB, CMYK, HEX ili Pantone sistemima kako biste je koristili u procesu dizajna.
Ako ste, na primjer, odabrali boju koja se već koristi na nekom web resursu i želite je primijeniti ili njih, možete koristiti uslugu Stylify Me koja će vam pomoći da odredite boje koje se koriste na bilo kojoj web stranici.
Odaberite vrstu sheme boja
Prije nego što odaberete ostale boje, morate odrediti kako će biti u interakciji. Želite li kontrastniju shemu boja ili mirniju shemu boja?
Možete kombinirati boje kako želite, ali ovdje smo predstavili najčešće sheme boja.
Monochrome
Podrazumijeva korištenje različitih tonova osnovne boje. Najčešće se koristi za minimalističke stilove dizajna.
Analog
Slične boje koje se pojavljuju blizu jedna drugoj na krugu boja.
Gradijent
Postepeni prelazak iz jedne boje u drugu. Šareniji od analognog, ali može odvratiti pažnju od drugih elemenata dizajna.
Kontrastno
Dvije suprotne boje. Ako pogledate krug boja, onda su boje koje su jedna nasuprot drugoj najkontrastnije. Na primjer, crvena i zelena ili žuta i ljubičasta. Korišćenje ove šeme boja dodaje dinamiku vizuelnom uticaju dizajna.
Kontrasti pomažu u manipuliranju pažnjom korisnika, omogućavajući da se važniji elementi (dugmići) istaknu, a manje značajni sakriju.
Duplex
Kreirajte slike koristeći samo 2 boje. - to nije toliko shema boja koliko vrsta ukrasa kontrastne sheme boja.
Pojednostavljeno rečeno, duplex izgleda baš sjajno, to je dinamički vizuelni efekat koji "hvata" pažnju korisnika.
Trijada
Tri boje na jednakoj udaljenosti jedna od druge na krugu boja. Jedna od najčešće korištenih shema boja, trijada je pouzdan standard. Teško ga je pravilno koristiti, samo nacrtajte jednakostranični trokut na kotaču boja i imate tri boje u svojoj trijadi.
Split (split) kontrast
Korištenje treće boje uz dvije kontrastne boje. Kao i kontrastna shema, dopušteno je da se naglasak stavi na potrebne dijelove dizajna, ali ima više mogućnosti za to.
Odaberite sekundarne boje
Definiranje sheme boja pomoći će da se pojednostavi odabir sekundarnih boja. Ali svi će morati poraditi na odabiru svojih nijansi i zasićenosti, kao što su radili pri odabiru primarne boje.
Jednostavan alat Paletton pomaže vam da vizualizirate različite sheme boja. Možete odabrati glavnu boju i definirati sheme boja, a Paleta definira boje pozadine.
Odlučite gdje i kako ćete koristiti svaku boju
Dakle, imate odličnu paletu boja za svoj projekat ... šta sad s tim? Primjena boja na web stranici je mjesto gdje se susreću umjetnost i vještina dizajnera.
Akcenti se ne smiju koristiti samo na elementima poziva na akciju ili važnim dugmadima. Možete ih primijeniti na različite dijelove stranice. Na primjer, istaknite važne riječi u tekstu kako bi korisnik obratio posebnu pažnju na njih.
Prvo, morate dizajnirati stranicu u crno-bijeloj tehnici. Koristeći sivu skalu da odredite važnost određenog elementa, izgradite hijerarhiju prema važnosti svakog dijela vašeg projekta.
Zaključak
Dakle, saznali smo da je odabir kombinacije boja u web dizajnu važna faza u dizajnu web stranice kojoj treba pristupiti temeljno. Izbor glavne boje je veoma važan jer određuje cjelokupno raspoloženje koje će vaša stranica nositi.
Vrsta šeme boja takođe utiče na emocije koje će sajt izazvati kod posetilaca. Tip određuje broj alata koje možete koristiti prilikom određivanja redoslijeda u kojem se boje koriste.
Ljudi, uložili smo svoju dušu u stranicu. Hvala ti za
da otkrijete ovu lepotu. Hvala na inspiraciji i naježivanju.
Pridružite nam se na Facebook i U kontaktu sa
Šema br. 1. Komplementarna kombinacija
Komplementarne, ili komplementarne, kontrastne boje su boje koje se nalaze na suprotnim stranama Ittenovog kruga boja. Njihova kombinacija izgleda vrlo živahno i energično, posebno uz maksimalnu zasićenost boja.
Šema br. 2. Trijada - kombinacija 3 boje
Kombinacija 3 podjednako raspoređene boje. Pruža visok kontrast uz održavanje harmonije. Ova kompozicija izgleda prilično živahno čak i kada se koriste blijede i nezasićene boje.
Shema br. 3. Slična kombinacija
Kombinacija 2 do 5 boja jedna pored druge na krugu boja (idealno 2-3 boje). Utisak: mirno, pozivajuće. Primjer kombinacije sličnih prigušenih boja: žuto-narančasta, žuta, žuto-zelena, zelena, plavo-zelena.
Šema br. 4. Odvojeno-komplementarna kombinacija
Varijanta komplementarne kombinacije boja, koriste se samo susjedne boje umjesto suprotne boje. Kombinacija primarne boje i dvije dodatne. Ova shema izgleda gotovo jednako kontrastno, ali ne tako intenzivno. Ako niste sigurni da možete pravilno koristiti komplementarne kombinacije, koristite odvojeno-komplementarne kombinacije.
Šema br. 5. Vježbalica - kombinacija 4 boje
Šema boja u kojoj je jedna boja glavna, dvije komplementarne, a još jedna naglašava akcente. Primjer: plavo-zelena, plavo-ljubičasta, crveno-narandžasta, žuto-narandžasta.
Šema br. 6. Kvadrat
Kombinacije pojedinačnih boja
- Bijela: ide uz sve. Najbolja kombinacija sa plavom, crvenom i crnom.
- Bež: sa plavom, smeđom, smaragdnom, crnom, crvenom, bijelom.
- Siva: sa fuksijom, crvena, ljubičasta, roze, plava.
- Ružičasta: sa smeđom, bijelom, mint zelenom, maslinastom, sivom, tirkiznom, blijedoplavom.
- Fuksija (tamnoružičasta): sa sivom, smeđom, limetom, menta zelenom, smeđom.
- Crvena: sa žutom, bijelom, smeđom, zelenom, plavom i crnom.
- Paradajz crvena: plava, menta zelena, peskovita, kremasto bijela, siva.
- Višnja crvena: azurna, siva, svijetlonarandžasta, pješčana, blijedožuta, bež.
- Grimizno crvena: bijela, crna, boja damast ruže.
- Smeđa: jarko plava, krem, roza, smeđa, zelena, bež.
- Svijetlo smeđa: blijedožuta, kremasto bijela, plava, zelena, ljubičasta, crvena.
- Tamno smeđa: limun žuta, plava, mint zelena, ljubičasto ružičasta, boja limete.
- Crvenkasto smeđa: ružičasta, tamno smeđa, plava, zelena, ljubičasta.
- Narandžasta: svijetloplava, plava, ljubičasta, ljubičasta, bijela, crna.
- Svetlo narandžasta: siva, smeđa, maslinasta.
- Tamno narandžasta: blijedožuta, maslinasta, smeđa, trešnja.
- Žuta: plava, ljubičasta, svijetloplava, ljubičasta, siva, crna.
- Limun žuta: trešnja crvena, smeđa, plava, siva.
- Blijedožuta: fuksija, siva, smeđa, nijanse crvene, žućkasto smeđe, plave, ljubičaste.
- Zlatno žuta: siva, smeđa, azurna, crvena, crna.
- Maslina: narandžasta, svijetlosmeđa, smeđa.
- Zelena: zlatno smeđa, narandžasta, salata, žuta, smeđa, siva, krem, crna, kremasto bijela.
- Boja zelene salate: smeđa, žućkastosmeđa, smeđa, siva, tamnoplava, crvena, siva.
- Tirkizna: fuksija, trešnja crvena, žuta, smeđa, krem, tamno ljubičasta.
- Električar je zgodan u kombinaciji sa zlatno žutom, smeđom, svijetlosmeđom, sivom ili srebrnom.
- Plava: crvena, siva, smeđa, narandžasta, ružičasta, bijela, žuta.
- Tamnoplava: svijetlo ljubičasta, svijetloplava, žućkasto zelena, smeđa, siva, blijedožuta, narandžasta, zelena, crvena, bijela.
- Lila: narandžasta, ružičasta, tamno ljubičasta, maslinasta, siva, žuta, bijela.
- Tamno ljubičasta: zlatno smeđa, blijedo žuta, siva, tirkizna, menta zelena, svijetlo narandžasta.
- Crna je raznovrsna, elegantna, izgleda u svim kombinacijama, najbolje uz narandžastu, roze, salatu, bijelu, crvenu, lila ili žutu.
Ljudi se i dalje svađaju oko toga da li je sadržaj glavna stvar. Ako mene pitate, potpuno se slažem sa njima, a moje mišljenje je zasnovano na sopstvenom iskustvu. Bez obzira da li je dominantna ili ne, postoji nešto što je jednako važno! Šta je ovo, pitate se? Znam da svi vole da kažu: "Ne sudi o knjizi po koricama." Ali kako drugačije planirate da privučete pažnju nekog drugog osim originalne naslovnice? Očigledno, kada privučete nečiju pažnju, ostatak svog truda možete potrošiti na sadržaj. Bit će riječi o bojama web dizajna i načinu upravljanja njima.
Samo jednom ostavljate prvi utisak.
Uvijek postoji jedna specifična radnja kojom želite natjerati posjetitelja na svoju web stranicu. Ovo je akcija na koju stavljate najveći naglasak. To može biti dugme za pretplatu, dugme sledeće ili dugme za kupovinu.
Bez obzira na dugme, uvek imajte na umu da hoće li se kliknuti ili ne, zavisi od toga kako se posetilac oseća kada je na vašoj veb lokaciji.
U ovom članku ćete naučiti o 5 najpopularnijih boja koje će vašu web stranicu učiniti zanimljivom i intrigantnom.
Pinterest koristi razne crvene boje
Bez sumnje, crvena se smatra najtoplijom bojom. Ako pogledate Pinterest paletu boja, odmah ćete primijetiti da je crvena njihova primarna boja.
Crvena se često povezuje sa ljubavlju. To je jaka i dinamična boja koja može učiniti da se zaljubite u sve što je blisko toj boji.
Ova boja se često viđa u dekoraciji zaliha, jer njen intenzitet stvara osjećaj hitnosti.
Iznad svega, ova intenzivna boja može učiniti da se posjetitelji stranice osjećaju uzbuđeno ili nagrađujući. Ali u isto vrijeme, može obeshrabriti želju da budete na njemu, tako da uvijek morate biti oprezni.
Koristite crvenu da istaknete svoj web dizajn. Odlično se kombinira sa bijelom, sivom, svijetloplavom ili srebrnom bojom.
Praktični primjer korištenja crvene boje:
Ljudsko oko vidi crveno kada gleda u svjetlost talasne dužine između 630 i 700 nanometara. Svetlost iznad ovog opsega naziva se infracrvena i ljudsko oko je ne opaža, ali se može identifikovati kao toplota. - Wikipedia
Šira upotreba palete crvene boje (od jimjim421):
10 asocijacija na crvenu:
- krv
- rat
- vatre
- muškosti
- strast
- zavođenje
- prisila
- energije
- hrabrost
Amazon voli bogatu narandžu:
Narandžasta je topla i aktivna boja, ali ne tako intenzivna kao crvena. Narandžasta je više topla nego vruća.
Ispunjena energijom, ova jarka boja ohrabruje, a ne prisiljava ili prisiljava ljude da djeluju. Narandžasta se samo povremeno doživljava kao intenzivna – poziva na radnje kao što su kupovina, pretplata, prodaja ili praćenje. Preporučljivo je koristiti narandžastu boju ako nakon posjete Vašem sajtu želite da gost ostane motiviran, radosan, kreativan i pun entuzijazma.
Praktični primjer korištenja narandže:
Povećana upotreba narandžaste palete manekineko:
10 asocijacija na narandžu:
- optimizam
- definicija
- vatre
- upozorenje
- jesen
- religija
- izdržljivost
- saosećanje
- Noć vještica
- organizam
Plava boja facebook stvara osjećaj sigurnosti:
Možete pronaći mnoge poslovne i korporativne web stranice koristeći plavu boju. Ovu boju povezujemo sa nečim pouzdanim, sigurnim, izaziva osjećaj povjerenja i iskustva. Stoga ne čudi da svaki biznismen kome je stalo do toga kakve će utiske ostaviti sa sajta svoje kompanije radije koristi plavu boju. Plava stvara potpuno suprotan osjećaj od crvene. Plava nas smiruje i ne treba da brinemo previše o tome.
Praktični primjer korištenja plave boje:
Kladim se da nisi znao:
Anketa, koja je sprovedena u Njemačkoj i objavljena 2009. godine, pokazala je da je plava omiljena boja 46 posto ispitanih muškaraca i 44 posto žena. - Wikipedia
Šira upotreba plave palete boja od strane dizajna entiteta:
10 asocijacija na plavu:
- istinitost
- ljubaznost
- magija
- momci
- besplatnost
- policija
Snaga zelene na
Osjećate li se trenutno neobično optimistično? Da pogodim - da li ste gledali u nešto zeleno? Možda ste samo gledali u zelenu biljku - to vas je nesumnjivo smirilo i natjeralo da gledate na stvari optimističnije.
Svi koji su na neki način povezani sa ekologijom imaju više mogućnosti da koriste zeleno u kreiranju svojih stranica. Obratite pažnju na novčanicu od 100 dolara. Ovdje prevladava zelena boja! Sajtovi kao što je Groupon takođe imaju mnogo zelenog u svom brendiranju jer se direktno bave novcem. Zelena je vrlo osvježavajuća i opuštajuća, ostavljajući ljudima osjećaj ravnoteže i inspiracije. Predstavlja ravnotežu i harmoniju u dizajnu.
Praktični primjer korištenja zelene boje:
Kladim se da nisi znao:
U nekim jezicima, uključujući starokineski, tajlandski, starojapanski i vijetnamski, ista riječ može značiti i plavu i zelenu u isto vrijeme. Ne postoje prirodni izvori zelenih boja za hranu koji su odobreni od strane američke Uprave za hranu i lijekove. - Wikipedia
Šira upotreba zelene od strane Skybluue2u:
10 asocijacija na zeleno:
- novac
- pohlepa
- zavist
- priroda
- Proljeće
- zdravlje
- mladost
- trava
- nada
Yahoo! i ljubičasta na njihovom logotipu
Ljubičasta boja najčešće se povezuje s pojmovima kao što su mašta, kreativnost, dostojanstvo, plemenitost i obilje. Živopisne nijanse ljubičaste su velikim dijelom povezane s proljećem i romantikom, dok su tamnije nijanse ljubičaste povezane s luksuzom i bogatstvom. Ljubičasta se koristi u lijepoj i modernoj posteljini jer ljubičasta djeluje umirujuće od bilo koje druge boje. Smatra se više ženstvenim i romantičnim nego muškim. Kada se gleda na stvari ljubičaste, čini se jasno umjetnim, to je zato što je ova boja vrlo rijetka u prirodi. Baš kao i crvena, ljudi smatraju da je ljubičasta previše jaka i svijetla, čini da se osjećaju primorani da nešto urade, na neki način ih tjera da preduzmu određenu akciju. Stoga bi bilo efikasno upariti ovu boju sa crnom ili bijelom.
Praktični primjer korištenja ljubičaste:
Kladim se da nisi znao:
U aprilu 2007, naučnici su sugerisali da su rane arheje možda koristile ljubičasti pigment sličan hlorofilu da apsorbuju sunčevu energiju. Da je to zaista slučaj, tada bi ogromna područja okeana i obala bila ljubičasta. Ova teorija se zove Hipoteza ljubičaste Zemlje. - Wikipedia
Povećana upotreba ljubičaste boje
10 asocijacija na ljubičastu
- bogatstvo
- velikodušnost
- plemstvo
- prefinjenost
- romansa
- art
- egzotično
- duhovnost
- luksuz
- ženstvenost
1WD inteligentno koristi jednobojne boje
Tipično jednobojne boje kao što su bijela, crna, tamno siva i svijetlo siva trebale bi se koristiti kao pozadine u dizajnu s već postojećim i dobro postavljenim akcentnim bojama koje su svjetlije i zasićenije. Bacite pogled na stranicu, 1stwebdesigner - 1WD. Koriste i narandžastu kao svijetlu akcentnu boju - ali samo u skladnoj kombinaciji s tamno sivim i svijetlosivim tonovima. I, naravno, bijela (boja pozadine stranice). Crna će uvijek predstavljati modernost, misteriju, eleganciju i snagu. Siva je neutralna boja koja predstavlja nešto mirno i gotovo nepoznato, poput sjene. Budući da siva ponekad može izgledati blatnjavo, bijela će stvoriti suprotan efekat. Bijela izjednačava čistoću, otvorenost, jednostavnost i minimalizam.
Praktični primjer korištenja jednobojne boje:
Kladim se da nisi znao:
Digitalna monohromna fotografija snima samo nijanse crne koje percipira senzor kamere. U slikama u boji nakon obrade, možete transformisati percipiranu osvetljenost kombinovanjem metrike više kanala. - Wikipedia
Povećana upotreba jednobojne palete od strane munsterija
10 asocijacija na jednobojne boje
- moć
- elegancija
- svemir
- mekoću
- nevinost
- pesimizam
- depresija
- dosada
Koja je tvoja omiljena boja? I koja osećanja i emocije izaziva kod vas?
Prevod - Dužnost
Od autora: web dizajner ima u svom arsenalu mnogo alata za interakciju s korisnicima koristeći boju. Usklađivanje boja u web dizajnu je efikasan marketinški alat, međutim, treba ga koristiti vrlo pažljivo kako ne bi došlo do izdubljenog dizajna zbog kojeg se korisnici osjećaju nelagodno i uznemireno.
Ovo je, naravno, ekstreman primjer. Glavna ideja mog članka je da dizajn treba biti ne samo funkcionalan i koristan, već i emocionalno privlačan. Da biste to učinili, morate posebno pažljivo razmotriti paletu boja web stranice, koja je skup boja koje se koriste u razvoju web dizajna.
Na shemu boja web stranice postavljaju se prilično ozbiljni zahtjevi, jer kombinacija boja za web dizajn ne samo da određuje izgled vašeg resursa, već će biti povezana i s vašim brendom na Internetu. Većina stranica ima paletu od 2 do 4 boje, ne računajući crno-bijelu. Pokušajmo shvatiti kako stvoriti najatraktivniju i najefektniju kombinaciju boja u dizajnu vaše web stranice.
Odabir glavne boje
Ako već imate gotov logo, onda je najbolje koristiti jednu od njegovih boja kao glavnu. Ako trebate odabrati paletu stranice od nule, morat ćete koristiti drugu metodu. Analizirajte ciljnu publiku vašeg resursa u smislu društvenih ili dobnih preferencija boja.
Uzmimo, na primjer, web stranicu s temom vjenčanja. Naše mladenke nose bijele haljine koje simboliziraju nevinost i čistoću. U Kini se bijela boja smatra bojom žalosti, pa se kineske mladenke oblače u crvene haljine, jer je crvena za Kineze simbol ljubavi, sreće i sreće. Dodajte još žute boje i dobićete boju moći i bogatstva.
Uz sve ove kulturne nijanse, vrlo je teško pronaći savršene kombinacije boja za web dizajn koje će zaista odgovarati vašoj web stranici i raditi za nju. Stoga mnoge kompanije koje poštuju sebe prave lokalne verzije stranica za različite zemlje i narode.
Najsigurnije boje su ljubičasta i plava. Ljubičasta se smatra bojom bogatstva, moći i visokog društvenog statusa svuda osim na Tajlandu (na Tajlandu je simbol tuge). Plava je povezana sa optimizmom, samopouzdanjem, srećom. Istina, u Japanu to znači zvjerstvo, au Indiji znači tugu.
Vrste kontrasta boja
Kontrast u tonu. Ovu vrstu kontrasta treba pažljivo koristiti, po mogućnosti u kombinaciji sa drugim vrstama kontrasta, i samo kada je to opravdano. Najizraženiji kontrast u web dizajnu je kombinacija tri boje: crvene, žute i plave. Što su kombinovane boje dalje u krugu boja od ove tri, to je slabiji kontrast u tonu.
Kontrast svjetla i tame. Najstroži kontrastni par sastoji se, naravno, od bijele i crne. Među komplementarnim bojama, najmanji kontrast svjetline je između zelene i crvene, a najveći između ljubičaste i žute.
Naš vid nije osjetljiviji na gradacije boja objekata, već na nijanse njihove svjetline. Za web dizajnera, sposobnost skladnog rasporeda tamnih i svijetlih tačaka u dizajnu web stranice je ključ za efikasan dizajn.
Hladno i toplo. Nije iznenađujuće što su hladni i topli tonovi povezani s temperaturom kod ljudi. To je zbog činjenice da Zemljina atmosfera oboji udaljene objekte u plavičaste tonove.
Dakle, što je predmet udaljeniji od nas, to ga zamišljamo hladnijim. Ovo svojstvo aktivno koriste i umjetnici i web dizajneri kako bi kod korisnika izazvali željene emocije.
Kurs minimalizma
Danas su u trendu svijetle i dinamične nijanse, minimalizam i jednobojne sheme koje ne odvlače pažnju od kontrasta između boja. U kombinaciji sa minimalističkim stilom (koristeći, na primjer, prozirna dugmad ili bijeli podebljani tip), jednobojnu shemu je lako ugraditi u web stranicu i zadovoljstvo je pogledati.
Većina ljudi u web dizajnu radije kombiniraju iste boje pozadine s kontrastnom paletom drugih elemenata. Stoga bi bilo logično koristiti paletu od 1-2 boje za pozadinu stranice i kontrastnu paletu za dugmad i druge objekte koji pozivaju na akciju.
Vjerovatno ste barem jednom naišli na Twitter web servis i primijetili da se njegova paleta boja sastoji od nekoliko nijansi plave. Već znate da je plava najsigurnija boja za korištenje na webu, pa ne čudi što je Twitter koristi, posebno s obzirom na globalnu popularnost servisa, njegovu podršku za ogroman broj jezika i, shodno tome, kultura.
Boja kao pomoć u navigaciji
Još jedan pobjednički način korištenja boja pozadine i akcenta je stvaranje vrste "hijerarhije boja" koja uči korisnika da određena boja znači određenu radnju na web stranici.
Hajde da sumiramo. Boja i sposobnost kombiniranja boja u web dizajnu je najvažniji alat za web dizajnera. Ako ga pravilno koristite i ne zaboravite na upotrebljivost stranice, tada možete profitabilno istaknuti sadržaj, nježno i nenametljivo "usmjeravajući" posjetitelja da izvrši određene radnje.
Zamislite da će vaš sajt posetiti hiljade i milioni ljudi – zato treba da učinite sve da njegovo korišćenje bude što jednostavnije i udobnije.
Nadam se da vam je ovaj materijal bio od pomoći. Pretplatite se na ažuriranja našeg bloga kako ne biste propustili svu zabavu. Do!
Savremeni trendovi i pristupi u web razvoju
Naučite algoritam brzog rasta od nule u izgradnji sajta
Teorija boja u web dizajnu je ogromna tema koja zahtijeva mnogo prakse da bi se razumjele specifičnosti njene primjene. Izbor boje ovisi i o okruženju i specifičnostima rada samog web dizajnera, budući da na boje i nijanse gledamo malo drugačije od ilustratora i umjetnika.
Već smo dijelom svoje materijale posvetili bojama u web dizajnu i Photoshopu. Ali danas želimo razgovarati i pogledati boje i palete boja malo općenito, gdje i kako je lakše i praktičnije odabrati njihove kombinacije, šta tražiti i još mnogo toga. Općenito, prikupili smo nekoliko resursa za usklađivanje boja, pronašli zanimljive gotove palete, a želimo i malo dublje ući u neke točke teorije boja.
Teorija boja sa više paragrafa
Kada dizajniramo web stranicu, imamo na raspolaganju 16,8 miliona boja. I sve ih je potrebno kombinirati i odabrati, a ako zamislite koliko varijanti takvih kombinacija postoji, onda... gotovo je beskrajno. Ali boje imaju smisla. Zamislite da vam poklone svoju omiljenu stvar. Zadovoljan si, drago ti je. Sada zamislite da je stvar stvar, ali vam je njena boja najomraženija. Na primjer, nijansa miješanja zelene, žute i sive. Oh, bićeš uzbuđen, bićeš jak, ali radost će nestati.
Boje imaju smisla. Oni daju ton, emocionalno utiču na isti način kao što font ima ogroman uticaj na ljudsku psihologiju.
Primarne boje su glavne boje za nijanse. Ljudsko oko percipira tri osnovne boje: cijan, žutu i magenta. Svaka boja koju vidite pred sobom sada se sastoji od kombinacije ove tri, ali u različitim količinama svjetline, nijansi i još mnogo toga. Da, da, štampa se u ovim bojama.
Naprotiv, internet koristi RGB (crvena, zelena, plava) i njegove heksadecimalne vrijednosti.
RGB (59, 89, 145) ili # 3b599b - Facebook plava
RGB (0, 0, 0) ili # 000000 - crno
Svaka dva znaka u 16-cifrenom kodu označavaju osnovnu boju: crvena - 3b, zelena - 59, plava - 9b.
Hladno-toplo
Takođe, boje traju hladne (obilje plave i zelene) i vruće (mnogo crvenih i žutih) nijansi. Vruće boje u web dizajnu izazivaju osjećaj topline, strasti. Oni su agresivni i hrabri, ali simboliziraju i činjenicu da neke stvari treba zaustaviti, pa se koriste za kritičke poruke, ikone i drugo.
Hladne boje donose hladnoću, pogodne za zimske teme, noćne, tužne ili vodene. Nose u sebi samoću i hladnoću, strah. Ali u međuvremenu, oni su neagresivni i umirujući.
Temperatura
Temperatura slika se takođe može promeniti, što rezultira promenom nivoa narandžaste boje. Tako sliku pretvaramo u topliju i radosniju. Baš kao što svijet izgleda sretnije kada sunce baci svoje žuto-narandžaste zrake na njega. Smanjenje temperature, s druge strane, čini sliku hladnijom i manje privlačnom, kao da prenosi prirodu po oblačnom danu.
Nijanse i sjene
Nijanse se dobijaju dodavanjem bele boje, na isti način na koji dodajete crnu kada kreirate senku. Nijanse i senke vam omogućavaju da kreirate jednobojne boje i palete dodavanjem različitih količina bele i crne.
Na primjer, uzmimo boju prednjeg plana # 8dbdd8 (svijetlo plava). Slika ispod prikazuje jednobojnu paletu u kojoj su dvije nijanse s desne i lijeve strane rezultat dodavanja različitih količina crne i bijele.
Zasićenost, ton, svjetlost
Također, boje su raspoređene prema zasićenosti, nijansi i svjetlini. Zasićenost čini boju bogatijom i tamnijom. Kada kažemo svijetloplava ili tamnozelena, mislimo na zasićenost.
Nijansa određuje razliku od osnovne boje duge (ima ih sedam). To je, na primjer, "zelenkasto plava". Ni to ni ono, nego samo ton.
Svjetlost definira boju u odnosu na čistu bijelu, koliko je svijetla ili dosadna. Nešto slično zasićenju, ali ovisi o drugom parametru.
Šeme boja
Ako uzmemo u obzir sheme boja, onda ih ima samo četiri: jednobojne (nijanse jedne primarne boje), komplementarne (dvije boje koje se nalaze na suprotnim stranama kotača boja), analogne (tri boje koje su jedna pored druge na točak boja), trijada ili trijada (tri boje koje se nalaze na uglovima trougla nacrtanog na vrhu kruga boja).
Dizajniranje rasporeda cvijeća
Ovo je kratka teorija i kasnije ćemo se jednostavno pozvati na ovaj materijal. Ali i na početku proučavanja web dizajna ova teorija je važna, iako vam često oči mogu shvatiti da nešto izgleda potpuno drugačije od onoga što je opisano u brojevima. Nekako plava, ali osjećate da nije dovoljno zasićena. To su karakteristike prirode razvoja svake osobe. Zbog toga se mnogi web dizajneri bezglavo bave dizajnom paleta boja, slično kao što se neki ljudi posvete proučavanju tipografije. Oni doživljavaju različite nijanse, zasićenosti, temperature u kombinaciji sa drugim varijacijama i vide kada, šta i kako to radi.
Međutim, kada su u pitanju web boje, postoji koncept poput "web sigurne boje". Pojavio se kada displeji još nisu mogli da prenesu 16 miliona boja. Ali ako postoje tako sigurne boje, zašto postoji još nešto? Ali, vidite, lijepo je znati zašto uopće postoje i kako uopće utječu na izbor boja.
Treba razumjeti, jer možemo koristiti bilo koju boju, najbolji web projekti se dobijaju pomoću glavne grupe boja. I da, vjerujte svojim očima. Ako im se ne sviđa ono što vide, pokušajte se promijeniti.
Kada je pomoć potrebna
Ako imate bilo kakvih poteškoća s dizajnom u nultoj fazi, onda se ideje za rješenja u boji uvijek mogu pronaći na Internetu. Samo posjetite stranicu s paletama boja i prilagodite je za sebe, a zatim prikupite boje koje želite i radite s njima u Photoshopu. Na primjer, proučavajte inspiraciju za web dizajn ili awwwards, sortirajte po boji i pronađite inspiraciju.
Istraživač boja
To je biblioteka i radionica za kreiranje palete boja. Biblioteka sadrži setove paleta za štampanje i web. Možete odabrati boju i vidjeti više nijansi i varijacija u tonovima.
Boja sina weba
Odabire sve boje i nijanse za boju koju ste naveli. Osim toga, resurs nudi boje za kombinaciju i kombinaciju, jednobojnu paletu, analognu, varijacije zasićenja, tonove, svjetlinu i još mnogo toga.
Copaso
Omogućava vam ne samo da odaberete boju radeći s nekoliko parametara odjednom, već i da sastavite paletu prema datoj boji. U prvoj verziji kreirali smo boju, au drugoj paletu i niz nijansi i tonova boja.
Solorotate
Ovo je jedna od rijetkih mobilnih aplikacija koja vam omogućava rad s paletama boja na pametnom telefonu ili tabletu. Ali postoji i verzija za PC pretraživač. Karakteristika projekta je rad sa bojom u 3D. Nudi nam se šišarka cvijeća. Svaka tačka za mešanje nijanse kreće se samo unutar svog trougla, a sam konus se može rotirati na pogodan način.
Osim toga, tu su i setovi gotovih paleta za Božić, jednobojne, moderne, citrusne i druge.
Solourlovers
Stranica je već dugo bila katalog prilagođenih shema boja. U pravilu uključuje boje ravnog dizajna, kao i brojne šare, teksture, pozadine koje su slobodno dostupne.
Palete boja se mogu birati između fotografija i slika. Već smo razgovarali o tome i resursima za to. Ideja je u cjelini zanimljiva i vrlo korisna, pročitajte je u slobodno vrijeme.
Profili u boji
Ali u međuvremenu, izbor palete je još pola problema. Najtoplija tema u web dizajnu je izbor profila boja. Dotaknuli smo se ove teme malo ranije (link na početku članka), ali evo šta sada želimo napomenuti. Svaki monitor se može kalibrirati za određeni profil boja. To se radi, na primjer, u Windows 10 -> Control Panel -> Color Management. Shodno tome, određene boje mogu se pojaviti drugačije na različitim monitorima.
Tema je, kao što smo rekli, zbunjujuća i stoga mnogi web dizajneri nisu uvijek sigurni da li su odabrali pravu boju. SRGB se preporučuje češće, ali nije neophodan ili apsolutno najbolje rješenje i izbor. Ovo se također odnosi na slike koje se čuvaju s ugrađenim profilima i izgledom web stranice. Drugim riječima, za razumijevanje ove teme može biti potrebno mnogo vremena.
Ali, u međuvremenu, mnogi dizajneri pokušavaju uopće ne razmišljati o njima i po defaultu rade s postavkama na računalu i u Photoshopu. I to je takođe tačno, pošto čak ako se dogovorite o bojama sa kupcem/klijentom, i dalje nećete moći utjecati na boje na monitoru krajnjeg korisnika.
Boje korisničkog interfejsa materijala
Gugl je, prilikom kreiranja pravila za dizajn materijala, detaljno razradio i odredbe o boji. Međutim, pravila su općenito toliko jednostavna da se lako mogu primijeniti na bilo koji interfejs, što ih je učinilo popularnim.
Kada je u pitanju izbor boja, materijalni dizajn prati stil sličan ravnom dizajnu. Materijalne konstrukcije za aplikacije i stranice su besplatno dostupne na Internetu, te stoga možete vidjeti setove boja vlastitim očima, kreirati palete i još mnogo toga.
Ako odlučite da radite samo sa skupom boja iz Google-a, onda preporučujemo da testirate oba alata da vidite kako i kako se mogu nadopunjavati. Tada možete dodatno koristiti resurs 0to255, uskladiti boje u smislu svjetline i zasićenosti.
Zaključak
Boja na internetu je uglavnom jednostavna i nije potrebno više od nekoliko sedmica da se razumiju njene osnove i teorije. Ali ako odlučite da dublje prodrete u samu ovu teoriju boja, tada ćete naučiti jako, jako mnogo složenosti, karakteristika, uzoraka, utjecaja i rješenja. Možda će se nekima od vas zavrtjeti glava od obilja informacija; neko će to odlučiti” on to ne mora da zna, pipetom je probio logo i obojio sajt". Ali neko će odlučiti da se iznova i iznova upusti u teoriju; odlučuje zaroniti u "korpu cvijeća" i nijanse, odlučuje da počne eksperimentirati.
Nadamo se samo da će vam naši materijali u boji malo pomoći u budućnosti u radu na vašim projektima. Oni će vam pomoći da pronađete jednostavan način razumijevanja kako web boje rade kroz praksu, ponavljanje, povjerenje u svoje oči.
Postoji mnogo resursa o izboru paleta boja, sajtova za inspiraciju takođe, ali kada sjednete da „nacrtate“ sopstveni projekat u svojoj glavi nekako... postaje prazno. Sjedite i mislite: “ Koju bih nijansu plave uzeo...malo tamniju ili malo svjetliju...eh...a mušterija nije htjela razmišljati o takvim sitnicama...za njega nešto što, naravno,... male stvari ... "
Novogodišnji dani i slobodno vrijeme dobar su razlog za kreativnost, laganu maštu za vlastito zadovoljstvo, kada, na primjer, više nemate snage da izađete i zabavite se.
