Як распрацаваць вэб-сайт, электронную камерцыю або каляровыя схемы прыкладанняў

Распрацоўвайце вэб-сайт, электронную камерцыю або каляровыя схемы прыкладання

Мы падзяліліся даволі шмат артыкулаў аб важнасці колеру ў дачыненні да брэнда. Для вэб-сайта, сайта электроннай камерцыі, мабільнага або вэб-прыкладання, гэта гэтак жа важна. Колеры ўплываюць на:

  • Першапачатковае ўражанне пра брэнд і яго каштоўнасць - напрыклад, у прадметах раскошы часта выкарыстоўваецца чорны колер, чырвоны - гэта хваляванне і г.д.
  • Рашэнні аб куплі – давер да брэнда можа вызначацца каляровым кантрастам. Мяккія каляровыя схемы могуць быць больш жаноцкімі і вартымі даверу, рэзкія кантрасты могуць быць больш актуальнымі і абумоўленымі зніжкамі.
  • Зручнасць выкарыстання і карыстацкі досвед - колеру маюць псіхалагічны а таксама фізіялагічнае ўздзеянне, што робіць яго прасцей або цяжэй арыентавацца ў карыстальніцкім інтэрфейсе.

Наколькі важны колер?

  • 85% людзей сцвярджаюць, што колер мае вялікі ўплыў на тое, што яны купляюць.
  • Колеры павышаюць пазнавальнасць брэнда ў сярэднім на 80%.
  • Каляровы адбітак адказвае за 60% прыняцця або адхілення прадукту.

Пры вызначэнні каляровай схемы для вэб-сайта ёсць некалькі крокаў, падрабязна апісаны ў суправаджальнай інфаграфіцы:

  1. Першасны колер - Выберыце колер, які адпавядае энергетыцы вашага прадукту або паслугі.
  2. Колеры дзеянняў – Гэта адсутнічае ў інфаграфіцы ніжэй, але вызначэнне асноўнага колеру дзеяння і колеру другаснага дзеяння надзвычай карысна. Гэта навучае вашу аўдыторыю засяродзіцца на пэўных элементах карыстальніцкага інтэрфейсу на аснове колеру.
  3. Aдадатковыя колеры – Абярыце дадатковы колеры, якія дапаўняюць ваш асноўны колер, у ідэале колеры, якія робяць ваш асноўны колер поп.
  4. Колеры фону - Выберыце колер фону вашага сайта - магчыма, менш агрэсіўны, чым ваш асноўны колер. Памятайце таксама пра цёмны і светлы рэжым.. усё больш і больш сайтаў уключаюць каляровыя схемы ў светлым або цёмным рэжыме.
  5. Колеры шрыфта – Выберыце колер для тэксту, які будзе на вашым сайце – памятайце, што аднатонны чорны шрыфт сустракаецца рэдка і не рэкамендуецца.

Як прыклад, мая кампанія Highbridge распрацаваў інтэрнэт-брэнд для вытворцы сукенак, які хацеў стварыць сайт электроннай камерцыі непасрэдна для спажыўцоў, дзе людзі маглі б купіць сукенкі ў Інтэрнэце. Мы зразумелі нашу мэтавую аўдыторыю, каштоўнасць брэнда і - паколькі брэнд быў пераважна лічбавым, але і меў фізічны прадукт - мы засяродзіліся на каляровых схемах, якія добра працавалі ў друку (CMYK), палітры тканін (Pantone), а таксама лічбавы (RGB і Hex).

Тэставанне каляровай схемы з даследаваннем рынку

Наш працэс выбару каляровай схемы быў інтэнсіўным.

  1. Мы правялі маркетынгавыя даследаванні па серыі асноўных колераў з нашай мэтавай аўдыторыяй, што прывяло нас да аднаго колеру.
  2. Мы правялі маркетынгавыя даследаванні па шэрагу другасных і троесных колераў з нашай мэтавай аўдыторыяй, дзе мы звузілі некаторыя каляровыя схемы.
  3. Мы рабілі макеты прадуктаў (упакоўка прадукту, шыйныя біркі і падвесныя біркі), а таксама макеты электроннай камерцыі з каляровымі схемамі і прадаставілі іх кліентам, а таксама мэтавай аўдыторыі для зваротнай сувязі.
  4. Паколькі іх брэнд шмат у чым залежаў ад сезоннасці, мы таксама ўключылі ў сумесь сезонныя колеры. Гэта можа спатрэбіцца для канкрэтных калекцый або візуальных элементаў для рэкламы і публікацый у сацыяльных сетках.
  5. Мы праходзілі гэты працэс больш за паўтузіна разоў, перш чым спыніліся на канчатковай схеме.

Шкаф52 каляровая гама

У той час як колеры брэнда - светла-ружовы і цёмна-шэры, мы распрацавалі яго колеры дзеяння быць адценнем зялёнага. Зялёны колер, арыентаваны на дзеянне, таму гэта быў выдатны выбар, каб прыцягнуць увагу нашых карыстальнікаў да элементаў, арыентаваных на дзеянне. Мы ўключылі зваротны зялёны для нашых другасных дзеянняў (зялёная аблямоўка з белым фонам і тэкстам). Мы таксама тэстуем больш цёмны адценне зялёнага на колеры дзеяння для дзеянняў пры навядзенні.

Так як мы толькі запусцілі сайт, мы ўключылі адсочванне мышы і цеплавыя карты, каб назіраць за элементамі, якія прыцягваюць нашых наведвальнікаў і з якімі больш за ўсё ўзаемадзейнічаюць, каб пераканацца, што ў нас ёсць каляровая схема, якая не проста выглядае добра... яна працуе добра.

Колеры, прабел і характарыстыкі элементаў

Распрацоўка каляровай схемы заўсёды павінна выконвацца шляхам яе тэставання ў агульным карыстальніцкім інтэрфейсе для назірання за ўзаемадзеяннем карыстальнікаў. Для сайта вышэй, мы таксама ўключылі вельмі канкрэтныя палі, запаўненне, абрысы, радыусы межаў, іканаграфію і шрыфты.

Мы даставілі поўнае кіраўніцтва па брэндынгу для кампаніі для ўнутранага распаўсюджвання для любых маркетынгавых або прадуктовых матэрыялаў. Кансістэнцыя брэнда мае вырашальнае значэнне для гэтай кампаніі, таму што яны новыя і на дадзены момант не ведаюць у галіны.

Вось выніковы сайт электроннай камерцыі з каляровай схемай

  • Closet52 - Купляйце сукенкі ў Інтэрнэце
  • Старонка калекцый Closet52
  • Старонка прадукту Closet52

Наведайце шафу 52

Каляровы юзабіліці і дальтаслепасць

Не забудзьцеся праверыць юзабіліці на каляровы кантраст паміж элементамі вашага сайта. Вы можаце праверыць сваю схему з дапамогай Інструмент тэставання даступнасці вэб-сайтаў. З нашай каляровай гамай мы ведаем, што ў нас ёсць некаторыя праблемы з кантрастам, над якімі мы будзем працаваць у далейшым, або ў нас нават могуць быць варыянты для нашых карыстальнікаў. Цікава, што верагоднасць праблем з колерам у нашай мэтавай аўдыторыі даволі нізкая.

Барваслепасць - гэта няздольнасць ўспрымаць адрозненні паміж некаторымі колерамі, якія могуць адрозніць неафарбаваныя карыстальнікі. Барваслепасць дзівіць аб ад пяці да васьмі працэнтаў мужчын (прыкладна 10.5 мільёна) і менш за адзін працэнт жанчын.

Usability.gov

Каманда WebsiteBuilderExpert сабрала гэтую інфаграфіку і падрабязную суправаджальную артыкул пра Як выбраць колер для вашага сайта гэта надзвычай старанна.

Як выбраць каляровую схему для вашага сайта