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

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

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

Происхождение Брутализма

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

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

Unité d’Habitation в Марселе, завершен в 1952 году. Архитектор — Ле Корбюзье.

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

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

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

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

Здание городского суда в Буффало, США, Нью-Йорк. Построено архитектурным бюро Pfohl, Roberts and Biggie.

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

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

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

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

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

Тип первый: L’internet BRUT

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

Всемирно известный сайт Wikipedia, основанный 15 января 2001 года.

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

Craiglist — сайт электронных объявлений, основанный в 1995 году.

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

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

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

Тип второй: L’internet FOU

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

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

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

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

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

Awwwards.com

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

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

Какие принципы брутализма можно использовать в реальных проектах уже сейчас?

I. Красивое значит удобное

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

II. Нужды людей на первом месте

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

III. Просто значит эффективно

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

IV. Первородность материалов

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

V. Извлекайте пользу дозированно

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

Выводы

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

Брутальный сайт туалетной бумаги.

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

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

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

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

0
18 комментариев
Написать комментарий...
Alex Moren

Хаха, да любой сайт на narod.ru был более брутальным чем все эти примеры

Ответить
Развернуть ветку
Марат Давлетшин

Интересно, спасибо.

Ответить
Развернуть ветку
Dalnevostochniy Gomez

А только на вц пишете? Боюсь тут аудитория мало фидбека даст и вы уйдёте

Ответить
Развернуть ветку
Marat Hakimov

Вероятно, в 99% случаев это так..
Но иногда чудеса случаются)..

p/s/  Если бы ваш вопрос от 21 апреля начинался со слов " Специалисты по Озону.." и далее п тексту, возможно, шансов на обратную связь было бы больше...
  Без этого заголовок безадресный.. Его труднее "расшифровать"

p/p/s  Это вам мало поможет, наверно, но знакомые мучаются с аналитикой на WB... в разных вкладках — разные цифры на одни и те же показатели..

Удачи.

https://vc.ru/ask/236713-silno-li-u-vas-otlichaetsya-vyruchka-v-grafikah-v-analitike-ot-toy-chto-vo-vkladke-finansy

Ответить
Развернуть ветку
Dalnevostochniy Gomez

Ого, я уже и забыл про вопрос этот, спасибо :D

Ответить
Развернуть ветку
Marat Hakimov

Viva Дальний Восток!-)

Ответить
Развернуть ветку
Marat Hakimov

Павел, спасибо.
"...использование монополизированных цветов, форм и даже текста делает продукт менее конкурентно способным..."

Что такое "монополизированный" в данном контексте?

Ответить
Развернуть ветку
Pavel Permyakov
Автор

От слова "монополия". Это одни и те же трендовые цвета, что прослеживаются от проекта к проекту, кремовый, например

Ответить
Развернуть ветку
Marat Hakimov

Спасибо, Павел.
Если бы вас попросили одним словом описать брутализм, то что это за слово?

Ответить
Развернуть ветку
Pavel Permyakov
Автор

Обескураживающе, я думаю. Смысл же в том, чтоб пользователь почувствовал некий дискомфорт, а такой стиль точно может это сделать
А Вы как считаете? Тоже интересно)

Ответить
Развернуть ветку
Marat Hakimov

у меня почему-то слово TRUE )..
..оно мне нравится
..оно в статье встречается 2 раза ...

Вероятно,  тут нет противоречия..
Статья, кмк, чётко проговаривает, что есть 2 вида брутала..
1. Трушный, изначальный как 20-летний craigslist.org , L’internet BRUT
2. И его "разорви шаблон" более поздний L’internet FOU. То самое "обескураживающе"...

И, похоже,  BRUT может очень хорошо работать...
Если первое место в мире в категории е-коммерс что-то значит..

p/s у меня не получилось по ссылке в статье перейти на craigslist.org
        возможно, ошибочная ссылка.. послал на мёртвую страницу в ВК

Ответить
Развернуть ветку
Andrey Fedorov

Интересно, спасибо. Bit.design - это и есть студия, в которой вы работаете? Хотел посмотреть портфолио и не нашёл. 

Ответить
Развернуть ветку
Pavel Permyakov
Автор

Bit.Design - это сообщество в вк, а студия это RubStudio, однако там я работаю не так давно

Ответить
Развернуть ветку
Всеволод Грувман

Ваше определение брутализма не соответствует brutalistwebsites.
Там скорее выпендрежные сайты, часто не читаемые, с поломанным нарративом, пестрые и с анимацией

Ответить
Развернуть ветку
Pavel Permyakov
Автор

Хотелось показать что-то более интересное

Ответить
Развернуть ветку
Евгений Киселев

А есть сайты в стиле брутализм, которые вас впечатлили? 

Ответить
Развернуть ветку
Alexandra Krivenko

Интересная статья, спасибо.

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

Ответить
Развернуть ветку
Pavel Permyakov
Автор

Прошу простить за такую оплошность с моей стороны
По всей видимости, я не могу исправлять уже опубликованную статью, но в следующий раз буду особо внимателен. Спасибо. :)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
15 комментариев
Раскрывать всегда