Брутализм в вебе — намеренно грубое оформление: системные шрифты, резкие границы, крупные блоки, отказ от сглаживания, теней и плавных переходов. Такой сайт выделяется на фоне одинаковых аккуратных шаблонов, и в этом одновременно его сила и его риск. Приём работает, пока он остаётся решением, а не оправданием.
Разбираем, откуда взялся этот стиль, что он даёт бизнесу, кому подходит и кому противопоказан, где проходят его границы и как согласовать такой макет с заказчиком, чтобы не переделывать всё после первой демонстрации.
Что такое брутализм в вебе и откуда он взялся
Название пришло из архитектуры середины прошлого века, где здания намеренно показывали материал: голый бетон, открытые конструкции, отсутствие облицовки. В вебе принцип тот же: интерфейс не притворяется чем-то другим и не прячет свою природу за декоративным слоем.
Практически это выглядит так: шрифты, которые уже стоят в системе; ссылки, подчёркнутые как ссылки; рамки в один пиксель вместо мягких теней; крупная типографика; сетка, которую видно. Часть приёмов — прямая отсылка к раннему вебу, когда страницы верстались без библиотек оформления. Отсюда и ощущение честности: посетитель видит структуру документа, а не оболочку поверх неё.
Что даёт такое оформление
У приёма есть измеримые преимущества, и они не сводятся к моде на необычный вид.
- Запоминаемость: такой сайт трудно спутать с шаблонным решением, а узнавание работает на бренд дольше любой рекламной кампании.
- Скорость: меньше графики, шрифтовых файлов и эффектов, значит меньше вес страницы и меньше работы для устройства.
- Честность подачи: содержимое важнее оформления, и слабый текст в таком макете сразу видно.
- Простая поддержка: меньше компонентов и состояний, меньше поводов сломать вёрстку при правке.
- Устойчивость: макет без сложных эффектов одинаково выглядит в разных браузерах и на слабых устройствах.
Последние два пункта чаще всего недооценивают. На проектах поддержки основная доля правок приходится на сложные интерактивные блоки, и чем их меньше, тем дешевле развитие сайта в следующие годы.
Кому подходит и кому противопоказан
Решает не вкус дизайнера, а то, кто принимает решение о покупке и в каком состоянии он приходит на сайт.
| Тип проекта | Подходит ли | Почему |
|---|---|---|
| Творческие студии, портфолио | Да | Оформление само по себе высказывание и часть работы |
| Медиа, блоги, справочные проекты | Да | Внимание уходит на текст, оформление не мешает чтению |
| Технические продукты для разработчиков | Да | Аудитория ценит прямоту и не ждёт декоративности |
| Мероприятия, промо, разовые кампании | Да | Разовая яркая подача, срок жизни страницы короткий |
| Производство, промышленное оборудование | Осторожно | Решение принимают консервативно, резкий вид читается как несерьёзность |
| Медицина, финансы, юридические услуги | Нет | Доверие строится на аккуратности, цена ошибки — потерянная сделка |
| Госзаказ и работа с бюджетами | Нет | Требования к оформлению формализованы, эксперименты не проходят согласование |
Строки со словом «осторожно» означают не запрет, а необходимость проверки на реальной аудитории до запуска. Иногда смелый макет для производственной компании оказывается уместным, но убедиться в этом нужно заранее, а не по падению обращений через квартал.
Границы приёма
Брутализм ломает привычки оформления, но не должен ломать сценарии. Мы держим четыре границы, и ни одна из них не обсуждается как «часть стиля».
- Читаемость. Контраст текста к фону остаётся достаточным, размер основного текста не опускается ниже нормального для чтения с телефона, строка не растягивается на всю ширину экрана.
- Отличимые кликабельные элементы. Ссылка выглядит как ссылка, кнопка отличается от заголовка, состояние наведения и фокуса видно. Если человеку приходится водить курсором в поисках активной области, это уже не стиль.
- Понятные формы. Поля подписаны, подсказки и ошибки читаются, обязательные поля отмечены. Форма — последний шаг перед обращением, экспериментировать здесь дороже всего.
- Работающая мобильная версия. Не «так задумано», а нормальная вёрстка: без горизонтальной прокрутки, с нажимаемыми элементами и читаемым текстом.
Отдельный пункт — доступность. Резкие сочетания цветов часто дают недостаточный контраст, а отказ от привычных элементов ломает навигацию с клавиатуры. Проверять контраст и порядок фокуса нужно на этапе макета, потому что переделка после вёрстки затрагивает всю палитру.
Чем брутализм отличается от небрежной вёрстки
Эту границу заказчики видят хуже всего, поэтому её стоит проговаривать словами. Брутализм — это осознанный отказ от декоративного слоя при сохранённой структуре. Небрежность — отсутствие структуры вообще.
- В брутализме сетка есть, просто она видна. В небрежной вёрстке блоки съезжают по-разному на разных экранах.
- В брутализме отступы заданы системой значений. В небрежной вёрстке они случайны и не повторяются.
- В брутализме заголовки образуют иерархию. В небрежной вёрстке они отличаются только размером, выбранным на глаз.
- В брутализме состояния элементов продуманы. В небрежной вёрстке их просто нет.
Проверка простая: если решение можно описать правилом, которое повторяется по всему сайту, это стиль. Если каждый экран объясняется отдельно, это результат спешки.
Как согласовать такой макет с заказчиком
Смелое оформление проваливается на согласовании чаще, чем на пользователях. Мы стараемся снять риск до отрисовки макетов.
- Проговариваем задачу до эскизов: что должно происходить на странице и какое впечатление нужно оставить.
- Показываем направление на одном экране, а не на десяти: обсуждать принцип проще, чем весь сайт сразу.
- Объясняем каждое решение через задачу, а не через вкус: почему системный шрифт, почему нет теней.
- Готовим сдержанный вариант того же макета, чтобы обсуждение шло между двумя решениями, а не между «да» и «нет».
- Фиксируем договорённости письменно: правки уровня «сделайте помягче» без записи возвращаются на каждом этапе.
Как проверять решение на живых людях
Спор о вкусах решается наблюдением. Мы даём человеку со стороны, похожему на будущего клиента, конкретное задание: найти цену на услугу и оставить заявку. Дальше молча смотрим, что он делает.
Смотреть нужно на действия, а не на слова: где остановился, что принял за кнопку, сколько раз вернулся назад, нашёл ли форму. Пяти-шести человек обычно достаточно, чтобы повторяющиеся затруднения стали очевидны. Если оформление мешает выполнить задачу, это уже не стиль, а проблема, и её чинят до запуска.
Брутализм допустим ровно до этой черты. Пока человек справляется с задачей и запоминает сайт, приём работает. Как только он перестаёт понимать, куда нажимать, оформление начинает стоить денег.
Если нужна помощь
Мы собираем сценарии, рисуем прототипы и проверяем макеты на людях до того, как начинается вёрстка. Так становится понятно, где смелое оформление помогает, а где мешает продавать. Если задача актуальна, спроектируем интерфейс сайта и покажем решение в двух вариантах: сдержанном и характерном.
На проекте это отдельный этап: проектирование интерфейсов — сценарии, прототипы и проверка на живых пользователях.
