Boje igraju veliku ulogu u web dizajnu. Za ispravan odabir sheme boja za web-mjesto, postoje posebne usluge. Siguran sam da svaki web dizajner ima barem jednu u svojim oznakama.
Ponekad sjedite i razmišljate o tome koju nijansu plave odabrati kao glavnu za stranicu, malo svjetliju ili malo svjetliju, ili možda tamniju ... I još uvijek trebate pokupiti dodatne za to. Naravno, možete to učiniti na oko, ali bolje je koristiti jednu od posebnih usluga.
Neću govoriti o teoriji boja (ovo je preopsežna informacija), već ću jednostavno ovdje objaviti usluge koje imam u svojim oznakama i koje koristim.
Prijatelj sam s ovim instrumentom dugi niz godina. Najprikladniji alat za biranje boja (po mom mišljenju). Ima mnogo dodatnih značajki. Na primjer, možete vidjeti primjer svijetle i tamne stranice s odabranim bojama.
Moguće je procijeniti kako će osobe s daltonizmom i drugim oštećenjima vida vidjeti vašu shemu boja. Možete odabrati boje sigurne na webu.
Adobe Kuler je drugi web alat koji često koristim. Izbor sheme boja je gotovo isti kao na prethodnoj stranici, ali ne volim ga zbog toga. Osim što možete sami izraditi sheme boja, možete pregledavati i koristiti sheme koje su izradili drugi ljudi.
Da biste to učinili, kliknite gumb u gornjem lijevom izborniku "Gledanje". I vidjet ćete galeriju svih vrsta kombinacija boja.
Ovaj alat je malo sličan Colorschemeu, ali ima manje značajki, ali je moguće vidjeti kako će blokovi boja izgledati.
Jedva koristim ovu stranicu, ali pošto je već imam u svojim oznakama, odlučio sam je dodati.
Sljedeće dvije stranice generiraju paletu od slike po vašem izboru. To je magija :)
Vi odaberete bilo koju sliku čije boje volite, servis je analizira i daje vam paletu boja. Ove dvije stranice razlikuju se samo po tome kako im pružiti sliku.
Ova stranica treba preuzimanje datoteka sliku s vašeg računala.
Vrlo zgodan birač boja. Na temelju principa „Sviđa mi se – Ne sviđa mi se“.
Kao što naziv govori, ovdje možete odabrati boje za sada trendi, ravni dizajn. Stranica je zanimljiva po tome što je odabirom palete možete preuzeti za programe Corel i Photoshop.
Drugi modni trend je dizajn materijala. Ova stranica pomaže u odabiru kombinacija boja za korisničko sučelje (UI). Osim toga, stranica ima veliki skup ikona.
I konačno, ponovno korisničko sučelje. Ovo je samo skup boja za dizajn korisničkog sučelja. Klikom na bilo koju boju možete vidjeti kako će se bijeli tekst čitati na određenoj pozadini.
Ovo su alati koje imam u svojim oznakama.
Napišite u komentarima koje stranice za podudaranje boja za web dizajn koristite?
Trebate web stranicu s pravim bojama? učinimo to :)
Pronašli ste grešku? Označite dio teksta i kliknite CTRL+ENTER
Odabir sheme boja za web stranicu jedan je od najvažnijih koraka u procesu dizajna. Odabir kombinacije boja prilično je složen i kreativan proces. Srećom, postoje mnoge usluge koje mogu pružiti značajnu podršku za donošenje pravog izbora.
Neki od resursa spomenutih u ovom pregledu omogućuju vam odabir između velikog broja gotovih shema boja, dok vam drugi omogućuju interaktivnu izradu vlastite sheme.
Kuler
Adobe Kuler sadrži veliku biblioteku unaprijed izrađenih shema boja. Dijagram možete pogledati na mreži i preuzeti ga za korištenje u proizvodima Adobe Creative Suite.
Color Lovers trenutno ima gotovo 2 milijuna korisničkih shema boja. Možete ih vidjeti poredane po datumu, ocjeni, broju pregleda.
ColoRotate ima biblioteku unaprijed izrađenih shema boja. Također možete izraditi vlastitu shemu s jedinstvenim 3D alatom. Shema boja može se koristiti izravno u Photoshopu i Fireworks pomoću dodatka ColoRotate.
Dizajner sheme boja omogućuje vam odabir vrste sheme boja (mono, komplementarna, trijada, tetrada, analogna). Tada će biti moguće prilagoditi boje i vidjeti učinak sheme na primjeru.
ColorSchemer ima veliku biblioteku shema boja koje su kreirali korisnici. Možete ih sortirati prema datumu objave, ocjeni ili broju preuzimanja.
Pictaculous je jednostavan online alat za generiranje shema boja. Možete prenijeti sliku i usluga će generirati dijagram za korištenje sa slikom.
Boja Spire
Color Spire je usluga vrlo jednostavna za korištenje. Odaberete osnovnu boju i ona predlaže shemu boja. Izgled sheme možete vidjeti i na jednostavnom predlošku.
Mali, moderan i uredan birač boja za dizajn HTML stranice i druge zadatke koji zahtijevaju odgovarajuće boje.
Pogledajmo što ovaj program može učiniti.
Postavljanje točke boje
Budući da program ne zahtijeva instalaciju, samo spremite arhivu na tvrdi disk, raspakirajte je na prikladno mjesto, otvorite mapu i pokrenite datoteku s .exe ekstenzijom. Prema zadanim postavkama, program počinje kao mali gumb:
Rad s programom
Kliknemo na ovu ikonu i pred nama se otvara prozor programa:
Zaslon
U ovoj kartici, program vam omogućuje da "uzimate" bilo koju boju izravno sa zaslona. Odnosno, s bilo kojeg dijela ekrana koji je bio vidljiv u trenutku pokretanja programa. Cijeli se zaslon prikazuje u smanjenoj veličini u prozoru Select Area.
Ako kliknete na bilo koji dio u ovom prozoru, pojavit će se u sljedećem manjem prozoru "Odaberi boju". Ovdje već možete preciznije ciljati i uzeti boju s određene točke.
Također u desnom dijelu ovog prozora nalaze se pomoćni gumbi za kopiranje u međuspremnik, a ispod gumbi "Osvježi" (ažurira sadržaj ekrana) i "Primijeni" (sprema odabranu boju i prebacuje prozor na "Odabir" " kartica).
Izbor
Ovdje su glavni alati za jednostavno usklađivanje boja: "Pločica", "Krug", "Web" i "Pobjeda", koji se mijenjaju pomoću dodatnih kartica.
Rad s ovim alatima nije težak. Samo kliknite na boju koja vam se sviđa, prilagodite je RGB klizačima (ili HSV - ako vam je ovaj format bliži) i provjerite odgovara li ili ne.
Ako vam se sviđa odabrana boja, možete kopirati njezin kod iz retka "Prikaz teksta". Štoviše, kod se također može odabrati u bilo kojem od standardnih formata klikom na malu strelicu za proširenje popisa.
Također, obratite pozornost na treći prozor u boji u gornjem desnom kutu. Osim odabrane boje (okomita pruga), prikazuje još tri boje koje se dobro uklapaju s odabranom.
Tako program odmah predlaže nekoliko odgovarajućih boja koje se mogu primijeniti na ostale elemente dizajniranog dizajna.
Program ima puno različitih pomoćnih gumba. Da biste saznali njihovu svrhu, samo zadržite pokazivač miša iznad njih i pročitajte savjete koji se pojavljuju na samom dnu prozora programa.
Postavke
Ovdje možete podesiti neke parametre kao što su vrsta i veličina fonta te neka kozmetička svojstva programa. Bit će prikladnije raditi s programom ako poništite okvire "Otvori na kartici "Zaslon"" i "Pokreni u načinu mini-prozora".
O programu
Na ovoj posljednjoj kartici možete pronaći kontakte programera i vidjeti je li objavljena nova verzija programa tako što ćete otići na njegovu web stranicu.
Prednosti i nedostaci programa
- postoji mnogo različitih alata za odabir boja (krug, pločice, itd.);
- omogućuje prikladnu usporedbu boja pomicanjem prozora programa blizu drugih elemenata zaslona;
- postoje savjeti za sve tipke.
- pomalo lukavo sučelje;
- pokretanje minimizirano i na kartici "Zaslon" nije baš prikladno (iako ga možete isključiti u postavkama);
- neće se svima svidjeti boja prozora programa.
zaključke
Program je prilično moćan za besplatan, pruža gotovo sve što vam je potrebno za praktičan odabir boja prilikom izrade dizajna web stranice. Postoje neki manji nedostaci poput boje prozora programa (lila - nije za svakoga), ali ne ometaju rad s njim.
p.s. Dopušteno je slobodno kopirati i citirati ovaj članak, pod uvjetom da se navede otvorena aktivna poveznica na izvor i da se sačuva autorstvo Ruslana Bogdanova.
P.P.S. Ako vam se program činio kompliciranim, postoje jednostavnije opcije:
Boja je jedan od najvažnijih elemenata u radu dizajnera. Ali kao koncept, prilično ga je teško svladati: mnoge kombinacije paleta često otežavaju odlučivanje kako najbolje stilizirati sučelje web stranica i aplikacija. Prethodno smo objavili recenzije alata po izboru i. A danas želimo proširiti temu objavom prijevoda Nicka Babicha na blogu Essential Color Tools for UX Designers.
Ovaj post sadrži popis najboljih usluga za usklađivanje boja za web stranice i UX dizajn koji će vam uštedjeti puno vremena. Kroz ove projekte naučit ćete:
- odakle crpiti inspiraciju;
- kako stvoriti vlastitu paletu;
- kako dizajn učiniti dostupnim osobama s oštećenjem vida boja.
1. U potrazi za inspiracijom
Boje prirode
Crtajte iz svijeta oko sebe. Sve što trebate je samo pogledati okolo. Modna odjeća, korice knjiga, dizajn interijera... toliko je nevjerojatnih stvari oko vas. Ali najbolje kombinacije boja su boje prirode. Uhvatite lijep trenutak i pokušajte stvoriti vlastiti odabir na temelju određene slike.
Najbolje kombinacije boja nalaze se u prirodi. Možete dobiti shemu boja s bilo koje fotografije
Behance
U popularnoj usluzi pronaći ćete zanimljive radove uključene u najbolje online portfelje pravih profesionalaca u svom području. Ova stranica je također izvrstan izvor inspiracije. Da biste vidjeli nove vrijedne primjere projekata, samo odaberite boju koju želite.
Dribbble Boje
Dribbble je jedan od najboljih koji će vam dobro doći pri izradi korisničkog sučelja. Ako želite vizualno razumjeti kako su drugi koristili određenu boju, idite na dribbble.com/colors i unesite željenu vrijednost.
Prilikom odabira boje za stranicu, ovdje možete postaviti njezin minimalni postotak - eksperimentirajte, na primjer, pokušajte postaviti 30% plave.
Pokušajte postaviti minimalni postotak određene boje u Dribbbleu
inspiracija za dizajn
Designspiration je koristan alat prvenstveno za one koji već imaju ideje za kombinacije boja i žele vidjeti primjere takvih kombinacija. Odaberite od 1 do 5 opcija i naći ćete slike koje odgovaraju navedenim parametrima.
U Designspirationu ćete pronaći različite primjere kombinacija boja
Tineye Multicolr
Uz uslugu usklađivanja boja Tineye Multicolr možete odrediti željeni raspon slike, pa čak i postaviti postotak svake od njih (omjer). Stranica je integrirana s bazom podataka od 20 milijuna Creative Commons fotografija s Flickra. Ovo je definitivno jedan od najbržih načina da pronađete savršenu paletu.
Colorzilla
ColorZilla je proširenje za instalaciju u preglednicima Chrome i Mozilla Firefox. Uključuje alate kao što su kapaljke, pregledavanje paleta, stvaranje i još mnogo toga.
Proširenje ColorZilla dostupno u Chromeu i Firefoxu
Shutterstock Spectrum
Jedan od najboljih načina da dobijete ideju o tome kako će shema boja izgledati je da pogledate odgovarajuće slike. Većina rješenja koja nude odabir boja za dizajn web stranice uključuju ovu značajku, ali Shutterstock Spectrum ima nevjerojatno korisničko sučelje i pregled, što stvarno može dobro doći.
Štoviše, nije vam potrebna pretplata, jer će preliminarna procjena slike biti sasvim dovoljna (čak i unatoč činjenici da ima „vodeni žig“).
W3Schools
Nedavno je blog pregledao izbor iz W3Schools. Postoji mnogo informacija o temi, počevši od njihovih naziva / kodova nijansi, teorije kombinacija paleta i završavajući s opisom različitih formata: HEX, RGB, CMYK, HWB, itd. Također ćete pronaći jednostavne generatore, pretvarače i slične “mini-usluge”. Sve u svemu, zanimljivo za vidjeti.
2. Napravite paletu boja
Alat za dizajn materijala
Usluga odabira boja web-mjesta Material Design Color Tool omogućuje vam stvaranje, dijeljenje i pregled shema boja za svoje odabire. Jedna od njegovih korisnih funkcija je mjerenje razine pristupačnosti bilo koje kombinacije boja.
hladnjaci
Coolors je stranica za stvaranje višebojne palete. Samo popravite određenu boju i pritisnite razmaknicu. Alat je također dobar po tome što ćete dobiti više od jednog rezultata, ali možete generirati nekoliko opcija mijenjajući samo početne podatke.
Shema boja u Coolorsu na temelju fotografije
Adobe Color CC
Usluga usklađivanja boja Adobe Color CC (bivši Kuler) sada je prilično popularna. Slobodno je dostupan na internetu, ali postoji i deskriptorna verzija. S ovom web aplikacijom izradit ćete svoju paletu pomoću kotača boja:
Ili možete dobiti određeni rezultat iz gotove slike:
Odabir boje za stranicu prema slici
Ovdje postoje stotine gotovih kombinacija, potražite ih u odjeljku "Pogledajte":
Ako koristite desktop verziju, možete izvesti sustav boja koji ste stvorili u InDesign, Photoshop i Illustrator jednim klikom.
paleta
Često se uspoređuje s prethodnim Adobe Color CC jer su ti dizajni vrlo slični. Jedina razlika je što u Palettonu niste ograničeni na pet opcija, već možete eksperimentirati s dodatnim tonovima sučelja.
Osim toga, možete pogledati . Zajedno s drugima, aplikacija vam omogućuje da radite bilo gdje, samo koristeći svoj pametni telefon. Osim izravnog kreiranja/izvoza paleta boja, ovdje možete odabrati određene boje sa slika ili koristiti osnovne opcije.
3. Učiniti paletu dostupnom
Trenutno su poremećaji percepcije boja mnogo češći nego što mislimo. Oko 285 milijuna ljudi u svijetu ima probleme s vidom. Uvijek trebate provjeriti je li onaj koji odaberete dostupan takvim korisnicima.
WebAIM Color Contrast Checker
Neki se tonovi savršeno kombiniraju jedni s drugima, dok su drugi sasvim suprotni. Ogroman broj projekata ne prolazi A/A test, i to je činjenica. Vrlo je važno provjeriti vizualni dizajn sučelja i kontrast tonova, pogotovo ako na stranici ima puno teksta. U te svrhe koristite pri odabiru boja stranice.
WebAIM Color Contrast Checker je web-bazirani alat koji provjerava kodove boja u heksadecimalnim vrijednostima.
hladnjaci
Ovu uslugu smo već spomenuli gore. Između ostalog, Coolors će vam također pomoći da provjerite svoju izmišljenu paletu na sljepoću za boje.
Vrsta sljepoće za boje u shemi
Umjesto "Normalnog" načina rada, odaberite vrstu problema s vidom koji želite simulirati. Kao rezultat toga, shvatit ćete kako će osoba koja nije u stanju razlikovati određene boje vidjeti vaš dizajn.
Ovako osoba s protanomalijom vidi paletu
NoCoffee Vision Simulator za Chrome
Uz pomoć web stranice NoCoffee Vision Simulatora možete vidjeti kako će osobe s daltonizmom ili slabovidom percipirati određene web stranice. Na primjer, ako navedete opciju "Achromatopsia" u odjeljku "Nedostatak boje", vidjet ćete web stranicu u sivoj boji.
Ovako izgleda CNN-ov projekt za osobu s deuteranopijom
Zaključak
Sve usluge usklađivanja boja za web stranice i UX dizajn spomenute u članku zasigurno će vam pomoći u potrazi za zanimljivim i učinkovitim asortimanom. Ali zapamtite, najbolji način da naučite kako stvoriti nevjerojatne palete je puno vježbati i eksperimentirati.
Usklađivanje boja jedan je od najvažnijih koraka u procesu stvaranja dobrog dizajna.
Kako bismo vam olakšali, odlučili smo sastaviti izbor najboljih usluga za izradu shema boja. Oni će pomoći uštedjeti vrijeme, a istodobno dobiti pristojan rezultat.
01. Adobe Color CC
Adobe je svoj projekt Kuler preimenovao u Color
Možda ste upoznati s ovim alatom pod njegovim prijašnjim imenom, Adobe Kuler. Međutim, Adobe je nedavno preimenovao jednu od svojih popularnih web aplikacija u Adobe Color CC.
Omogućuje vam odabir, stvaranje i spremanje različitih shema boja, od kojih svaka može sadržavati do pet boja. Alat je dostupan u verziji preglednika i desktopa. Ako koristite verziju za stolno računalo, shemu boja ćete moći izvesti izravno u Photoshop, Illustrator i InDesign.
02. Mudcube Color Sphere
Ako niste sigurni u svoju shemu boja, onda Mudcude ima vlastitu galeriju gotovih sredstava.
Mudcube Color Sphere je vrlo zgodan minijaturni resurs za dizajnere koji ne samo da nudi heksadecimalne kodove za odabrane boje, već vam također omogućuje stvaranje shema boja za vlastite projekte. Također je vrijedno napomenuti da Mudcube ima vlastitu galeriju gotovih resursa koje također možete koristiti.
03. Provjerite moje boje
Check my Colors dizajniran je posebno za procjenu i usklađivanje kombinacije boja pozadine i prednjeg plana za sve DOM elemente. I također kako bi saznali jesu li elementi dovoljno skladni jedni s drugima. Svi testovi temelje se na algoritmima koje preporučuje World Wide Web Consortium ( W3C).
04. Aplikacija za boje
Aplikacija će vam pomoći da saznate RGB, HEX i HSLA vrijednosti odabranih boja
iOS alat The Color App omogućuje vam jednostavno i jednostavno definiranje boja pomoću velike palete boja. Omogućuje vam da saznate RGB, HEX i HSLA vrijednosti boja, kao i da kreirate vlastite sheme boja za stranicu.
05. Lovac na boje
Colour Hunter generira shemu boja na temelju odabrane slike
Ovo je vrlo zgodan alat, pogotovo ako trebate pronaći određenu boju. Odaberite sliku i prenesite je u Color Hunter. Alat će stvoriti paletu boja na temelju odabrane slike. Ovo je izvrsna metoda za stvaranje vlastitih shema boja.
06. Limeno oko
Ako trebate dobiti određenu boju, samo unesite HEX vrijednost u URL
Ova stranica koristi bazu podataka od 10 milijuna slika, dostupnih besplatno prema licencnom ugovoru Creative Commons, pažljivo odabranih od strane kreatora s Flickra. Mogu se koristiti za generiranje odgovarajućih shema boja.
07 Boja
Zgodna minijaturna web aplikacija. Zadržite pokazivač miša preko zaslona i odredite boju koju želite, a zatim se malo pomičite da pokupite nijansu. Nakon toga, alat će dati sve potrebne HEX kodove koje možete koristiti u vlastitim projektima. Jedan od najjednostavnijih alata za korištenje.
08 SpyColor.com
Besplatni generator sheme boja koji pruža informacije o bojama i također vam omogućuje da ih pretvorite u bilo koju shemu ( RGB, CMYK i drugi ). Ovdje su dostupni različiti formati shema boja, uključujući trijadni, jednobojni i još mnogo toga.
09.Inspiracija za dizajn
Na Designspirationu se može odabrati do pet nijansi uz praktičnu paletu na cijeloj stranici koja olakšava pronalaženje upravo HTML shema boja koje tražite. Stranica će zatim generirati stranicu sa svim slikama u bazi podataka koje koriste sličnu kombinaciju boja. Također će pružiti HEX vrijednosti koje možete koristiti u vlastitim projektima. A slike se mogu spremati u zbirke na web mjestu.
10 ColorExplorer
Jedan od najpromišljenijih web alata koji nudi mnoštvo značajki povezanih s dizajnom sheme boja, prilagodbom i analitikom. Evo nekoliko alata koji će vam pomoći da odredite WCAG valjanost shema boja, kao i generirati vlastite palete boja.
11. Hex generator sheme boja
Zgodan mali alat za generiranje kombinacija boja na temelju jedne odabrane nijanse. Zalijepite heksadecimalnu vrijednost boje i alat će pružiti skup prikladnih boja za korištenje s osnovnom bojom.
12. Ljubitelji BOJA
COLOURlovers je zajednica za dijeljenje shema boja. Ovdje možete crpiti inspiraciju iz skupova boja drugih korisnika, kao i stvarati i dijeliti svoje.
13. Dizajner sheme boja
Ovaj online alat nudi zanimljive načine za generiranje shema boja, omogućujući vam da prilagodite njihovu svjetlinu i kontrast. Ovdje možete stvoriti nekoliko popularnih matematičkih modela shema boja, uključujući jednobojne.
14. COPASO
Jedan od alata s web stranice COLOURlovers. No COPASO zaslužuje posebnu pozornost, jer je nevjerojatno sve-u-jednom rješenje i olakšava generiranje gotovih shema boja za stranicu. Postoji mnogo alata za usklađivanje boja, a svi su smješteni u praktično i jednostavno sučelje. Osim toga, bilješke se mogu dodavati u palete, slike se mogu učitavati i tako dalje.
15. Colormod
Colourmod je softver koji vam omogućuje odabir pojedinačnih boja iz područja widgeta, bilo da koristite Mac ili Konfabulator na Windowsima. Ovo nije baš jednostavan alat za rad s paletama boja, ali će vam pomoći da brzo i jednostavno odredite boje bez potrebe za preuzimanjem teških programa.
16. ColorZilla
ColorZilla je dostupna za Chrome i Firefox
Ovaj je projekt započeo kao dodatak za Firefox, ali danas je dostupan i za Google Chrome. ColorZilla je proširenje koje uključuje nekoliko alata za rad s bojom, uključujući paletu, css generator gradijenta i kapaljku.
17. Colormunki
Zgodan online alat za odabir shema boja kreatora Colormunkija. Pomoću njega možete jednostavno stvoriti atraktivne palete boja od uzoraka temeljenih na Pantoneu koristeći nekoliko tehnika.
18.colr.org
Colr.org vam omogućuje postavljanje raspona boja bilo koje slike
Ovaj alat vam omogućuje da izvršite detaljnu analizu boja slike, koja je obično automatizirana u drugim alatima. To će vam omogućiti da odaberete najprikladniju boju. Preporučujemo upoznavanje s ovim alatom, iako njegovo sučelje nije tako dobro osmišljeno kao u drugim aplikacijama.
19. Grab boja
Ovaj zgodan alat stvara palete boja iz bilo koje slike. Zalijepite adresu slike koju želite analizirati i usluga će automatski generirati 3D graf s informacijama o korištenim bojama. Iako ova aplikacija nije baš prikladna za odabir sheme boja za web-mjesto, može se koristiti za proučavanje slika i njihovih karakteristika boja.
Mješalica za 20 boja
ColorBlender generira paletu od pet odgovarajućih boja
Jedan od najjednostavnijih alata koji vam omogućuje podešavanje boje i dobivanje pet odgovarajućih boja u stvarnom vremenu. Generirana paleta se može preuzeti u Photoshopu ili Illustratoru kao EPS datoteka.
21. Sivi bit
GrayBit vam omogućuje analizu web stranica da vidite kako bi izgledale u sivim tonovima
Ovaj alat će vam pomoći da vidite kako vaša stranica izgleda u sivim tonovima. Izvrsna usluga koja će vam omogućiti da prepoznate problematična područja u suprotnosti.
22. COLRD
Alat koji se može koristiti kao inspiracija ili za dijeljenje shema boja. Naravno, ovaj resurs neće pomoći pri generiranju krugova, ali svakako ga treba uzeti u obzir.
23 Shutterstock spektar
Slike se mogu filtrirati prema ravnoteži boja i svjetlini
Ponekad je najlakše provjeriti hoće li se shema boja podudarati gledajući slike. Gotovo svi glavni izvori dionica nude takve alate, ali Shutterstock Spectrum ima vrlo jednostavno sučelje. Nakon što pomoću klizača odredite boju, možete unijeti ključne riječi koje će odrediti temu slika. Osim toga, možete filtrirati slike prema balansu boja i svjetlini.
