Sådan udvikles hjemmeside, e-handel eller applikationsfarveskemaer

Udvikle hjemmeside, e-handel eller app farveskemaer

Vi har delt en del artikler om vigtigheden af ​​farve i forhold til et brand. For en hjemmeside, e-handelsside eller en mobil- eller webapplikation er det lige så vigtigt. Farver har indflydelse på:

  • Indledende indtryk af et brand og dets værdi – fx bruger luksusvarer ofte sort, rød betyder spænding osv.
  • Købsbeslutninger – tilliden til et mærke kan være bestemt af farvekontrasten. Bløde farvesammensætninger kan være mere feminine og troværdige, barske kontraster kan være mere presserende og rabatdrevet.
  • Brugervenlighed og brugeroplevelse – farver har en psykologisk og også fysiologisk påvirkning, hvilket gør det lettere eller sværere at navigere i en brugergrænseflade.

Hvor vigtig er farve?

  • 85 % af mennesker hævdede, at farve har stor indflydelse på, hvad de køber.
  • Farver øger mærkegenkendelsen med i gennemsnit 80 %.
  • Farveindtryk er ansvarlig for 60% af accept eller afvisning af et produkt.

Når du bestemmer et farveskema for et websted, er der nogle trin beskrevet i den medfølgende infografik:

  1. Primær farve – Vælg en farve, der passer til energien i dit produkt eller din tjeneste.
  2. Action farver – Dette mangler i infografikken nedenfor, men det er yderst nyttigt at identificere en primær handlingsfarve og sekundær handlingsfarve. Det uddanner dit publikum til at fokusere på specifikke brugergrænsefladeelementer baseret på farven.
  3. Ayderligere farver – Vælg yderligere farver, der komplementerer din primære farve, ideelt set farver, der gør din primære farve pop.
  4. Baggrundsfarver – Vælg en farve til baggrunden på din hjemmeside – muligvis mindre aggressiv end din primære farve. Husk også i mørk og lys tilstand. Flere og flere websteder inkorporerer farveskemaer på lys eller mørk tilstand.
  5. Skrifttype farver – Vælg en farve til teksten, der skal på din hjemmeside – husk at en ensfarvet sort skrifttype er sjælden og ikke anbefales.

Som et eksempel, min virksomhed Highbridge udviklet et online brand for en kjoleproducent, der ønskede at bygge en direkte til forbrugeren e-handelsside, hvor folk kunne køb kjoler online. Vi forstod vores målgruppe, værdien af ​​mærket, og – fordi mærket overvejende var digitalt, men også havde et fysisk produkt – fokuserede vi på farvesammensætninger, der fungerede godt på tværs af print (CMYK), stofpaletter (Pantone) samt digital (RGB og Hex).

Test af et farveskema med markedsundersøgelser

Vores proces for vores farvevalg var intensiv.

  1. Vi lavede marketingundersøgelser af en række primærfarver med vores målgruppe, der reducerede os til en enkelt farve.
  2. Vi lavede marketingundersøgelser om en række sekundære og tertiære farver med vores målgruppe, hvor vi indsnævrede nogle farveskemaer.
  3. Vi lavede produktmodeller (produktemballage, halsmærker og hængende mærker) samt e-handelsmodeller med farveskemaerne og leverede dem til både klienten og målgruppen for feedback.
  4. Fordi deres mærke i vid udstrækning var afhængig af sæsonbestemthed, inkorporerede vi også sæsonbestemte farver til blandingen. Dette kan være nyttigt for specifikke samlinger eller billeder til annoncer og delinger på sociale medier.
  5. Vi gennemgik denne proces mere end et halvt dusin gange, før vi besluttede os for den endelige ordning.

closet52 farveskema

Mens mærkefarverne er lyserøde og mørkegrå, udviklede vi den action farver at være den grønne nuance. Grøn er en handlingsorienteret farve, så det var et godt valg til at trække vores brugeres øjne til handlingsorienterede elementer. Vi inkorporerede det omvendte af grønt for vores sekundære handlinger (grøn kant med hvid baggrund og tekst). Vi tester også en mørkere grøn nuance på actionfarven til svævehandlinger.

Siden vi lige har lanceret siden, har vi inkorporeret musesporing og varmekort for at observere de elementer, som vores besøgende er tiltrukket af og interagerer mest med, for at sikre, at vi har et farveskema, der ikke bare ser godt ud... det fungerer godt.

Farver, hvidt rum og elementkarakteristika

Udvikling af et farveskema bør altid opnås ved at teste det i en overordnet brugergrænseflade for at observere brugernes interaktion. For siden ovenfor har vi også indarbejdet meget specifikke margener, polstring, konturer, kantradius, ikonografi og skrifttyper.

Vi leverede en komplet branding-guide, som virksomheden kunne distribuere internt til enhver markedsførings- eller produktmateriale. Brandkonsistens er afgørende for denne virksomhed, fordi de er nye og ikke har nogen bevidsthed i branchen på nuværende tidspunkt.

Her er den resulterende e-handelsside med farveskema

  • Closet52 - Køb kjoler online
  • Closet52 Samlingsside
  • Closet52 produktside

Besøg Closet52

Farveanvendelighed og farveblindhed

Glem ikke brugbarhedstest for farvekontrast på tværs af elementer på dit websted. Du kan teste dit skema ved hjælp af Værktøj til test af tilgængelighed på webstedet. Med vores farveskema ved vi, at vi har nogle kontrastproblemer, som vi vil arbejde på nede ad vejen, eller vi kan endda have nogle muligheder for vores brugere. Interessant nok er chancerne for farveproblemer hos vores målgruppe ret lave.

Farveblindhed er manglende evne til at opfatte forskelle mellem nogle af de farver, som ikke-farvede svækkede brugere kan skelne. Farveblindhed påvirker ca fem til otte procent af mændene (ca. 10.5 mio.) og mindre end én procent af kvinderne.

Usability.gov

Teamet hos WebsiteBuilderExpert har sammensat denne infografiske og detaljerede medfølgende artikel om Sådan vælger du en farve til dit websted det er ekstremt grundigt.

Sådan vælger du et farveskema til din hjemmeside