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

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

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

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

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

Каждые шесть-семь лет людям приедается внешний облик приложений и веб-сайтов.

Как со временем менялся дизайн
Как со временем менялся дизайн

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

<i>Неоморфизм (слева) / Стекломорфизм (справа)</i>
Неоморфизм (слева) / Стекломорфизм (справа)

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

Почему брутализм?

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

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

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

Но какое отношение это имеет к дизайну?

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

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

Примеры брутализма Яна Агеенко / Мити Андриевского
Примеры брутализма Яна Агеенко / Мити Андриевского

Новый брутализм

Контраст

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

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

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

Тени

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

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

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

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

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

Цвета

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

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

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

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

Два главных новатора

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

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

Уродливый нарочно

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

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

Оригнал (слева) и то, как должно быть выровнено (справа)
Оригнал (слева) и то, как должно быть выровнено (справа)

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

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

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

Типографика

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

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

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

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

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

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

Иллюстрации

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

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

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

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

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

Саммари

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

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

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

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

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

140140
19 комментариев

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

19
Ответить

Автор собрал несколько трендов 3-5 летней давности и попытался объяснить их общей идеей Брутализма. Но вот почему это неверное сравнение:
- исторический стиль — всегда больше чем форма. Брутализм гораздо больше угловатости и монохромности. Если бы бруталиста 50-х попросили сделать лендинг, он бы не сделал «фигму» с ее цветастым стилем и графичными тенями.
- между трендами, которые назвал автор вообще нет связи. Грубость форм из примеров с серыми плакатами, это не один тренд с дизайн-кодом фигмы и примером с поехавшей кнопкой.
- в случае с плакатами — тренд на ироничное переосмысление наследия Баухауза и Де Стиль. Это бесконечная тема, перерождающаяся каждый год под разным соусом. Дизайнерам просто нравится сравнивать себя с прародителями современного дизайна из начала 20 века. Это не уходило и не приходило.
- тренд на графичность, припыленные цвета, рисованные тени, весёленькие геометрические гротески — и правда реакция на все диджитал-морфизмы. Но сравнивать его более корректно с печаткой журнальной графикой середины 20 века. Или даже с диджиталом 90х (вспомните цвета из логотипа эпл и дизайн окон и попапов Макос). Бруталист бы так не сделал никогда.
- к сожалению, это беда всех обзоров трендов: те кто их пишет, чаще всего, не очень в контексте. А те, кто разбирается, тренды не описывают, потому что не понимают зачем вообще это делать😅 что же касается автора, он в конце и сам говорит: это все что-то новое, ему не понятно и вообще не очень нравится. Вот и обзор тренда😅

18
Ответить

Конечно, бруталист 20 века никогда бы не стал использовать цвета, это действительно вразрез с самой идеей бы шло. И я полностью согласна, что стиль - это больше, чем форма. Просто мне в этом увиделась параллель с спиралевидным развитием в искусстве, когда вектор регулярно меняется с «человек познал весь мир» (Леонардо да Винчи, к примеру» на «человек не знает о мире ничего». И, к примеру, на неоклассицизм, который взял все из классицизма (только ребята не знали, что в античности были цвета, но все равно стиль красивый). Так и тут - необрутализм берет форму из брутализма, и добавляет что-то свое. Хотя это и может выглядеть как использование колонн в русской архитектуре - когда они висят в воздухе, что противоречит самому смыслу, который исходно вкладывается в них.

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

1
Ответить

Вот сайт с подборками брутальных сайтов, мало ли кому интересно) https://brutalistwebsites.com

9
Ответить

Любая стилизация, в том числе и на примере брутализма, уместна в лендингах и прочих сайтах, построенных от визуала. Первой же картинкой в статье автор показывает развитие карточки товара в интернет-магазине (почему-то останавливаясь на 2014 году). Дизайнеры пришли к таким решениям не потому что им наскучила книжная полка на фоне, а потому что новый дизайн дает лучшие показатели, акцентируя внимание покупателя на товаре. Если бы неоморфизм и прочие течения с накрученным визуалом показывали себя лучше в продажах, то все маркетплейсы уже были бы перерисованы.

6
Ответить

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

Критерий всё равно не дизайн, а прибыль. Если у сайта с таким бруталодизайном будут продажи, и бизнес в целом выйдет в плюс - ну почему бы и нет. Особенно если они А-Б тестами докажут право именно этого дизайна на существование.

3
Ответить

если не сложно, накидайте примеров

1
Ответить