Что такое Brutalism веб-дизайн?

Brutalism веб-дизайн намеренно убирает визуальные условности, из-за которых большинство современных сайтов выглядят гладкими и отполированными - тени с размытием, градиенты, скруглённые углы, кастомные шрифты, - и заменяет их сырыми строительными блоками HTML и CSS, показанными как есть: толстые сплошные обводки, плоские заливки, системный или моноширинный шрифт, жёсткие углы в 90 градусов. Название заимствовано у брутализма в архитектуре, который оставлял бетон открытым вместо отделки, ценя честность материала выше декора.

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

Стиль чаще всего встречается на портфолио, сайтах дизайн-студий, зинах и технических/инди-продуктах, которые хотят показать мастерство и уверенность, а не слиться с типичным SaaS- или корпоративным дизайном - сама «сырость» и есть высказывание, поэтому он работает только тогда, когда применён осознанно, а не как способ сэкономить на визуальном дизайне.

Ключевые визуальные характеристики

• Толстые сплошные обводки (2-4px) вокруг карточек, кнопок и изображений вместо мягких box-shadow
• Жёсткие смещённые тени - залитая плоским цветом копия фигуры, сдвинутая на несколько пикселей вниз-вправо, без размытия
• Плоские, высококонтрастные заливки - без градиентов, без мягких цветовых переходов
• Острые углы в 90 градусов везде, никогда не скруглённая кнопка или карточка
• Намеренно «сырой» или утилитарный текст-заполнитель - лейблы в квадратных скобках вроде [ IMG_042.JPG ], видимый размер файла или число зависимостей
• Видимые линии сетки или полосатый/предупреждающий паттерн в роли графического элемента, а не просто декора

Цветовые характеристики

• Резкая, высококонтрастная база - почти чёрный текст на почти белом фоне или наоборот
• Один громкий насыщенный акцентный цвет, используемый скупо и последовательно, без смешивания в градиенты
• Обводки и тени того же почти чёрного цвета, что и текст, а не отдельный приглушённый серый - вся страница читается как нарисованная одними чернилами

Типографика

• Моноширинный или обычный системный sans-serif, редко - кастомный дисплейный шрифт
• Заголовки и лейблы капсом используются для структуры (киккеры, пункты навигации, кнопки), а не только для акцента
• Плотный, утилитарный line-height и межбуквенный интервал вместо просторных редакционных отступов

UI-паттерны

• Верхняя панель с вордмарком в квадратных скобках, текстовой навигацией и кнопкой с толстой обводкой и смещённой тенью
• Бегущая строка/тикер с полосатым акцентным фоном - частый графический разделитель
• Двухколоночный hero: заголовок капсом и мета-теги с одной стороны, блок-заглушка изображения с толстой обводкой - с другой
• Ряд карточек с толстыми обводками и смещёнными тенями, одна из которых часто залита сплошным акцентным цветом