Introduksjon til fargeteorien

Vel, hvis du har lest de fem første artiklene i denne serien, kan du spørre deg selv: "Hvordan relaterer alt dette til mobildesign?" Formålet med denne innledende serien er å legge til noen nye verktøy og ideer til ditt mobile designarsenal. Denne artikkelen er ikke annerledes. Farger kan gjøre at søknaden ser profesjonell og vakker ut, men på baksiden kan de også gjøre at det ser ut til at appen din ble laget av min fem år gamle nevø.

Jeg er ikke ute for å gjøre deg til en profesjonell designer i dette kurset, men å vite grunnleggende om fargeteori kan virkelig bidra til å bringe appene dine til neste nivå, selv om du har tenkt å lage hele appgrensesnittet i kode.

Når det gjelder forståelse av fargeteori, er det som følger den enkleste måten jeg kan bryte den ned for deg.

Primærfarger

Rød, Gul, Blå. Dette er de tre grunnleggende fargene som ikke kan opprettes av en kombinasjon av andre farger. Alle andre farger er resultatet av å blande disse tre.

Sekundære farger

Grønn, Orange, Lilla. Disse er fargene dannet ved å blande de primære fargene.

Tertiære farger

Gul-oransje, rød-oransje, rød-lilla, blå-lilla, blågrønn og gulgrønn. Disse er fargene som dannes ved å blande en primær og en sekundær farge. Med andre ord fyller den inn resten av fargeskjulet.

Analoge farger

Eventuelle tre farger som ligger ved siden av et 12-delers fargehjul, for eksempel gulgrønn, gul og gul-oransje. Vanligvis er en av de tre fargene den dominerende fargen.

Komplementære farger

Med hensyn til fargeskjulet er komplementære farger to farger rett overfor hverandre, for eksempel rød og grønn. Komplementære farger gir maksimal kontrast og maksimal stabilitet. Vær forsiktig når du arbeider med fullt mettede komplementære farger for digitale grensesnitt: de kan være anstrengende på øyet.

Her er en annen av mine små hemmeligheter som jeg vil gi deg inn på og også hvor jeg grep grafikken fra. Dette er et flott nettsted som hjelper deg med å få litt harmoni i appen din.

Tilsetningsfarger

Tilsetningsfarger er hva nett-, fjernsyns- og mobilenheter er laget av. I Photoshop lager vi alle våre app skjermbilder, bakgrunner og grafikk i RGB-format. RGB står for Rød, Grønn og Blå, og disse tre er primærfargene til additivet. Når ulike kombinasjoner av disse tre blandes sammen, opprettes alle de resterende fargene. I Photoshop kan du håndtere RGB-fargene ved å dobbeltklikke på fargepaletten. De to vanligste måtene for å justere farge i Photoshop er å enten skrive inn numeriske RGB-verdier direkte i tekstfelt eller bare dra fargeplukkeren over fargepaletten.

På en skala fra 0 til 255, forandrer hver numerisk inkrement fargen på en subtil måte. Bare for å få tak i det, er det ikke noe subtilt om forskjellene under!

En RGB-verdi på 255, 255, 255 (fullmetning) er den samme som hvit, som også viser hex-verdien av #ffffff.

Tvert imot, hvis alle RGB-verdier er satt til null, er fargene generert svart. Dette viser den tilsvarende hex-verdien # 000000.

Få litt mer inn i det, du bør kunne forutse hvilken farge som skal genereres når rød er satt til en verdi på 255 og grønn og blå er satt til 0.

Likevel kunne jeg ikke motstå et annet skjermbilde. Med en verdi på 255 i Rødpunkt, og 0 i Grønn og Blå, får vi en fullstendig mettet rød farge. Grønn og Blå endres tilsvarende med de samme verdiene omarrangert.

Som et eksempel på hva som skjer når vi begynner å rote med flere forskjellige verdier, med en verdi på 255 i Rød og Grønn, oppretter vi en fullstendig mettet gul farge med hex-verdien av # ffff00.

Så, ved å bare endre verdiene for Rød, Grønn eller Blå, kan vi skape den nøyaktige farge som trengs for designen ved hånden. Å vite hvordan farger samhandler med hverandre, vil virkelig hjelpe dine applikasjoner og nettsteder å vise litt mer harmoni og sammenheng.

Fargepsykologi

Så nå kommer den morsomme delen. Med den generelle teorien ut veien, hvordan vet du hvilken farge som passer best for appen din? Farger kan ha forskjellige effekter på mennesker og kan til og med holde forskjellige kulturelle betydninger utover det som kan være naturlig intuitivt. Rød har vært kjent for å øke blodsirkulasjonen og stimulerer kropp og sinn. Av disse grunner er det så ofte forbundet med sex og kjærlighet. Orange har vært kjent for å øke total energi. Blå kan brukes til å behandle smerte og er kjent som en stimulant og kan ofte tilskrives søvnløshet. Husk neste gang du stirrer på det lille blå lyset på fjernsynet ditt!

Å vite hvordan folk reagerer på farger i naturen, kan være en viktig tid-bit av informasjon for å holde i lommen. Fargeforening og fargesykologi går hånd i hånd, og begge er verdt ytterligere uavhengig forskning for den seriøse designeren.

Et nettsted som du bør nyte og vil fremskynde fargeforeningsdesignbeslutninger er http://colorapi.com. Søk etter et ord, si, brød, og du vil komme opp med massevis av fargevalg for den bakerappen du jobber med. Nyt!

Tilgjengelighet og farge

Jeg er en stor forutsetning for tilgjengelighet og farge spiller en viktig rolle i den totale tilgjengeligheten til både nettsteder og mobilapplikasjoner. Ved å gi nok kontrast mellom bakgrunnsfarger og sideelementer, vil du sikre at alle vil kunne nyte programmene slik du har tenkt at de skal nytes.

For å se hvordan nettstedet ditt eller webapplikasjonen ser ut til de synskadene, sjekk ut http://colorfilter.wickline.org/.

Farge etter eksempel

Her er noen apps som har det riktig. Ta en titt på nettstedet som du vil se når du besøker fra en stasjonær datamaskin, og sammenlign den med den for mobilapplikasjonen. Begge har et konsekvent utseende, følelse og fargevalg. Kontinuitet mellom nettside og web-app er like viktig som fargevalg (men diskusjonen er for en annen gang).

Ved å bruke en blå farge, gir nettstedet et hyggelig, roligt og kult utseende nettsted. Ikke kult som i surfer-boy slang, men kjølig som i temperatur, og dermed termometeret app. Fungerer fint.

Jeg liker denne. Cellar trekker av en fin effekt ved å bruke brune for å gi nettstedet og appen en naturlig og trøstende følelse. Som en egentlig vinkjeller, muligens med smussgulv og tømmerhyller og vegger -brown var det egentlig det åpenbare valget her.

I likhet med termometerappen gir den mobile versjonen av arctic.ru et fint, kjølig utseende med hvite, blå og grå. Avskjøling av kule farger på et område med isbjørner er alltid en god ide. Omvendt, et nettsted for Las Vegas eller Arizona eller varmere tropiske klima ville ha mer suksess ved hjelp av varme farger som røde, appelsiner og gule.

Neste gang?

Neste gang vi kommer tilbake til Photoshop, lærer vi hvordan du lager grunnleggende former og knapper. Følg med!