ru ua en
c l o c k
Использование цвета в тенденциях UI/UX дизайна
18 May 2020
блог

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

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

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

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

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

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

Источник underpromise.agency

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник adamriguez.com

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

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

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

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

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

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

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

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

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

Источник andreylee.com

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

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

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

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

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

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

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

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

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

Разноцветные фоны на веб страницах

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

Разноцветные фоны на сайте Onlinewomanbiz

Источник onlinewomanbiz.com

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

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

Источник canatal.net

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

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

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

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

Контрастная типографика на веб странице

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

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

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

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

Источник theoutline.com

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



Современные цвета на веб-странице

Источник frenchbutnice.design

Фоновые цвета на веб странце

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

Цвет фона на веб странице

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

Интерактивные цвета на веб странце

Вы готовы к лидерству в интернете?

Давайте обсудим перспективы продвижения вашего сайта!