Hur man utvecklar webbsidor, e-handel eller applikationsfärgscheman

Utveckla webbplats, e-handel eller appfärgscheman

Vi har delat en hel del artiklar om färgens betydelse för ett varumärke. För en webbplats, e-handelssida eller en mobil- eller webbapplikation är det lika viktigt. Färger påverkar:

  • Första intryck av ett varumärke och dess värde – till exempel, lyxvaror använder ofta svart, rött innebär spänning, etc.
  • Köpbeslut – ett varumärkes förtroende kan bestämmas av färgkontrasten. Mjuka färgscheman kan vara mer feminina och pålitliga, hårda kontraster kan vara mer brådskande och rabattdrivna.
  • Användbarhet och användarupplevelse – färger har en psykologisk och fysiologisk påverkan också, vilket gör det lättare eller svårare att navigera i ett användargränssnitt.

Hur viktig är färg?

  • 85 % av människorna hävdade att färg har stor inverkan på vad de köper.
  • Färger ökar varumärkeskännedomen med i genomsnitt 80 %.
  • Färgintryck står för 60% av acceptans eller avslag på en produkt.

När du bestämmer ett färgschema för en webbplats finns det några steg som beskrivs i den medföljande infografiken:

  1. Grundfärg – Välj en färg som passar energin i din produkt eller tjänst.
  2. Action färger – Det här saknas i infografiken nedan, men att identifiera en primär aktionsfärg och sekundär aktionsfärg är oerhört användbart. Det utbildar din publik att fokusera på specifika användargränssnittselement baserat på färgen.
  3. Aytterligare färger – Välj ytterligare färger som kompletterar din primära färg, helst färger som gör din primära färg pop.
  4. Bakgrundsfärger – Välj en färg för bakgrunden på din webbplats – möjligen mindre aggressiv än din primära färg. Tänk också på mörkt och ljust läge. Fler och fler webbplatser har färgscheman i ljust eller mörkt läge.
  5. Typsnittsfärger – Välj en färg för texten som ska finnas på din webbplats – kom ihåg att ett heltäckande svart typsnitt är sällsynt och rekommenderas inte.

Som ett exempel, mitt företag Highbridge utvecklat ett onlinevarumärke för en klänningstillverkare som ville bygga en e-handelssida direkt till konsument där människor kunde köpa klänningar online. Vi förstod vår målgrupp, varumärkets värde och – eftersom varumärket till övervägande del var digitalt men också hade en fysisk produkt – fokuserade vi på färgscheman som fungerade bra i tryck (CMYK), tygpaletter (Pantone) samt digital (RGB och Hex).

Testa ett färgschema med marknadsundersökningar

Vår process för vårt färgval var intensiv.

  1. Vi gjorde marknadsundersökningar på en serie primärfärger med vår målgrupp som reducerade oss till en enda färg.
  2. Vi gjorde marknadsundersökningar om en serie sekundära och tertiära färger med vår målgrupp där vi minskade några färgscheman.
  3. Vi gjorde produktmodeller (produktförpackningar, halstaggar och hängetiketter) samt e-handelsmockups med färgscheman och gav dem till såväl kunden som målgruppen för feedback.
  4. Eftersom deras varumärke till stor del var beroende av säsongsvariationer, inkorporerade vi även säsongsfärger i mixen. Detta kan vara praktiskt för specifika samlingar eller bilder för annonser och sociala medier.
  5. Vi gick igenom den här processen mer än ett halvdussin gånger innan vi bestämde oss för det slutliga schemat.

closet52 färgschema

Medan märkesfärgerna är ljusrosa och mörkgrå, utvecklade vi den actionfärger att vara nyansen av grönt. Grönt är en handlingsinriktad färg så det var ett utmärkt val för att dra våra användares ögon till handlingsorienterade element. Vi införlivade inversen av grönt för våra sekundära åtgärder (grön kant med vit bakgrund och text). Vi testar också en mörkare nyans av grönt på actionfärgen för svävande åtgärder.

Sedan vi precis lanserade webbplatsen har vi införlivat musspårning och värmekartor för att observera de element som våra besökare dras till och interagerar mest med för att säkerställa att vi har ett färgschema som inte bara ser bra ut... det fungerar bra.

Färger, vitt utrymme och elementegenskaper

Att utveckla ett färgschema bör alltid åstadkommas genom att testa det i ett övergripande användargränssnitt för att observera användarnas interaktion. För webbplatsen ovan har vi också införlivat mycket specifika marginaler, stoppning, konturer, kantradier, ikonografi och typsnitt.

Vi levererade en fullständig varumärkesguide för företaget att distribuera internt för marknadsföring eller produktmaterial. Varumärkeskonsistens är avgörande för detta företag eftersom de är nya och inte har någon medvetenhet i branschen just nu.

Här är den resulterande e-handelswebbplatsen med färgschema

  • Closet52 - Köp klänningar online
  • Closet52 Samlingssida
  • Closet52 produktsida

Besök Closet52

Färganvändbarhet och färgblindhet

Glöm inte användbarhetstester för färgkontrast över delar av din webbplats. Du kan testa ditt schema med hjälp av Testverktyg för webbplatstillgänglighet. Med vårt färgschema vet vi att vi har några kontrastproblem som vi kommer att arbeta med på vägen, eller så kanske vi till och med har några alternativ för våra användare. Intressant nog är chanserna för färgproblem hos vår målgrupp ganska låga.

Färgblindhet är oförmågan att uppfatta skillnader mellan några av de färger som icke-färgade funktionshindrade användare kan urskilja. Färgblindhet påverkar ca fem till åtta procent av männen (cirka 10.5 miljoner) och mindre än en procent av kvinnorna.

Usability.gov

Teamet på WebsiteBuilderExpert har sammanställt denna infografiska och detaljerade medföljande artikel om Hur man väljer en färg för din webbplats det är extremt grundligt.

Hur man väljer ett färgschema för din webbplats