• 6 минут чтения

• UX-дизайн, спонсируемый контент

• Поделись ТвиттерЛинкедин

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

Монотонный

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

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

Дуотон

Как следует из названия, дуотон состоит из двух цветов. Это могут быть два оттенка одного цвета или два контрастных цвета. Эта техника, которая когда-то была основным продуктом печати, обрела новую жизнь в Интернете. Благодаря Spotify популярность дуотонов растет с каждым днем.

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

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

• Мягкие и скромные сочетания цветов создают серьезную атмосферу. В изображенном ниже Holm Marcher & Co каждая деталь способствует созданию деловой атмосферы, и фоновое изображение не является исключением.
  

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

Улучшить читаемость

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

Хорошо переводится на мобильных устройствах

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

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

Градиент

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

Они выполняют следующие функции в пользовательских интерфейсах.

Создайте современный образ

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

Улучшить понимание контента

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

Создание псевдо-3D-эффекта

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

Попробуйте градиентный акцент

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

Наложение

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

Модный вид

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

Сильнейший признак кликабельности

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

Привлечь внимание пользователя

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

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

• Светлые сочетания делают акцент на образе.

Вывод

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

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Инструмент Adobe Experience Design CC (бета-версия) создан для быстрого и плавного процесса проектирования UX, поскольку он позволяет быстрее перейти от идеи к прототипу. Дизайн, прототип и публикация — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также посетить блог Adobe XD, чтобы быть в курсе последних событий.

(мс, вф, ык, ал, ил)