Hvordan utvikle nettsider, e-handel eller applikasjonsfargeskjemaer

Utvikle fargeskjemaer for nettsider, e-handel eller apper

Vi har delt en del artikler om viktigheten av farger i forhold til et merke. For et nettsted, en netthandelsside eller en mobil- eller nettapplikasjon er det like viktig. Farger har innvirkning på:

  • Førsteinntrykk av et merke og dets verdi – for eksempel bruker luksusvarer ofte svart, rødt betyr spenning osv.
  • Kjøpsbeslutninger – tilliten til et merke kan bestemmes av fargekontrasten. Myke farger kan være mer feminine og pålitelige, harde kontraster kan være mer presserende og rabattdrevne.
  • Brukervennlighet og brukeropplevelse – farger har en psykologisk og fysiologisk påvirkning også, noe som gjør det enklere eller vanskeligere å navigere i et brukergrensesnitt.

Hvor viktig er farge?

  • 85 % av folk hevdet at farge har stor innflytelse på hva de kjøper.
  • Farger øker merkevaregjenkjenningen med gjennomsnittlig 80 %.
  • Fargeinntrykk er ansvarlig for 60 % av aksept eller avvisning av et produkt.

Når du bestemmer et fargeskjema for et nettsted, er det noen trinn beskrevet i den medfølgende infografikken:

  1. Primærfarge – Velg en farge som passer til energien til produktet eller tjenesten din.
  2. Action farger – Dette mangler i infografikken nedenfor, men å identifisere en primær handlingsfarge og sekundær handlingsfarge er svært nyttig. Det utdanner publikum til å fokusere på spesifikke brukergrensesnittelementer basert på fargen.
  3. Aekstra farger – Velg tillegg farger som utfyller din primærfarge, ideelt sett farger som gjør din primærfarge pop.
  4. Bakgrunnsfarger – Velg en farge for bakgrunnen til nettstedet ditt – muligens mindre aggressiv enn primærfargen din. Husk også i mørk og lys modus. Flere og flere nettsteder har fargevalg i lys eller mørk modus.
  5. Skrifttypefarger – Velg en farge for teksten som skal være på nettsiden din – husk at en solid sort skrift er sjelden og anbefales ikke.

Som et eksempel, mitt firma Highbridge utviklet et nettmerke for en kjoleprodusent som ønsket å bygge en netthandelsside direkte til forbrukeren der folk kunne kjøp kjoler på nett. Vi forsto målgruppen vår, verdien av merkevaren, og – fordi merket overveiende var digitalt, men også hadde et fysisk produkt – fokuserte vi på fargevalg som fungerte bra på tvers av trykk (CMYK), stoffpaletter (Pantone), samt digital (RGB og Hex).

Teste et fargevalg med markedsundersøkelser

Prosessen vår for valg av fargevalg var intensiv.

  1. Vi gjorde markedsundersøkelser på en serie primærfarger med målgruppen vår som reduserte oss til én enkelt farge.
  2. Vi gjorde markedsundersøkelser på en serie sekundære og tertiære farger med målgruppen vår, der vi begrenset noen fargevalg.
  3. Vi gjorde produktmodeller (produktemballasje, nakkemerker og hengende merker) så vel som e-handelsmodeller med fargeskjemaene og ga dem til kunden så vel som målgruppen for tilbakemelding.
  4. Fordi merkevaren deres i stor grad var avhengig av sesongvariasjoner, inkorporerte vi også sesongfarger i blandingen. Dette kan være nyttig for spesifikke samlinger eller bilder for annonser og sosiale medier.
  5. Vi gikk gjennom denne prosessen mer enn et halvt dusin ganger før vi bestemte oss for den endelige ordningen.

closet52 fargevalg

Mens merkefargene er lys rosa og mørkegrå, utviklet vi den actionfarger å være nyansen av grønt. Grønn er en handlingsorientert farge, så det var et flott utvalg for å trekke brukernes øyne til handlingsorienterte elementer. Vi inkorporerte det inverse av grønt for våre sekundære handlinger (grønn kant med hvit bakgrunn og tekst). Vi tester også en mørkere nyanse av grønn på actionfargen for svevehandlinger.

Siden vi nettopp lanserte nettstedet, har vi inkorporert musesporing og varmekart for å observere elementene som våre besøkende tiltrekkes og samhandler mest med for å sikre at vi har et fargeskjema som ikke bare ser bra ut... det gir gode resultater.

Farger, hvit plass og elementegenskaper

Utvikling av et fargeskjema bør alltid oppnås ved å teste det i et overordnet brukergrensesnitt for å observere brukernes interaksjon. For nettstedet ovenfor har vi også innlemmet svært spesifikke marger, polstring, konturer, kantradiuser, ikonografi og skrifttyper.

Vi leverte en fullstendig merkevareguide som selskapet kan distribuere internt for markedsføring eller produktmateriell. Merkevarekonsistens er avgjørende for dette selskapet fordi de er nye og ikke har noen bevissthet i bransjen på dette tidspunktet.

Her er den resulterende e-handelssiden med fargeskjema

  • Closet52 - Kjøp kjoler på nett
  • Closet52 samlingsside
  • Closet52 produktside

Besøk Closet52

Fargebrukbarhet og fargeblindhet

Ikke glem brukervennlighetstesting for fargekontrast på tvers av elementer på nettstedet ditt. Du kan teste opplegget ditt ved å bruke Tilgjengelighetstestverktøy for nettsteder. Med fargevalget vårt vet vi at vi har noen kontrastproblemer som vi skal jobbe med nedover veien, eller vi kan til og med ha noen alternativer for brukerne våre. Interessant nok er sjansene for fargeproblemer hos målgruppen vår ganske lav.

Fargeblindhet er manglende evne til å oppfatte forskjeller mellom noen av fargene som ikke-fargede funksjonshemmede brukere kan skille. Fargeblindhet påvirker ca fem til åtte prosent av mennene (omtrent 10.5 millioner) og mindre enn én prosent av kvinnene.

Usability.gov

Teamet hos WebsiteBuilderExpert har satt sammen denne infografiske og detaljerte medfølgende artikkelen om Hvordan velge en farge for nettstedet ditt det er ekstremt grundig.

Hvordan velge et fargevalg for nettstedet ditt