В СВОЕЙ ШЕРОХОВАТОСТИ И НЕЖЕЛАНИИ ВЫГЛЯДЕТЬ КОМФОРТНО ИЛИ ЛЕГКО, БРУТАЛИЗМ МОЖНО РАССМАТРИВАТЬ, КАК РЕАКЦИЮ МОЛОДОГО ПОКОЛЕНИЯ НА ЛЕГКОСТЬ, ОПТИМИЗМ И ЛЕГКОМЫСЛИЕ СОВРЕМЕННОГО ВЕБ-ДИЗАЙНА
— Паскаль Девилль
БРУТАЛИЗМ
БРУТАЛИЗМ В ВЕБ ДИЗАЙНЕ — ЭТО ПОПЫТКИ ПРИДАТЬ РАБОТАМ СЫРОЙ, НЕОБРАБОТАННЫЙ, НЕСКОЛЬКО СЛУЧАЙНЫЙ ВИД. ВО МНОГОМ ОН ЯВЛЯЕТСЯ ОТГОЛОСКОМ ДИЗАЙНА ПЕРВЫХ САЙТОВ НАЧАЛА 90-Х.
Иногда эта черта брутализма выражается в максимальном оголении дизайна: представьте HTML-сайт с набором синих ссылок и монохроматическим моноширинным текстом.
ИСТОРИЯ ПОЯВЛЕНИЯ
НАЗВАНИЕ
Название отсылает нас к течению в архитектуре, которое было распространено в 50-х и 70-х годах XX столетия.
Его адепты решили избегать любых украшений – от архитектурного орнамента до простой настенной краски. Вопреки, казалось бы, очевидному факту, брутализм произошел не от слова брутальный. Брутализм появился из «сырого бетона» – физически и этимологически – béton–brut по-французски.
АРХИТЕКТУРА
Течение брутализма в архитектуре обычно выражалось через массивные, основательные сооружения из бетона.
Идея заключалась в том, что здания были простенькими и антибуржуазными, не только из-за того, что это были малобюджетные проекты в экономически депрессивных сообществах, но и потому что это принималось, как философия и мышление крупнобюджетных частных и правительственных комиссий.
ПУГАЮЩЕЕ ЗДАНИЕ ГОРОДСКОГО СУДА В БУФФАЛО — ЭТО КЛАССИЧЕСКИЙ ПРИМЕР БРУТАЛИСТСКОЙ АРХИТЕКТУРЫ. ОДНОГО ВЗГЛЯДА НА ЭТО СТРОЕНИЕ ХВАТИТ, ЧТОБЫ ОЩУТИТЬ ВСЮ ТЯЖЕСТЬ ОБВИНИТЕЛЬНОГО ПРИГОВОРА СУДА
ВЕБ-БРУТАЛИЗМ НЕ ИМЕЕТ ОСНОВАТЕЛЯ ИЛИ МЕСТА РОЖДЕНИЯ. ЕГО НАЧАЛИ ВНЕДРЯТЬ ПРОФЕССИОНАЛЫ ПО ВСЕМУ МИРУ, КОТОРЫЕ НЕ БЫЛИ СВЯЗАНЫ ДРУГ С ДРУГОМ.
LE CORBUSIER'S UNITÉ D'HABITATION В МАРСЕЛЕ, ФРАНЦИЯ (1952)
ТРЕЛЛИК-ТАУЭР, ЛОНДОН, ПРОЕКТ ЭРНЕ ГОЛДФИНГЕРА 1966–1972
HABITAT 67 В МОНРЕАЛЕ, КВЕБЕК, КАНАДА
ЦЕЛИ БРУТАЛИЗМА
Бруталистские дизайнеры хотят выйти за рамки шаблонных, утративших новизну сайтов, которые заполонили весь интернет. Они хотят, чтобы Паутина оставалась верна себе, была честной и простой. В частности бруталистская философия разделяет эти цели с flat-дизайном, хотя отличий между этими стилями, конечно, достаточно много.
Приверженцы брутализма в дизайне объясняют свой выбор тем, что они стремятся сохранить приоритет функциональности над формой, а также воспользоваться тем эмоциональным эффектом, который оказывает этот подход на фанатов юзабилити, которые выступают против чрезмерной напыщенности в дизайне.
В 2000-ых годах сайт агентства Nielsen Norman Group отличался своим аскетизмом и своего рода протобруталистским стилем. Он довольно хорошо принимался читателями, отдающими предпочтение юзабилити, а не эстетической стороне
веб-ресурса, и выступающими против любых попыток сделать сайт красивее за счет ухудшения удобства его использования, что было весьма характерно для сайтов периода пузыря доткомов
Блог консультанта Джастина Джексона (Justin Jackson) использует черно-синий моноширинный шрифт, который часто встречается на бруталистских сайтах. Даже его фотография отдает ретро
UX-ПРИНЦИПЫ
ДОСТУПНОСТЬ КОНТЕНТА НА ВСЕХ УСТРОЙСТВАХ
Большинство веб-сайтов существуют для потребления контента, поэтому контент должен быть доступен во всех браузерах. Некоторые экраны очень большие, а другие маленькие, разные браузеры имеют свои особенности. Веб-сайт, использующий HTML по умолчанию, без пользовательских стилей, будет доступен для чтения на всех экранах и устройствах. Только дизайн может сделать контент менее читабельным.
ОФОРМЛЕНИЕ ПРИ НЕОБХОДИМОСТИ
Сайт не является ни приложением,
ни видеоигрой. Он необходим для контента, и поэтому его дизайн должен служить этой цели. Это не подразумевает скучный веб-сайт и не требует, чтобы все сайты выглядели одинаково. Украшения часто делаются для удовлетворения тщеславия дизайнера. Такое ненужное украшение отвлекает посетителя от цели посещения сайта и делает содержание второстепенным.
ССЫЛКИ ПОДЧЕРКНУТЫ, А КНОПКИ ВЫГЛЯДЯТ КАК КНОПКИ
Гиперссылка не имеет аналогов
в реальном мире. С зарождения интернета, для очевидного обозначения ссылки её подчеркивали. Кнопки, тем не менее, имеют аналог как в реальном мире, так и в компьютерных программах. Кнопки, отображаемые в браузере, должны выглядеть как кнопки, отображаемые в операционной системе компьютера, на которой работает указанный браузер. Это уменьшает усилия для определения типа элементов в интерфейсе.
КЛИКАБЕЛЬНЫ ТОЛЬКО ССЫЛКИ И КНОПКИ
КНОПКА НАЗАД РАБОТАЕТ КАК ПОЛОЖЕНО
Сайт — это гипертекстовый документ, который допускает две основные формы взаимодействия: переход по ссылке в другое место и отправка информации обратно на сервер. Эти функции выполняются, соответственно, по гиперссылкам и кнопкам. Кликабельные области страницы, которые явно не являются гиперссылками или кнопками, могут сбить с толку посетителя, заставляя его выполнять нежелательные действия или вовсе пропустить ссылки.
Все браузеры имеют встроенную кнопку возврата. Эта кнопка имеет задачу «отменить», возвращая пользователя туда, где он был до последнего клика. Дизайн может нарушить эту устоявшуюся ассоциацию, в то время как это наиболее важно, когда это единственная возможность вернуться назад по навигации.
ОСОБЕННОСТИ
СЫРОЙ БЕКГРАУНД, ЧАСТО ЧЕРНЫЙ ИЛИ БЕЛЫЙ, БЕЗ ТЕКСТУРЫ ИЛИ ЗАТЕМНЕНИЯ
01
02
03
04
05
06
07
08
09
10
11
12
ИЗОБРАЖЕНИЯ ТОЖЕ СЫРЫЕ, ЧАСТО ЧЕРНО-БЕЛЫЕ, ЕСЛИ ВООБЩЕ ЕСТЬ
ДИЗАЙН ВЫГЛЯДИТ ТАК, БУДТО ИМЕЕТ ВИЗУАЛЬНЫЕ ОШИБКИ, ТАКИЕ КАК ВЫРАВНИВАНИЕ ИЛИ ОШИБОЧНОЕ НАСЛОЕНИЕ ТЕКСТА
МОНОШИРИННЫЙ ШРИФТ ИЛИ ОДИН ШРИФТ ДЛЯ ВСЕХ СТРАНИЦ
ОТСУТСТВИЕ ДИЗАЙНЕРСКИХ ФИШЕК – НИКАКИХ ТЕНЕЙ, ГРАДИЕНТОВ ИЛИ ПАТТЕРНОВ
ОТСУТСТВИЕ АНИМАЦИИ
ЭЛЕМЕНТЫ ДИЗАЙНА В АНАЛОГОВОМ СТИЛЕ
НАЛЯПИСТЫЙ ДИЗАЙН С ТЕКСТОМ, КАЖУЩИМСЯ СЛИШКОМ БЛИЗКИМ, ИЛИ С ЭЛЕМЕНТАМИ, КОТОРЫЕ НЕ СГРУПИРОВАНЫ В БЛОКИ
НЕТ ЧЕТКОЙ ИЕРАРХИИ
ОТСУТСТВИЕ СИММЕТРИИ ИЛИ ИНТЕРВАЛОВ
НЕ ПЕРЕКРЫТЫЕ ЭЛЕМЕНТЫ, КОТОРЫЕ ВЫГЛЯДЯТ ТАК, БУДТО ОКАЗАЛИСЬ ЗДЕСЬ СЛУЧАЙНО
ОТСУТСТВИЕ ПРАВИЛЬНОЙ ЦВЕТОВОЙ ПАЛИТРЫ, НО ПОВСЕМЕСТНОЕ ИСПОЛЬЗОВАНИЕ КРАСНОГО И ЗЕЛЕНОГО
БРУТАЛИЗМА
ВЕБ-БРУТАЛИЗМ НАЧИНАЕТ ПРИОБРЕТАТЬ НОВЫЙ СМЫСЛ, СОВСЕМ НЕПОХОЖИЙ
НА ВДОХНОВИВШИЙ ДИЗАЙНЕРОВ ДУХ АРХИТЕКТУРНОГО ДВИЖЕНИЯ
Вместо того чтобы фокусироваться на создании сугубо утилитарного дизайна, некоторые дизайнеры интерпретируют брутализм как средство протеста против чрезмерно упрощенных дизайнов, проектируя совершенно уродливые, дезориентирующие и сложные интерфейсы.


АНТИДИЗАЙН
На антидизайн-сайтах часто отсутствует визуальная иерархия. Дизайнеры используют грубые цвета, дезориентирующие шаблоны, странные курсоры и ненужные отвлекающие анимации. Эти дизайны напоминают наихудшие образцы сайтов 90-х, даже еще хуже.
БРУТАЛИСТСКИЙ ПРОТЕСТ
МНОГИЕ ИЗ ЭТИХ АНТИДИЗАЙНОВ СОЗДАЮТСЯ ИСКЛЮЧИТЕЛЬНО В ЦЕЛЯХ ПОЗАБАВИТЬ ДРУГИХ ДИЗАЙНЕРОВ. ЭТО ШУТКА ДИЗАЙНЕРА ДЛЯ ДИЗАЙНЕРОВ, КОТОРЫЕ, РАЗУМЕЕТСЯ, РАСПОЗНАЮТ В ТАКИХ РАБОТАХ ИРОНИЮ
WEATHER IS HAPPENING — это пример метеорологического сайта, на котором творится настоящее безумие
ДЕЙСТВИТЕЛЬНО ВОЗМУТИТЕЛЬНЫЕ АНТИДИЗАЙН-САЙТЫ МОГУТ ВОСПРИНИМАТЬСЯ КАК СМЕЛЫЕ И ПРОВОКАЦИОННЫЕ. ОНИ РАСЧИТАНЫ НА ТО, ЧТО ЛЮДИ, ВОЗМУЩЕННЫЕ ТАКИМ ДИЗАЙНОМ, ОТПРАВЯТ НА НЕГО ССЫЛКУ СВОИМ ДРУЗЬЯМ, ЧТОБЫ КАК СЛЕДУЕТ ЕГО ВЫСМЕЯТЬ. ЛЮБАЯ ПУБЛИКАЦИЯ—ХОРОШАЯ ПУБЛИКАЦИЯ.
Сайт конференции Bloomberg's Businessweek Design привлекает внимание творящимся на странице хаосом.
Очевидную выгоду из брутализма извлекает веб-ресурс adultswim.com. Этот мультипликационный канал, целевой аудиторией которого являются взрослые, предстает в развлекательном контексте, имеет юмористический оттенок, и, вероятно, ориентирован на техно-гиков. Отметьте, однако, что брутализм здесь слабо выражен. Этот сайт имеет четкую визуальную иерархию и достаточно прост в навигации
ПРИМЕНЕНИЕ
В КАКИХ СЛУЧАЯХ БРУТАЛИЗМ МОЖЕТ ОКАЗАТЬСЯ ПОЛЕЗЕН
Чтобы извлечь для себя выгоду от использования бруталистского стиля, его применяют дозированно. Если он не ломает визуальную иерархию, привычную для пользователей систему навигации и логику взаимодействий только для того, чтобы выделиться и оказать эффект новизны, то он может принести пользу.
ПРИМЕРЫ
ПРОГНОЗЫ
Веб-брутализм движется от чего-то крайнего, почти панка, к мейнстриму и чему-то коммерчески жизнеспособному.Он научил бренды, что дизайн, ориентированный на пользователя, не должен быть монополизирован одними и теми же цветами, кнопками, фотографиями и даже текстом, которые вы видите на каждом сайте или продукте.
Выйдите за рамки привычного дизайна, потому что текущая тенденция говорит нам, что они не будут безопасными в течение очень долгого времени.Но помните–для того, чтобы брутализм смог выйти за рамки сайтов с портфолио, он должен стать мягче, по отношению к среднему пользователю.
UX – это не стиль или визуальный язык – это дисциплина, которая интерпретирует качественные и количественные данные, чтобы оптимизировать дизайнерские решения, но она не говорит вам, какие формы, цвета или шрифты использовать. Аналогично хорошо продуманная и интересная упаковка выделит продукт на фоне конкурентов и заставит вас выбрать его. Таким образом сработает мощная и прочная визуальная идентичность
UX – НЕ ОПРАВДАНИЕ ОТСУТСТВИЯ ВИЗУАЛЬНОЙ ИДЕНТИЧНОСТИ.
Поделиться
Следующий проект
Дизайн системы
Следующий проект
Дизайн системы