23 Эффективных цветовых решения интернет-магазинов

Цвет играется важную роль в дизайне реализовывающих сайтов, поскольку он разрешает выделять самые важные элементы навигации, выгодно подчеркивать преимущества продукции и, в целом, содействовать улучшению юзабилити. Мы предлагаем вам 23 примера действенного применения цвета на сайтах электронной коммерции — просматривайте и додавайте в закладки!

их значение и Цвета при создании дизайна сайта

1. Virgin America — зеленый цвет для проверенных полей веб-формы

На сайте Virgin America по окончании проверки ввода данных каждое поле веб-формы окрашивается в зеленый цвет. А для выделения еще не заполненного поля при клике на него употребляется фиолетовый:

2. ASOS — привлечение внимания к распродажам в мега-меню

Данный элемент дизайна может показаться фактически незаметным, но однако применение красного цвета для сообщения о скидках и распродажах в мега-меню всегда привлекает внимание. Это хорошая возможность расширить стоимость просмотра корзины и время сайта:

3. Nike — призыв и демонстрация продукта добавить в корзину

На фоне черно-белого дизайна сайта продуктам Nike удается впечатлять своим собственным цветом:

Единственное место, где употребляется броский оранжевый цвет, — это кнопка «Добавить в корзину»:

23 Эффективных цветовых решения интернет-магазинов

Как применять психологию цвета для повышения конверсии?

4. The Trainline — чёткость и контраст

Сочетание броского цвета и умных иконок делает приложение и сайт The Trainline легким и понятным в применении. Достигнутый контраст разрешает визитёрам четко направляться процессу бронирования, делая один ход за раз без страха совершить неточность:

Применение цветных иконок для изображения взрослых детей и пассажиров

5. Pure Cycles — разделение продукции

Pure cycles занимается продажей велосипедов онлайн. Потому, что большая часть из них имеют схожие элементы (во внешнем виде), то применение различного цвета на рамах и колёсах разрешает Pure внести разнообразие и создать каталог, что будет не скучно просматривать:

Данный подход распространяется и на более недорогие продукты, как к примеру комплекты грипс. Pure Cycles отображает все цвета совместно, стремясь к сильному эмоциональному действию для того чтобы, казалось бы, функционального и неинтересного изделия:

При со светящимися велосипедами Pure cycles, вправду, сделал все возможное, дабы изображение продукта максимально выделялось:

Теория цвета — как руководить вниманием пользователя?

6. Pelican — больше понимания и контраста

Вебмагазин электронных книг Pelican имеет достаточно броский и наряду с этим несложный дизайн. Применяемые цвета создают хороший контраст — это оказывает помощь заверить клиента, что чтение книги на его персональном устройстве будет легким и приятным процессом:

7. Houzz — выделение продуктов в UGG (User Generated Content — пользовательский контент)

Houzz — это не совсем сайт электронной коммерции, а торговая площадка, где потребители смогут отыскать дизайнеров, архитекторов и продукты.

UX приложения и сайта вращается около применения цвета бренда (зеленого) для выделения определенных элементов в дизайне. Очень направляться отметить кликабельные зеленые ценники на продуктах в фотографиях интерьеров:

8. Houzz — выделение отзывов

Как правило это делается посредством оранжевого цвета, но Houzz снова же применяет цвет собственного бренда — зеленый:

Данное объявление имеет 23 отзыва, что выделено зеленым цветом

9. Houzz — контурные кнопки (ghost buttons)

Контурные кнопки — один из трендов современного веб-дизайна. При наведении на кнопку она окрашивается снова же в зеленый цвет:

10. Houzz — призывы к действию

Зеленый цвет использован и для элемента призыва к действию «Перейти в магазин»:

11. Houzz — выбор навигационных цепочек (breadcrumb trails) и фильтров

Благодаря такому применению цвета клиенты смогут постоянно определить собственный местонахождение на сайте:

12. Houzz — Rollover-эффект

Кнопка «Сохранить» (для что-то наподобие виш-страницы) и иконка электронной почты (для отправки данной товарной позиции приятелю) при наведении на них курсора меняют собственный цвет с тёмного на зеленый.

Как цвет воздействует на пользовательский опыт?

13. Wish — баннеры о скидках

Wish — сайт и приложение электронной коммерции, нацеленное на любителей распродаж. Оранжевые баннеры на товарах информируют пользователям о размере скидки, оставшемся количестве конкретной позиции и времени до конца распродажи:

14. Helbak — альтернатива безлюдному пространству (white space)

Helbak Ceramics для фона изображений продуктов на домашней странице применяет пастельные оттенки. Это оказывает помощь разграничить пространство, оживить неспециализированный дизайн, и придать блеск продуктам:

палитры и Цветовые схемы. Их применение и значение в веб-дизайне

15. Best Buy — количество товаров в вашей корзине

Это очень стандартная процедура на многих сайтах, в то время, когда поверх иконки корзины отмечается количество добавленных в нее товаров. Best Buy применяет в этом случае цвет собственного бренда, желтый:

16. Crayola — брендинг и радость в чистом виде

Ни одно второе меню в электронной коммерции не доставит вам столько эйфории, сколько меню на сайте Crayola:

Психология веб-дизайна. Как цвета, разметка и шрифты воздействуют на ваше настроение

17. Flipkart — выделение уведомлений

Уведомления становятся все более распространенным явлением в электронной коммерции. Они оповещают пользователей о каких-то особых предложениях, скидках и акциях. Flipkart применяет желтый для выделения иконки колокольчика:

18. Currys — индикатор прогресса чекаут

Эта функция снова же употребляется на многих сайтах электронной коммерции. Текущий ход на сайте Currys выделяется цветом бренда — синим:

19. Lush — контраст продукта

Как и в примере с Nike выше, широкое безлюдное пространство на сайте Lush разрешает выделяться его броским продуктам:

20. Kayak — выделение основной информации

Сервисы бронирования смогут быть чересчур переполнены подробностями. Дабы сделать выговор на самые важных функциях, Kayak применяет оранжевый цвет собственного бренда, и вторичный цвет — зеленый — для таких убеждающих элементов, как скидки и отзывы:

Теория цвета: 7 уроков на примере популярных брендов

21. Odd Pears — иллюстрации продукта

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

2D-единообразие изображений и эффект узоров содействуют появлению жажды собрать всю коллекцию товаров Odd Pears. Цветовая палитра под каждым изображением додаёт еще больше привлекательности:

22. IKEA — неточности чекаут-процесса

Еще одна стандартная функция — применение красного цвета для выделения пропущенного пользователем поля веб-формы либо неправильно введенной информации.

Кое-какие сайты применяют в таких случаях легко красный сообщение и текст характера — IKEA же окрашивает границы поля в красный цвет и додаёт поясняющее сообщение для того чтобы же красного цвета:

«Прошу вас, введите первую строчок вашего адреса тут»
«Прошу вас, введите почтовый индекс»

Как IKEA оптимизирует конверсию?

23. AO.com — цветовая маркировка продуктов

Сайт AO.com применяет зеленый цвет для выделения таких главных функций, как информация о доставке и призывы к действию.

Кроме этого каждому товару на сайте присвоен флажок с классом энергоэффективности (по традиции, зеленого либо красного цвета), что разрешает пользователям скоро выбрать лучшие с данной точки зрения автомобили:

Высоких вам конверсий!

По данным: econsultancy.com

Случайные статьи:

23 фишки эффективного привлечения Клиентов


Подборка похожих статей:

admin