Необрутализм захватывает интернет

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

Перевод статьи Майкла Малевича

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

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

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

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

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

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

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

Давайте начнем со сверхвысокой контрастности. Необрутализм не боится слияния чистого черного (#000000) с другими цветами. Это практика, которую большинство других стилей дизайна стараются избегать, потому что, сохраняя контраст, мы не хотим создавать нагрузку на глаза пользователей.

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

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

Это хорошо для восприятия, но также это добавляет в макет дополнительные объекты, которые нужно обработать нашему мозгу.

Еще одна вещь, которую я заметил, — это то, что большинство теней или поддельных 3D-объектов используют изометрический вид. Практически всегда это угол в 45°.

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

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

Cтоит упомянуть две компании, которые несут необрутализм в массы - Figma и Gumroad. В них используются некоторые интересные приемы, которые определенно стоит изучить.

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

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

Остальные карточки выглядят как шаблонные фигуры из PowerPoint.

Такой способ укладки нормализует уродство и облегчает подход к новичкам — они бы подумали: “Я мог бы сделать это сам! ”, и я полагаю, что именно по этой причине некоторые бренды выбрали этот стиль. Это не представляет угрозы, и любой может это сделать.

Люди думают: я могу сделать это сам!

Типографика играет очень важную роль в этом стиле, хотя она ведет себя гораздо более консервативно. Хотя шрифты в обоих наших примерах немного причудливые или фанковые и не такие минималистичные, как типичные "крутые” шрифты modern minimal, тем не менее, межстрочные расстояния и кернинг обеспечивают максимальную читаемость.

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

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

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

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

Gumroad также объединяет различные стили иллюстраций с фотографией, поддельным 3D и некоторыми приятными прокрутки параллакса.

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

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

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

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

Я очень рад увидеть больше этого стиля и то, как дизайнеры будут исследовать и продвигать его дальше!

Оригинал статьи: