Блог MuWID

Оцените преимущества MuWID

Мы постоянно совершенствуем систему. Следите за новостями: узнавайте о появлении новых виджетов и возможностей.

А теперь подробнее
19 октября 2017 год

Играем с цветом: яркие решения для сайтов

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

В этой статье мы собрали самые популярные техники использования ярких цветов в web. Применяйте их в своих сайтах, созданных на Adobe Muse c CMS MuWID, и управляйте эмоциями своих посетителей с помощью цветовых решений.

Монохромные сайты

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

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

Двуцвет

В соответствии с названием, это сочетание двух цветов. Это могут быть два оттенка одного цвета или два контрастных цвета. Раньше эта техника была популярна в печати, теперь же набирает популярность в web. Благодаря Spotify, популярность двуцвета растёт с каждым днём.

Двуцветные изображения стали настоящим визуальным символом Spotify.

Создавайте эмоции

Двуцветы позволяют наполнить изображение любой эмоцией. Разные цвета создают разные эмоции:

• Мягкие скромные комбинации цветов создают серьёзную атмосферу, подходящую для бизнеса. Посмотрите не сайт Holm Marcher and Co. Каждая его деталь выполнена в деловом стиле.

• Сочетание ярких цветов создаёт ощущение счастья, дружественную атмосферу, хорошее настроение. Этот эффект использовали в дизайне своего сайта New Deal Design

• Одна яркая иллюстрация стоит тысячи слов

Сделайте текст максимально читабельным

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

Посмотрите, как этот эффект использовало digital-агентство Method

Используйте двуцвет для мобильных версий

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

Изображение: Ognjen Divljak

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

Градиент

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

Зачем их использовать? Читайте ниже.

Сделайте страницу современной

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

Изображение: Ramotion

Сделайте контент более доступным 

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

Создайте 3D-эффект

Плоский дизайн прост для восприятия, однако становится всё более очевидно, что ему не хватает реализма. Чтобы компенсировать этот недостаток, дизайнеры часто используют градиенты, добавляя глубины фону. Одна из последних тенденций – добавлять 3D-элементы в web-дизайн.

Изображение: Swiss Army Man

Сделайте небольшой акцент градиентом

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

 

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

Управляйте вниманием посетителя

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

• Тяжёлые комбинации цвета (непрозрачный и насыщенный цвет) привлекают внимание к самому цвету 

Изображение: Studio Up

• Лёгкие комбинации делают фокус на изображении

Изображение: Outlines

Заключение

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

В материле использована информация, опубликованная в официальном блоге Adobe.

Появился вопрос? Мы всегда готовы на него ответить.