Как разработать цветовые схемы для веб-сайтов, электронной коммерции или приложений

Разработка цветовых схем для веб-сайтов, электронной торговли или приложений

Мы поделились несколькими статьями о важности цвета для бренда. Для веб-сайта, сайта электронной коммерции, мобильного или веб-приложения это так же важно. Цвета влияют на:

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

Насколько важен цвет?

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

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