Как подбирать цвета для сайта

Как выбрать правильные цвета дизайна для вашего сайта WordPress

Как часто в наши дни вы слышите о цветах дизайна пользовательского интерфейса? Если вы не разговариваете с дизайнером пользовательского интерфейса, не часто. Однако просмотрите успешный веб-сайт WordPress, и вы увидите разные цвета, которые передают сообщение бренда, передают структуру веб-сайта, улучшают распознавание объектов и предоставляют множество других преимуществ.

Выбор правильных цветов важен для достижения визуальной согласованности в дизайне пользовательского интерфейса WordPress. Например, использование светлых цветов для меню навигации и использование ярких цветов для фона может затруднить чтение пунктов меню посетителю. Кроме того, цвета с низкой контрастностью могут затруднить дальтонизмам распознавание изображений и слов на вашем веб-сайте.

Исследование UserTesting показало, что мужчины и женщины предпочитают сайты с яркими или темными цветами, а сайты с белым / минималистичным интерфейсом получают самые низкие оценки. Результаты показывают, какое влияние цвета могут оказать на посетителей веб-сайта.

 

Исследование UserTesting показало

 

 

 

 

 

 

 

 

 

 

Другое исследование Ironpaper показало, что цвета повышают узнаваемость сайта на 80 процентов. Сайты с более светлой цветовой схемой выросли на 1,3 процента, а сайты с темной цветовой схемой – на 2 процента.

Выбор правильных цветов дизайна пользовательского интерфейса для сайта WordPress

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

1. Знайте свою демографию

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

Понимание психологии цвета позволит вам выбрать один или два цвета, которые подходят вашей целевой аудитории и соответствуют целям вашего сайта. Например, если ваш сайт WordPress ориентирован на мужчин в качестве основной аудитории, цвета дизайна пользовательского интерфейса должны включать серый, белый, черный или синий. Избегайте таких цветов, как желтый, фиолетовый, розовый и оранжевый.

 

Take a look at the Primer website. Black compares favorably with other colors on the site Посмотрите на сайте Primer. Черный цвет выгодно отличается от других цветов на сайте

Посмотрите на сайте Primer. Черный цвет выгодно отличается от других цветов на сайте. Для фона в основном используется серый цвет.

 

Global First Spouses использует синий цвет для обслуживания женской аудитории

 

 

 

 

 

 

Для сравнения, Global First Spouses использует синий цвет для обслуживания женской аудитории. Синий цвет нравится представителям обоих полов. Kissmetrics процитировал опрос, который показал, что синий был самым любимым цветом женщин (35 процентов), за ним следуют фиолетовый (23 процента) и зеленый (14 процентов).

2. Изучите теорию цвета, чтобы выбрать правильные цвета.

Теория цвета помогает понять влияние разных цветов, когда они объединяются по определенным причинам. Другими словами, он представляет собой взаимодействие цветов через яркость и контраст. Одна из категорий теории цвета – это цветовое колесо, которое позволяет вам выбирать цвета дизайна пользовательского интерфейса для вашего сайта WordPress. В вашем распоряжении несколько вариантов цветовой схемы.

 

несколько вариантов цветовой схемы

 

 

 

 

 

 

 

 

 

 

 

 

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

 

  • Триадическая схема:  эта цветовая схема используется для достижения чистой эстетики и контраста в веб-дизайне WordPress. Цветовая гамма состоит из трех основных цветов и в большом количестве противоположных оттенков. Триадная цветовая схема позволяет перевесить яркие цвета и добиться яркого внешнего вида.

3. Посмотрите, как выглядит контраст

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

Насыщенность и контраст цвета : насыщенность цвета относится к интенсивности цвета. На 100% насыщенный цвет находится в его самой яркой и чистой форме. Использование приглушенных или ярких цветов может быть отличным способом создать низкий или высокий контраст в веб-дизайне WordPress. Яркие цвета используются для привлечения внимания посетителей на фоне черного.

 

Использование приглушенных или ярких цветов может быть отличным способом создать низкий или высокий контраст

 

 

 

 

 

 

 

 

 

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

Значение цвета и контраст: значение цвета – это темнота или яркость цвета. 100% белый и 100% черный – часто используемые контрастные значения. Однако вы можете использовать более темные и более светлые цвета друг друга, чтобы выделить определенные элементы вашего дизайна и одновременно добавить контраста.

Цветовая температура и контраст. Цвета можно разделить на группы в зависимости от их температуры: нейтральные, теплые, холодные. Синий и зеленый – холодные, а оранжевый, красный и желтый – теплые. Коричневый, серый, белый и черный относятся к нейтральной категории. Вы можете легко создать контраст моего смешивания температур в цветах дизайна пользовательского интерфейса.

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

4. Используйте инструменты для справки.

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

  • COLOURlovers : Это дает вам больше, чем просто возможность поиска по цветовым палитрам. Вы также можете читать интересные темы и участвовать в обсуждениях цвета с другими людьми. COLOURlovers также имеет инструмент PhotoCopa, который можно использовать для создания цветовых схем из изображений.
  • Палитра материалов : онлайн-генератор цветовых палитр был создан для Material Design компанией Google. Пользователям просто нужно выбрать 2 цвета, после чего им предоставляется цветовая палитра для работы. Цвета определяются как основные, светлые основные, темные основные, разделитель, акцент, основной текст, дополнительный текст и текст / значки. Один из цветов можно отключить, чтобы уменьшить контраст.
  • Adobe Color CC: переименованное предложение Adobe, ранее называвшееся Adobe Kuler, позволяет пользователям экспериментировать с различными цветовыми схемами. Все схемы состоят из 5 цветов. Пользователи могут использовать одну и ту же схему для создания вариантов, сравнения схем бок о бок и выбора, какие из них использовать для своих цветов дизайна пользовательского интерфейса.
  • Color Explorer : это подробный инструмент, который предлагает широкий спектр функций для создания, разработки и настройки цветовых палитр. Например, есть функция, которая помогает пользователям определять видимость WCAG их выбора цвета. Кроме того, есть целый набор функций создания палитры и средства выбора.

Эти инструменты помогают удовлетворить разные потребности. Их может использовать любой, от новичка до опытного дизайнера.

 

Цветовые круги

Цветовой круг помогает подходить с умом к оформлению сайта, логотипа или странички в социальных сетях. Идея любого цветового круга такая: помещая на круг простую геометрическую форму (треугольник, крест, квадрат, дугу), вы можете проверять сочетаемость цветов 🌈 В итоге, вместо того, чтобы тыкаться наугад, сможете сразу понять, какие сочетания сработают, а какие нет.

Используя цветовой круг, вы сможете:

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

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

Вот некоторые из них.

Покажут сочетающиеся оттенки внутри одного цвета:

Paletton
http://paletton.com/ Materialpalette
https://www.materialpalette.com/ Colorhexa
https://www.colorhexa.com/ Colourco

https://colourco.de/ Выстроят готовые сочетания оттенков по тем самым геометрическим фигурам:

Colorscheme
https://colorscheme.ru/ Color.adobe
https://color.adobe.com/ Colourco
https://colourco.de/ Colorhexa
https://www.colorhexa.com/ Colrd

http://colrd.com/ Разберут существующее изображение на палитру:

Color.adobe
https://color.adobe.com/ Get-color
https://get-color.ru/ Imgonline
https://www.imgonline.com.ua/ Colordrop
https://colordrop.io/ Colrd

http://colrd.com/ Покажет, какие цветовые сочетания используют крупные бренды:

Brandcolors

https://brandcolors.net/

 

Немного юмора от заказчиков 🙂

Opinion of customers on the selection of colors for the site

 

 

 

 

 

 

 

 

 

 

 

А вы пользуетесь законами сочетаемости цветов в своей работе?

 

Обсудить и заказать можно через форму ниже
Создание недорогих сайтов
Добавить комментарий

  1. OleGG

    Неплохо…. Кое что знал раньше. Есть что попробовать, респектую, лайк.

    Ответить
    1. Георгий Осипов автор

      Спасибо.

      Ответить