Эстетика брутализма в UX/UI‑дизайне

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

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

Слово брутализм происходит от французского термина béton brut, что означает грубый или необработанный бетон. Изначально оно использовалось для описания стиля необработанной, открытой архитектуры, появившегося в конце 1940-х – начале 1950-х гг.

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

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

Такие архитекторы, как Ле Корбюзье, чьи работы включены в список Всемирного наследия ЮНЕСКО, и Пол Рудольф, американский архитектор, отстаивали этот стиль, создавая сооружения, которые были одновременно функциональными и эпатажными. Эти здания, которые часто воспринимаются как холодные или строгие, на самом деле были праздником материалов в их чистом виде, лишенном излишнего декора.

СССР был высокоразвитой цивилизацией с актуальными постройками в духе эпохи. Архитекторы СССР шли в ногу со временем.

В 2016 году газета Washington Post сообщила, что «самая популярная тенденция в веб-дизайне — создание нарочито уродливых, сложных сайтов», и этот подход они назвали «веб-брутализмом».

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

В качестве течения веб-дизайна брутализм не имеет как такового основателя. Его начали использовать дизайнеры по всему миру, которые не были связаны друг с другом. Тогда откуда взялось это направление? Ответ довольно прозаичен — веб-брутализм является наследником веб-дизайна на заре Интернета.

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

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

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

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

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

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

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

Переход к цифровому необрутализму — это не просто тенденция в дизайне; это отражение более широких общественных сдвигов. Как архитектура брутализма была реакцией на излишества своего времени, так и необрутализм в UI/UX — это реакция на чрезмерно спроектированные и часто загроможденные цифровые пространства, к которым мы привыкли.

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

Цветовая палитра

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

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

Типографика

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

Сырая и минималистичная эстетика

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

Транспарентность

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

Точно так же и веб-сайты в стиле необрутализма, как правило, больше сосредоточены на функциональности сайта, а не на «отвлечении» пользователя эстетикой или причудливыми визуальными взаимодействиями.

Отказ от основных тенденций веб-дизайна

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

Утилитаризм

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

Иерархия

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

Нестандартные сетки

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

(Не)сочетание элементов

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

Среди явных плюсов необрутализма можно выделить:

1. Заметность

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

2. Интуитивность

Пользователю, особенно молодому, просто и легко взаимодействовать с интерфейсом.

3. Оптимизация для поисковых систем

Такие ресурсы легко продвигаются из-за своих стилистических особенностей.

Среди недостатков стоит обратить внимание на:

1. Визуальное напряжение

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

2. Сложность реализации

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

3. Негативно воспринимается некоторыми пользователями

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

‍

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

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

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

Необрутализм — смелое и интересное направление в UX/UI-дизайне.

Это отличный способ создавать интерфейсы, которые одновременно визуально интересны и функциональны. Если вы ищете способ выделиться на фоне конкурентов, то подумайте о том, чтобы использовать данный стиль в своем дизайне.