Како развити шеме боја за веб локацију, е-трговину или апликације

Развијте шеме боја за веб локацију, е-трговину или апликације

Поделили смо доста чланака о важности боје у односу на бренд. За веб локацију, сајт за е-трговину или мобилну или веб апликацију, то је једнако критично. Боје утичу на:

  • Први утисак о бренду и његовој вредности – на пример, луксузна роба често користи црну боју, црвена имплицира узбуђење, итд.
  • Одлуке о куповини – поверење у бренд може бити одређено контрастом боја. Меке шеме боја могу бити женственије и поузданије, оштри контрасти могу бити хитнији и вођени попустима.
  • Употребљивост и корисничко искуство – боје имају психолошки и физиолошки утицај, што олакшава или отежава навигацију кроз кориснички интерфејс.

Колико је важна боја?

  • 85% људи тврди да боја има велики утицај на оно што купују.
  • Боје повећавају препознатљивост бренда у просеку за 80%.
  • Отисак боје је одговоран за 60% прихватања или одбијања производа.

Приликом одређивања шеме боја за веб локацију, постоје неки кораци који су детаљно описани у пратећој инфографики:

  1. Примарна боја – Изаберите боју која одговара енергији вашег производа или услуге.
  2. Акционе боје – Ово недостаје у инфографици у наставку, али је од велике помоћи идентификовање боје примарне акције и боје секундарне акције. Образује вашу публику да се фокусира на одређене елементе корисничког интерфејса на основу боје.
  3. Aдодатне боје – Изаберите додатно боје које се допуњују ваша примарна боја, идеално боје које чине вашу примарну боју pop.
  4. Боје позадине – Одаберите боју за позадину ваше веб странице – можда мање агресивну од ваше примарне боје. Имајте на уму и тамни и светли режим.. све више сајтова укључује шеме боја на светлом или тамном режиму.
  5. Типефаце Цолорс – Одаберите боју за текст који ће бити на вашој веб страници – запамтите да је чврст црни фонт реткост и не препоручује се.

Као пример, моја компанија Highbridge развио онлајн бренд за произвођача хаљина који је желео да направи сајт за е-трговину директно за потрошаче где би људи могли купити хаљине на мрежи. Разумели смо нашу циљну публику, вредност бренда и – пошто је бренд био претежно дигиталан, али је имао и физички производ – фокусирали смо се на шеме боја које су добро функционисале на штампи (ЦМИК), на палети тканина (Пантоне), као и на дигитални (РГБ и Хек).

Тестирање шеме боја помоћу истраживања тржишта

Наш процес избора шеме боја био је интензиван.

  1. Урадили смо маркетиншко истраживање о серији примарних боја са нашом циљном публиком која нас је свела на једну боју.
  2. Урадили смо маркетиншко истраживање о низу секундарних и терцијалних боја са нашом циљном публиком, где смо сузили неке шеме боја.
  3. Урадили смо макете производа (паковање производа, етикете за врат и висеће ознаке) као и макете за е-трговину са шемама боја и дали их клијентима као и циљној публици за повратне информације.
  4. Пошто је њихов бренд у великој мери зависио од сезонског карактера, ми смо такође укључили сезонске боје у мешавину. Ово може бити корисно за одређене колекције или визуелне елементе за огласе и дељење друштвених медија.
  5. Прошли смо кроз овај процес више од пола туцета пута пре него што смо се одлучили на коначну шему.

схема боја цлосет52

Док су боје бренда светло розе и тамно сиве, ми смо развили акционе боје да буде нијанса зелене. Зелена је боја оријентисана на акцију, тако да је био одличан избор за привлачење очију наших корисника на елементе оријентисане на акцију. Уградили смо инверзну зелену за наше секундарне радње (зелена ивица са белом позадином и текстом). Такође тестирамо тамнију нијансу зелене на боји акције за радње при лебдењу.

Откако смо управо покренули сајт, уградили смо праћење миша и топлотне мапе да бисмо посматрали елементе на које су наши посетиоци привучени и са којима су највише у интеракцији како бисмо осигурали да имамо шему боја која не само да изгледа добро… она ради добро.

Боје, бели простор и карактеристике елемената

Развијање шеме боја увек треба да се постигне тестирањем у целокупном корисничком интерфејсу како би се посматрала интеракција корисника. За горњу локацију, такође смо укључили врло специфичне маргине, паддинг, обрисе, радијусе граница, иконографију и слова.

Испоручили смо комплетан водич за брендирање за компанију за интерну дистрибуцију за било који маркетиншки или производни материјал. Конзистентност бренда је кључна за ову компанију јер су нови и немају никакву свест у индустрији у овом тренутку.

Ево резултирајућег сајта за е-трговину са шемом боја

  • Цлосет52 - Купујте хаљине на мрежи
  • Страница колекција Цлосет52
  • Страница производа Цлосет52

Посетите Цлосет52

Употребљивост боја и слепило за боје

Не заборавите на тестирање употребљивости за контраст боја између елемената вашег сајта. Можете тестирати своју шему користећи Алат за тестирање приступачности веб локација. Са нашом шемом боја, знамо да имамо неке проблеме са контрастом на којима ћемо радити у наставку, или можда чак имамо неке опције за наше кориснике. Занимљиво је да су шансе за проблеме са бојама код наше циљне публике прилично ниске.

Далтонизам је немогућност да се уоче разлике између неких боја које необојени корисници могу разликовати. Далтонизам утиче на око пет до осам процената мушкараца (отприлике 10.5 милиона) и мање од једног процента жена.

Усабилити.гов

Тим ВебситеБуилдерЕкперт-а саставио је ову инфографику и детаљан пратећи чланак о Како одабрати боју за своју веб локацију то је изузетно темељно.

Како одабрати шему боја за своју веб локацију