Väripalettikehyksen rakentaminen

Kuinka määritellä värikehys rakentaessasi tuotemerkkisi värivalikoimaa

Väri on yksi tärkeimmistä osista brändin / tuotteen suunnittelukielessä. Aivumme on ohjelmoitu hylkäämään sekä alimmaisen että ylimääräisen stimuloivan tiedon, joten on erittäin tärkeää luoda väripaletti, joka tarjoaa sekä visuaalisen mielenkiinnon että järjestyksen tunteen.

Uskon, että määritellyn järjestelmän / sääntöjen rakentaminen on tärkeää, kun aloitat suunnitella jotain. Värit ovat osa tuotemerkin DLS: tä (Design Language System), ja se on yksi tärkeimmistä alueista, joilla suunnittelijat unohtavat rakentaa määritellyn värisäntöjä koskevan säännön.

"Suunnittelujärjestelmät tarjoavat kätevän, keskitetyn ja kehittyvän kartan brändin tunnetuista tuotealueista suuntaviivoilla, jotka auttavat sinua tutkimaan uusia alueita." ~ Chris Messina, entinen Uber

Tässä artikkelissa käsittelemme joitain tekniikoita määritelläksesi joukon sääntöjä värivaihtoehtojen tuottamiseksi, jotka voidaan skaalata laajemmalle käyttöalueelle ja joita voidaan tulevaisuudessa soveltaa kaikkiin tuotemerkkivalikoimiin. Voit valita minkä tahansa näistä tekniikoista tai yhdistää ne luodaksesi oman.

Aloitetaan

Tässä on luettelo harvoista väriominaisuuksista, joita hyödynnämme täydessä potentiaalissaan luoda värimuunnelmia:

  • Sävy on väriä (sininen, vihreä, punainen jne.).
  • Kroma on värin puhtaus (korkeaan kromiin ei ole lisätty mustaa, valkoista tai harmaata).
  • Kylläisyys tarkoittaa sitä, kuinka paljon tietystä värisävystä on läsnä (alempi kylläisyys, jolla on vähemmän sävyä, ja lähempänä valkoista).
  • Kirkkaus / arvo viittaa siihen, kuinka vaalea tai tumma väri on (tummalla, jonka vaaleus / arvo on alhainen).
  • Peittävyys tarkoittaa, kuinka läpinäkyvä tai läpinäkymätön väri on (suuri läpinäkyvyys, alhainen opasiteetti).
  • Äänet luodaan lisäämällä väriin harmaata, mikä tekee siitä himmeämmän kuin alkuperäinen.
  • Varjostimet luodaan lisäämällä väri mustana, mikä tekee siitä tummemman kuin alkuperäinen.
  • Värisävyt luodaan lisäämällä väriin valkoista, mikä tekee siitä kevyemmän kuin alkuperäinen.
Yhteenveto väriominaisuuksista. Käytämme näiden ominaisuuksien yhdistelmää värivariaatioiden luomiseen. Lataa painettu versio10-pisteinen asteikkokehys värien ominaisuuksien ymmärtämiseksi

Kehysverkko

Yllä oleva kaavio näyttää kirkkauden, opasiteetin, sävyjen, sävyjen, sävyjen ja kroman suhteen tietyssä sävyssä. Tämä kuvaaja on rakennettu käyttämällä 10-pisteistä asteikkoa. Mitä se tarkoittaa, värin opasiteetti vaihtelee 10% X-akselilla ja kirkkaus vaihtelee 10% Y-akselin välillä.

Käytämme yllä olevan kaavion yksinkertaistettua versiota käyttämällä 25-pisteistä asteikkoa peruskehyksen ruudukon rakentamiseksi. Tämä ruudukko toimii leikkipaikkana, jolla on useita mahdollisuuksia tuottaa värejä.

Olen luonut Sketch App -kehyksen ruudukkoon, mutta saman voi luoda myös muissa suunnittelutyökaluissa, kuten Photoshop / Illustrator / Figma / Gimp / etc. Käytämme suosittua HSB-värijärjestelmää kaikkialla.

️ Katso alla olevaa kuvaa, kun noudatat alla olevia vaiheita:

Vaihe 1. Valitse perus sävy. Luo 50 x 50 px neliö tällä sävyllä. Tässä valitsin esimerkiksi sinisen sävyn (H 212, S 67, B 89).

Vaihe 2. Luo 10 x 10 px: n valkoinen neliölaatta (H 0, S 0, B 100).

Vaihe 3. Kopioi nämä valkoiset laatat (5 riviä, 5 saraketta) siten, että se peittää vaiheen 1 koko perusneliön.

Vaihe 4. Vähennä kunkin valkoisten laattojen kolonnin opasiteettia 25% vasemmalta oikealle.

Vaihe 5. Vähennä valkoisten laattojen kunkin rivin kirkkautta 25% ylhäältä alas.

Tässä on yllä mainittujen vaiheiden luonnos

Joten nyt sinulla on Base Framework Grid. Jos olet noudattanut vaiheita oikein, sinulla on väriristikko, joka on samanlainen kuin yllä olevassa kuvassa, vaiheessa 5. Käytämme tätä kehystaulukkoa oppiaksemme joitain menetelmiä uusien värien luomiseksi.

Värivaihtoehtojen paremmin visualisoimiseksi käytin alla olevissa menetelmissä esimerkkinä vielä 3 perusväriä. Voit tietysti valita omat värit.

1. Värisävy-varjostusmenetelmä

Lataa luonnos tiedosto

Tätä menetelmää käytetään sen yksinkertaisuuden vuoksi yleisimmin. Edellä luomasi peruskehyksen ruudukko luotiin tällä menetelmällä. Pohjasävyn yläpuolella olevien valkoisten laattojen opasiteetti ja kirkkaus ovat 100% - 0% (vasemmalta oikealle) ja 0% - 100% (alhaalta ylöspäin).

Oikealla puolella oleva Väriteema luotiin käyttämällä 3 perusväriasetamme (mainitut yllä) ja valitsemalla Opacity & Brightness -arvot vasemman reunan keskisarakkeesta (osoitettu nuolella).

2. Päällekkäinen sekoitusmenetelmä

Lataa luonnos tiedosto

Tässä menetelmässä käytämme samaa peruskehystä ja muutamme valkoisten laattojen sekoitustilan asetukseksi Peittokuva. Tämä luo kauniit sävyerot ruudukossa.

3. Pehmeä kevyt sekoitusmenetelmä

Lataa luonnos tiedosto

Samanlainen kuin # 2 Overlay Blending -menetelmä, tässä vaihdetaan tässä valkoisten laattojen sekoitustilaksi Soft-Light. Tämä luo kauniin kylläisyyden eron verkkoon. Valitsemme sitten kaikki nämä valkoiset laatat ja kopioimme ne kahdesti. Tämä luo voimakkaamman kylläisyyden eron ja siten paremman värin kirkkauden.

4. Viileä väripeittoaineiden sekoitusmenetelmä

Lataa luonnos tiedosto

Tämä menetelmä käyttää ruudukkokehystä, jonka loimme kohdassa # 2 Overlay Blending -menetelmä. Sitten valitsemme minkä tahansa viileän värin (esimerkiksi sininen). Luo tästä väristä suorakulmio ja aseta se koko ruudukkoon. Vaihda sen sekoitustila tilaan Peitto. Tuloksena olevalla väriristikolla on eloisa viileä vaikutus siihen.

5. Lämmin väripeittoaineiden sekoitusmenetelmä

Lataa luonnos tiedosto

Hyvin samanlainen kuin # 4 viileä väripeittoaineiden sekoitusmenetelmä, tässä valitsemme sen sijaan minkä tahansa lämpimän värin (esimerkiksi oranssi). Luo tästä väristä suorakulmio ja aseta se koko ruudukkoon. Vaihda sen sekoitustila tilaan Peitto. Tuloksena olevalla väriristikolla on dramaattinen lämmin vaikutus siihen.

6. Kirkkauden säätömenetelmä

Lataa luonnos tiedosto

Tämä menetelmä on hiukan erilainen ja helpompi kuin edellä mainitut menetelmät. Perusvärin yläpuolella olevia valkoisia laattoja ei ole tässä ruudukossa. Sen sijaan luomme perusvärien laattoja (kuten alla olevassa kuvassa), ja luomme vaaleiden ja tummien värien alueen lisäämällä ja vähentämällä sen kirkkausarvoa.

Oikealla puolella oleva Väriteema luotiin käyttämällä kolmea perusväristä ja lisäämällä ja vähentämällä sitten Kirkkaus-arvoja luomalla vastaavasti vaaleat ja tummat variaatiot.

7. Kirkkaus + kylläisyyden säätömenetelmä

Lataa luonnos tiedosto

Tämä menetelmä käyttää samaa ruudukkoa # 6 Brightness Tweak -menetelmästä. Tässä säädetään kylläisyysarvoja kirkkausarvojen rinnalla. Luomme vaaleiden ja tummien värivalikoiman lisäämällä & vähentämällä sen kirkkausarvoa ja samanaikaisesti vähentämällä & lisäämällä kylläisyysarvoja.

Sääntö 1: Kevyempi värivaihtoehto = alempi kylläisyys + suurempi kirkkaus.

Sääntö 2: Tummempi värivaihtoehto = Korkeampi kylläisyys + pienempi kirkkaus.

Hybridi-esimerkki

Lataa luonnos tiedosto

Tässä on hybridi-esimerkki, jossa yhdistyvät menetelmä # 1, # 3, # 4 ja # 5 kauniin värivalikoiman tuottamiseksi. Tämän inspiroi yksi Sketch Tricks -artikkeli värijärjestelmän rakentamisesta nopeasti Sketch App -sovelluksessa.

johtopäätös

Kyse on työkalujen käyttämisestä ja suunnitteluselementtien perusteiden hyödyntämisestä. Eri elementtien / tekniikoiden yhdistäminen avaa usein oven rajattomiin mahdollisuuksiin.

Väriteemojen luomiseen on vielä enemmän menetelmiä. Kuten näette, peruskehyksen ruudukon luominen oli tärkein osa. Ruudukko toimi leikkipaikkana mielikuvituksellesi värijärjestelmien luomiseksi. Voit yhdistää useita menetelmiä luodaksesi kokonaan uuden värisarjan perusväristä. (Kokeile kaltevuuksia kiinteän perusvärisävyn sijasta ).

Voit käyttää Justin Mezzellin mukautuskerrosmenetelmää myös Vintage-värisarjojen luomiseen.

Kirjoitan pian toisesta mielenkiintoisesta (ja monimutkaisesta) menetelmästä väriteemaryhmän luomiseen Gaussin jakautumistoiminnon avulla. Kiitos Nishant tweetistä, joka antoi minulle inspiraation tutkia tätä menetelmää. Voit seurata minua pysyäksesi ajan tasalla.

Minusta

Hei, olen Rahul Chakraborty, rakennuksen kokemuksia ja käsityöratkaisuja Intian suurimmassa sähköisen kaupankäynnin alustassa Flipkartissa.

Tweetin suunnitteluun ja tekniikkaan liittyviä juttuja säännöllisesti, ja työni jatkuu Dribbblessa. Löydät minut toisen puolen Instagramista.

Viimeinkin suuren viivyttelyn jälkeen tämä on ensimmäinen artikkeli keskisuurista tuotteista. Palaute on erittäin tervetullutta. Jos pidit tai olet oppinut jotain lukemisen jälkeen, suosittele sitä muille. (Claps menee jopa 50 )

Kiitos lukemisesta!

Twitter
Kulkeutuva
Instagram