Как работать с яркими цветами: 10 практических советов
Дизайн с использованием ярких цветов — это очень интересно! Но и немного опасно. В этом материале расскажем почему.
Дизайн с использованием ярких цветов — это очень интересно! Но и немного опасно. Яркие цветовые решения могут вызывать эмоции, привлекать внимание и создавать нужные вибрации глубоко в фибрах души. Однако, с другой стороны, яркий цвет может показаться слишком насыщенным и «резать глаз». Пользователям не нужно много времени: они фактически мгновенно определяют, манит их этот цвет или наоборот — отталкивает.
Мы собрали 10 примеров использования ярких и смелых цветов в дизайне. Параллельно расскажем, как придать индивидуальность и яркий стиль вашим проектам, сохраняя при этом баланс и, что самое главное, доступность и «читабельность» всех элементов. Важно понимать, что сами по себе советы будут работать не так эффективно, если у вас не развито зрительное мышление. О том, как развить зрительное мышление и насмотренность, мы уже рассказывали в одном из материалов. А пока — в бой!
1. Создавайте необходимые ощущения
Цвет может создать новые, не виданные ранее, ощущение и подружить (если не сказать больше — связать) ваш сервис или бренд с пользователями так, как не могут сделать многие другие элементы дизайна. Яркие и смелые цветовые решения передают настроение сайта. Какое оно? Тёмное, светлое или яркое.
Цвета, взятые из палитры Material Design, уже долгое время являются лидерами во время выбора ярких и модных вариантов. Кстати, о том, что такое «модно», мы писали в статье про цветовые тренды 2024 года.
Несмотря на то, что цвета, взятые из палитры Material Design, предназначены для продуктов Google, эти оттенки могут работать в вебе так, как от них точно никто не ожидал. Это очень хорошо видно на примере ниже, где используется широкая палитра цветов, которую вы, возможно, не ожидали увидеть, но они гармонично сочетаются друг с другом.
Скрин главной страницы сайта Codegoba
2. Выделите необычный элемент
Смелый выбор цвета может направить фокус внимания на определённый аспект или элемент дизайна. Нужно что‑то выделить? Используйте этот приём, он отлично работает.
На сайте, посвящённом шрифту Avantt (см. ниже), используется боковой элемент навигации, который был бы совсем незаметен, если бы не яркая подложка в левой части экрана. Цвет привлекает внимание к названию шрифта и элементам навигации. Фактически, его можно считать одним из элементов usability.
Скрин главной страницы сайта Avantt
3. Подчеркните, кто вы
Яркий цвет может работать как элемент выделения в дизайне. Неоновый цвет, представленный ниже, является интересным и качественным примером, потому что он служит в роли «визуального соединителя». Он отлично связывает логотип в верхнем углу с названием компании.
Смелые цветовые решения для элементов бренда лучше всего работают, когда остальная часть дизайна является менее красочной. Светлый или тёмный фон особенно хорошо подчёркивает «якорные» элементы.
Работа компании Edge Studio
4. Создайте текстовый элемент с эффектом «вау»
Ещё один пример использования смелых цветовых решений с текстом — Superglow. В композиции, приведённой ниже, эта надпись является доминирующим элементом. Даже несмотря на то, что в качестве фона используется большое изображение с людьми. Сочетание розового и жёлтого цветов с выраженной тенью выглядит смело. Кроме того, большой шрифт очень трудно не заметить.
Советуем экспериментировать с различными типами бекграундов, чтобы у текстовых элементов было пространство для использования цветовых эффектов. Но при этом они должны полностью подавлять остальной дизайн.
Скрин главной страницы сайта Superglow
5. Балансируйте эстетические решения
Яркие оттенки могут обеспечить правильный баланс, чтобы строгая эстетика не казалась слишком минимальной (читай — недоработанной). И не важно, речь о большом ярком блоке или вкраплениях цвета. Этот баланс работает, потому что он даёт пользователю что‑то интересное, на чем можно сфокусировать внимание, когда остальная часть дизайна не выглядит так же ярко. Чтобы делать что-то подобное, нужно действительно хорошо жонглировать цветовыми решениями. И совсем недавно на YouTube-канале Пижамной Академии мы рассказывали, как подбирать цвета like a PRO. Советы из видоса могут очень сильно помочь вам в этом!
Студия MV, сайт которой представлен ниже, использует интересный подход с красной подложкой почти на пол-экрана для небольших текстовых элементов. Да, блок очень контрастирует с остальным черно-белым пространством, но он не перегружен и обладает собственной «сбалансированной строгостью».
Скрин главной страницы сайта MV Studio
6. Заявите о том, что это за продукт
Иногда смелый цвет — это все, что вам нужно, чтобы заявить о себе или о продукте. Подумайте обо всех ассоциациях, заложенных в примере ниже, и впечатлении, которые производит эта страница.
Фрагмент из сайта Alfred Landecher Foundation
7. Привлекайте внимание
Часто смелый яркий оттенок имеет одну цель — завлечь внимание посетителей сайта. Иногда он работает в паре с продуктом на сайте, как в примере ниже, а иногда он просто создаёт общий бекграунд.
Знаете, что особо круто в этом приёме? Вы можете изменить цвета практически в любой момент. Ярко-зелёный фон сегодня может стать жёлтым в следующем месяце или темно-синим через год.
Скрин главной страницы сайта Beme
8. Применяйте элемент «веселья»
Иногда яркий и смелый цвет на сайте — это сочетание оттенков, которые не должны хорошо сочетаться в реальной жизни, но в данном конкретном случае создают очень любопытную картинку. Это может быть что угодно — от использования слишком большого количества цветов (как мы знаем, правила дизайна этого не поощряют) до «несочетаемых» цветов.
В приведённом ниже примере от Letterz School, выбор цветов кажется совершенно оторванным от реальности, их нужно хорошенько «переварить». Но, на удивление, они не перегружены, а лёгкость остального дизайна и забавная фигурка человека, которая бегает по блокам, делают сайт интересным и весёлым.
Это ещё раз доказывает, что иногда правила можно нарушать. Никогда не знаешь, к каким интересным решениям это может привести.
Главная страница сайта Letterz School
9. Создавайте яркие бекграунды
Один из проверенных способов использования яркого цвета — это фоновый элемент дизайна, когда остальных визуальных элементов не так уж и много. Соедините цвет с блоком текста, в котором используется интересный шрифт, и вы почти всегда получите выигрышную комбинацию. Успевай только подкручивать свойства цвета и экспериментировать с параметрами RGB. Как? Вы ещё не знаете, что это? Публикация про свойства цвета в web поможет это исправить!
Скрин главной страницы сайта 30UA
10. Покажите трендовую сторону
Говоря о трендах, яркий цвет сам по себе является трендом и может прекрасно сочетаться с другими модными элементами. Сайт Wokine, представленный ниже, сочетает в себе несколько модных элементов в одном дизайне: смелый цвет, эстетика разделённого экрана и уникальный выбор шрифта.
Цвет помогает сбалансировать другие элементы дизайна, направить внимание пользователей в сторону навигации и превратить экран в произведение искусства.
Скрин главной страницы сайта Wokine
Источник: Design Shack
