5 Teknikker til finjustering af UX med farve
Farve er et af nøgleelementerne i ethvert design system. På websteder eller i apps kan farve anvendes på flere forskellige måder: Sommetider kan farve bruges til at oprette et kontaktpunkt gennem kontrast eller ved at begrænse farven til et valgt sted; farve kan også hjælpe med at etablere hierarki og derfor påvirke hvor en bruger ser ud.
I denne artikel snakker vi om, hvordan du bruger farver strategisk.
1. Oprettelse af et fokuspunkt gennem proportioner
Et godt eksempel på farveforhold er designet af Viporte . Når du ruller ned på deres hjemmeside, er hver sektion dekoreret med et stort bogstav i midten. Brevet er fyldt med en smuk farve, inden sektionernes animationer sparker ind. Farven på de forskellige billeder, der animerer ind, er relateret til bogstavets farve. Fokuspunktet er helt sikkert midt i sektionerne, takket være den fokuserede brug af farve. Proportioner varierer - nogle gange er der en lille farve, og nogle gange er der meget af det. På nogen måde bruges proportioner til at gøre opmærksom på et fokuspunkt. Hvis farven var mere tydelig overalt inden for hvert afsnit, ville brændpunktet ikke være så klart.
2. Fange opmærksomhed gennem kontrast
En anden ting, som farve kan manipulere, er kontrast. Når farverne på det overordnede design er rolige eller bløde, vil der blive lagt stor vægt på billederne ved at tilføje en kontrastfarve.
Det er præcis hvad der sker inden for design af Thinx . På hjemmesiden er det overordnede farveskema af grænsefladen faktisk sort / hvid. Alligevel afhænger designet stort set af mange billeder. Især på toppen af hjemmesiden er billederne af undertøjne en mørk rød baggrund. Sammenlignet med alt andet på siden, er det ret fed. Uden tvivl er den ting der skiller sig ud den mørkerøde. Den røde har en meget højere kontrast til sort / hvid farveskema. Jeg kan godt lide at bruge Thinx som et eksempel, fordi det viser, at lyse og neonfarver ikke er de eneste der passer til tegning af en persons opmærksomhed gennem kontrast. Det er virkelig bare en afbalanceret handling af to farver, som vil lade en af dem virkelig skille sig ud.
3. Brug farve til at oprette UX mønstre
Den bedste måde at skabe visuelle mønstre på er gennem konsistens. Mønstre skaber på sin side forhold, en bruger kan vænne sig til. Det er på samme måde, at brugerne er vant til certina-ikoner, der er relateret til bestemte handlinger, dvs. en papirkurv kan betyde sletning. Farver er meget mere subjektive, fordi hver hjemmeside eller app kan gøre deres egen betydning for farver.
Lad os tage forholdet med farven blå på Underbellys porteføljes hjemmeside . Det er et simpelt eksempel, og det er perfekt at gøre mit punkt. Alt, der kan klikkes på Underbellys hjemmeside, er blå. Efter at have brugt hjemmesiden i et par sekunder, bliver det hurtigt klart, at deres links er blå. Og sådan skaber du mønstre gennem farve. Mønstre er gode, fordi de giver brugere og besøgende mulighed for nemt at genkende noget. Jo lettere anerkendelse bliver, jo mindre folk tænker og nu ved vi alle, hvor glade det gør Steve Krug .
4. Oprettelse af hierarki gennem farve
En anden tingfarve kan være god til at oprette et hierarki. På Skores produktside , næsten hver sektion har et element af grønt til det. Ikke kun er det grønne repetitive - hvilket skaber et genkendeligt mønster - det hjælper også med at skelne mellem de vigtige dele af en given sektion. Ofte er det let at forklare hierarkiet gennem størrelsen sådan skriftstørrelse. Men intensiteten af en farve, såvel som at montere en farve i brug, kan være god til at indstille et hierarki også.
I Skores eksempel har den grønne god kontrast med den grå tekst og den hvide baggrund. Det skiller sig ud. Desuden er deres farveskema ikke afhængig af andre accentfarver, der gør det grønne primære. Alt dette bidrager til hver sektions måde at vise hierarki på. Derfor hjælper den grønne farve brugerens øjne mod de vigtige elementer, der giver et godt hierarki inden for hvert afsnit. De grønne elementer fortæller en bruger hvor man skal se først.
5. Udnytter ligheder i farve
Af alle de forskellige ting, vi gør med farve som designere, bruger vi det mest og genbruger det for at sikre konsistens på plads i designet. Lad os tage et kig på InVisions slutningen af året destinationsside. Øverst på siden findes der en lyserød og violet gradient, der bruges som baggrundsbillede. Længere ned på siden bruges den lyserøde og violette også til knappens farver. Derudover genbruger destinationssiden hvid over de lyserøde og lilla farvede baggrunde. Det genbruger også den sorte og grå tekstfarve over de hvide baggrunde. Hvis farverne var forskellige hver gang, ville det ikke se så godt ud.
Lad os se nærmere på et andet eksempel Co-motion . På deres hjemmeside bruger det kreative studie et par forskellige farver. Men de er alle ens nok i deres tone for at give en sammenhængende strømning. I dette eksempel er der ikke noget der skiller sig ud specifikt, hvilket også kan være et godt mål. I dette tilfælde er vægten med farve lavet på en god og sammenhængende sideflow, hvor du forsøger at holde brugeren engageret og rulle.
Konklusion
Farve kan være et godt værktøj til at opnå forskellige designmål. Farve kan hjælpe med at definere og etablere et hierarki og give et fokuspunkt. Farvevægten kommer i forskellige former. Uanset hvad, kan arbejde med farve være en masse sjov. Det er lettere at påvirke, hvor en besøgendes eller brugerens øjne går, ved hjælp af et strategisk farveskema.