5 teknikker for finjustering av UX med farge
Farge er en av nøkkelelementene i ethvert designsystem. På nettsteder eller i apper kan farge brukes på flere måter: Noen ganger kan farge brukes til å skape et fokuspunkt gjennom kontrast eller gjennom å begrense fargen til et valgt sted; farge kan også bidra til å etablere hierarki og derfor påvirke hvor en bruker ser ut.
I denne artikkelen snakker vi om hvordan du bruker farge strategisk.
1. Opprette et fokuspunkt gjennom proporsjoner
Et godt eksempel på fargeproportioner er utformingen av Viporte . Når du ruller ned på hjemmesiden sin, er hver seksjon dekorert med et stort brev i senteret. Brevet er fylt med en vakker farge før seksjonenes animasjoner sparker inn. Fargen på de forskjellige bildene som animerer er relatert til bokstavens farge. Fokuspunktet er absolutt midt i delene, takket være den fokuserte bruken av farge. Proportionene varierer - noen ganger er det en liten farge og noen ganger er det mye av det. Uansett er proporsjoner brukt til å trekke oppmerksomheten til et fokuspunkt. Hvis fargen var tydeligere overalt i hver seksjon, ville det ikke være så tydelig at fokuspunktet var.
2. Fang opp oppmerksomhet gjennom kontrast
En annen ting som fargen kan manipulere er kontrast. Når fargene til den overordnede designen er rolige eller myke, legger du til en kontrastfarge som gir mye oppmerksomhet til bildene.
Det er akkurat det som skjer innen design av Thinx . På hjemmesiden er det overordnede fargevalg av grensesnittet faktisk svart og hvitt. Likevel er designet avhengig av mange bilder. Spesielt på toppen av hjemmesiden har bildene av undertøy en mørk rød bakgrunn. Sammenlignet med alt annet på siden, er det ganske fet. Uten tvil er den tingen som står her ute, mørkrød. Den røde har en mye høyere kontrast mot svart-hvitt fargeskjema. Jeg liker å bruke Thinx som et eksempel fordi det viser at lyse og neonfarger ikke er de eneste som er egnet for å tegne noens oppmerksomhet gjennom kontrast. Det er egentlig bare en balansehandling av to farger som vil la en av dem virkelig skille seg ut.
3. Bruke farge for å lage UX-mønstre
Den beste måten å skape visuelle mønstre på er gjennom konsistens. Mønstre oppretter i sin tur forhold som en bruker kan bli vant til å ha. Det er på samme måte som brukere er vant til certina-ikoner som er relatert til bestemte handlinger, det vil si at søppel kan bety å slette. Farger er mye mer subjektive fordi hver nettside eller app kan lage sin egen betydning for farger.
La oss ta forholdet med fargen blå på Underbellys porteføljeside . Det er et enkelt eksempel, og det er perfekt å gjøre mitt poeng. Alt som kan klikkes på Underbellys nettsted er blått. Etter å ha brukt nettsiden i noen få sekunder, blir det klart klart at deres lenker er blå. Og det er slik du lager mønstre gjennom farge. Mønstre er gode fordi de tillater brukere og besøkende å enkelt gjenkjenne noe. Jo lettere anerkjennelse blir, jo mindre folk tenker, og nå vet vi alle hvor glade det er Steve Krug .
4. Opprette hierarki gjennom farge
En annen tingfarge kan være bra for å sette opp et hierarki. På Skores produktside , omtrent hver seksjon har et element av grønt til det. Ikke bare er det grønne repetitive - som skaper et gjenkjennbart mønster - det hjelper også å skille mellom viktige deler av en gitt seksjon. Ofte er det lett å forklare hierarkiet gjennom størrelse slik skriftstørrelse. Men intensiteten i en farge, så vel som å montere en farge i bruk, kan også være bra for å sette et hierarki også.
I Skores eksempel har den grønne kontrast med den grå teksten og den hvite bakgrunnen. Det skiller seg ut. I tillegg er deres fargevalg ikke avhengig av andre aksentfarger som gjør det grønne primære. Alt dette bidrar til hver seksjons måte å vise hierarki på. Derfor hjelper den grønne fargen brukerens øyne mot de viktige elementene som gir et fint hierarki innenfor hver seksjon. De grønne elementene forteller en bruker hvor de skal se først.
5. Bruke likheter av farge
Av alle de forskjellige tingene vi gjør med farge som designere, bruker vi det mest og bruker det igjen for å holde konsistensen på plass i designet. La oss ta en titt på InVision er slutten av året destinasjonsside. Øverst på siden er det en rosa og violett gradient som brukes som bakgrunnsbilde. Lenger nedover siden brukes også rosa og fiolett til knappens farger. I tillegg gjenoppretter destinasjonssiden hvit over rosa og lilla farget bakgrunner. Det gjenbruker også den svarte og grå tekstfargen over de hvite bakgrunnene. Hvis fargene var forskjellige hver gang, ville det ikke se like bra ut.
La oss ta en titt på et annet eksempel, spesielt Co-motion . På deres hjemmeside bruker det kreative studio et par forskjellige farger. Men de er alle like like i deres tone for å gi en sammenhengende flyt. I dette eksemplet er det ingenting som skiller seg ut, noe som også kan være et godt mål. I dette tilfellet legges vekten med farge på en god og sammenhengende strøm av siden, der du prøver å holde brukeren engasjert og ruller.
Konklusjon
Farge kan være et flott verktøy for å bidra til å oppnå ulike designmål. Farge kan bidra til å definere og etablere et hierarki og gi et fokuspunkt. Farge vekt kommer i ulike former. Uansett kan det være mye moro å jobbe med farge. Det kan være lettere å påvirke hvor en besøkendes eller brukerens øyne går, ved hjelp av et strategisk fargeskjema.