10 советов о том, как использовать яркие цвета в дизайне сайтов

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

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

1. Создать нужное настроение

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

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

2. Выделить нестандартный элемент

Яркий цвет помогает обратить внимание пользователей на конкретный элемент дизайна. Особенно хорошо этот подход работает, если речь идет о чем-то нестандартном.

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

3. Подчеркнуть, кто вы

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

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

4. Создать впечатляющие текстовые элементы

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

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

5. Сделать интерфейс интереснее

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

На сайте Studio MV (пример выше) используется оригинальный подход — почти половина экрана выкрашена в красный цвет и включает маленькие текстовые элементы. Это позволяет создать контраст между ярким блоком и черно-белым дизайном, при этом интерфейс не перегружен деталями. Он остается довольно строгим и сбалансированным.

Кроме того, равновесие достигается благодаря тому, что левая часть экрана разделена по горизонтали на 2 секции.

6. Заявить о себе

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

7. Привлечь внимание

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

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

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

8. Добавить веселья

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

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

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

9. Сделать фон ярким

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

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

10. Следовать трендам

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

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

Цвет помогает привлечь внимание пользователей к размещенному сбоку меню, делает интерфейс сбалансированным и превращает экран в произведение искусства.