Аналітика та тестуванняВміст МаркетингЕлектронна комерція та роздрібна торгівляМаркетингова інфографікамаркетингові інструментиМобільний та планшетний маркетингСоціальні медіа та маркетинг впливу

Як розробити колірні схеми веб-сайту, електронної комерції або програми

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

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

Наскільки важливий колір?

  • 85% людей стверджують, що колір має великий вплив на те, що вони купують.
  • Кольори підвищують впізнаваність бренду в середньому на 80%.
  • Кольоровий відбиток відповідає за 60% прийняття або відхилення товару.

Визначаючи колірну схему для веб-сайту, є кілька кроків, які детально описані в супровідній інфографіці:

  1. Основний колір – Виберіть колір, який відповідає енергії вашого продукту чи послуги.
  2. Кольори дії – Це відсутнє в інфографіці нижче, але визначення основного кольору дії та кольору вторинної дії є надзвичайно корисним. Це навчає вашу аудиторію зосереджуватися на конкретних елементах інтерфейсу користувача на основі кольору.
  3. Aдодаткові кольори – Виберіть додаткове кольори, які доповнюють ваш основний колір, в ідеалі кольори, які створюють ваш основний колір поп.
  4. Кольори фону – Виберіть колір фону вашого веб-сайту – можливо, менш агресивний, ніж ваш основний колір. Пам’ятайте також про темний і світлий режими... все більше і більше сайтів використовують кольорові схеми у світлому або темному режимах.
  5. Кольори шрифту – Виберіть колір для тексту, який буде на вашому веб-сайті – пам’ятайте, що суцільний чорний шрифт рідкісний і не рекомендується.

Як приклад моя компанія DK New Media розробив онлайн-бренд для виробника суконь, який хотів створити сайт електронної комерції, де люди могли б купувати сукні онлайн. Ми розуміли нашу цільову аудиторію, цінність бренду, і – оскільки бренд був переважно цифровим, але також мав і фізичний продукт – ми зосередилися на кольорових схемах, які добре працювали для друку (CMYK), палітри тканин (Pantone), а також цифровий (RGB і Hex).

Тестування колірної схеми за допомогою дослідження ринку

Наш процес вибору колірної схеми був інтенсивним.

  1. Ми провели маркетингове дослідження серії основних кольорів із нашою цільовою аудиторією, що звело нас до одного кольору.
  2. Ми провели маркетингове дослідження серії вторинних і третинних кольорів із нашою цільовою аудиторією, де ми звузили деякі колірні схеми.
  3. Ми зробили макети продуктів (упаковка продукту, бирки для шиї та підвісні бирки), а також макети електронної комерції з кольоровими схемами та надали їх клієнту, а також цільовій аудиторії для зворотного зв’язку.
  4. Оскільки їхній бренд значною мірою залежав від сезонності, ми також включили в суміш сезонні кольори. Це може стати в нагоді для конкретних колекцій або візуальних елементів для реклами та публікацій у соціальних мережах.
  5. Ми проходили цей процес понад півдюжини разів, перш ніж зупинитися на остаточній схемі.
колірна гамма шафа52

Хоча кольори бренду – світло-рожевий і темно-сірий, ми розробили їх кольори дії бути відтінком зеленого. Зелений колір орієнтований на дію, тому це був чудовий вибір, щоб привернути увагу наших користувачів до елементів, орієнтованих на дію. Ми включили зворотний зелений для наших вторинних дій (зелена рамка з білим фоном і текстом). Ми також тестуємо темніший відтінок зеленого на кольорі дії для дій наведення.

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

Кольори, пробіл і характеристики елементів

Розробка колірної схеми завжди повинна здійснюватися шляхом тестування її в загальному інтерфейсі користувача, щоб спостерігати за взаємодією користувачів. Для сайту вище ми також включили дуже конкретні поля, відступи, контури, радіуси меж, іконографію та шрифти.

Ми надали для компанії повний посібник із брендингу для внутрішнього розповсюдження для будь-яких маркетингових або продуктових матеріалів. Узгодженість бренду має вирішальне значення для цієї компанії, оскільки вони нові й на даний момент не мають жодної обізнаності в галузі.

Ось кінцевий сайт електронної комерції з кольоровою схемою

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

Зручність використання кольорів і колірна сліпота

Не забудьте перевірити юзабіліті на контрастність кольорів між елементами вашого сайту. Ви можете перевірити свою схему за допомогою Інструмент тестування доступності веб-сайту

. Завдяки нашій колірній схемі ми знаємо, що у нас є деякі проблеми з контрастом, над якими ми будемо працювати в майбутньому, або ми навіть можемо мати деякі варіанти для наших користувачів. Цікаво, що ймовірність проблем із кольором у нашої цільової аудиторії досить низька.

Дальтонізм – це нездатність сприймати відмінності між деякими кольорами, які можуть розрізнити нефарбовані користувачі. Дальтонізм впливає о п'ять-вісім відсотків чоловіків (приблизно 10.5 мільйонів) і менше одного відсотка жінок.

Usability.gov

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

Як вибрати колірну схему для свого веб-сайту

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.