Статьи

Приглушенные цвета. Их роль в дизайне

Любой современный UX дизайнер понимает, что в течение последних лет сложилась прочная тенденция плоского и минималистичного дизайна. Такие компании, как Apple, Microsoft и Twitter используют эту концепцию при разработке своих продуктов.

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

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

В статье, опубликованной Nielsen Norman Group под названием "Долговременное воздействие на плоский дизайн: как тренд медленно снижает эффективность пользователя", автор Кейт Мейер описывает, как до появления плоского дизайна такие «кликабельные» элементы как тени или рельефные кнопки помогали указать пользователям на функциональность элементов на странице. Но с развитием плоского дизайна становится все сложнее определить, что является фоном, а что кнопкой. В то время как плоский дизайн пытается сделать взаимодействие более цельным, устранение глубины элементов страницы сбивает с толку пользователей.

К счастью, появилась третья концепция: приглушенные цвета. Достаточно обратиться к цветам этого года (Serenity and Rose Quartz), выбранным компанией Pantone (Pantone, LLC — общепризнанный мировой авторитет в области цвета), чтобы убедиться в растущей популярности цветов, которые являются менее жесткими и более успокаивающими.

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

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

Для того, чтобы посмотреть, как это работает в реальности, мы можем обратиться к картинам раннего Ренессанса. Складки платья Мадонны на картине Рафаэля «Малая Мадонна Каупера» демонстрирует, как только при помощи цвета можно передать глубину и текстуру.

На контрасте с этой техникой выступает светотень — техника, которая использует свет и тень, чтобы создать форму. Это можно увидеть в более поздних картинах эпохи Возрождения — например, картина Леонардо да Винчи «Мона Лиза». Эти картины больше похожи на скевоморфизм, являющийся предшественником плоского дизайна, опирающийся на градиент и затенения. Как и большинство тенденций в жизни история повторяется, и эволюция цвета в дизайне пользовательского опыта не является исключением.

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

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

Приглушенные цвета стали представлять современность, прогрессивность и эффективность. Они представляют собой то, что является новым и актуальным. Приглушенные цвета в знаменитом клипе исполнителя Drake на песню «Hotline Bling?». Мы уверены, что эти цвета были выбраны сознательно. Приглушенные цвета говорят с современной культурой и, следовательно, с массой. Они оказывают эмоциональное воздействие на пользовательский опыт, поскольку имеют значение в конкретный момент. На них не просто легче смотреть, чем на резкие цвета, они концептуально модные.

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

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