Шпаргалка для дизайнеров по выбору цветовых решений

Выбор цветового решения для сайта – ответственный этап. Цвет играет важную роль с позиции соответствия создаваемому образу.

16 May, 15:32
Виталий Степин
Дизайнер
5301
0

Принципом выбора цвета служит гармония, которая основывается на контрасте цветовых соотношений.

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

Прослеживается тесная взаимосвязь между цветом и эмоциональным состоянием пользователя. Рассмотрим, какую эмоциональную окраску несут популярные цвета.

Жёлтый

Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).

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

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

Желтый цвет

Зелёный цвет

Эмоции и ассоциации: рост и стабильность, темы финансов и окружающей среды.

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

Зеленый цвет

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

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

Социальные сети вроде Twitter и Facebook используют более лёгкие и средние оттенки синего, а корпоративные сайты предпочитают более тёмные, символизирующие силу и надёжность.

Синий цвет

Фиолетовый

Эмоции и ассоциации: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

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

Фиолетовый цвет

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

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

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

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

Черный цвет

Белый

Эмоции и ассоциации: чистота, простота, добродетель.

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

Белый цвет

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

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

Серый цвет

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

Более тёмные оттенки бежевого создают ощущение традиционности и приземлённости, передают бумажную текстуру, а более светлые оттенки выглядят свежее и современнее.

Ресурсы для подбора цветовой гаммы

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

Выбор цветовой гаммы

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

Вот список лучших девяти ресурсов, которые Вы можете взять на заметку:

COLORlovers

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

COLORlovers

Adobe color CC

Adobe Color CC является частью пакета Adobe Creative Cloud. С помощью Adobe Color CC Вы можете просматривать большое количество цветовых гамм или создавать свои собственные в удобном пользовательском интерфейсе. Этот инструмент особенно удобен, если Вы используете другие продукты Adobe для своих проектов по веб-дизайну: есть возможность загружать и использовать Ваши темы в других продуктах Adobe Creative Cloud.

Adobe color CC

Color Matters

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

Color Matters

Paletton

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

Color Matters

Color explorer

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

Color explorer

ColorSchemer

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

ColorSchemer Gallery

Check my colours  

После создания цветовых гамм важно проверить их и убедиться, что пользователи с дефицитом цвета смогут просматривать Ваш сайт. Этот инструмент бесплатный, был создан веб-разработчиком Джованни Скала. «Check my colours» поможет Вам проверить комбинации цветов переднего плана и фона с помощью тестов на основе алгоритмов.

Check my colours

Color hunter

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

Color hunter

Pictaculous 

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

Pictaculous

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

Добавление комментария:

Подписаться на новые статьи

Подпишитесь на новые статьи и вы будете получать самые свежие новости прямо к вам на почту