Необрутализм в дизайне сайтов: все о нашумевшем UX/UI тренде 2024 года

Print Friendly, PDF & Email

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

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

Что такое neo-brutalism

Брутализм — известный архитектурный стиль — происходит от французского слова «brut», что в переводе означает «сырой». Изначально он появился в середине двадцатого века, а популярным стал в конце 50-х годов. Для него характерны простые геометрические фигуры, грубые текстуры, острые края и металлические оттенки.

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

Изначально neo brutalism использовался в дизайне газет и журналов 90-х, но несколько лет назад успешно перекочевал в интернет. Сегодня дизайн пользовательского интерфейса в подобном стиле выделяется своей смелой и безразмерной типографикой, яркими цветами, сильными контрастами и четкими краями. Ключевой девиз сайтов в этом стиле — «Долой скучные правила и обыденность». 

Почему стиль так популярен сейчас

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

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

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

В чем разница между необрутализмом, брутализмом и минимализмом

  1. Брутализм напоминает большое здание из бетона. У него нет никаких причудливых деталей и стильных декораций — только суровая и четкая структура. Выглядит немного пугающе, зато очень функционально.
  2. Минимализм ассоциируется с простой и идеально убранной комнатой. Здесь все лежит на своих местах, а на полках не встретить оригинальных статуэток или кричащих картин — пространство заполнено только необходимыми вещами в светлых тонах. 
  3. Необрутализм — это механизм, работающий, как часы, но при этом раскрашенный в разные цвета радуги и украшенный причудливым декором. Он выглядит ярко и интересно, но при этом четко выполняет свою функцию.

Хотите узнать больше о современных направлениях в дизайне? Тогда регистрируйтесь на наши платные и бесплатные мероприятия, посвященные этой теме. Узнать больше о программе можно здесь.

Характеристики необрутализма

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

Контраст и тени

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

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

Цвета

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

Типичная цветовая палитра этого стиля включает в себя:

  • чисто черный цвет в качестве акцентного;
  • насыщенные и энергичные оттенки;
  • винтажные и приглушенные цвета, создающие ретро-эффект.

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

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

Разделения

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

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

Windows

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

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

Простая эстетика и нарочная уродливость

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

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

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

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

Типографика

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

Ключевые характеристики текстов в таком стиле:

  • для заголовков используются крупные размеры шрифтов, которые помогают привлечь внимание;
  • высота строк и интервал между буквами может отличаться от ряда к ряду;
  • самые популярные шрифты — Sans Serif, Lexend Mega, Public Sans, Mabry Pro, Archivo Black, Bebas Kai.

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

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

Иллюстрации и анимации

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

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

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

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

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

Основные сильные стороны необрутализма

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

Давайте начнем с преимуществ:

  1. Смелый и заметный. Благодаря своему нетривиальному и причудливому виду neo brutalism легко привлекает к себе внимание аудитории. Использование высокой контрастности, геометрических форм и необработанных текстур создает запоминающийся сайт, поэтому с таким дизайном вы сразу же получаете +100 к узнаваемости.
  2. Идеален для творчества. Необрутализм может использоваться в широком спектре отраслей, но лучше всего он подходит креативным проектам. Что может лучше продемонстрировать творческие навыки команды, чем их собственный сайт? Стиль можно использовать для маркетинговых агентств, дизайнерских команд, брендов одежды и многих других творческих ниш.
  3. Удобен с точки зрения SEO. Благодаря своим особенностям стиль легко оптимизируется для поисковых систем. Такой дизайн часто понятен и удобен в навигации, а за счет простых форм, анимаций и изображений его становится просто продвигать.
  4. Понятен. Минималистичная эстетика необрутализма поможет сделать сайт более простым в использовании. С ним на странице меньше беспорядка и отвлекающих факторов, а процесс создания такого сайта становится более гибким и веселым.

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

Недостатки необрутализма: в каких случаях его лучше не использовать

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

Основные минусы необрутализма:

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

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

В чем дизайнер-необруталист помогает бизнесу

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

Привлечение внимания

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

Формирование уникального стиля

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

Инновационность

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

Экономия ресурсов

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

Привлечение внимания общественности

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

Как крупные бренды используют neo brutalism в своих сайтах: 7 примеров

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

Как мы упоминали ранее, необрутализм идеально подходит творческим проектам. Неудивительно, что один из крупнейших инструментов дизайна UI/UX Figma частично выполнен именно в этом стиле. Фактически продукт имеет минималистический вид, но элементы блога и главной страницы — чистый neo-brutalism. Большая типографика, игривые формы, широкие контуры, творческие орнаменты — на страницах Figma вы увидите все признаки необрутализма.

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

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

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

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

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

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

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

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