Generatori paleta za pomoć web dizajneru. Generatori paleta za pomoć web dizajnerima Program za odabir boja kotača boja

Boja je jedna od najvažnijih važnih 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 dostupnim 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 (čak i uprkos činjenici da na njoj postoji „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

Material Design Color Tool

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 od 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 jedan s drugim, 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 će vam zasigurno pomoći da pronađete zanimljivu i učinkovitu paletu. Ali zapamtite: Najbolji način naučite kako da kreirate neverovatne palete - mnogo vežbajte i eksperimentišite.

Mali, moderan i uredan program za odabir boja za dizajniranje HTML stranica i druge zadatke koji zahtijevaju odabir odgovarajućih boja.

Hajde da vidimo šta ovaj program može.

Podešavanje tačke boje

Pošto program ne zahtijeva instalaciju, arhivu jednostavno spremamo u HDD, raspakujte ga na pogodno mesto, otvorite fasciklu i pokrenite datoteku sa ekstenzijom exe. Program se podrazumevano pokreće kao malo dugme:

Rad sa programom

Kliknite na ovu ikonu i pred nama se otvara prozor programa:

Ekran

U ovoj kartici, program vam omogućava da "preuzimate" bilo koju boju direktno sa ekrana. Odnosno, sa bilo kojeg dijela ekrana koji je bio vidljiv u vrijeme pokretanja programa. Cijeli ekran je prikazan u smanjenoj veličini u prozoru Select Site.

Ako kliknete na bilo koji dio u ovom prozoru, on će se pojaviti u sljedećem manjem prozoru “Odaberi boju”. Ovdje možete preciznije ciljati i uzeti boju sa određene tačke.

Takođe sa desne strane ovog prozora nalaze se pomoćna dugmad za kopiranje u međuspremnik, a na dnu se nalaze tasteri „Osveži“ (ažurira sadržaj ekrana) i „Primeni“ (čuva izabranu boju i prebacuje prozor na „ Odabir” kartica).

Odabir

Evo glavnih alata za prikladan odabir boja: „Pločica“, „Krug“, „Web“ i „Pobjeda“, koji se mijenjaju pomoću dodatnih kartica.

Rad sa ovim alatima nije težak. Samo usmjerite miša na boju koja vam se sviđa, podesite je RGB klizačima (ili HSV - ako vam je ovaj format bliži) i vidite da li vam odgovara ili ne.

Ako vam se sviđa odabrana boja, možete kopirati njen kod iz reda „Predstavljanje teksta“. Osim toga, kod se također može odabrati u bilo kojem od standardnih formata klikom na malu strelicu za proširenje liste.

Takođe, obratite pažnju na treću kutiju u boji u gornjem desnom uglu. Pored odabrane boje (vertikalna traka), prikazuje još tri boje koje se dobro slažu s odabranom.

Tako program odmah predlaže nekoliko odgovarajućih boja koje se mogu koristiti u drugim elementima dizajniranog dizajna.

Program ima dosta različitih pomoćnih dugmadi. Da biste saznali njihovu svrhu, samo postavite pokazivač miša preko njih i pročitajte savjete koji se pojavljuju na samom dnu prozora programa.

Postavke

Ovdje možete podesiti neke parametre kao što su tip i veličina fonta i neka kozmetička svojstva programa. Biće praktičnije raditi s programom ako poništite okvire "Otvori na kartici "Ekran"" i "Pokreni u režimu mini prozora".

O programu

U 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 mane programa

mnogi dostupni različiti instrumenti za odabir boje (krug, pločica, itd.);
omogućava vam da jednostavno uporedite boje pomeranjem prozora programa blizu drugih elemenata ekrana;
Postoje savjeti za sva dugmad.

malo lukav interfejs;
pokretanje u minimiziranom obliku i na kartici "Ekran" nije baš zgodno (iako to možete onemogućiti u postavkama);
Neće se svima svidjeti boja prozora programa.

zaključci

Program je prilično moćan za besplatan, pruža gotovo sve što vam je potrebno za praktičan odabir boja prilikom kreiranja dizajna web stranice. Postoje neki manji nedostaci poput boje prozora programa (jorgovan je stečeni ukus), ali oni ne ometaju rad s njim.

P.S. Dozvoljava se slobodno kopiranje i citiranje ovog članka, pod uslovom da se navede otvoreni aktivni link na izvor i da se sačuva autorstvo Ruslana Bogdanova.

P.P.S. Ako vam se program čini komplikovanim, postoje jednostavnije opcije:

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 se nalaze 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 je jedan od važne tačke u procesu projektovanja. Odabir kombinacije boja prilično je složen i kreativan proces. Srećom, postoji mnogo usluga koje mogu pružiti značajnu podršku za pravi izbor.

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 po 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 dijagrami na jednostavnom šablonu.

Svaki web dizajner razumije koliko je važno. Uz pomoć boje stavljaju se akcenti - naglašavaju se važni detalji, a skrivaju pomoćni. Boja stvara raspoloženje. Boja je prva stvar koju posjetitelj web stranice vidi, čak i prije nego što pročita jedno slovo ili shvati šta je prikazano na određenoj fotografiji. Paleta boja Vaša stranica može odgoditi posjetitelja ili ga može uplašiti.

Odabir prave palete boja- prvi korak ka izgradnji idealne i besprijekorne web stranice. Boja svakog elementa stranice treba da bude u skladu ne samo sa vizuelno povezanim elementima, već i sa celokupnom šemom boja stranice i sajta u celini.

Kako ne bismo pogriješili na početku putovanja, pripremili smo mali pregled generatora sheme boja, što vam omogućava da odaberete pravi broj i kombinaciju primarnih boja koje ćete koristiti prilikom izrade vaše stranice. Neki od njih su prilično jednostavni i imaju standardnu funkcionalnost, dok drugi imaju niz jedinstvenih funkcija. Ali svi će oni nesumnjivo pružiti neprocjenjivu pomoć u razvoju jedinstvenog dizajna web stranice.

Adobe Color CC

Adobe Color CC- svojevrsni standard za takve aplikacije koji dozvoljava kreirajte različite sheme boja koristeći za ovo krug boja. Dizajner će također imati direktan pristup zajednici. Adobe Cooler, gde možete izabrati hiljade različitih boja.

Paletton

Jedan od najstarijih (koji radi od 2002. godine) u našoj recenziji alati za kreiranje kombinacija boja i rješenja boja.

Stiliziraj me

Istražuje web lokaciju navedenu u traci za pretraživanje i daje izvještaj o kombinacijama boja koje se koriste u njemu, fontove, veličine slika itd. To će omogućiti dizajneru da izgradi vlastita rješenja, koristeći web lokaciju koja mu se sviđa kao osnovu.

Coolors

Dozvoljava stvoriti osnovnu kombinaciju boja, a zatim fino podesite rezultirajuću paletu po svom ukusu i sačuvajte je u različitim formatima - SVG, PDF ili SCSS.