Цвет - это не только невероятно мощная часть веб-сайта, он играет решающую роль в определении пользовательского опыта.
Использование цвета дает вам возможность вызывать определенные эмоции, привлекать внимание и предоставлять визуальные подсказки, которые подскажут вашим пользователям, как им следует взаимодействовать с вашим сайтом.
Они также помогают донести психологическое послание о вашем бренде и продукте, чтобы его можно было узнать в вашей отрасли.
В зависимости от того, как вы используете цвет, он может укрепить или разрушить ваш бренд; выбор неправильной схемы может сбить с толку вашу аудиторию или дать ей неправильное представление о вашей компании.
Что еще более усложняет ситуацию: выбор пары красивых цветов, которые лично вам нравятся, могут не представлять ваш продукт должным образом или не резонировать с вашей целевой аудиторией.
Чтобы помочь вам в выборе идеальной цветовой палитры, давайте посмотрим, какие цвета передают определенные эмоции, как использовать их для брендинга вашего сайта и лучшие практики использования для передачи определенных визуальных сообщений
Определите и поймите свою целевую аудиторию
Как правило, цвета и узоры, которые вы используете, предназначены для того, чтобы вызвать у пользователя соответствующие эмоции и придать вашему сайту индивидуальность.
Когда вы включаете цвет в UX вашего сайта, ваша цель состоит в том, чтобы побудить пользователей выполнить определенное действие, прочитать определенный контент или определенным образом взаимодействовать с вашим сайтом.
Чтобы цвета и UX соответствовали этим целям, вам необходимо определить свою целевую аудиторию/персону покупателя. Это особенно важно, поскольку цвета, которые вы используете, могут восприниматься по-разному в зависимости от возраста, культуры, социального статуса, ценностей и т. д.
Прежде чем выбрать цветовую палитру, необходимо учитывать четыре важных момента:
- Определите продукт и отрасль, для которой разрабатывается UX
- Определите основную демографическую группу для продукта/отрасли
- Понять, как цвета воспринимаются этой группой населения
- Определите, как цвета могут быть использованы в UX вашего сайта
Вы должны убедиться, что вы выбираете цвета, которые эмоционально выражают тот тип личности, который вы хотите видеть в своей компании, который будет наиболее привлекательным для вашей аудитории.
Вы можете даже заметить, что в некоторых отраслях используются определенные цвета (синий для технологических гигантов (Dell, HP), зеленый для компаний по производству продуктов питания (Whole Foods, Tropicana) и т. д.). Упомянутые отрасли лучше всего идентифицируют себя с этими цветами, поскольку они помогают вызвать у потребителей идеальные эмоции.
Хотя вам может понравиться то, как Twitter использует синий цвет, это не обязательно означает, что он подойдет вашей пользовательской базе. Выбор цветов, наиболее подходящих для ваших пользователей, - это первый шаг к созданию индивидуальности, характерной для вашей отрасли и бренда.
Исследование вашей демографической ситуации и отраслевых цветовых моделей поможет создать более последовательный бренд вашей компании, а также создаст чувство авторитета и доверия
Палитры для дизайна
Отправьтесь в путешествие по воспоминаниям и вернитесь в класс рисования в начальной школе. Я уверен, что хотя бы однажды твой учитель рассказывал тебе о цветовом круге.
На нем указаны основные цвета (красный/пурпурный, желтый и синий/голубой), которые можно комбинировать для создания вторичных цветов (оранжевого, зеленого и фиолетового). Добавление белого цвета поможет оттенить цвет, а черный создаст оттенки.
Вы также можете помнить, что цвета, расположенные напротив друг друга, являются дополнительными. Контраст, создаваемый этими цветами, может помочь привлечь внимание к определенным областям вашего сайта. Work Ninja использовала это на своей домашней странице, чтобы привлечь внимание к кнопке «Начать», а также к любым важным элементам графики.
Если вы идете по этому пути на своем сайте, убедитесь, что на вашем сайте не слишком много дополнительных цветов, иначе вы начнете привлекать внимание к областям вашего сайта, которые этого не заслуживают.
Кроме того, цвета, расположенные рядом друг с другом, аналогичны. Они, как правило, являются «более безопасным» выбором из-за сходства цветов, которые вызывают более спокойные чувства и имеют низкий контраст. Lloyds Bank включил эту тему на свой сайт, создав общее единство своей группы.
Остерегайтесь использовать слишком близкие друг к другу цвета, которым не хватает контраста, так как это может создать проблемы с читабельностью для вашего пользователя.
Даже с учетом всех этих рекомендаций выбор цветовой палитры может оказаться непростой задачей. Один из инструментов, который мне нравится использовать при выборе цвета, - это Adobe Color. Он позволяет вам исследовать множество цветовых схем, больше, чем описано в этой статье.
Использование Adobe Color - это фантастический способ визуализировать различные категории теории цвета и получить вдохновение для брендинга вашего сайта. Поиграйте с инструментом и посмотрите, какие комбинации рекомендуются в соответствии с вашими цветовыми предпочтениями
Улучшение пользовательского опыта
После того, как вы определите палитру, подходящую для вашего бренда, пришло время понять, как ее можно применить на вашем веб-сайте.
На первый взгляд, вам нужно сосредоточиться на том, чтобы придерживаться выбранных вами цветов, чтобы сайты выглядели единообразными. Но помимо этого, вам необходимо убедиться, что выбранные вами цвета поддерживают задачи пользователей и удовлетворяют их.
Давайте рассмотрим некоторые примеры использования цветов для предоставления пользователям правильных визуальных сигналов и сообщений.
Определите связанные и конкретные веб-страницы
Вы можете использовать определенные цветовые схемы, чтобы идентифицировать веб-страницы, которые должны быть сгруппированы вместе или отличаться от остальных. Это помогает пользователям узнать, как организована информация на сайте, и начать классифицировать то, что представляют собой определенные стили и цвета страниц.
Разделение определенных страниц также позволяет пользователям определять области вашего сайта, которые могут иметь свою уникальную цель. Например, если у вас есть отдельная целевая страница для специального вебинара, который вы проводите, макет этой страницы может отличаться от остальной части вашего сайта, чтобы предупредить пользователей, что она не похожа на стандартные целевые страницы, которые они привыкли видеть на вашем сайте..
Wrike использует этот метод, чтобы создать единство страниц своих продуктов. Все они имеют очень похожий шаблон и следуют одному и тому же стилю, используя большие изображения с чередующимися сторонами светло-черного текста. У них даже есть вкладки на каждой странице, чтобы указать, на какой странице продукта вы находитесь.
Связывание визуальных элементов или элементов управления
У вас должен быть особый стиль для определенных визуальных элементов и элементов управления, чтобы вы могли связать их назначение без необходимости догадываться пользователям.
Например, вам нужно, чтобы ваша кнопка BOFU имела цвет, отличный от остальных кнопок, чтобы выделить ее как наиболее важный призыв к действию. Вкладки, выделяющие категории в вашем блоге, должны быть легко узнаваемы, чтобы пользователи могли определить, какие темы вы обсуждаете.
Вы также можете использовать аналогичные цвета или разные оттенки цветов, чтобы определить определенные состояния ваших ссылок/кнопок. Эту технику также можно использовать для придания глубины вашим элементам, чтобы они выглядели вдавленными при нажатии или наведении курсора.
Republica использует эту технику на своих кнопках, чтобы привлечь внимание к тому, что активно в данный момент, в зависимости от того, на что вы наводите курсор.
Выделение важной информации, связанной с задачей
Использование высококонтрастных цветов - отличный способ привлечь пользователей к элементам, которые могут потребовать их внимания или определенных действий.
Например, если у вас есть форма, которую необходимо заполнить, использование красного цвета для определения наличия в ней ошибки - отличный способ привлечь к ним внимание. Google использует этот метод при заполнении формы для регистрации учетной записи Gmail
Вы также можете применить эту концепцию после выполнения определенных задач. Использование более холодных или более нежных цветов дает пользователям понять, что они выполнили задачу. Gmail использует минималистичный стиль и синюю кнопку, чтобы указать, что вы успешно зарегистрировали учетную запись.
Представление иерархической информации
Цвет особенно важен для установления иерархии информации на ваших страницах. Если все сделано правильно, пользователи смогут просматривать страницы и понимать, о чем они.
Для этого вам не обязательно нужен самый яркий розовый цвет, какой только можно найти, чтобы привлечь внимание к конкретному действию. Использование простой палитры в сочетании с более яркими или светлыми цветами поможет.
Vimeo использует этот прием на своей домашней странице, помещая черный прямоугольник вокруг белой формы, что добавляет контраста на фоне. После того, как пользователь увидит логотип и значение, следующим элементом, который увидит пользователь, станет форма. Это важно, поскольку это следующий шаг, который они хотят, чтобы пользователи выполнили.