Kako razviti sheme boja za web stranicu, e-trgovinu ili aplikacije

Razvijte sheme boja za web stranicu, e-trgovinu ili aplikacije

Podijelili smo nekoliko članaka o važnosti boje u odnosu na marku. Za web-stranicu, web-mjesto za e-trgovinu ili mobilnu ili web-aplikaciju, to je jednako kritično. Boje utječu na:

  • Početni dojam o brendu i njegovoj vrijednosti – na primjer, luksuzna roba često koristi crnu boju, crvena implicira uzbuđenje itd.
  • Odluke o kupnji – povjerenje marke može se odrediti kontrastom boja. Meke sheme boja mogu biti ženstvenije i pouzdanije, oštri kontrasti mogu biti hitniji i potaknuti popustima.
  • Upotrebljivost i korisničko iskustvo – boje imaju psihološki i fiziološki utjecaj, što olakšava ili otežava navigaciju korisničkim sučeljem.

Koliko je važna boja?

  • 85% ljudi tvrdi da boja ima veliki utjecaj na ono što kupuju.
  • Boje povećavaju prepoznatljivost marke u prosjeku za 80%.
  • Otisak u boji odgovoran je za 60% prihvaćanja ili odbijanja proizvoda.

Prilikom određivanja sheme boja za web stranicu, postoje neki koraci detaljno opisani u popratnoj infografici:

  1. Primarna boja – Odaberite boju koja odgovara energiji vašeg proizvoda ili usluge.
  2. Akcijske boje – Ovo nedostaje u infografici u nastavku, ali identificiranje boje primarne akcije i boje sekundarne akcije je od velike pomoći. Obrazuje vašu publiku da se usredotoči na određene elemente korisničkog sučelja na temelju boje.
  3. Adodatne boje – Odaberite dodatno boje koje se nadopunjuju vaša primarna boja, idealno boje koje čine vašu primarnu boju pop.
  4. Boje pozadine – Odaberite boju za pozadinu svoje web stranice – možda manje agresivnu od vaše primarne boje. Imajte na umu i tamni i svijetli način rada.. sve više i više web-mjesta uključuje sheme boja na svijetlom ili tamnom načinu rada.
  5. Boje slova – Odaberite boju za tekst koji će biti na vašoj web stranici – zapamtite da je jednobojno crno pismo rijetko i ne preporučuje se.

Kao primjer, moja tvrtka Highbridge razvio online robnu marku za proizvođača haljina koji je želio izgraditi web-mjesto za e-trgovinu izravno za potrošače na kojem bi ljudi mogli kupiti haljine online. Razumjeli smo našu ciljanu publiku, vrijednost brenda i – budući da je marka bila pretežno digitalna, ali je imala i fizički proizvod – usredotočili smo se na sheme boja koje su dobro funkcionirale na tisku (CMYK), palete tkanina (Pantone), kao i na digitalni (RGB i Hex).

Testiranje sheme boja uz istraživanje tržišta

Naš proces odabira sheme boja bio je intenzivan.

  1. Proveli smo marketinško istraživanje o nizu primarnih boja s našom ciljanom publikom koja nas je svela na jednu boju.
  2. Napravili smo marketinško istraživanje o nizu sekundarnih i tercijalnih boja s našom ciljanom publikom, gdje smo suzili neke sheme boja.
  3. Napravili smo makete proizvoda (pakiranje proizvoda, naljepnice za vrat i viseće oznake) kao i makete e-trgovine sa shemama boja i dali smo ih klijentima kao i ciljnoj publici na povratnu informaciju.
  4. Budući da je njihov brend uvelike ovisio o sezonalnosti, u mješavinu smo uključili i sezonske boje. To može biti korisno za određene kolekcije ili vizuale za oglase i dijeljenje na društvenim mrežama.
  5. Prošli smo kroz ovaj proces više od pola tuceta puta prije nego što smo se odlučili za konačni plan.

shema boja ormara52

Dok su boje robne marke svijetloružičasta i tamno siva, mi smo razvili akcijske boje da bude nijansa zelene. Zelena je boja usmjerena na akciju pa je bila izvrstan izbor za privlačenje očiju naših korisnika na elemente orijentirane na akciju. Ugradili smo inverznu zelenu za naše sekundarne radnje (zeleni obrub s bijelom pozadinom i tekstom). Također testiramo tamniju nijansu zelene na boji akcije za radnje pri lebdenju.

Otkako smo upravo pokrenuli web-mjesto, uključili smo praćenje miša i toplinske karte kako bismo promatrali elemente na koje su naši posjetitelji privučeni i s kojima su najviše u interakciji kako bismo osigurali da imamo shemu boja koja ne samo da izgleda dobro… ona radi dobro.

Boje, razmak i karakteristike elemenata

Razvoj sheme boja uvijek bi trebao biti postignut testiranjem u cjelokupnom korisničkom sučelju kako bi se promatrala interakcija korisnika. Za gornju stranicu također smo uključili vrlo specifične margine, padding, obrise, radijuse obruba, ikonografiju i slova.

Isporučili smo potpuni vodič za brendiranje za tvrtku za internu distribuciju za sve marketinške ili materijale za proizvode. Dosljednost robne marke ključna je za ovu tvrtku jer su novi i u ovom trenutku nemaju nikakvu svijest u industriji.

Evo rezultirajuće stranice za e-trgovinu sa shemom boja

  • Closet52 - Kupujte haljine online
  • Stranica zbirki Closet52
  • Stranica proizvoda Closet52

Posjetite Ormar52

Upotrebljivost boja i sljepoća za boje

Ne zaboravite na testiranje upotrebljivosti za kontrast boja na svim elementima vaše stranice. Svoju shemu možete testirati pomoću Alat za testiranje pristupačnosti web stranice. S našom shemom boja znamo da imamo nekih problema s kontrastom na kojima ćemo raditi u nastavku, ili čak možemo imati neke opcije za naše korisnike. Zanimljivo je da su šanse za probleme s bojama kod naše ciljane publike prilično niske.

Sljepoća za boje je nemogućnost uočavanja razlika između nekih boja koje neobojeni korisnici mogu razlikovati. Sljepoća za boje utječe na oko pet do osam posto muškaraca (otprilike 10.5 milijuna) i manje od jedan posto žena.

Upotrebljivost.gov

Tim WebsiteBuilderExperta sastavio je ovu infografiku i detaljan popratni članak o Kako odabrati boju za svoju web stranicu to je izuzetno temeljito.

Kako odabrati shemu boja za svoju web stranicu