Opbygning af en farvepaletramme

Sådan defineres en ramme med farver, mens du bygger en farvepalet til dit brand

Farve er et af de vigtigste elementer i designsprogsystemet for et brand / produkt. Vores hjerner er programmeret til at afvise både under og over stimulerende information, så det er meget vigtigt at oprette en farvepalet, der giver både visuel interesse og en følelse af orden.

Jeg tror, ​​at det er vigtigt at opbygge et defineret sæt system / regler, når du begynder at designe noget. Farver er en undergruppe af et mærkes DLS (Design Language System), og det er et af de største områder, hvor designere går glip af at opbygge et defineret sæt regler for deres brug af farver.

"Designsystemer giver et praktisk, centraliseret og udviklende kort over et mærkets kendte produktområder med retningsbestemte henvisninger til at hjælpe dig med at udforske nye regioner." ~ Chris Messina, ex-Uber

I denne artikel vil vi diskutere nogle teknikker til at definere et sæt regler for at generere farvevariationer, der kan skaleres til et større spektrum af brug og også kunne anvendes på tværs af enhver mærkepalet i fremtiden. Du kan vælge en af ​​disse teknikker eller kombinere dem for at oprette dine egne.

Lad os komme igang

Her er en liste over få farveegenskaber, som vi udnytter til fulde potentiale til at skabe farvevariationer:

  • Nuance er farve (blå, grøn, rød osv.).
  • Chroma er en farves renhed (en høj kroma har ingen tilsat sort, hvid eller grå).
  • Mætning er hvor meget af en given farvetone der er til stede (lavere mætning med mindre farvetone og tættere på hvidt).
  • Lysstyrke / værdi henviser til, hvor lys eller mørk en farve er (mørk med lav lysstyrke / værdi).
  • Opacity refererer til, hvor gennemsigtig eller uigennemsigtig en farve er (høj gennemsigtighed med lav opacitet).
  • Toner oprettes ved at tilføje grå til en farve, hvilket gør den dummere end originalen.
  • Nuancer skabes ved at føje sort til en farve, hvilket gør den mørkere end originalen.
  • Farver oprettes ved at føje hvidt til en farve, hvilket gør det lysere end originalen.
Oversigt over farveegenskaber. Vi bruger en kombination af disse egenskaber til at generere farvevariationer. Download printversion10-punkts skala Framework raster til forståelse af farveegenskaber

Rammelisten

Ovenstående graf viser forholdet mellem lysstyrke, opacitet, farver, toner, nuancer og kroma for en bestemt nuance. Denne graf blev bygget ved hjælp af en 10-punkts skala. Hvad det betyder, farvernes opacitet varierer med 10% over X-aksen, og lysstyrken varierer med 10% over Y-aksen.

Vi bruger en forenklet version af ovenstående graf ved hjælp af en 25-punkts skala til at opbygge vores Base Framework Grid. Dette gitter fungerer som vores legeplads med flere muligheder for at generere farver.

Jeg har brugt Sketch App til at oprette rammegitteret, men man kan oprette det samme i andre designværktøjer som Photoshop / Illustrator / Figma / Gimp / osv. Vi bruger det populære HSB Color-system overalt.

️ Se billedet herunder, mens du følger nedenstående trin:

Trin 1. Vælg en base nuance. Opret en 50 x 50 px firkant med denne farvetone. Her valgte jeg for eksempel en blå nuance (H 212, S 67, B 89).

Trin 2. Opret en 10 x 10 px hvid firkantet flise (H 0, S 0, B 100).

Trin 3. Duplicerer disse hvide fliser (5 rækker, 5 kolonner), så de dækker hele bundfeltet i trin 1.

Trin 4. Reducer opaciteten for hver søjle med hvide fliser med 25% fra venstre mod højre.

Trin 5. Reducer lysstyrken for hver række hvide fliser med 25% fra top til bund.

Her er skissefilen med de ovennævnte trin

Så nu har du Base Framework Grid. Hvis du fulgte trinnene korrekt, vil du have et farvegitter, der ligner det, der er vist på billedet ovenfor i trin 5. Vi vil bruge dette rammegitter til at lære nogle metoder til generering af nye farver.

For bedre at visualisere farvevariationerne brugte jeg 3 flere basetoner som eksempler i metoderne herunder. Du kan selvfølgelig vælge dine egne farver.

1. Farvetone-nuance-metode

Download skitse-fil

Denne metode er den mest anvendte på grund af dens enkelhed. Det basisramme-gitter, du oprettede ovenfor, blev genereret ved hjælp af denne metode. Opacitet og lysstyrke på de hvide fliser over din basishue, løber fra henholdsvis 100% til 0% (venstre til højre) og 0% til 100% (bund til top).

Farvetemaet på højre side blev oprettet ved hjælp af vores 3 base nuancer (nævnt ovenfor) og pluk værdierne for opacitet og lysstyrke fra midterste kolonne på venstre side (angivet med pilen).

2. Overlay-blandingsmetode

Download skitse-fil

I denne metode bruger vi den samme basisramme og ændrer blandingstilstanden for de hvide fliser til Overlay. Dette skaber en smuk nuanceforskel på tværs af gitteret.

3. Blød lysblandingsmetode

Download skitse-fil

I lighed med # 2 Overlay Blending-metode ændrer vi her blandingstilstanden for de hvide fliser til Soft-Light. Dette skaber en smuk mætning forskel på tværs af gitteret. Vi vælger derefter alle disse hvide fliser og duplikerer dem to gange. Dette skaber en stærkere mætningsforskel og dermed bedre farvelivethed.

4. Cool farveoverlejringsmetode

Download skitse-fil

Denne metode bruger gitterrammen, vi oprettede i # 2 Overlay Blending-metoden. Vi vælger derefter enhver cool farve (f.eks. Blå). Opret et rektangel af denne farve og placer det på tværs over hele gitteret. Skift dens blandingstilstand til Overlay. Det resulterende farve gitter har en levende cool effekt på det.

5. Metode til blanding af varm farveoverlay

Download skitse-fil

Meget ligner metoden # 4 Cool Color Overlay Blending, her i stedet vælger vi enhver varm farve (orange, for eksempel). Opret et rektangel af denne farve og placer det på tværs over hele gitteret. Skift dens blandingstilstand til Overlay. Det resulterende farve gitter har en dramatisk varm effekt på det.

6. Metode til justering af lysstyrke

Download skitse-fil

Denne metode er lidt anderledes og lettere end de ovennævnte metoder. De hvide fliser over basen farvetone er ikke til stede i dette gitter. I stedet opretter vi fliser med basisfarve (som vist på billedet herunder) og skaber et interval af lys & mørk farve ved at øge og reducere henholdsvis lysstyrkeværdien.

Farvetemaet på højre side blev oprettet ved hjælp af vores 3 base nuancer og derefter blot øge og reducere lysstyrkeværdierne for at skabe henholdsvis lys og mørke variationer.

7. Lysstyrke + Saturation Tweak-metode

Download skitse-fil

Denne metode bruger det samme gitter af # 6 Brightness Tweak-metoden. Her finjusterer vi Saturation-værdierne sammen med lysstyrkeværdierne. Vi skaber en række lys og mørk farve ved at øge og formindske dens lysstyrkeværdi og samtidig reducere og øge mætningsværdierne.

Regel 1: Lysere farvevariation = Lavere mætning + Højere lysstyrke.

Regel 2: Mørkere farvevariation = Højere mætning + lavere lysstyrke.

Hybrideksempel

Download skitse-fil

Her er et hybrideksempel, der kombinerer metode nr. 1, # 3, # 4 og # 5 for at generere en smuk palet med farver. Dette blev inspireret af en af ​​artiklerne på Sketch Tricks til hurtigt at opbygge et farvesystem i Sketch App.

Konklusion

Det handler om at bruge dine værktøjer og udnytte det grundlæggende i designelementer. Kombination af forskellige elementer / teknikker åbner ofte en dør til uendelige muligheder.

Der er endnu flere metoder til at generere farvetemaer. Som du ser var det den vigtigste del at oprette et basisramme-net. Gitteret fungerede som en legeplads til din fantasi til at generere farvesystemer. Du kan kombinere flere metoder til at oprette et helt nyt sæt farver fra din base Hue. (prøv Gradient i stedet for solid base nuance ).

Du kan også bruge Justin Mezzells justeringslag-metode til at oprette Vintage farvesæt.

Jeg vil snart skrive om en anden interessant (og kompleks) metode til at generere et sæt farvetemaer ved hjælp af Gaussian Distribution-funktion. Tak til Nishant for tweeten, der gav mig inspiration til at undersøge denne metode. Du kan følge mig for at blive opdateret.

Om mig

Hej, jeg er Rahul Chakraborty, bygger oplevelser og skabte løsninger på Indias største e-handelsplatform, Flipkart.

Jeg Tweet regelmæssigt design og teknologirelaterede ting, og mine arbejde i gang med Dribbble. Du kan finde den anden side af mig på Instagram.

Endelig efter meget udsættelse er dette min første artikel om Medium. Feedback er meget velkommen. Hvis du kunne lide eller lært noget efter at have læst dette, kan du anbefale det til andre. (Klapper går op til 50 )

Tak for at have læst!

Twitter
Dribe
Instagram