Usklađivanje boja u web dizajnu važna je disciplina koja datira iz srednjeg vijeka i koristi se za stvaranje izvanrednih djela čovječanstva. Pa pokušajmo to ugurati 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 dojam stranice, a također 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 puno lakši.
Prvo, mora se imati na umu da različite boje izazivaju različite emocije. I ta je činjenica znanstveno potvrđena. Čak i različite nijanse iste boje na različite načine utječu na emocije publike. Uvijek postoji određeni stupanj nesigurnosti, ovisno o osobnim asocijacijama osobe, ali općenito, iste boje mogu izazvati iste emocije kod različitih ljudi.
- Crvena: strast, agresija, relevantnost.
- Naranč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 (svijetle nijanse).
Nije iznenađujuće da mnoge limenke koriste shemu boja na bazi plave boje.
Zapamtite da dizajnirate za određenu skupinu ljudi koji mogu imati drugačije emocije od vaših. Osim toga, vrijedi razmotriti različite stavove prema istoj boji ljudi različitih spolova, kultura ili religija.
Prilikom odabira svoje glavne boje, trebali biste početi isključivanjem konkurenata s popisa razmatranih boja. Nakon toga morate razmisliti kakvo bi raspoloženje vaš brend trebao stvoriti i koje emocije izazvati.
Odredite točnu boju (njezinu nijansu i zasićenost)
Kada odaberete glavnu boju, morate odrediti njezinu nijansu i zasićenost. Kao što je gore navedeno, ton boje i njena zasićenost mogu promijeniti njezino značenje. Primjerice, tamnije nijanse žute (na primjer, zlatne) odaju dojam antike, svjetlije nijanse neće dati ovaj efekt.
Općenito je pravilo da svijetle nijanse stvaraju osjećaj energije, svježine, zabave, tamnije nijanse – stabilnost i profesionalnost.
Nakon toga trebate odrediti točnu brojčanu vrijednost boje u RGB, CMYK, HEX ili Pantone sustavima kako biste je mogli koristiti u procesu dizajna.
Ako ste, primjerice, 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 se međusobno odnositi. Želite li kontrastniju shemu boja ili tišu shemu boja?
Možete kombinirati boje kako želite, ali ovdje smo predstavili najčešće sheme boja.
Jednobojna
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 kotaču boja.
Gradijent
Postupni prijelaz iz jedne boje u drugu. Šareniji od analognog, ali može odvratiti pozornost od drugih elemenata dizajna.
Kontrastno
Dvije suprotne boje. Ako pogledate kotačić boja, tada su boje koje su jedna nasuprot drugoj najkontrastnije. Na primjer, crvena i zelena ili žuta i ljubičasta. Korištenje ove sheme boja dodaje dinamiku vizualnom utjecaju dizajna.
Kontrasti pomažu u manipuliranju pažnjom korisnika, omogućujući naglašavanje važnijih elemenata (gumbi) i skrivanje manje značajnih.
Duplex
Napravite slike koristeći samo 2 boje. - to nije toliko shema boja koliko vrsta ukrasa kontrastne sheme boja.
Pojednostavljeno rečeno, duplex izgleda baš sjajno, radi se o dinamičnom vizualnom efektu koji "hvata" pozornost korisnika.
Trijada
Tri boje jednako udaljene jedna od druge na kotaču 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 trojci.
Split (split) kontrast
Korištenje treće boje uz dvije kontrastne boje. Osim kontrastne sheme, dopušteno je staviti naglasak na potrebne dijelove dizajna, ali ima više mogućnosti za to.
Odaberite sekundarne boje
Definiranje sheme boja pomoći će pojednostavniti odabir sekundarnih boja. No, svatko će morati poraditi na odabiru svojih nijansi i zasićenosti, kao što je to učinio pri odabiru primarne boje.
Jednostavan alat Paletton pomaže vam vizualizirati različite sheme boja. Možete odabrati glavnu boju i definirati sheme boja, a Paletton definirati boje pozadine.
Odlučite gdje i kako ćete koristiti svaku boju
Dakle, imate sjajnu paletu boja za svoj projekt ... što sada učiniti s njom? Primjena boja na web stranici je mjesto gdje se susreću umjetnost i vještina dizajnera.
Naglasci se ne smiju koristiti samo na elementima poziva na radnju ili važnim gumbima. Možete ih primijeniti na različite dijelove stranice. Na primjer, istaknite važne riječi u tekstu kako bi im korisnik posvetio posebnu pozornost.
Prvo, morate dizajnirati stranicu u crno-bijeloj boji. Koristeći sivu ljestvicu za određivanje važnosti 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 temeljito. Izbor glavne boje je vrlo važan jer određuje cjelokupno raspoloženje koje će vaša stranica nositi.
Vrsta sheme boja također utječe na emocije koje će stranica izazvati kod posjetitelja. Vrsta određuje broj alata koje možete koristiti pri određivanju redoslijeda u kojem se boje koriste.
Ljudi, uložili smo dušu u stranicu. Hvala ti za
da otkrijete ovu ljepotu. Hvala na inspiraciji i naježivanju.
Pridružite nam se na Facebook i U kontaktu s
Shema br. 1. Komplementarna kombinacija
Komplementarne, ili komplementarne, kontrastne boje su boje koje se nalaze na suprotnim stranama Ittenovog kotača boja. Njihova kombinacija izgleda vrlo živahno i energično, posebno uz maksimalnu zasićenost boja.
Shema br. 2. Trijada - kombinacija 3 boje
Kombinacija 3 podjednako raspoređene boje. Pruža visok kontrast uz održavanje sklada. Ova kompozicija izgleda prilično živahno čak i kada koristite blijede i nezasićene boje.
Shema broj 3. Slična kombinacija
Kombinacija od 2 do 5 boja jedna pored druge na kotaču boja (idealno 2-3 boje). Dojam: smiren, pozivajući. Primjer kombinacije sličnih prigušenih boja: žuto-narančasta, žuta, žuto-zelena, zelena, plavo-zelena.
Shema br. 4. Zasebno-komplementarna kombinacija
Varijanta komplementarne kombinacije boja, umjesto suprotne boje koriste se samo susjedne boje. Kombinacija primarne boje i dvije dodatne. Ova shema izgleda gotovo jednako kontrastna, ali ne tako intenzivna. Ako niste sigurni da možete ispravno koristiti komplementarne kombinacije, koristite odvojeno-komplementarne kombinacije.
Shema broj 5. Vježbalica - kombinacija 4 boje
Shema boja u kojoj je jedna boja glavna, dvije komplementarne, a još jedna naglašava naglaske. Primjer: plavo-zelena, plavo-ljubičasta, crveno-narančasta, žuto-narančasta.
Shema broj 6. Kvadrat
Kombinacije pojedinih boja
- Bijela: ide uz sve. Najbolja kombinacija s plavom, crvenom i crnom.
- Bež: s plavom, smeđom, smaragdnom, crnom, crvenom, bijelom.
- Siva: s fuksijom, crvenom, ljubičastom, ružičastom, plavom.
- Ružičasta: sa smeđom, bijelom, mint zelenom, maslinastom, sivom, tirkiznom, blijedoplavom.
- Fuksija (tamno ružičasta): sa sivom, smeđom, limetom, menta zelenom, smeđom.
- Crvena: sa žutom, bijelom, smeđom, zelenom, plavom i crnom.
- Rajčica crvena: plava, menta zelena, pješčana, kremasto bijela, siva.
- Trešnja crvena: azurna, siva, svijetlonarančasta, pješčana, blijedožuta, bež.
- Grimizno crvena: bijela, crna, boja damast ruže.
- Smeđa: svijetlo plava, krem, ružičasta, 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.
- Narančasta: svijetloplava, plava, ljubičasta, ljubičasta, bijela, crna.
- Svijetlo narančasta: siva, smeđa, maslinasta.
- Tamno naranč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: narančasta, svijetlosmeđa, smeđa.
- Zelena: zlatno smeđa, naranč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, narančasta, ružičasta, bijela, žuta.
- Tamnoplava: svijetloljubičasta, svijetloplava, žućkasto zelena, smeđa, siva, blijedožuta, narančasta, zelena, crvena, bijela.
- Lila: narančasta, ružičasta, tamnoljubičasta, maslinasta, siva, žuta, bijela.
- Tamno ljubičasta: zlatno smeđa, blijedožuta, siva, tirkizna, menta zelena, svijetlo narančasta.
- Crna je svestrana, elegantna, izgleda u svim kombinacijama, najbolje uz narančastu, ružičastu, salatu, bijelu, crvenu, lila ili žutu.
Ljudi se još uvijek svađaju je li sadržaj glavni. Ako mene pitate, u potpunosti se slažem s njima, a moje mišljenje temelji se na vlastitom iskustvu. Bez obzira je li dominantna ili ne, postoji nešto što je jednako važno! Što je ovo, pitate se? Znam da svi vole reći: "Ne sudite o knjizi po koricama." Ali kako drugačije planirate privući pozornost nekoga drugog osim originalne naslovnice? Očito, 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 dojam.
Uvijek postoji jedna specifična radnja kojom želite natjerati posjetitelja na svoju stranicu. Ovo je radnja na koju stavljate najveći naglasak. To može biti gumb za pretplatu, sljedeći gumb ili gumb za kupnju.
Bez obzira na gumb, uvijek imajte na umu da hoće li se kliknuti ili ne, ovisi o tome kako se posjetitelj osjeća kada je na vašoj web-lokaciji.
U ovom članku saznat ćete 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. Pogledate li Pinterest paletu boja, odmah ćete primijetiti da im je crvena primarna boja.
Crvena se često povezuje s ljubavlju. To je jaka i dinamična boja zbog koje se možete zaljubiti u sve što je blisko toj boji.
Ova boja se često može vidjeti u zalihama, jer njezin intenzitet stvara osjećaj hitnosti.
Iznad svega, ova intenzivna boja može učiniti posjetiteljima da se osjećaju uzbuđeno ili nagrađujući. Ali u isto vrijeme može obeshrabriti želju da budete na njemu, tako da uvijek trebate biti oprezni.
Upotrijebite crvenu boju kako biste istaknuli svoj web dizajn. Dobro se kombinira s bijelom, sivom, svijetloplavom ili srebrnom bojom.
Praktični primjer korištenja crvene boje:
Ljudsko oko vidi crveno kada gleda u svjetlost valne duljine između 630 i 700 nanometara. Svjetlo iznad ovog raspona naziva se infracrveno i ljudsko oko ga ne percipira, ali se može identificirati kao toplina. - Wikipedija
Šira upotreba palete crvene boje (od jimjim421):
10 asocijacija na crvenu:
- krv
- rat
- vatra
- muškost
- strast
- zavođenje
- prinuda
- energije
- hrabrost
Amazon voli bogatu naranču:
Narančasta je topla i aktivna boja, ali ne tako intenzivna kao crvena. Naranča je prije topla nego vruća.
Ispunjena energijom, ova jarka boja potiče ljude na djelovanje, umjesto da ih prisiljava ili prisiljava. Narančasta se samo povremeno doživljava kao intenzivna – poziva na radnje kao što su kupnja, pretplata, prodaja ili praćenje. Preporuča se korištenje narančaste boje ako nakon posjete vašoj stranici želite ostaviti gosta s osjećajem motivacije, radosti, kreativnosti i entuzijazma.
Praktični primjer korištenja naranče:
Povećana upotreba narančaste palete od manekineko:
10 asocijacija na naranču:
- optimizam
- definicija
- vatra
- upozorenje
- jesen
- religija
- izdržljivost
- samilost
- Noć vještica
- organizam
Plava boja facebook stvara osjećaj sigurnosti:
Možete pronaći mnoge poslovne i korporativne web stranice koje koriste plavu boju. Ovu boju povezujemo s nečim pouzdanim, sigurnim, izaziva osjećaj povjerenja i iskustva. Stoga ne čudi da svaki gospodarstvenik kojemu je stalo do toga kakve će dojmove ostaviti s web stranice svoje tvrtke radije koristi plavu boju. Plava stvara osjećaje potpuno suprotne onima koje crveno lišće. Plava nas smiruje i zbog toga se ne trebamo previše brinuti.
Praktični primjer korištenja plave boje:
Kladim se da nisi znao:
Anketa, koja je provedena 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 palete plave boje od strane dizajna entiteta:
10 asocijacija na plavu:
- istinitost
- prijateljstvo
- magija
- momci
- besplatnost
- policija
Snaga zelene na
Osjećate li se trenutno neobično optimistično? Da pogodim – jesi li gledao nešto zeleno? Možda ste samo gledali zelenu biljku - to vas je, nedvojbeno, smirilo i natjeralo da gledate na stvari optimističnije.
Svatko tko je na neki način povezan s ekologijom ima više mogućnosti koristiti zeleno u kreiranju svojih stranica. Obratite pažnju na novčanicu od 100 dolara. Ovdje prevladava zelena boja! Stranice kao što je Groupon također imaju puno zelenog u svojoj robnoj marki jer se bave izravno 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 koje je odobrila američka Uprava za hranu i lijekove. - Wikipedija
Šira upotreba zelene od strane Skybluue2u:
10 asocijacija na zeleno:
- novac
- pohlepa
- zavist
- priroda
- Proljeće
- zdravlje
- mladosti
- 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 velikim su 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 trendi 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, zbog nje se osjećaju prisiljeni učiniti nešto, na neki način ih tjera da poduzmu određenu akciju. Stoga bi bilo učinkovito ovu boju upariti s crnom ili bijelom.
Praktični primjer korištenja ljubičaste:
Kladim se da nisi znao:
U travnju 2007. znanstvenici su sugerirali da su rane arheje možda koristile ljubičasti pigment sličan klorofilu za apsorpciju sunčeve energije. Da je to doista slučaj, tada bi ogromna područja oceana i obala bila ljubičasta. Ova teorija se zove Hipoteza ljubičaste Zemlje. - Wikipedija
Povećana upotreba ljubičaste boje
10 asocijacija na ljubičastu
- bogatstvo
- velikodušnost
- plemstvo
- pročišćavanje
- romantika
- umjetnost
- Egzotično
- duhovnost
- luksuzno
- ženstvenost
1WD inteligentno koristi jednobojne boje
Obično jednobojne boje kao što su bijela, crna, tamno siva i svijetlo siva trebaju se koristiti kao pozadina u dizajnu, s već postojećim i dobro postavljenim bojama naglaska koje su svjetlije i zasićenije. Bacite pogled na stranicu, 1stwebdesigner - 1WD. Također koriste narančastu kao svijetlu boju akcenta - ali samo u skladnoj kombinaciji s tamno sivim i svijetlosivim tonovima. I, naravno, bijela (boja pozadine stranice). Crna će uvijek predstavljati modernost, misterij, 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 blatno, bijela će stvoriti suprotan učinak. Bijela boja izjednačava čistoću, otvorenost, jednostavnost i minimalizam.
Praktični primjer korištenja jednobojne boje:
Kladim se da nisi znao:
Digitalna jednobojna fotografija bilježi samo nijanse crne koje percipira senzor kamere. U naknadnoj obradi slika u boji možete transformirati percipiranu svjetlinu kombiniranjem metrike više kanala. - Wikipedija
Povećana upotreba jednobojne palete od strane munsterija
10 asocijacija na jednobojne boje
- vlast
- elegancija
- prostor
- mekoća
- nevinost
- pesimizam
- depresija
- dosada
Koja je vaša omiljena boja? A kakve osjećaje i emocije izaziva u vama?
Prijevod - Dužnost
Od autora: web dizajner u svom arsenalu ima mnogo alata za interakciju s korisnicima koristeći boju. Usklađivanje boja u web dizajnu je učinkovit marketinški alat, međutim, treba ga koristiti vrlo pažljivo kako ne bi došlo do izdubljenja dizajna zbog kojeg se korisnici osjećaju neugodno i uznemirujuće.
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-mjesta, a to 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šom robnom markom 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 najučinkovitiju 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 web-mjesta od nule, morat ćete koristiti drugu metodu. Analizirajte ciljanu publiku svog 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, budući da je crvena za Kineze simbol ljubavi, sreće i sreće. Ovdje dodajte još žute boje i dobit ćete boju moći i bogatstva.
Uz sve ove kulturne nijanse, vrlo je teško pronaći savršene kombinacije boja web dizajna koje će stvarno odgovarati vašoj web stranici i raditi za nju. Stoga mnoge tvrtke koje poštuju sebe izrađuju 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 svugdje osim u Tajlandu (na Tajlandu je simbol tuge). Plava je povezana s optimizmom, samopouzdanjem, srećom. Istina, u Japanu to znači zvjerstvo, a u Indiji tugu.
Vrste kontrasta boja
Kontrast u tonu. Ovu vrstu kontrasta treba koristiti pažljivo, po mogućnosti u kombinaciji s drugim vrstama kontrasta, i to samo kada je to opravdano. Najizraženiji kontrast u web dizajnu je kombinacija tri boje: crvene, žute i plave. Što su kombinirane boje dalje u kotaču 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 je kontrast svjetline 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 točaka u dizajnu web stranice ključ je učinkovitog dizajna.
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 plavkastim tonovima.
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.
Tečaj 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 s minimalističkim stilom (koristeći, na primjer, prozirne gumbe ili bijeli podebljani tip), jednobojnu shemu lako je ugraditi u web stranicu i užitak je gledati.
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 gumbe i druge objekte koji pozivaju na akciju.
Vjerojatno 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, stoga ne čudi što je Twitter koristi, pogotovo ako uzmete u obzir globalnu popularnost usluge, njezinu podršku za ogroman broj jezika i, sukladno tome, kultura .
Boja kao pomoć u navigaciji
Još jedan pobjednički način korištenja pozadinskih i akcentnih boja je stvaranje svojevrsne "hijerarhije boja" koja uči korisnika da određena boja znači određenu radnju na web mjestu.
Hajde da rezimiramo. Boja i sposobnost kombiniranja boja u web dizajnu najvažniji je alat za web dizajnera. Ako ga pravilno koristite i ne zaboravite na upotrebljivost stranice, tada možete isplativo istaknuti sadržaj, nježno i nenametljivo "usmjeravajući" posjetitelja da izvrši određene radnje.
Zamislite da će vašu stranicu posjetiti tisuće i milijune ljudi – zato biste trebali učiniti sve što je moguće da njezino korištenje bude što jednostavnije i udobnije.
Nadam se da vam je ovaj materijal bio koristan. Pretplatite se na ažuriranja našeg bloga kako ne biste propustili svu zabavu. Do!
Suvremeni trendovi i pristupi u web razvoju
Naučite algoritam brzog rasta od nule u izgradnji web mjesta
Teorija boja u web dizajnu ogromna je tema koja zahtijeva puno prakse kako bi se razumjele specifičnosti njezine 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 je i kako je lakše i praktičnije odabrati njihove kombinacije, što 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 s više paragrafa
Kada dizajniramo web stranicu, na raspolaganju imamo 16,8 milijuna boja. I sve ih treba kombinirati i odabrati, a ako zamislite koliko varijanti takvih kombinacija postoji, onda ... gotovo je beskrajno. Ali boje imaju smisla. Zamislite da vam se pokloni vaša omiljena 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, bit ćeš uzbuđen, bit ćeš jak, ali radost će nestati.
Boje imaju smisla. Daju ton, emocionalno utječu na isti način kao što font ima ogroman utjecaj 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, tisak se događa 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-znamenkastom kodu označavaju osnovnu boju: crvena - 3b, zelena - 59, plava - 9b.
Hladno-toplo
Također, 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. Agresivni su i hrabri, ali simboliziraju i činjenicu da neke stvari treba stati na kraj, pa se koriste za kritičke poruke, ikone i ostalo.
Hladne boje donose hladnoću, pogodne za zimske teme, noćne, tužne ili vodene. U sebi nose samoću i hladnoću, strah. Ali u međuvremenu su neagresivni i umirujući.
Temperatura
Temperatura slika također se može mijenjati, što rezultira promjenom razine narančaste boje. Tako sliku pretvaramo u topliju i radosniju. Baš kao što svijet izgleda sretnije kada sunce baci svoje žuto-narančaste zrake na njega. Sniženje temperature, s druge strane, čini sliku hladnijom i manje privlačnom, kao da prenosi prirodu na oblačan dan.
Sjene i sjene
Nijanse se dobivaju dodavanjem bijele boje u boju, na isti način na koji dodajete crnu kada stvarate sjenu. Nijanse i sjene omogućuju stvaranje jednobojnih boja i paleta dodavanjem različitih količina bijele i crne.
Na primjer, uzmimo boju prednjeg plana # 8dbdd8 (svijetloplava). 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. Kad 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.
Sheme boja
Ako uzmemo u obzir sheme boja, onda ih postoje samo četiri: jednobojne (nijanse jedne primarne boje), komplementarne (dvije boje koje se nalaze na suprotnim stranama kotača boja), analogne (tri boje koje se nalaze pored kotača boja). ), trijada ili trijada (tri boje koje su u kutovima trokuta nacrtane na vrhu kotača boja).
Dizajniranje rasporeda cvijeća
Ovo je kratka teorija i kasnije ćemo se jednostavno pozvati na ovaj materijal. Ali i na početku studiranja 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 brojkama. Nekako plava, ali osjećate da nije dovoljno zasićena. To su značajke prirode razvoja svake osobe. Zbog toga se mnogi web dizajneri bezglavo bave dizajnom palete boja, slično kao što se neki ljudi posvete proučavanju tipografije. Oni doživljavaju različite nijanse, zasićenja, temperature u kombinaciji s drugim varijacijama i vide kada, što i kako djeluje.
Međutim, kada su u pitanju web boje, postoji koncept poput "web sigurne boje". Pojavio se kada zasloni još nisu mogli prenijeti 16 milijuna boja. Ali ako postoje tako sigurne boje, zašto drugo postoji nešto drugo? 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 dobivaju se pomoću glavne skupine 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, ideje za rješenja u boji uvijek se mogu pronaći na Internetu. Jednostavno posjetite web-mjesto s paletama boja i prilagodite ga sebi, 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 knjižnica i radionica za izradu palete boja. Knjižnica sadrži setove paleta za ispis i web. Možete odabrati boju i vidjeti više nijansi i varijacija u tonovima.
Color sin th eweb
Odabire sve boje i nijanse za boju koju ste naveli. Osim toga, resurs nudi boje za kombinacije i kombinacije, jednobojne palete, analogne, varijacije zasićenja, tonove, svjetlinu i još mnogo toga.
Copaso
Omogućuje vam ne samo da odaberete boju radeći s nekoliko parametara odjednom, već i da sastavite paletu prema zadanoj boji. U prvoj verziji kreirali smo boju, a u drugoj paletu i niz nijansi i tonova boja.
Obojiti
Ovo je jedna od rijetkih mobilnih aplikacija koja vam omogućuje rad s paletama boja na vašem pametnom telefonu ili tabletu. Ali postoji i verzija za PC preglednik. Značajka projekta je rad s bojom u 3D. Nudi nam se stožac cvijeća. Svaka točka za miješanje nijanse kreće se samo unutar svog vlastitog trokuta, a sam konus se može rotirati što je prikladno.
Osim toga, tu su i setovi gotovih paleta za Božić, jednobojne, moderne, citrusne i druge.
Ljubitelji boja
Stranica je već dugo katalog prilagođenih shema boja. U pravilu uključuje boje ravnog dizajna, kao i brojne uzorke, teksture, pozadine koje su slobodno dostupne.
Palete boja mogu se odabrati 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š uvijek 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 što sada želimo napomenuti. Svaki monitor može se kalibrirati za određeni profil boja. To se radi, na primjer, u Windows 10 -> Upravljačka ploča -> Upravljanje bojama. U skladu s tim, određene boje mogu se drugačije pojaviti na različitim monitorima.
Tema je, kao što smo rekli, zbunjujuća i stoga mnogi web dizajneri nisu uvijek sigurni jesu li odabrali pravu boju. SRGB se preporučuje češće, ali nije nužan ili apsolutno najbolje rješenje i izbor. To se također odnosi na slike koje se spremaju s ugrađenim profilima i izgledima web-mjesta. Drugim riječima, razumijevanje ove teme može potrajati dugo.
No, u međuvremenu, mnogi dizajneri pokušavaju uopće ne razmišljati o njima i prema zadanim postavkama rade s postavkama na računalu i u Photoshopu. I to je također istina, budući da čak ako se dogovorite o bojama s kupcem/klijentom, još uvijek nećete moći utjecati na boje na monitoru krajnjeg korisnika.
Boje korisničkog sučelja materijala
Google je prilikom izrade 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 koje sučelje, što ih je i učinilo popularnim.
Kada je u pitanju izbor boja, materijalni dizajn slijedi stil sličan ravnom dizajnu. Materijalne konstrukcije za aplikacije i web stranice su besplatno dostupne na Internetu, te stoga možete vlastitim očima vidjeti skupove boja, stvarati palete i još mnogo toga.
Ako odlučite raditi samo s Googleovim skupom boja, preporučujemo da testirate oba alata kako biste vidjeli kako i kako se mogu nadopunjavati. Tada možete dodatno koristiti resurs 0 do 255, uskladiti boje u smislu svjetline i zasićenosti.
Zaključak
Boja na internetu je uglavnom jednostavna i ne treba joj više od nekoliko tjedana da se razumiju njezine osnove i teorije. Ali ako se odlučite dublje ući u samu ovu teoriju boja, tada ćete naučiti jako, jako puno složenosti, značajki, uzoraka, utjecaja i rješenja. Možda će se nekima od vas zavrtjeti glava od obilja informacija; netko će to odlučiti" on to ne mora znati, pipetom je probio logo i obojio stranicu". No, netko će odlučiti ponovno i iznova proučiti teoriju; odluči uroniti u "košaru cvijeća" i sjene, odluči početi eksperimentirati.
Nadamo se samo da će vam naši materijali u boji malo pomoći u budućnosti u radu na vašim projektima. Pomoći će vam da kroz vježbu, ponavljanje, povjerenje u svoje oči pronađete jednostavan način razumijevanja kako web boje rade.
Postoji mnogo resursa o odabiru paleta boja, stranica za inspiraciju također, ali kada sjednete da "nacrtate" vlastiti projekt u glavi nekako... postaje prazno. Sjediš i misliš: “ Koju bih nijansu plave uzeo ... malo tamniju ili malo svjetliju ... eh ... a kupac nije htio razmišljati o takvim sitnicama ... za njega nešto što, naravno, ... male stvari ... "
Novogodišnji dani i dokolica dobar su razlog za kreativnost, laganu maštu za vlastito zadovoljstvo, kada, primjerice, više nemate snage izaći i zabaviti se.
