brutalism 1160x620 - Раздвоение брутализма в веб-дизайне и разработке

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке

Дизайн Bloomberg.com появился в 2016 году и был усовершенствован в 2018 году. Его часто преподносят, как яркий пример роста брутализма в Интернете.

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

Краткая история брутализма

Давайте сперва вспомним откуда взялся термин «брутализм» и, что он означает. Брутализм – это стиль архитектуры, возникший после Второй мировой войны и достигший своего пика в 50–60-х годах прошлого столетия. Отстаивая простые геометрические конструкции и обнаженные строительные материалы, этот тренд, в значительной степени, был реакцией против витиеватых, чрезмерно усложнённых конструкций предыдущих десятилетий.

Название происходит от béton brut, что по-французски означает сырой или грубый бетон. Бетон – это распространенный материал для бруталистических конструкций. Он идеально подходит для стиля, лишенного излишеств. Другие материалы также используются, но бетон – наиболее распространенный выбор. Из чего бы ни делались здания, украшения считаются ненужными. Достаточно формы и материалов.

Великобритания, с ее любовью к серым, тусклым вещам, с радостью приняла этот стиль. К известным примерам брутализма в архитектуре относятся Королевский национальный театр, Барбикан Эстейт и Балфрон Тауэр. Брутализм оказался особенно популярным для общественных зданий – библиотек, театров, университетов, жилых комплексов и так далее.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке
Фотография Henry Hemming

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

Хотя не существует универсального определения, с которым все согласны, часто предпочтение отдается варианту, предложенному английским архитектурным критиком Рейнером Бенхемом. В 1955 году он написал эссе «О новом брутализме», в котором попытался изложить основные идеи стиля. По сути Бенхем сводил свою философию к следующему:

Новый брутализм в архитектуре и живописи, характеризует именно его жестокость, его энтузиазм, его кровавое мышление.

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

Хотите вы этого или нет, но брутализм в архитектуре превозносит грубость. Действительно, Бенхем начал свое эссе цитатой швейцарско-французского архитектора Ле Корбюзье: «Архитектура – это установление движущихся отношений с сырыми материалами». Его проекты жилищного строительства Unité d’habitation вдохновили целое поколение бруталистских архитекторов.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке
Фотография Jean-Pierre Dalbéra

Балконы La Maison du Fada в Марселе, Франция. Проект, спроектированный Ле Корбюзье и построенный в 1952 году, стал новаторским примером бруталистического дизайна жилых домов.

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

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

Практичность или дерзость?

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

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

Первый тип: L’INTERNET BRUT

Первый тип бруталистического веб-дизайна имеет гораздо больше общего с его архитектурными предшественниками. Думайте о нем, как о lInternet brut, где исходными материалами являются HTML и, в меньшей степени, CSS. Фоны светлые, текст черный, а гиперссылки синие. Возможны небольшие различия, но в этом суть. Даже отображая фактический код, вы не едва ли получите более грубый дизайн.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке

В начале был стиль, и этот стиль был брутализмом

Есть бесчисленное множество примеров этого стиля. Первый в истории сайт был непреднамеренно бруталистическим. А совсем недавно сайт Brutalist Web Design  программиста Дэвида Брайанта Коупленда выдвинул прекрасный небольшой манифест этого стиля.

В мире появляются и другие веб-сайты с сильными бруталистическими тенденциями:

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке
Правильный сайт категории l’Internet brut

Как вы можете видеть выше, домашняя страница Craigslist лишена излишеств. Она почти не изменилась за 20 (!) лет, потому что в этом не было необходимости. Посмотрите на код, и даже такой новичок, как я, может понять, как составлены страницы. Вам не нужно гадать, как устроен сайт, потому что все у вас перед глазами.

Подобный дизайн часто используют торговые площадки, форумы, энциклопедии. Странно, что сайт вроде Википедии становится цифровым аналогом Robin Hood Gardens. Такие газеты, как The New York Times и The Washington Post, в последние годы придерживались подобного грубого, функционального дизайна. У дизайна сайтов новостей всегда была сильная склонность к брутализму.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке

Обновленный сайт «Washington Post» был запущен в 2015 году. Газетный дизайнер Марио Гарсиа высоко оценил его за то, что он «избегает беспорядка и скученности» 

Здесь следует упомянуть, что некоторые сайты, использованные в качестве примеров, не были бруталистическими. Подобно зданию Villa Göth, которое считается источником термина «брутализм», они всего лишь были простыми и практичными.

Их успех – это то, что вдохновляло (и продолжает вдохновлять) архитекторов и разработчиков. Им настолько безразличен внешний вид, что они стали яркими примерами брутализма в дизайне, даже не осознавая этого!

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

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

Если вы интересуетесь трендами веб-дизайна, вы могли заметить, что рассмотренные выше причины, не могут объяснить огромное количество «брутальных» сайтов. Как отметил Виталий Фридман в книге «Smashing Book 6»:

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

Рост «бруталистического» дизайна за последние несколько лет во многом связан с жестокостью, а не с грубостью. Это безумный мир, порой граничащий с анархией. Здесь соглашения о дизайне извращены, а о юзабилити думают в последнюю очередь. Это сайты, которые предлагают статьи под названием «Стиль превыше содержания», а газета «The Washington Post» считает этот стиль  «преднамеренно уродливым» .

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке
Домашняя страница журнала Toiletpaper
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке
JI SOO EOM, еще один сайт из каталога Brutalist Websites

В статье «Brutalism: BrutAl wEbsIteS for mOdern dAy webMAsTeRS», Awwwards описывает второй тип брутализма следующим образом:

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

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

В каталоге Brutalist Websites говорится: «Брутализм можно рассматривать, как реакцию молодого поколения на легкость, оптимизм и легкомысленность современного веб-дизайна». В этом есть оттенки основополагающего бруталистического духа, но он более неуважительный и подрывной. Они могут быть по-своему очень красивыми, но они скроены не как Craigslists.

Этот город недостаточно большой для нас двоих

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

Термин расширился, чтобы охватить подходы, которые во многих отношениях противоречат друг другу. Паскаль Девиль, основавший каталог Brutalist Websites, считает, что этот стиль разделился на три подстиля:

  1. Пуристы
  2. UX-минималисты,
  3. Анти-исты (или художники).

Он изучил сотни сайтов за эти годы и лучше, чем кто-либо другой разбирается в этой теме.

Пуристы настойчиво ссылаются на архитектурные характеристики веб-брутализма, такие как концепция «Truth to materials» и использование самых простых доступных элементов разметки. UX-минималисты, напротив, считают эффективность и производительность основной движущей силой веб-брутализма и даже считают, что радикальное ограничение возможностей может повысить конверсию. «Анти-исты» или художники рассматривают веб-дизайн как (все еще) недооцененную форму искусства и не проявляют особого уважения к статус-кво и в основном пишут негативные отзывы.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке

Small Dada Evening от Kurt Schwitters и Theo van Doesburg

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке

Typical Vertical Mess as Depiction of the Dada Baargeld от Johannes Theodor Baargeld. Какая ветвь «бруталистского» веб-дизайна вам больше нравится?

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Раздвоение брутализма в веб-дизайне и разработке

Оба сайта – примеры брутального дизайна. Поэтому уточняйте какой брутализм вам нужен. Дизайн сайта слева от Constantin Grosnov

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

Есть бесчисленное количество школ в искусстве: брутализм, экспрессионизм, романтизм, арт-деко, футуризм, дадаизм, импрессионизм, абсурдизм, модернизм, минимализм, и т.д. Они воплощаются в картинах, зданиях, литературе … почему не в сайтах? Как показывают ссылки ниже, я не одинок в подобных мыслях. С каждым новым стилем разработки «анти-мейнстрим» становится все менее адекватным для описания того, что делают дизайнеры. Они начинают изучать философию веб-дизайна новыми способами.

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

Свежие вакансии
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
                        e-Legion e-Legion UX/UI Дизайнер Офис Санкт-Петербург
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
Все вакансии

Оригинал: smashingmagazine.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Как создавать темные темы. Руководство от Superhuman

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

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

Дизайн и проектирование лучших кнопок

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