Брутализм в веб-дизайне

Рад приветствовать читателей vc.ru. Меня зовут Пермяков Павел и я работаю дизайнером в одной небольшой веб-студии, а по совместительству пишу статьи для такой же группы в ВК под названием Bit.Design. Статья ниже публиковалась там, но я сделаю это повторно тут, чтобы получить хоть какую-то обратную связь. Заранее спасибо.

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

Термин «Брутализм» происходит от французского «beton brut», что дословно переводится как необработанный бетон, а не от английского прилагательного brutal, как может показаться изначально. Более правильно будет сказать, что Брутализм подразумевает что-то без отделки, необработанное, сырое или шероховатое.

Зародился данный стиль в архитектуре в 50-60х годах. В послевоенное время грубый и функциональный стиль быстро нашел применение ввиду своей дешевизны и простоты разработки различных зданий и жилых комплексов. Первым таким сооружением стала знаменитая «Жилая единица» (Unité d’Habitation) во Франции, город Марсель, завершенная в 1952 году. Этот огромный и амбициозный проект включал в себя 337 квартир. Как ни странно, данный проект удался и архитектор Ле Корбюзье продолжил строить подобные сооружения. Следующее появилось в Берлине.

Чуть позже в 1954 году более известные архитекторы Элисон и Питер Смитсоны, супруги из Великобритании, спроектировали и построили школу в Ханстантоне. Вопреки понятию Брутализма, школа была построена не из бетона, а из кирпича и стекла.

Именно честность материалов дало начало массовому распространению данного стиля.

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

Самым известным бруталистским сооружением на сегодняшний день является здание городского суда в Буффало в США, Нью-Йорк. Здание было построено в 1974 году и работает до сих пор.

В веб-дизайне нет определенного создателя стиля. Сайты такого рода начали появляться повсеместно примерно в 2014 году, тогда же дизайнер Паскаль Девилль создал каталог бруталистских сайтов, с которым ознакомиться можете на brutalistwebsites.com. Они были созданы с целью бросить вызов новомодным вылизанным страницам, что со временем начали утрачивать свою новизну. Главная задача такого стиля – создать максимально понятный сайт без визуальных излишеств: закруглений, пестроты и ненужного дизайна, сделать контент наиболее читаемым и удобным для пользователя. Но чем же это отличается от минимализма в таком случае и какие сайты на самом деле являются бруталистскими?

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

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

Сайт smashingmagazine.com делит современный веб-брутализм на 2 типа, но на самом деле данный стиль несколько разнообразнее. Давайте их рассмотрим.

Первый тип является самым близким к философии архитектуры. L’internet BRUT можно перевести дословно как «Сырой» или «Необработанный интернет», исходными материалами которого являются язык разметки HTML и минимально используемый язык стилей CSS. На таких сайтах гиперссылки синие, фон белый, а текст черный. Самым известным представителем данного типа является всем знакомый сайт Wikipedia.

Тут вы можете заметить как раз ту суть, тот смысл, что был в архитектуре: простота всех элементов и честность материалов (html и css) создают красоту, а интерфейс максимально понятен даже самому неопытному пользователю. Однако есть сайт, который в большей степени иллюстрирует суть брутализма.

Как можно увидеть на фото выше, домашняя страница craigslist.org не имеет излишеств. Более того, дизайн сайта не менялся больше 20-ти лет. Сайт устроен максимально просто, не нужно гадать как он устроен, потому что всё у вас перед глазами.

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

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

Как раз этот тип веб-брутализма является наиболее спорным, в то же время самым популярным. Дословно L’internet FOU можно перевести как «сумасшедший интернет». Философия данного стиля заключается в протесте новомодным сайтам, именно это и стало трендом 2019-2020 годов.

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

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

Рекомендую ознакомиться с примерами из статьи сайта Awwwards, который описывает веб-брутализм следующим образом:

Некоторый примеры с этой статьи:

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

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

Хоть проживание в многоквартирных домах и является объектом насмешек, первые такие здания, по типу того, что делал Ле Корбюзье, были созданы для того, чтобы улучшить качество жизни населения. В послевоенное люди были вынуждены существовать в тех условиях и «Жилой Единицы» были созданы, чтобы эти условия улучшить.

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

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

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

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

Ниже я оставлю ссылки по теме на страницы, с которыми рекомендую ознакомиться:

— Статья сайта Awwwards о брутализме с примерами;

— Каталог BrutalistWebSites.com;

— Разбор исследования на тему «Почему красивое кажется удобным» на Хабре.