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

Розробка кольорових схем для веб-сайтів, електронної комерції або додатків

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

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

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

  • 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 зібрала цю інфографіку та детальну супровідну статтю про Як вибрати колір для свого веб-сайту це надзвичайно ретельно.

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