Jedna od važnih komponenti rada web dizajnera je kreiranje palete, odabir boja koje se harmonično kombinuju jedna s drugom. Proces je prilično složen i zahtijeva kreativan pristup. Postoji niz resursa koji rad s bojom mogu učiniti mnogo lakšim.
Nedavno ste možda naišli na detaljan članak o. Nešto ranije objavio sam sličnu napomenu o alatima za selekciju s pregledom Kulera i ColorBlendera. Danas sam odlučio proširiti temu i pružiti malo više opcija za odabir paleta boja za stranicu.
ColoRotate
Alat ColoRotate omogućava vam da odaberete najprikladnije sheme boja iz velikog broja gotovih prijedloga ili kreirate vlastite. Odabirom boja na različitim mjestima na rotirajućoj 3D paleti, možete dobiti kombinacije zasnovane na harmoniji ili kontrastu, raditi sa nijansama, svjetlinom, zasićenošću i miješati različite boje. Također možete izdvojiti boje iz gotovih slika. Postoji verzija za iPad, dostupna je sinhronizacija sa Photoshopom. Vrlo lijepa usluga.
Adobe Color CC
Adobe Color CC paleta i generator šeme boja omogućava vam da:
- eksperimentirajte sa kombinacijama boja na interaktivnom kotaču boja (dostupno je 7 vrsta sistema boja);
- generirati teme boja koristeći unaprijed definirane stilove;
- kreirajte sheme boja koristeći boje s fotografije ili bilo koje druge gotove slike;
- podijelite svoj rad i upoznajte druge, crpeći inspiraciju iz njih.
Kreirane teme u boji mogu se sačuvati u aplikacijama za PC ili mobilne uređaje, kao iu odjeljku „Moje teme“ na web stranici.
DeGraeve
Web stranica DeGraeve nudi razne alate, uključujući generator sheme boja zasnovan na unaprijed napravljenim slikama. Sve što trebate učiniti je pronaći sliku na internetu sa zanimljivom shemom boja, učitati URL ove slike u odgovarajući red na web stranici i kliknuti na dugme za generisanje palete. Nakon nekoliko sekundi, program će razložiti sliku na 10 primarnih boja, 5 prigušenih (mutnih) i 5 svijetlih (živih), dodjeljujući svakoj svoj vlastiti kod. Generirana paleta je zgodna za korištenje prilikom rada na dizajnu web stranice; boje će se savršeno kombinirati jedna s drugom.
Contrast-A
Sa sloganom „Pronađi pristupačnu kombinaciju boja“, Contrast-A je dizajniran da vam pomogne da kreirate prilagođene palete dok eksperimentišete sa kombinacijama boja. Program se temelji na vodiču o kompatibilnosti boja web sadržaja (tekst i pozadina). Za rad s njim, poželjno je osnovno znanje o ovoj temi.
Usluga vam omogućava da odaberete 2 boje na paleti i procijenite kako će izgledati zajedno kada se koriste kao tekst i pozadina. Osim toga, prikazani su rezultati za normalan vid boja i različite oblike sljepoće za boje.
ColorZilla
Aplikacija ColorZilla za Firefox (dostupna i za Google Chrome) za pomoć webmasterima i grafičkim dizajnerima u radu s bojom. Biće korisno i za početnike i za napredne korisnike. Program vrši analizu boja bilo koje tačke i bilo koje stranice u pretraživaču i izdvaja boje potrebne za upotrebu u drugim aplikacijama. Definiranje palete boja stranice, odabir boja iz unaprijed postavljenog skupa, čuvanje onih koje se najčešće koriste kao dio korisničke palete - to je raspon njegovih mogućnosti.
Pictaculoous
Pictaculous je još jedan generator palete boja zasnovan na gotovim slikama. Samo trebate postaviti odabranu sliku ne veću od 500 KB na stranicu, a njena analiza boja će odmah početi. Ispod rezultata sa shemom boja slike, prikazuje se još desetak paleta, ali već ručno kreiranih od strane članova resursnih zajednica Kuler i COLOURLovers. Mogu se koristiti i kao shema boja za web stranicu koja se razvija. Rezultat možete poslati na svoju e-poštu i podijeliti ga na društvenim mrežama.
Ako znate još neke generatore paleta boja, podijelite linkove u komentarima.
Boja je jedan od najvažnijih elemenata u radu dizajnera. Ali kao koncept, može biti prilično teško savladati: zbog mnogih kombinacija paleta, često je teško odlučiti kako najbolje dizajnirati sučelje web stranica i aplikacija. Ranije smo objavili recenzije alata po izboru i . A danas želimo proširiti temu objavljivanjem prijevoda članka Essential Color Tools for UX Designers od Nicka Babicha na blogu.
Bilješka sadrži popis najboljih usluga odabira boja za web stranice i UX dizajn koji će vam pomoći da uštedite mnogo vremena. Kroz ove projekte naučit ćete:
- odakle dobiti inspiraciju;
- kako kreirati vlastitu paletu;
- kako dizajn učiniti pristupačnim osobama sa oštećenim vidom 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 nevjerovatnih stvari oko vas. Ali najbolje kombinacije boja su boje prirode. Uhvatite prekrasan trenutak i pokušajte kreirati vlastiti odabir na osnovu određene slike.
Najbolje kombinacije boja nalaze se u prirodi. Možete dobiti šemu boja sa bilo koje fotografije
Behance
U ovoj popularnoj usluzi naći ćete zanimljive radove uključene u najbolje online portfelje pravih profesionalaca u svojoj oblasti. Ova stranica je također odličan izvor inspiracije. Da vidite nove vrijedne primjere projekata, jednostavno odaberite boju koju želite.
Dribbble Colors
Dribbble je jedan od najboljih koji će vam dobro doći prilikom kreiranja korisničkog interfejsa. 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 njen minimalni postotak - eksperimentirajte, na primjer, pokušajte postaviti 30% plave.
Pokušajte postaviti minimalni postotak određene boje u Dribbbleu
Dizajn inspiracija
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 Designspiration ćete pronaći različite primjere kombinacija boja
Tineye Multicolr
Koristeći Tineye Multicolr uslugu usklađivanja boja, možete odrediti željenu gamu slike, pa čak i postaviti postotak svake od njih (omjer). Sajt je integrisan sa bazom podataka od 20 miliona Creative Commons fotografija sa Flickr-a. Ovo je definitivno jedan od najbržih načina da pronađete savršenu paletu.
Colorzilla
ColorZilla je ekstenzija za instalaciju u preglednike Chrome i Mozilla Firefox. Uključuje alate kao što su kapaljke, pregledavanje paleta, kreiranje i još mnogo toga.
ColorZilla ekstenzija dostupna u Chromeu i Firefoxu
Shutterstock Spectrum
Jedan od najboljih načina da zamislite kako će izgledati shema boja je da pogledate odgovarajuće slike. Većina rješenja koja nude izbor boja za dizajn web stranica uključuju ovu funkciju, ali Shutterstock Spectrum ima nevjerovatno korisničko sučelje i pregled koji zaista može biti koristan.
Štaviše, neće vam trebati pretplata, jer će preliminarna procjena slike biti sasvim dovoljna (iako ima „vodeni žig“).
W3Schools
Nedavno je blog pregledao izbor iz W3Schools. Tamo je prikupljeno mnogo informacija o ovoj temi, počevši od njihovih naziva/šifra nijansi, teorije kombinovanja paleta i završavajući opisom različitih formata: HEX, RGB, CMYK, HWB, itd. Naći ćete i jednostavne generatori, pretvarači i slične „mini-usluge“. Sve u svemu, zanimljivo za gledati.
2. Kreirajte paletu boja
Alat za boje dizajna materijala
Alat za boje materijala dizajna vam omogućava da kreirate, dijelite sheme boja i pregledate grubo korisničko sučelje za svoje odabire. Jedna od njegovih korisnih funkcija je mjerenje nivoa pristupačnosti bilo koje kombinacije boja.
Coolors
Coolors je stranica za kreiranje višebojne palete. Samo zakačite određenu boju i pritisnite razmaknicu. Alat je također dobar jer ćete dobiti više od jednog rezultata, ali možete generirati nekoliko opcija mijenjajući samo početne podatke.
Šema boja u Coolorsu zasnovana na fotografiji
Adobe Color CC
Usluga usklađivanja boja Adobe Color CC (bivši Kuler) je sada prilično popularna. Dostupan je besplatno na internetu, ali postoji i desektorska verzija. Pomoću ove web aplikacije napravit ćete vlastitu paletu koristeći kotačić boja:
Ili možete dobiti određeni rezultat iz gotove slike:
Odabir boja za web stranicu na osnovu slike
Ovdje postoje stotine gotovih kombinacija, potražite ih u odjeljku "Pogledajte":
Ako koristite desktop verziju, možete jednim klikom izvesti sistem boja koji ste kreirali u InDesign, Photoshop i Illustrator.
Paletton
Često se uspoređuje sa prethodnim Adobe Color CC jer su dizajni vrlo slični. Jedina razlika je u tome što u Palettonu niste ograničeni na pet parametara, već možete eksperimentirati s dodatnim tonovima interfejsa.
Dodatno, možete pogledati. Zajedno s drugima, aplikacija vam omogućava da radite bilo gdje, jednostavno koristeći svoj pametni telefon. Pored direktnih zadataka kreiranja/izvoza paleta boja, ovdje možete odabrati određene boje sa slika ili koristiti osnovne opcije.
3. Učiniti paletu dostupnom
Danas su poremećaji vida boja mnogo češći nego što mislimo. Oko 285 miliona ljudi u svijetu ima probleme s vidom. Uvijek treba provjeriti da li je onaj koji odaberete dostupan takvim korisnicima.
WebAIM Color Contrast Checker
Neki tonovi se dobro slažu jedni s drugima, dok su drugi sasvim suprotni. Ogroman broj projekata pada na A/A testu, i to je činjenica. Vrlo je važno provjeriti vizualni dizajn interfejsa i kontrast tonova, posebno ako na stranici ima puno teksta. U ove svrhe koristite pri odabiru boja web stranice.
WebAIM Color Contrast Checker je web-bazirani alat koji provjerava kodove boja u heksadecimalnim vrijednostima.
Coolors
Ovu uslugu smo već spomenuli gore. Između ostalog, Coolors će vam pomoći da provjerite da li imate sljepoću za boje u vašoj izmišljenoj paleti.
Vrsta sljepoće za boje na dijagramu
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 sa protanomalijom vidi paletu
NoCoffee Vision Simulator za Chrome
Koristeći web stranicu NoCoffee Vision Simulator, možete vidjeti kako će osobe s daltonizmom ili slabovidom percipirati određene web stranice. Na primjer, ako navedete parametar "Achromatopsia" u odjeljku "Nedostatak boje", vidjet ćete web stranicu u sivoj boji.
Ovako izgleda CNN projekat za osobu sa deuteranopijom.
Zaključak
Sve usluge usklađivanja boja web stranice i UX dizajna spomenute u članku zasigurno će vam pomoći u potrazi za zanimljivom i učinkovitom paletom. Ali zapamtite: najbolji način da naučite kako da kreirate neverovatne palete je mnogo vežbanje i eksperimentisanje.
Boje igraju veliku ulogu u web dizajnu. Da biste pravilno odabrali shemu boja za web stranicu, postoje posebne usluge. Siguran sam da svaki web dizajner ima barem jedan od ovih u svojim oznakama.
Ponekad sjedite i razmišljate koju nijansu plave odabrati kao glavnu za stranicu, malo svjetliju ili malo svjetliju, ili možda tamniju... I još trebate odabrati dodatne za to. To, naravno, možete učiniti na oko, ali bolje je koristiti neku od posebnih usluga.
Neću govoriti o teoriji boja (ovo je preobimna informacija), već ću jednostavno ovdje objaviti usluge koje imam u svojim bookmarkovima i koje koristim.
Prijatelj sam sa ovim instrumentom dugi niz godina. Najprikladniji alat za odabir boja (po mom mišljenju). Ima mnogo dodatnih funkcija. 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 web sigurne boje.
Adobe Kuler je drugi web alat koji često koristim. Izbor shema boja je skoro isti kao i na prethodnoj stranici, ali to nije razlog zašto mi se sviđa. Osim što sami kreirate sheme boja, možete pogledati i koristiti sheme koje su kreirali drugi ljudi.
Da biste to uradili, kliknite na dugme u gornjem levom meniju „Gledanje“. I pred vama će se otvoriti galerija svih vrsta kombinacija boja.
Ovaj alat je malo sličan Colorschemeu, ali ima manje funkcija, ali možete vidjeti kako će blokovi boja izgledati.
Praktično ne koristim ovu stranicu, ali pošto je imam u svojim bookmarkovima, odlučio sam da i nju dodam.
Sljedeće dvije stranice generiraju paletu od slike koju odaberete. magija je :)
Vi odaberete bilo koju sliku čije boje volite, servis je analizira i daje vam paletu boja. Jedina razlika između ove dvije stranice je način na koji pružaju sliku.
Ova stranica zahtijeva skinuti sliku sa vašeg računara.
Vrlo zgodan alat za odabir boja. Zasnovano na principu “Sviđa mi se – Ne sviđa mi se”.
Kao što ime govori, ovdje možete odabrati boje za sada moderan flat dizajn. Stranica je zanimljiva jer kada odaberete paletu, možete je preuzeti za Corel i Photoshop.
Drugi modni trend je dizajn materijala. Ova stranica vam pomaže da odaberete kombinacije boja za korisničko sučelje (korisnički interfejs). Osim toga, stranica ima veliki skup ikona.
I konačno, ponovo korisničko sučelje. Evo samo skupa 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 obeleživačima.
Napišite u komentarima koje stranice za odabir boja za web dizajn koristite?
Boja se široko koristi u dizajnu - omogućava vam da "oživite" sadržaj - stvorite semantičku vezu između elemenata, ispunite rad emocijama i raspoloženjem. Dizajneri početnici biraju nasumične boje, ali postoje načini da se boje koriste na smislenije načine. Razmotrimo 4 takve metode, organizirane po principu od jednostavnog do složenog.
1. Koristite poznatu skalu
Web stranica brandcolors.net sadrži više od 500 kombinacija boja poznatih brendova. Yandex, Google, Burger King koriste istu paletu u svim svojim proizvodima. Ovi brendovi i njihove boje poznati su i vole mnogi. Unesite naziv u traku za pretragu ili skrolujte kroz stranicu, kliknite na željenu marku i boju: njen kod će biti kopiran u međuspremnik.
2. Odaberite gotovu profesionalnu paletu
Najlakši način je da uzmete gotovu kombinaciju boja. Nije potrebno svaki put iznova izmišljati točak, jer su harmonične kombinacije poznate odavno. Idite na colordrop.io i odaberite. Na sajtu postoje stotine profesionalnih paleta u 4 boje. Nakon što odaberete onu koju želite, kliknite i kopirajte kodove boja s panela koji se otvara s desne strane.
Osim toga, usluga sadrži gotov izbor od 24 boje ravnog dizajna. Kliknite na lijevo ispod naziva "Flat Colors" i uzmite kod za nijansu koja vam se sviđa.
3. Odredite paletu boja fotografije ili slike koja vam se sviđa
Ova metoda je malo složenija. Ali i efikasnije.
- Na web stranici coolors.co, u gornjem lijevom panelu, pronađite ikonu kamere i kliknite na nju. Otvoriće se prozor za učitavanje slike.
- Možete odabrati fotografiju ili sliku sa šemom boja koja vam se sviđa sa svog računara ili kopirati vezu u praznu kolonu.
- Usluga će odrediti kombinaciju boja (ispod učitane slike).
- Pojedinačne boje ove palete možete promijeniti tako što ćete ih označiti i odabrati tačku na fotografiji sa koje želite uzeti boju.
- Dugme “Kolaž” pohranjuje rezultirajuću paletu sa kodovima boja na računar.
- Dugme “Auto” generiše nove kombinacije na osnovu iste fotografije.
- Kliknite "U redu" i idite na glavnu stranicu stranice za daljnji rad s paletom.
Glavna stranica stranice nije ništa manje funkcionalna. Ovdje možete odabrati nijanse pojedinačnih boja ili sastaviti novu paletu zamjenom pojedinačnih boja.
4. Kreirajte vlastitu shemu boja na mreži
Učitavanjem fotografije na istu web stranicu coolors.co, ne samo da možete odrediti kod boja, već i kreirati vlastite kombinacije. Da biste to učinili, pritisnite razmaknicu - usluga automatski kreira kombinaciju od 5 boja.
Na svakoj boji 4 dugmeta sa ikonama:
- Alternativne nijanse - Nijanse boja (tamnije i svjetlije),
- Povucite (pomaknite boju udesno ili ulijevo u paleti),
- Prilagodite (podesite nijansu, zasićenost, svjetlinu, itd.),
- Zaključavanje (fiksna boja).
Odabir sheme boja za web stranicu jedna je od važnih tačaka u procesu dizajna. Odabir kombinacije boja prilično je složen i kreativan proces. Srećom, postoji mnogo usluga koje mogu pružiti značajnu podršku pri donošenju pravog izbora.
Neki od resursa spomenutih u ovoj recenziji pružaju mogućnost izbora između velikog broja gotovih shema boja, dok vam drugi omogućavaju da interaktivno izgradite vlastitu shemu.
Cooler
Adobe Kuler sadrži veliku biblioteku gotovih shema boja. Možete pogledati dijagram na mreži i preuzeti ga za upotrebu u Adobe Creative Suite proizvodima.
Color Lovers trenutno ima skoro 2 miliona šema boja koje su kreirali korisnici. Možete ih pregledati sortiranjem po datumu, ocjeni, broju pregleda.
ColoRotate ima biblioteku gotovih shema boja. Također možete kreirati vlastiti dijagram koristeći jedinstveni 3D alat. Šema boja se može koristiti direktno u Photoshopu i Fireworks pomoću dodatka ColoRotate.
Color Scheme Designer vam omogućava da odaberete vrstu sheme boja (mono, komplementarna, trijada, tetrada, analogna). Zatim možete podesiti boje i vidjeti učinak sheme koristeći primjer.
ColorSchemer ima veliku biblioteku šema boja koje kreiraju 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 koji će se koristiti sa slikom.
Boja Spire
Color Spire je usluga vrlo jednostavna za korištenje. Odaberete osnovnu boju i ona predlaže shemu boja. Također možete vidjeti izgled dijagrama na jednostavnom predlošku.