Этап 4 — Работа с цветом

6) Определите цвета макета

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

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

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

Если фирменных цветов нет или вы хотите поэкспериментировать с колористикой, то возьмите за базу цвет (цвета) с иллюстрации, которую вы выбрали на прошлом этапе.

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

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

7) Окрасьте фон

С оттенками разобрались — переходим к их использованию.

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

Если не уверены в надёжности цветов, воспользуйтесь специальным сервисом для проверки контраста от coolors.co. Бал контакта должен быть не менее 4,5.

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

Для фона и плашки можно использовать:

• Просто цвет.

• Лёгкий градиент (от более светлого до более темного оттенка). Оттенки должны слабо отличаться. Хорошо, если градиент будет еле заметен.

• Найти готовый фон в интернете.

Готовый фон должен быть однородным, т. е. быть одного цвета или из 2−4 похожих цветов.

Если хотите сделать трендовый дизайн, то используйте сетчатые градиенты, ищите их по запросу «mesh gradient» на стоках (например, много классных качественных и бесплатных mesh-фонов на Freepik).

← Назад

К следующему этапу →

Вывод

В этом этапе важно выбрать один или два акцентных цвета для макета, придерживаясь принципа использования оттенков и избегая ярких контрастов с черным и белым, которые предназначены только для текста. Предпочтительно использовать фирменные цвета или, при их отсутствии, базовые цвета из выбранной иллюстрации, при этом желательно, чтобы выбранные цвета были комплементарными и располагались напротив друг друга на цветовом круге. Это поможет создать гармоничное сочетание, которое не будет отвлекать внимание, а подчеркнет важные элементы дизайна. В процессе оформления необходимо учитывать контрастность, чтобы тексты и графика легко читались, при этом можно экспериментировать с оттенками, яркостью и насыщенностью фона, делая его светлым или темным в зависимости от настроения и целей баннера. Для проверки контрастности рекомендуется использовать онлайн-сервисы, например coolors.co, где минимальный допустимый уровень контраста — 4,5. В качестве фона можно использовать однотонный цвет, градиент или готовый однородный фон из интернета, предпочтительно с мягкими переходами или сетчатым градиентом, что придает дизайну актуальность и эстетичность.