Бруталистический веб-дизайн, минималистский веб-дизайн и будущее веб-UX

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

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

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

Рождение Интернета

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

Затем появился Flash со всеми этими сумасшедшими анимированными сайтами, которые все наверняка помнят. Появилась разработка CSS (каскадных таблиц стилей), которая предоставила веб-дизайнерам еще больший контроль над такими улучшениями, как цвет фона, размер текста и стили текста в коде. JavaScript дал нам раскрывающиеся меню, расширенную навигацию и веб-формы с проверкой ошибок.

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

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

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

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

Минималистская эстетика

Тенденции дизайна приходят и уходят; однако минимализм — это язык дизайна, который присутствовал во времени. Это философия дизайна, которая фокусируется на упрощении формы за счет использования самых простых и важных элементов дизайна.

Минимализм присущ не только веб-дизайну. Подумайте обо всех элементах вокруг вас, которые охватывают этот идеал дизайна; легко связать минималистский дизайн с Nest, Apple, Herman Miller и многими другими, которые вдохновили многих дизайнеров-минималистов.

Что делает дизайн Herman Miller великолепным и сегодня? Это просто хорошо продуманные объекты с неподвластным времени видом. Его проекты очень хорошо смотрятся в современных домах и интерьерах — они по-прежнему выглядят свежими и современными. Многие из его произведений выполнены в минималистском стиле и не могут быть привязаны к какой-либо конкретной причуде. Они до сих пор выдерживают испытание временем.

Минималистский дизайн одного из самых известных графических дизайнеров своего времени Йозефа Мюллера-Брокманна очень похож на дизайн Германа Миллера: вневременной . Мюллер-Брокманн освоил минимализм в 1940-х и 1950-х годах в форме швейцарского стиля дизайна.

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

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

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

Затем пришла скевоморфная тенденция, когда дизайнеры создавали элементы, имитирующие реальные объекты в цифровом пространстве. Помните кожаную обивку iCal от Apple?

Минимальный дизайн на самом деле преднамеренный. Это подход к дизайну, который убирает все ненужное и фокусируется на элементах, которые должны привлекать максимальное внимание, делая акцент на содержании.

Преимущества минималистского дизайна

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

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

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

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

Будущее минимализма

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

Например, Material Design от Google был одним из первых крупных достижений в вдохновленном минимализмом «плоском» подходе к дизайну. Дизайнеры Google сохранили простоту и минимализм, но улучшили свой язык дизайна, используя эффекты теней и концепции движения и глубины. Материал включает в себя плоский дизайн с особым поворотом: имитация реальных материалов.

Обратная сторона минимализма

Как и в случае с другими элементами в жизни, мы всегда должны смотреть как на плюсы, так и на минусы. Многие утверждают, что веб-сайтам сегодня не хватает изюминки, и в основном все они одинаковы. Вы знаете — большое изображение или видео с наложенным текстом, ряд значков с текстом и так далее. Любой может потратить пару минут своего времени и придумать 10 сайтов, очень похожих друг на друга. Является ли это отражением нашего постоянно меняющегося онлайн-поведения и предпочтений?

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

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

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

Некоторым это нравится, некоторым это не нравится, а многие другие просто не понимают: бруталистские веб-сайты.

Возьмите Craigslist в качестве примера. Craigslist следует считать «дедушкой» бруталистских веб-сайтов. Это не эстетично и никогда не будет размещено на www.awwwards.com. Черный текст, синие ссылки, белый фон. Это некрасиво. Это не обязательно, потому что это работает — и работает очень хорошо. Вы найдете то, что вам нужно купить или продать без суеты и шума, и без каких-либо посторонних движущихся частей.

С момента своего основания в 1996 году Craigslist сохраняет свою популярность, несмотря на — а может быть, и благодаря — чрезвычайно утилитарному дизайну. За последние 20 с лишним лет дизайн существенно не изменился.

Возможно, вдохновленный примером Craigslist, бруталистический стиль возвращается. Ниже приведены отличные примеры хорошо выполненных дизайнов в бруталистическом стиле.

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

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

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

Стиль брутализма в дизайне не нов. Быстрый поиск в Википедии покажет вам, что стиль на самом деле происходит от бруталистической архитектуры 1950-х до середины 1970-х годов. Забавно, что за брутализмом последовало модернистское архитектурное движение, где минимализм был ключевым.

Ле Корбюзье был одним из крупнейших пионеров этого движения. Его карьера длилась пять десятилетий, когда он проектировал здания в Европе, Японии, Индии, Северной и Южной Америке.

Термин происходит от французского слова « brut » для «сырого», как Ле Корбюзье описал свой выбор материала « beton brut », сырой бетон. Гиперфункциональный дизайн, казалось, был разработан только для того, чтобы приносить пользу, а не нравиться, как будто намекая на модернизм.

Брутализм пытается противостоять обществу массового производства и вытащить грубую поэзию из запутанных и могущественных сил, которые действуют. До сих пор Брутализм обсуждался стилистически, а суть его этична. – Элисон и Питер Смитсон, Новый брутализм, архитектурный дизайн (апрель 1957 г.)

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

Брутализм в эпоху цифровых технологий

Bloomberg по-своему перенял этот стиль для своего новостного сайта. Дизайн почти кричащий и явно ориентирован на необработанную функциональность.

Брутализм уверенно возвращается. Уродливые, сырые, вырывающиеся из привычного дизайна, сумасшедшие эффекты при наведении курсора и поверхностные орнаменты повсюду. Многие пуристы считают эту тенденцию резкой, грубой, грубой, неудобной, конфронтационной и циничной. Это. Нарочно.

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

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

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

Дизайнер Пьер Буттин вывел брутализм на новый уровень, представив серию обновленных мобильных приложений. В своем последнем проекте под названием «Бруталистский редизайн» Буттин визуализирует Facebook, Instagram, Twitter и другие популярные приложения в бруталистском стиле, с текстовыми макетами и плоским дизайном.

Брутализм против минимализма

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

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

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

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Принципы дизайна и их важность
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Изучение гештальт-принципов дизайна
• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• 10 UX-результатов, которые используют лучшие дизайнеры