Использование цвета в тенденциях UI/UX дизайна

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

Цвет - основа визуального восприятия

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

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

Источник underpromise.agency

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

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

Яркие цвета в гармонии с нейтральными оттенками

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

Источник eng.etozavtra.ru

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

Источник www.thedigitalpanda.com

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

Блокировка цвета и комбинации контрастов

Цветная блокировка была популярной практикой в ​​модном дизайне с 1960-х годов, и ее можно увидеть в работах известного голландского художника Пита Мондриана. Его картины состоят из исследовательской комбинации ярких смелых цветов с их дополнительными оттенками.

Источник adamriguez.com

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

Источник hauska.co.kr

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

Мульти-палитра для визуализации бренда

Источник unspun.ouiwill.com

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

Источник andreylee.com

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

Ребрендинг Twitch с новой цветовой гаммой

Источник brand.twitch.tv/expression

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

Источник brand.twitch.tv/expression

Разноцветные фоны

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

Источник www.bateaumonparis.com

Источник onlinewomanbiz.com

Контрастная типографика

Источник canatal.net

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

Эмоциональные цветовые пары и брутализм

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

По словам экспертов Pantone Color Institute, новая тенденция характеризуется обширной цветовой палитрой с контрастными разноцветными сочетаниями.

Источник oishiii.sushiya.ua

“Сочетая наше стремление к уникальности, креативности и более спонтанным подходам к дизайну, цветовая палитра на весну / лето 2020 придает дизайну красочное обновление, которое создает сильные цветовые комбинации, а также заряжает энергией через визуал”, — говорит исполнительный директор Pantone.

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

Источник theoutline.com

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

Источник frenchbutnice.design

Источник www.seemakeplay.com

Источник www.quarantine-time.ch