Как да разработим уебсайт, електронна търговия или цветови схеми на приложение

Разработване на уебсайт, електронна търговия или цветови схеми на приложения

Споделихме доста статии за важността на цвета по отношение на марката. За уебсайт, сайт за електронна търговия или мобилно или уеб приложение, това е също толкова важно. Цветовете оказват влияние върху:

  • Първоначалното впечатление за марката и нейната стойност – например луксозните стоки често използват черно, червеното предполага вълнение и т.н.
  • Решения за покупка – доверието на дадена марка може да се определя от цветовия контраст. Меките цветови схеми може да са по-женствени и надеждни, резките контрасти може да са по-спешни и водени от намаление.
  • Използваемост и потребителско изживяване – цветовете имат психологически и физиологично въздействие, което прави по-лесно или по-трудно навигирането в потребителски интерфейс.

Колко важен е цветът?

  • 85% от хората твърдят, че цветът има голямо влияние върху това, което купуват.
  • Цветовете повишават разпознаваемостта на марката средно с 80%.
  • Цветният отпечатък е отговорен за 60% от приемането или отхвърлянето на даден продукт.

Когато определяте цветова схема за уебсайт, има някои стъпки, описани подробно в придружаващата инфографика:

  1. Основен цвят – Изберете цвят, който отговаря на енергията на вашия продукт или услуга.
  2. Цветове за действие – Това липсва в инфографиката по-долу, но идентифицирането на основен цвят за действие и вторичен цвят на действие е изключително полезно. Той обучава вашата аудитория да се фокусира върху конкретни елементи на потребителския интерфейс въз основа на цвета.
  3. Aдопълнителни цветове – Изберете допълнително цветове, които се допълват вашият основен цвят, в идеалния случай цветове, които правят вашия основен цвят поп.
  4. Цветове на фона – Изберете цвят за фона на вашия уебсайт – вероятно по-малко агресивен от основния ви цвят. Имайте предвид и тъмен и светъл режим.. все повече и повече сайтове включват цветови схеми в светъл или тъмен режим.
  5. Цветове на шрифта – Изберете цвят за текста, който ще бъде на вашия уебсайт – не забравяйте, че плътният черен шрифт е рядък и не се препоръчва.

Като пример моята компания Highbridge разработи онлайн марка за производител на рокли, който иска да изгради сайт за електронна търговия директно към потребителите, където хората могат купувайте рокли онлайн. Разбрахме нашата целева аудитория, стойността на марката и – тъй като марката беше предимно дигитална, но имаше и физически продукт – ние се фокусирахме върху цветови схеми, които работеха добре при печат (CMYK), палитри от плат (Pantone), както и цифрови (RGB и Hex).

Тестване на цветова схема с пазарни проучвания

Процесът ни за избор на цветова схема беше интензивен.

  1. Направихме маркетингово проучване на серия от основни цветове с нашата целева аудитория, което ни намали до един цвят.
  2. Направихме маркетингово проучване на серия от вторични и третични цветове с нашата целева аудитория, където стеснихме някои цветови схеми.
  3. Направихме макети на продукти (опаковки на продукти, етикети за врата и висящи етикети), както и макети за електронна търговия с цветовите схеми и ги предоставихме на клиента, както и на целевата аудитория за обратна връзка.
  4. Тъй като тяхната марка до голяма степен зависи от сезонността, ние също включихме сезонни цветове в микса. Това може да бъде полезно за конкретни колекции или визуализации за реклами и споделяния в социалните медии.
  5. Минахме през този процес повече от половин дузина пъти, преди да се спрем на окончателната схема.

Цветова схема на гардероб 52

Докато цветовете на марката са светло розово и тъмно сиво, ние разработихме екшън цветове да бъде нюансът на зеленото. Зеленото е цвят, ориентиран към действие, така че беше страхотен избор да привлечем очите на нашите потребители към елементи, ориентирани към действие. Ние включихме обратното на зеленото за нашите вторични действия (зелена рамка с бял фон и текст). Тестваме и по-тъмен нюанс на зелено върху цвета на действието за действия при задържане на курсора.

Откакто току-що стартирахме сайта, ние включихме проследяване на мишката и топлинни карти, за да наблюдаваме елементите, които нашите посетители са привлечени и с които взаимодействат най-много, за да гарантираме, че имаме цветова схема, която не просто изглежда добре… тя се представя добре.

Цветове, бяло пространство и характеристики на елементите

Разработването на цветова схема винаги трябва да се извършва чрез тестването й в цялостен потребителски интерфейс, за да се наблюдава взаимодействието на потребителите. За сайта по-горе също включихме много специфични полета, подпълване, очертания, радиуси на границите, иконография и шрифтове.

Доставихме пълно ръководство за брандиране на компанията за вътрешно разпространение за всякакви маркетингови или продуктови материали. Последователността на марката е от решаващо значение за тази компания, защото те са нови и нямат никаква осведоменост в индустрията в този момент.

Ето полученият сайт за електронна търговия с цветова схема

  • Closet52 - Купувайте рокли онлайн
  • Страница за колекции на Closet52
  • Продуктова страница на Closet52

Посетете Closet52

Използваемост на цветовете и цветна слепота

Не забравяйте тестването на използваемостта за цветови контраст между елементите на вашия сайт. Можете да тествате вашата схема с помощта на Инструмент за тестване на достъпността на уебсайтове. С нашата цветова схема знаем, че имаме някои проблеми с контраста, по които ще работим по-нататък, или дори може да имаме някои опции за нашите потребители. Интересното е, че шансовете за проблеми с цвета с нашата целева аудитория са доста ниски.

Цветната слепота е невъзможността да се възприемат разликите между някои от цветовете, които неоцветените потребители могат да различават. Цветната слепота засяга около пет до осем процента от мъжете (приблизително 10.5 милиона) и по-малко от един процент от жените.

Usability.gov

Екипът на WebsiteBuilderExpert е събрал тази инфографика и подробна придружаваща статия за Как да изберете цвят за вашия уебсайт това е изключително задълбочено.

Как да изберете цветова схема за вашия уебсайт