Иллюстрации — Артём Морозов

Часто веб-дизайнеры (а особенно те веб-дизайнеры, у кого за плечами много лет практики в полиграфии) к вопросу подбора цветовой гаммы веб-сайта относятся халтурно. Как один из примеров неверного подхода к подбору цветовой гаммы сайта — выстраивание её полностью на основе брендбука клиента.

Цвета из брендбука дизайнеры порой берут без оглядки на цветовой подтекст элементов, над которыми работают. Например, среди фирменных цветов клиента — красный, чёрный, белый. Гамма, к слову сказать, весьма популярная. И когда доходит дело до того, чтоб вставить на сайт кнопку (например, кнопку «вход»), многие дизайнеры берут и без оглядки вставляют красную кнопку с белыми буквами. Правильно ли такое мышление? Нет! Ведь подтекст красного — это отрицание. Как это работает? Очень просто. Есть два слова «да» и «нет». И есть два цвета — красный и зеленый. С каким из цветов какое слово у вас ассоциируется?

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

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

Итак, как сделать так, чтобы цветовая гамма сайта улучшала его юзабилити и не сбивала людей с толку?

Вот несколько элементарных советов, которые касаются исключительно подхода к цветовым решениям.

1. Избегайте использования чистых цветов

Если вы разрабатываете сайт, в котором, к примеру, предполагается делать белый фон и чёрные буквы, не используйте чисто белый (#ffffff) и чисто чёрный цвета (#000000). Лучше возьмите светлый оттенок серого цвета для фона, и тёмный оттенок серого для букв.

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

Слева — чистые цвета, справа — оттенки

2. Серый = неактивный

Подсознательно серый цвет воспринимается как цвет неактивного элемента. Избегайте использовать его для ссылок и кнопок.

Неактивная кнопка

3. Оформление кнопок

Когда оформляете кнопки — старайтесь с помощью цвета подсказывать их значение.

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

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

Кнопки, которые означают выход, отказ, отмену лучше делать красными.

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

Кнопки с жёлтым отливом — согласие, покупка чего бы то ни было, привлечение внимания.

Синие кнопки могут использоваться в тех же случаях согласия или для действия без четко обозначенного эмоционального окраса (например, для авторизации).

Серый цвет можно использовать для действий, которые в настоящий момент недоступны.

Примеры оформления кнопок: слева удачные, справа неудачные

4. Синий – цвет ссылок

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

Синий текст — это плохо

5. Смена цвета в зависимости от состояния

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

Примеры состояний

6. Использование «зебры» в таблицах

Читаемость таблиц на сайте очень здорово увеличивается за счет использования разных цветов фона для чётных и нечётных строк.

Таблица с чередующимися строками

 

С помощью этих 6 несложных советов можно здорово улучшить восприятие вашего сайта! Всё очень просто!

 

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

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