Det er ingen vei rundt det: Farge er det mest innflytelsesrike kreative elementet i visuell design . Fra de fortryllende naturskjønne bakgrunnene til scenografi til de intrikate komposisjonene av pikselkunst, er en robust forståelse av farger hovednøkkelen til overbevisende kommunikasjon. Trenger du bevis?

Da deltakerne i en nylig merkefokusert studie ble utfordret til å tegne logoene til 10 ikoniske selskaper, var det bare 16% som kunne huske nøyaktige former og designfunksjoner. Når du blir bedt om å identifisere merkevarens fargepalett, blir antallet riktige svar imidlertid skutt opp til 80% .

Farge spiller også en innflytelsesrik rolle i en verden av brukergrensesnittdesign. De digitale produktene vi daglig kommuniserer med, er avhengige av strategisk bruk av farger for å kommunisere viktig informasjon, så det er viktig UX- og UI-designere forstå hvordan du kan bruke farger med omhu.

I denne guiden vil vi:

• Avmystifiser det grunnleggende om fargeteori,
• Gi bunnsolide prinsipper for å jobbe med farger i digitale grensesnitt,
• Del nyttige ressurser for å skape fargebevissthet, og
• Myndiggjøre UI-designere å lage sine egne bemerkelsesverdige fargevalg.

Målet med denne guiden er fargekompetanse, etterfulgt av fargetillit, alt for å få en fantastisk fargeutførelse i brukergrensesnittene vi møter hver dag.

Crash Course: Color Theory for UI Designers

Fargeteori er et ekspansivt felt av studier med sin egen terminologi, metodikk og vitenskapelige underbygg. Det kan være komplisert, men det er ikke det vi ønsker. Det vi ønsker er en forståelse av farger som kan brukes med lynrask presisjon. Vi ønsker å bruke farger slik vi bruker former - uanstrengt, dristig og effektivt.

For å bruke farge på denne måten må UI-designere ha en solid forståelse av disse kjernefargeteoriske begrepene:

• Farge er relativ.
• Metningsoverbelastning dreper fargenes livskraft.
• Samtidig kontrast har fordeler og ulemper.
• Grunnleggende fargevalg er best.
• Fargetone påvirker alltid verdien.

La oss grave inn.

Farge er relativ

Farge står aldri alene. Mens menneskets øye og hjerne jobber sammen for å se en farge, blir de alltid påvirket av:

• Lys skinner på fargen
• Andre farger rundt fargen

Ta en titt på dette eksemplet fra naturen:

TIL: Hjernen og øyet jobber sammen for å hjelpe oss å forstå at blomsten som helhet faktisk er lys rød.

B & C: Den mørkebrune av blomstens skygge (B) gjør at høydepunktet på kronbladets ås (C) virker mye lysere enn den kjedelige rødbrune fargen den faktisk er. I hovedsak fungerer lyset som skinner på kronbladets ås og fargen på skyggen sammen for å lure øyet og forsterke høydepunktet.

Her er et annet eksempel som viser hvor villedende farger kan være:

I UI-design er fargegjengivelse ikke alltid like åpenbar, så farger i et skjema bør være testet mot hverandre . Hvorfor? Fordi det vakkert tilrettelagte utvalget av farger i din stilguide kan vise seg å være problematisk når den brukes på et grensesnitt.

Den store takeawayen? Ikke kodle fargekonseptene dine. Hvis en fargeprøve med aksentgul ser frodig ut når den er omgitt av et hvitt mellomrom i Sketch, men kolliderer med et UIs dominerende fargevalg, finn en annen løsning.

Metningsoverbelastning dreper livskraft i farger

Fargemetning er en integrert del av fargene. Imidlertid overvelder en ordning som er samlet rundt ingenting, men svært mettede farger, øyet, og livskraft blir redusert. Med farge er mindre mer. En svært mettet farge blir levende når den brukes sammen med mindre mettede farger.

Samtidig kontrast har fordeler og ulemper

Samtidig kontrast oppstår når fargekomplement av nøyaktig samme verdi plasseres ved siden av hverandre. Effekten er så intens at den får punktet der de to fargene møtes for å vibrere eller pulsere.

For UI-designere kan samtidig kontrast gi positive og negative resultater, så det er viktig å forstå hvordan du styrer styrken til dette visuelle fenomenet.

For eksempel, i et grensesnitt designet rundt en rekke blues, ville det å bruke en komplementær oransje med samme verdi som den blå ankerfargen være en fin måte å gjøre oppmerksom på varslingsikoner.

Imidlertid vil den samme oransje og blå kombinasjonen være migreneinduserende hvis den brukes til tekst og bakgrunn i rullegardinmenyene.

Grunnleggende fargevalg er best

Regnbuer er vakre - i naturen. I UI-design må farger brukes mer selektivt, ellers overvelder det opplevelsen. Selv når merkevarer har imponerende paletter med et bredt utvalg av alternativer, er det best å vise tilbakeholdenhet og bygge brukergrensesnitt rundt enkle fargevalg.

Her er to idiotsikre planer for å bygge et grunnleggende UI-fargevalg:

1. Analoge UI-fargevalg

• Disse tiltalende ordningene består av farger som er tett gruppert på fargehjulet.
• Analoge fargevalg er enkle å finne på bilder av naturlige omgivelser, spesielt planteliv, og de har en tendens til å være visuelt beroligende.
• Variasjon i analoge ordninger kommer fra skift i metning og lysstyrke, ikke store fargetoneendringer.
• Når du bruker et analogt oppsett, kan du prøve å legge til en svært mettet farge fra rett over fargehjulet for å legge vekt på et grensesnitt.

2. Utfyllende UI-fargevalg

• Utfyllende fargevalg er basert på samspillet mellom komplementære kule og varme farger som finnes overfor hverandre på fargehjulet.
• Fargesortiment oppnås ved å endre metning og lysstyrke mellom de komplementære ytterpunktene.
• Bruk av for mange lyse, svært mettede farger undergraver effekten av komplementære ordninger.

Fargetone påvirker alltid verdien

Dette høres kanskje rart ut, men farger har tilsvarende gråverdier. Her er bevis:

På bildet ovenfor har vi en rekke fargetoner med 100% lysstyrke og metning, men se på hva som skjer når disse fargene konverteres til gråtoner:

Boom! En hel rekke gråverdier avsløres. Hvorfor betyr dette noe for UI-designere? Et ord: Kontrast .

Sett tankene dine om i gråtoner et øyeblikk. Hvis du hadde lyst til å skape kontrast, ville du noen gang brukt en 40% grå verdi på toppen av en 50%? Selvfølgelig ikke, men dette er nøyaktig hva som er risikert når fargen blir utelatt fra fargekontrastligningen.

Husk at fargetone alltid påvirker verdien.

4 Viktige fargeprinsipper for digitale grensesnitt

Nå som vi har forenklet fargelære og relatert kjernekonseptene til UI-design, er det på tide å ta en mer fokusert titt på rollen fargen spiller i digitale grensesnitt. Dette er de fire fargeprinsippene som må vurderes fra den tidligste innsatsen til hvert UI-designprosjekt.

1. Forholdet mellom tekst og farge er avgjørende.
2. Fargetilgjengelighet kan ikke ignoreres.
3. Kontrast er viktig, men det er ikke en helbredende design.
4. Farge fungerer best når den brukes proporsjonalt.

Forholdet mellom tekst og farge er avgjørende

Farge påvirker lesbarheten. De fleste UI-designere forstår dette i prinsippet, og det er grunnen til at vi ikke ser mange grensesnitt med grønn brødtekst på rød bakgrunn. I stedet kommer spenningen mellom tekst og farge subtilt og kryper inn gjennom vanlige UI-komponenter som former, knapper, overskrifter og ikoner.

Oppretthold et sunt tekst / fargeforhold ved å følge disse enkle retningslinjene:

• Unngå alltid lav kontrast mellom tekst og bakgrunn.
• Ikke bruk komplementære farger for tekst og bakgrunn, spesielt når fargene har samme lysstyrke og metning (f.eks. Gul tekst på en lilla bakgrunn).
• Selv om det er hvit bakgrunn, må du ikke sette brødtekst i lyse farger. Svart og mørk grå er lettest å lese.

Fargetilgjengelighet kan ikke ignoreres

Farge er kommunikativ, men det kan ikke være det eneste designelementet som brukes til å formidle informasjon i et brukergrensesnitt. Hvorfor ikke? Fordi noen nettbrukere oppfatter farger annerledes (eller ikke i det hele tatt) enn majoriteten av befolkningen.

For eksempel kan en person som opplever fargeblindhet ikke være i stand til å fortelle når et produktikon er i “presset” tilstand hvis den eneste forskjellen i ikonet er en fargeendring.

I tillegg har noen mennesker problemer med å se viktige brukergrensesnittkomponenter som har lav fargekontrast til bakgrunnen for et grensesnitt. Nettsteder som Fargeløs og Kontrastforhold la designere raskt teste en rekke fargekoblinger for kontrast tilgjengelighet .

Kontrast er viktig, men det er ikke en Design Cure-all

Ja, fargekontrast i UI-design er viktig. Planlegg for det, implementer det, dra nytte av det. Men ikke forvent å vinke det som en tryllestav og fikse dårlig design.

Form, rom, størrelse og andre designelementer må ikke ignoreres. Fargekontrast kan gjøre et forferdelig brukergrensesnitt tiltalende, men det vil ikke løse en dårlig brukeropplevelse.

Farge fungerer best når den brukes proporsjonalt

Tenk deg en nyhetsapp der hver forekomst av tekst er angitt i tittelsak eller en e-handelsnettsted designet på et 9x9 bildegitter. Begge ville være forferdelig!

Kyndige UI-designere bruker designelementer som typografi og repetisjon proporsjonalt for å forbedre designhierarkiet. Farge fortjener den samme gjennomtenkte omtanke. I UI-design forvirrer bruk av for mange farger måten informasjon blir oppfattet på.

Fargeressurser for fortsatt fremgang

Her er en upraktisk sannhet: Å designe med farger er en ferdighet, og ferdigheter må utvikles. De fleste UI-designere har en medfødt følelse av hvilke farger som ser bra ut sammen (aka fargesmak), men dette oversettes ikke alltid til applikasjon.

For å virkelig beherske farger og se full innvirkning på UI-design, må designere øve. Heldigvis er det mange ressurser som kan hjelpe deg med fortsatt fargelæring og kompetansebygging.

Ctrl + maling

Hvis du er en UI-designer som ønsker å få øyeblikkelig fargetillit, kan du begynne med ctrlpaint.com , et nettsted dedikert til digital malinginstruksjon. Digital maleri? Egentlig?

Absolutt. Profesjonell konseptkunstner Matt Kohr underviser i digital fargebruk gjennom raske videoveiledninger og praktiske øvelser. Læreplanen er fantastisk enkel og sentrert i å “male det du ser”, både i den fysiske verdenen og fantasien.

Start med gratis videobibliotek (Seksjon 11) før du går til de mer intensive øvelsene i Startsett for farger .

Josef Albers and the Interaction of Color App

Den moderne forståelsen av farrelelativitet ble sterkt utforsket og avansert av øve på- før -teori tilnærming av kunstner / pedagog Josef Albers.

Albers foreslo at en enkelt farge kunne ha 'mange ansikter' og oppmuntret til omfattende lek og eksperimentering blant studentene sine i håp om at 'øynene ville bli åpnet' for å se farger slik det virkelig oppfører seg i den virkelige verden (i motsetning til de symbolske fargene vi ser for oss i våre sinn).

I 1963 forfattet Albers Interaksjon av farge , en lærebok som fortsetter å være svært innflytelsesrik i verdens kunst- og designutdanning. For å feire 50-årsjubileet for bokens utgivelse ga Yale University ut et interaktiv iPad-app som inneholder fullteksten, men som også lar brukerne spille og eksperimentere med Albers 'fargeplater.

For UI-designere, Interaksjon av farge app gir en mulighet til å oppleve analoge fargeøvelser i et digitalt miljø og se på førstehånd hvordan fargelativitet påvirker brukergrensesnitt.

Andrew Loomis

I løpet av første halvdel av det 20. århundre var Andrew Loomis en fremtredende illustratør og instruktør ved American Academy of Art i Chicago, men hans varige arv er forfatterens. Loomis skrev seks bøker om kommersiell kunst og design og dekket en rekke emner fra figurtegning til produktplassering.

I bøkene hans Kreativ illustrasjon og Malerens øye (begge tilgjengelig på archive.org ), Loomis slipper et antall varige linjer som fortsatt er relevante for det moderne feltet for UI-design:

Den største fargefeilen, og en som forårsaker manglende enhet og harmoni, er å ha for mange farger på paletten.

Eventuelle to farger vil være harmoniske når den ene eller begge inneholder noen av de andre.

Farge egner seg til å eksperimentere mer enn noe annet skjønnhetselement.

Andre designers grensesnitt

Når et grunnleggende nivå av fargekompetanse er oppnådd, blomstrer skapingen av fargevalg til en fascinerende jakt. Hvert grensesnitt man møter, blir en mulighet for læring og kritikk, og observasjoner florerer.

Dette er stadiet i en UI-utvikleres utvikling når det å referere til andre designers arbeid blir bemyndigende. Hvordan det? Fordi referanse beveger seg fra destinasjon til reise, fra endepunkt til inspirasjon.

UI-designere på alle ferdighetsnivåer har fordel av å føre løpende oversikt over funnet UI-fargevalg. Ta skjermbilder, hold en fysisk fargebok, start et humørbrett - uansett hva det tar å trykke øyeblikk med fargebelysning for fremtidig implementering.

Farge er for viktig til å bli ignorert

Når det gjelder utformingen av digitale grensesnitt, er ikke farger en valgfri vurdering. Selv i brukergrensesnitt som bruker minimal farge (eller de som er helt svart og hvitt), er det viktig at brukergrensesnittdesignere forstår Hvorfor farge er eller blir ikke brukt og hvordan dette påvirker brukeropplevelsen.

Det er også viktig at UI-designere har muligheten til å generere og implementere originale fargevalg. Det er en verdig praksis å referere til arbeidet til andre designere og digitale produkter, men dette blir begrensende når det er den eneste metoden for fargeutforskning som utføres under designprosessen. Det er enorm verdi å kunne fange fargekoblinger sett i den virkelige verden eller tankene.

Hvis du er en designer som har kjempet for å bruke farger på en dyktig måte, eller du noen gang har tenkt: 'Jeg har ikke noe talent for farger,' ikke bli motløs. Å designe med farger er ikke noen form for kreativ trollskap eller spesiell gave; det er en praktisk disiplin basert på enkle teknikker som kan gjentas og forbedres.

Husk at farge er hovednøkkelen til klar og overbevisende designkommunikasjon. Enten implementert med forsiktighet eller hensynsløs forlatelse, påvirker det konvertering, merkevarebevissthet og brukeropplevelsen. For UI-designeren er farge et kraftig verktøy som rett og slett ikke kan ignoreres.

• • •

Videre lesing på ApeeScape Design Blog:

1. Fargenes rolle i UX
2. Lage en UI Style Guide for Better UX
3. UX og viktigheten av nettilgjengelighet
4. Kunst vs design - en tidløs debatt
5. Design for interaktive miljøer og smarte rom

Forstå det grunnleggende

Hva er en fargepalett?

I digital design er en fargepalett det utvalg av farger som er tilgjengelig for en designer. Imidlertid er disse fargene ikke nødvendigvis i harmoni med hverandre.

Hva er et fargevalg?

Et fargevalg er et utvalg av bevisst sammenkoblede farger som er i harmoni med hverandre. Fargevalg er vanligvis satt sammen i henhold til logiske forhold foreslått av et fargehjul.

Hva er funksjonen til et brukergrensesnitt?

Et brukergrensesnitt lar et menneske samhandle med en datamaskin. Denne interaksjonen, som ofte er visuell, kan finne sted gjennom en rekke enheter som en mobil berøringsskjerm, et tastatur eller et kontrollpanel.