5 Tekniker för finjustering UX med färg
Färg är en av nyckelelementen i något designsystem. På webbplatser eller i appar kan färg användas på olika sätt: ibland kan färg användas för att skapa en kontaktpunkt genom kontrast eller genom att begränsa färgen till en vald plats. färg kan också bidra till att skapa hierarki och därmed påverka var användaren ser ut.
I den här artikeln pratar vi om hur du använder färg strategiskt.
1. Skapa en fokuspunkt genom proportioner
Ett bra exempel på färgproportioner är utformningen av Viporte . När du rullar ner på deras hemsida, är varje avsnitt dekorerad med ett stort brev i mitten. Brevet är fyllt med en vacker färg innan sektionerna animeringar sparkar in. Färgen på de olika bilderna som animerar är relaterade till bokstavens färg. Brännpunkten är helt klart i mitten av sektionerna, delvis tack vare den fokuserade användningen av färg. Proportionerna varierar - ibland finns det lite färg och ibland finns det mycket. Hur som helst används proportioner för att uppmärksamma en kontaktpunkt. Om färgen var mer uppenbar över hela stället inom varje sektion, skulle det inte vara så tydligt.
2. Fånga uppmärksamhet genom kontrast
En annan sak som färg kan manipulera är kontrast. När färgerna i den övergripande designen är lugna eller mjuka, lägger en kontrasterande färg stor uppmärksamhet åt bilderna.
Det är precis vad som händer inom designen av Thinx . På hemsidan är det övergripande färgschemat för gränssnittet faktiskt svartvitt. Ändå bygger designen kraftigt på många bilder. Speciellt högst upp på hemsidan har fotbollens underkläder en mörkröd bakgrund. Jämfört med allt annat på sidan, är det ganska djärvt. Utan tvekan är den som står ut här den mörka röda. Den röda har en mycket högre kontrast mot svartvitt färgschema. Jag gillar att använda Thinx som ett exempel eftersom det visar att ljusa och neonfärger inte är de enda som är lämpliga för att dra någon uppmärksamhet genom kontrast. Det är verkligen bara en balanshandling av två färger som låter en av dem verkligen sticka ut.
3. Använda färg för att skapa UX-mönster
Det bästa sättet att skapa visuella mönster är genom konsistens. Mönster skapar i sin tur relationer som en användare kan vänja sig vid. Det är på samma sätt som användarna används för att certina-ikoner är relaterade till vissa åtgärder, det vill säga ett papperskorgen betyder att radera. Färger är mycket mer subjektiva eftersom varje webbplats eller app kan skapa sin egen betydelse för färger.
Låt oss ta förhållandet till färgen blå på Underbellys portföljwebbplats . Det är ett enkelt exempel och det är perfekt att göra min mening. Något som kan klickas på Underbellys hemsida är blått. Efter att ha använt webbplatsen i några sekunder blir det tydligt att länkarna är blåa. Och så skapar du mönster genom färg. Mönster är bra eftersom de tillåter användare och besökare att enkelt identifiera något. Ju lättare erkännande blir, desto mindre tror folk och nu vet vi alla hur glada det är Steve Krug .
4. Skapa hierarki genom färg
En annan sakfärg kan vara bra för att skapa en hierarki. På Skores produktsida , ungefär varje sektion har ett element av grönt till det. Inte bara är det gröna repetitiva - vilket skapar ett igenkänt mönster - det hjälper också att skilja de viktiga delarna av en viss sektion. Ofta är det lätt att förklara hierarkin genom storleken sådan typsnitt. Men intensiteten i en färg, såväl som att montera en färg som används, kan vara bra när man ställer in en hierarki också.
I Skores exempel har den gröna god kontrast med den grå texten och den vita bakgrunden. Det sticker ut. Dessutom litar deras färgschema inte på andra accentfärger som gör den gröna primära. Allt detta bidrar till varje sektions sätt att visa hierarkin. Därför hjälper den gröna färgen användarnas ögon mot de viktiga elementen som ger en trevlig hierarki inom varje avsnitt. De gröna elementen berättar en användare var man ska se först.
5. Använda likheter av färg
Av alla de olika sakerna vi gör med färg som designers använder vi det mest och använder det för att hålla konsistens på plats inom designen. Låt oss ta en titt på InVisions slutet av året landningssida. Överst på sidan finns en rosa och violett gradient som används som bakgrundsbild. Längre ner på sidan används även rosa och violett för knappfärgerna. Dessutom återställer målsidan vit över de rosa och lila färgade bakgrunderna. Det återanvänder också den svarta och grå textfärgen över de vita bakgrunderna. Om färgerna var olika varje gång så skulle det inte se lika bra ut.
Låt oss ta en titt på ett annat exempel, specifikt Co-motion . På deras hemsida använder den kreativa studion några olika färger. Men de är alla lika stora i sin ton för att ge ett sammanhängande flöde. I det här exemplet finns det inget som står ut specifikt vilket också kan vara ett bra mål. I det här fallet läggs tonvikten med färg på ett bra och sammanhängande flöde av sidan, där du försöker hålla användaren engagerad och rullar.
Slutsats
Färg kan vara ett utmärkt verktyg för att uppnå olika designmål. Färg kan hjälpa till att definiera och skapa en hierarki och att ge en fokuspunkt. Färgbetoning kommer i olika former. Hur som helst kan arbeta med färg vara mycket roligt. Att påverka var besökarens eller användarens ögon går lättare med hjälp av ett strategiskt färgschema.