Izgradnja okvira palete boja

Kako odrediti okvir boja tijekom izgradnje palete boja za vašu marku

Boja je jedan od najvažnijih elemenata u jeziku dizajna marke / proizvoda. Naši su mozgovi programirani da odbacuju i poticajne i poticajne informacije, tako da je vrlo važno stvoriti paletu boja koja pruža vizualni interes i osjećaj reda.

Vjerujem da je izgradnja definiranog skupa sustava / pravila važna kada počnete nešto dizajnirati. Boje su podskup robne marke DLS (Design Language System), a jedno je od glavnih područja gdje dizajneri propuštaju izgraditi definirani skup pravila za upotrebu boja.

"Dizajnerski sustavi pružaju prikladnu, centraliziranu i evoluirajuću kartu poznatih proizvoda marke s usmjerenim pokazivačima koji vam pomažu u istraživanju novih regija." ~ Chris Messina, bivši Uber

U ovom ćemo članku raspravljati o nekim tehnikama za definiranje skupa pravila za generiranje varijacija u boji, koje se mogu proširiti na širi spektar upotrebe i koje će se u budućnosti moći primijeniti na bilo koju paletu marki. Možete odabrati bilo koju od ovih tehnika ili ih kombinirati kako biste stvorili svoju vlastitu.

Započnimo

Slijedi popis nekoliko svojstava boja za koja ćemo u potpunosti iskoristiti za stvaranje varijacija u boji:

  • Hue je boja (plava, zelena, crvena itd.).
  • Kroma je čistoća boje (visoka boja ne sadrži crnu, bijelu ili sivu boju).
  • Zasićenje je količina određenog nijansi (niža saturacija manje nijansi i bliža bijeloj).
  • Svjetlina / vrijednost odnosi se na to koliko je svijetla ili tamna boja (tamna ima malu svjetlinu / vrijednost).
  • Neprozirnost se odnosi na to koliko je boja prozirna ili neprozirna (velika prozirnost s niskom neprozirnošću).
  • Tonovi se stvaraju dodavanjem sive boje, što je čini podatnijom od originala.
  • Nijanse su stvorene dodavanjem crne boje, čineći je tamnijom od originala.
  • Nijanse se stvaraju dodavanjem bijele boje, čineći je svjetlijom od originala.
Sažetak svojstava boje. Koristit ćemo kombinaciju ovih svojstava za generiranje varijacija boja. Preuzmite verziju ispisaOkvirna rešetka s 10 bodova za razumijevanje svojstava boja

Okvirna mreža

Gornji graf prikazuje odnos svjetline, neprozirnosti, nijansi, tonova, nijansi i boje za određenu nijansu. Ovaj je graf građen pomoću skali od 10 točaka. Što to znači, Neprozirnost boje varira za 10% po X-osi, a Svjetlina se razlikuje za 10% po osi Y.

Koristit ćemo pojednostavljenu verziju gornjeg grafikona, pomoću skale od 25 točaka za izradu naše osnovne okvirne mreže. Ova mreža će poslužiti kao naše igralište s više mogućnosti generiranja boja.

Sketch App used koristio sam za izradu okvirne rešetke, ali jedan je može stvoriti i u ostalim dizajnerskim alatima poput Photoshop / Illustrator / Figma / Gimp / itd. Koristit ćemo popularni sustav HSB boja u cijelom svijetu.

️ Pogledajte donju sliku dok slijedite korake u nastavku:

Korak 1. Odaberite baznu nijansu. Napravite kvadrat veličine 50 x 50 px pomoću ove nijanse. Evo, na primjer, odabrao sam plavu nijansu (H 212, S 67, B 89).

Korak 2. Napravite bijelu kvadratnu pločicu veličine 10 x 10 px (H 0, S 0, B 100).

Korak 3. Umnožite ove bijele pločice (5 redaka, 5 stupaca) tako da pokrivaju cijeli osnovni kvadrat koraka 1.

Korak 4. Smanjite neprozirnost svakog stupca bijelih pločica za 25% s lijeva na desno.

Korak 5. Smanjite svjetlinu svakog reda bijelih pločica za 25% od vrha do dna.

Evo datoteke Sketch za gore navedene korake

Dakle, sada imate osnovnu mrežnu mrežu. Ako ste pravilno slijedili korake, imat ćete mrežicu boja sličnu onoj prikazanoj na slici gore u koraku 5. Koristit ćemo ovu okvirnu mrežu kako bismo naučili neke metode generiranja novih boja.

Da bih bolje vizualizirao varijacije boja, koristio sam još 3 osnovne nijanse kao primjere u donjim metodama. Očito možete odabrati svoje boje.

1. Metoda nijansiranja nijansi

Preuzmite datoteku Sketch

Ova se metoda najčešće koristi, zbog svoje jednostavnosti. Razni osnovni okvir koji ste stvorili gore generiran je ovom metodom. Neprozirnost i svjetlina bijelih pločica iznad vašeg osnovnog nijansi, kreću se od 100% do 0% (slijeva udesno) i 0% do 100% (odozdo prema gore).

Tema boja na desnoj strani stvorena je korištenjem naše 3 osnovne nijanse (gore spomenute) i odabirom vrijednosti neprozirnosti i svjetline iz središnjeg stupca na lijevoj strani (označeno strelicom).

2. Način miješanja slojeva

Preuzmite datoteku Sketch

U ovoj metodi koristimo isti osnovni okvir i mijenjamo način Blending bijelih pločica u Overlay. To stvara prekrasnu razliku u nijansi preko mreže.

3. Mekani način miješanja svjetlosti

Preuzmite datoteku Sketch

Slično kao # 2 način miješanja preklapanja, ovdje mijenjamo način miješanja bijelih pločica u Soft-Light. To stvara prekrasnu razliku u zasićenosti po mreži. Zatim odabiremo sve ove bijele pločice i dvaput ih dupliciramo. To stvara jaču razliku u zasićenosti, a samim tim i bolju živost boja.

4. Metoda blendiranja hladnim bojama u boji

Preuzmite datoteku Sketch

Ova metoda koristi okvir rešetke koji smo stvorili u metodi miješanja preklapanja # 2. Tada biramo bilo koju Cool boju (na primjer plavu). Napravite pravokutnik ove boje i stavite ga na cijelu mrežu. Promijenite svoj način miješanja u Prekrivanje. Rezultirajuća mreža u boji daje joj živopisan efekt.

5. Metoda miješanja prekrivanja toplom bojom

Preuzmite datoteku Sketch

Vrlo je slična # 4 Cool Color način miješanja slojeva, ovdje umjesto toga odabiremo bilo koju toplu boju (na primjer, narančastu). Napravite pravokutnik ove boje i stavite ga na cijelu mrežu. Promijenite svoj način miješanja u Prekrivanje. Rezultirajuća mreža u boji ima dramatično topao učinak.

6. Metoda podešavanja svjetline

Preuzmite datoteku Sketch

Ova se metoda malo razlikuje i olakšava od gore spomenutih metoda. Bijele pločice iznad baze Hue nisu prisutne u ovoj mreži. Umjesto toga, stvaramo pločice osnovne boje (kao što je prikazano na slici dolje) i stvaramo raspon boja svijetlo i tamno tako što povećavamo i smanjujemo njezinu vrijednost svjetline.

Tema boja s desne strane stvorena je pomoću 3 bazne nijanse, a zatim jednostavno povećavanje i smanjivanje vrijednosti svjetline kako bi se stvorile varijacije svjetlosti i tamne boje.

7. Metoda podešavanja svjetline i zasićenosti

Preuzmite datoteku Sketch

Ova metoda koristi istu mrežu metode # 6 Tweak Brightness Tweak. Ovdje podešavamo vrijednosti zasićenja uz vrijednosti svjetline. Stvaramo raspon boja svijetlo i tamno povećavajući i smanjujući vrijednost njegove svjetline, istovremeno smanjujući i povećavajući vrijednosti zasićenosti.

Pravilo 1: Svjetlije promjene boje = niža zasićenost + veća svjetlina.

Pravilo 2: Tamnija varijacija boje = veća zasićenost + niža svjetlina.

Primjer hibrida

Preuzmite datoteku Sketch

Evo hibridnog primjera koji kombinira metodu # 1, # 3, # 4 i # 5 za generiranje prekrasne palete boja. Na ovo me potaknuo jedan od članaka o Sketch Tricks kako brzo izgraditi sustav boja u aplikaciji Sketch.

Zaključak

Sve se odnosi na korištenje alata i korištenje osnova elemenata dizajna. Kombinacija različitih elemenata / tehnika često otvara vrata beskonačnim mogućnostima.

Postoji još više metoda za generiranje tema u boji. Kao što vidite, stvaranje osnovnog okvira mreže bilo je najvažniji dio. Rešetka je poslužila kao igralište za vašu maštu za stvaranje sustava boja. Možete kombinirati više metoda kako biste stvorili potpuno novi set boja iz vašeg osnovnog nijansi. (isprobajte Gradients umjesto čvrste baze Hue ).

Možete koristiti i metodu podešavanja slojeva Justina Mezzela za izradu Vintage boja.

Uskoro ću pisati o još jednoj zanimljivoj (i složenoj) metodi generiranja skupa tema u boji, koristeći Gaussovu funkciju distribucije. Zahvaljujem Nishantu na tvitu koji mi je dao inspiraciju da se pozabavim ovom metodom. Možete me pratiti da biste ostali ažurirani.

O meni

Pozdrav, ja sam Rahul Chakraborty, stvaram iskustva i izrađujem rješenja na najvećoj indijskoj platformi za e-trgovinu, Flipkart.

Redovno objavljujem dizajn i tehnologiju vezane za dizajn i rad u tijeku na Dribbbleu. Drugu stranu mene možete pronaći na Instagramu.

Konačno, nakon dužeg odlaganja, ovo je moj prvi članak o Medijumu. Povratne informacije su nam dobrodošle. Ako vam se nešto svidjelo ili ste saznali nakon što ste pročitali ovo, preporučite ga drugima. (Claps se penje na 50 )

Hvala na čitanju!

Twitter
Dribbleb
Instagram