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

Один в поле не воин или как бэкендер фулстеком попытался стать

Из песочницы


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

Светлое на Светлом

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

Их трудно читать.

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

К счастью, есть довольно легкий способ для исправления этой проблемы:

Выберите новое изображение в последовательно-цветовом фоне.

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


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

Предложите решения

Если вы только начинаете работать в дизайне, используйте бесплатные инструменты и сервисы: Adobe Color Wheel, Coolors, Swiss Color. Они помогут составить первоначальную цветовую палитру за несколько минут и выбрать основные цвета для будущего сайта. Чтобы лучше понимать композицию и цветовые сочетания, прочитайте книгу «Искусство цвета» Иоханнеса Иттена. В ней хорошо сформулированы и описаны принципы выбора.

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

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

Пример UI-кита с Behance. Автор Raul Taciu.

Если вы хотите создавать приятные и лаконичные палитры для сайтов, приходите на курс «Веб-дизайн с 0 до PRO»

Вы научитесь создавать контраст, управлять вниманием пользователей с помощью цвета и правильно презентовать цветовую палитру клиенту.. Курс «Веб-дизайн с 0 до PRO» Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.

Курс «Веб-дизайн с 0 до PRO» Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Контраст

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

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

Как проверить контрастность текста и фона?

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

Еще использование различных контрастных цветов может помочь сосредоточить внимание зрителя на определенных элементах страницы. 

Если ваш сайт имеет темный фон, сосредоточиться на основном содержании можно благодаря более светлому цвету.

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

Этот принцип также действует при использовании аналоговых цветов. (Которые мы обсудим позже)

Создание цветовой схемы

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

Adobe Color CC


Ранее известный как Kuler, Adobe Color CC является отличным инструментом для создания цветовых палитр. Вы может выбрать правила цвета, а затем вращать колесо. Вы также сможете вручную настроить каждый цвет в палитре и автоматически другие цвета будут регулироваться с тем правилом, которое вы задали. Вы можете создавать цветовые палитры, загружая фотографии.

Photocopa by COLORLovers

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

Material Palette

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

Coolors.co

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

Те, что не заблокированные это и есть наилучшим образом сочетающиеся цвета. Каждый раз нажимая пробел вы получаете лучшую комбинацию. Например, вот такую:

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

Всем спасибо за внимание и до встречи в следующих выпусках блога. Пока!

Вибрации (Vibrancy)


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

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

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

Об этом свидетельствует контент на сайте

Обратите внимание на фотографии, заголовки. И возьмем другой сайт Fox News:

Сайт FOX NEWS раздел LifeStyle содержит в макете более спокойные цвета. Жизнь на сайте в этом разделе идет более размеренная, спокойная. То есть, цвет соответствует характеру контента. И если, например мы перейдем в раздел здоровья, то увидем там еще один цвет: 

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

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

Более того, даже фотографии следует подбирать с учетом того, какие основные цвета она излучает. 

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

Чеклист список для выбора цветовой схемы

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

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

Изучите конкурентов. Еще один аспект, который следует иметь в виду, заключается в том, что ваш продукт не плавает в “синем океане”

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

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

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

Сочетание цветов в интерьере спальни

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

Credit: @

Пример пастельного сочетания цветов в интерьере спальни.

Credit: @

Изумрудно-белая гамма спальной комнаты.

Страстный восточный стиль.

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

Ванная

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

Credit: @

Серо-коричневые цвета в ванной.

Лазурные акценты в ванной комнате.

Детская

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

Часто за основу берется белый цвет, дополняемый розовым, синим, желтым или светло-коричневым.

Пестрая детская комната.

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

Можно также воспользоваться градацией цветов по возрасту ребенка, описанной Рудольфом Штейнером – чем не научный подход к ремонту?

Credit: @

Пастельные тона в дизайне детской.

Красный акцент в детской комнате.

Коридор и прихожая

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

Credit: @

Роскошный светлый интерьер прихожей.

Credit: @

Широкая черно-белая прихожая.


С этим читают