Verkkosivustojen, verkkokaupan tai sovellusten värimaailman kehittäminen

Kehitä verkkosivuston, verkkokaupan tai sovelluksen väriteemoja

Olemme jakaneet useita artikkeleita värien merkityksestä brändille. Verkkosivustolle, verkkokauppasivustolle tai mobiili- tai verkkosovellukselle se on yhtä tärkeää. Värit vaikuttavat:

  • Ensivaikutelma brändistä ja sen arvosta – esimerkiksi ylellisyystavaroissa käytetään usein mustaa, punainen merkitsee jännitystä jne.
  • Ostopäätökset – brändin luottamus voi määräytyä värikontrastin perusteella. Pehmeät värimaailmat voivat olla naisellisempia ja luotettavampia, jyrkät kontrastit voivat olla kiireellisempiä ja halvempia.
  • Käytettävyys ja käyttökokemus – väreillä on psykologinen vaikutus ja myös fysiologiset vaikutukset, mikä tekee käyttöliittymässä liikkumisesta helpompaa tai vaikeampaa.

Kuinka tärkeä väri on?

  • 85 % ihmisistä väitti, että värillä on suuri vaikutus siihen, mitä he ostavat.
  • Värit lisäävät brändin tunnettuutta keskimäärin 80 %.
  • Värivaikutelma vastaa 60 % tuotteen hyväksymisestä tai hylkäämisestä.

Kun määrität verkkosivuston värimaailman, seuraa joitakin vaiheita, jotka on kuvattu oheisessa infografiassa:

  1. Ensisijainen väri – Valitse väri, joka sopii tuotteesi tai palvelusi energiaan.
  2. Toimintavärit – Tämä puuttuu alla olevasta infograafista, mutta ensisijaisen toiminnon värin ja toissijaisen toiminnon värin tunnistaminen on erittäin hyödyllistä. Se kouluttaa yleisösi keskittymään tiettyihin käyttöliittymäelementteihin värin perusteella.
  3. Alisävärejä – Valitse lisää täydentäviä värejä päävärisi, mieluiten värejä, jotka tekevät päävärisi pop.
  4. Taustavärit – Valitse verkkosivustosi taustan väri – mahdollisesti vähemmän aggressiivinen kuin päävärisi. Muista myös tumma ja vaalea tila.. yhä useammat sivustot käyttävät väriteemoja vaaleassa tai tummassa tilassa.
  5. Kirjasinvärit – Valitse verkkosivullasi olevan tekstin väri – muista, että musta kirjasintyyppi on harvinainen eikä sitä suositella.

Esimerkkinä yritykseni Highbridge kehitti verkkobrändin mekkovalmistajalle, joka halusi rakentaa suoraan kuluttajille suunnatun verkkokauppasivuston, jossa ihmiset voivat ostaa mekkoja netistä. Ymmärsimme kohdeyleisömme, brändin arvon, ja – koska brändi oli pääosin digitaalinen, mutta sillä oli myös fyysinen tuote – keskityimme värimaailmaan, joka toimi hyvin printissä (CMYK), kangaspaletteissa (Pantone) sekä digitaalinen (RGB ja Hex).

Väriteeman testaaminen markkinatutkimuksella

Prosessimme värimaailmamme valinnassa oli intensiivinen.

  1. Teimme kohdeyleisömme kanssa markkinointitutkimusta päävärien sarjasta, mikä vähensi meidät yhteen väriin.
  2. Teimme kohdeyleisömme kanssa markkinointitutkimusta sarjasta toissijaisia ​​ja tertiäärisiä värejä, joissa rajasimme joitain värimalleja.
  3. Teimme tuotemalleja (tuotepakkaukset, kaulalaput ja ripustuslaput) sekä verkkokaupan malleja värimaailman kanssa ja toimitimme ne asiakkaalle sekä kohdeyleisölle palautetta varten.
  4. Koska heidän brändinsä oli suurelta osin riippuvainen kausivaihtelusta, sisällytimme sekoitukseen myös sesongin värit. Tästä voi olla hyötyä tietyissä kokoelmissa tai mainoksissa ja sosiaalisen median jaoissa.
  5. Kävimme tämän prosessin läpi yli puoli tusinaa kertaa ennen kuin päädyimme lopulliseen suunnitelmaan.

closet52 värimaailma

Vaikka merkkivärit ovat vaaleanpunainen ja tummanharmaa, kehitimme toiminnan värejä olla vihreän sävy. Vihreä on toimintaan suuntautunut väri, joten se oli loistava valinta kiinnittää käyttäjiemme katseet toimintaan suuntautuneisiin elementteihin. Lisäsimme vihreän käänteisen toissijaisiin toimintoihimme (vihreä reunus valkoisella taustalla ja tekstillä). Testaamme myös tummempaa vihreän sävyä toimintavärissä leijutustoimintoihin.

Siitä lähtien, kun olemme juuri julkaisseet sivuston, olemme sisällyttäneet siihen hiiren seurantaa ja lämpökarttoja, jotta voimme tarkkailla elementtejä, joihin vierailijamme vetoavat ja joiden kanssa ollaan eniten vuorovaikutuksessa varmistaaksemme, että meillä on värimaailma, joka ei vain näytä hyvältä... se toimii hyvin.

Värit, valkoinen tila ja elementin ominaisuudet

Väriteeman kehittäminen tulee aina tehdä testaamalla sitä yleisessä käyttöliittymässä käyttäjien vuorovaikutuksen tarkkailemiseksi. Yllä olevaan sivustoon sisällytimme myös erittäin tarkat marginaalit, pehmusteet, ääriviivat, reunasäteet, ikonografian ja kirjasintyypit.

Toimitimme yritykselle täydellisen brändäysoppaan sisäiseen jakeluun markkinointi- tai tuotemateriaaleja varten. Brändin johdonmukaisuus on tälle yritykselle kriittistä, koska ne ovat uusia, eivätkä he ole tällä hetkellä tietoisia alalla.

Tässä on tuloksena oleva verkkokauppasivusto värimaailmalla

  • Closet52 - Osta mekkoja verkosta
  • Closet52-kokoelmasivu
  • Closet52 tuotesivu

Vieraile Closet52:ssa

Värien käytettävyys ja värisokeus

Älä unohda käytettävyystestausta sivustosi eri elementtien värikontrastin määrittämiseksi. Voit testata suunnitelmaasi käyttämällä Verkkosivuston saavutettavuuden testaustyökalu. Värimaailmamme avulla tiedämme, että meillä on kontrastiongelmia, joita aiomme ratkaista matkan varrella, tai meillä voi jopa olla käyttäjillemme joitain vaihtoehtoja. Mielenkiintoista on, että väriongelmien mahdollisuus kohdeyleisössämme on melko pieni.

Värisokeus on kyvyttömyys havaita eroja joidenkin sellaisten värien välillä, jotka värittömät heikentyneet käyttäjät voivat erottaa. Värisokeus vaikuttaa noin viidestä kahdeksaan prosenttia miehistä (noin 10.5 miljoonaa) ja alle prosentti naisista.

Usability.gov

WebsiteBuilderExpertin tiimi on koonnut tämän infografian ja yksityiskohtaisen artikkelin aiheesta Kuinka valita väri verkkosivustollesi se on erittäin perusteellista.

Kuinka valita väriteema verkkosivustollesi