Независимо от того, являетесь ли вы новичком в дизайне или экспертом, вы можете когда-нибудь посетить веб-сайт и найти:
- ряд огромных, жирных и моноширинных текстов, свисающих вокруг
- центрированное изображение продукта, раскачивающееся в «странном» ритме
- или список продуктов, доминирующий на экране без нормальной навигации или иерархии
Все на сайте кажется очень сырым, но при этом неотразимо привлекательным для вас?
OK! Не волнуйтесь! Этот «странный» веб-сайт не плохо спроектирован. Это просто мудро сочетается с модным брутализмом. Если вы заинтересованы в создании потрясающего бруталистского веб-сайта, это простое руководство поможет вам.
Не забудьте прочитать!
Мы расскажем вам об основах веб-сайтов с брутализмом, в том числе о том, что такое брутализм в дизайне веб-сайтов, зачем вам нужен брутализм и что делает хороший веб-сайт с брутализмом. Коллекция лучших примеров брутального дизайна веб-сайтов, шаблонов и других ресурсов дизайна также упрощает процесс дизайна.
Оглавление
- Что означает брутализм в дизайне веб-сайтов
- Веб-сайт брутализма против плохо разработанного веб-сайта
- Почему сайты о брутализме становятся такими популярными
- Подходит ли дизайн в стиле брутализма для вашего следующего проекта
- Как создать сайт о брутализме
- Примеры и шаблоны лучших бруталистских веб-сайтов
Что означает брутализм в дизайне веб-сайтов?
Брутализм, в первую очередь связанный с архитектурным дизайном, говорит о стиле дизайна «грубый и грубый бетон», который быстро стал популярным в послевоенный период. Однако, когда дело доходит до дизайна веб-сайтов, дизайн брутализма больше фокусируется только на термине «сырье».
Веб-сайт Brutalism следует аналогичному необработанному стилю дизайна и пытается представить контент и функции веб-сайта реакционным, прямым, уродливым, беззаботным или иногда даже странным образом.
Они часто в полной мере используют необработанные взаимодействия, такие как встряхивание, свисание или автоматическое воспроизведение, яркий цвет, градиентные или теневые блоки, жирная и огромная типографика, разделенные экраны и другой привлекательный дизайн, чтобы представить основную информацию в чрезвычайно преувеличенной форме.
Дизайн веб-сайтов с некоторым брутализмом иногда даже не имеет четкой навигации или иерархии, но имеет простой дизайн в виде списка или таблицы, который помогает пользователям ориентироваться.
Короче говоря, веб-сайт с брутализмом больше подчеркивает, что пользователи будут испытывать и получить на сайте за счет эстетической красоты. Он быстро становится популярным благодаря своему сырому внешнему виду и экспериментальности.
Веб-сайт брутализма против плохо разработанного веб-сайта
Изучая веб-сайт о жестокости, вы также должны обращать внимание на разницу между веб-сайтом о жестокости и плохо разработанным веб-сайтом:
Веб-сайты, посвященные брутализму, активно используют уродливый дизайн, чтобы привлечь пользователей и побудить их нажимать на рекламу или кнопки с призывом к действию. Они специально добавляют все «странные» элементы для лучшего результата.
Но плохо спроектированные веб-сайты часто создаются бессознательно. Дизайнеры могут добавить специальный элемент, желая улучшить UX, и в конечном итоге обнаружат, что он вызывает гораздо больше проблем.
Как видите, этот веб-сайт сгруппирован с разными гиперссылками, цветами и изображениями, что создает действительно плохой пользовательский опыт. Итак, этот пример явно плохо спроектированный веб-сайт, а не веб-сайт бруталистского стиля.
Почему сайты о брутализме становятся такими популярными?
Многие компании и дизайнеры используют дизайн в стиле брутализм, поскольку:
- Необработанный внешний вид позволяет веб-сайтам легко выделяться
Просматривая веб-сайты в Интернете, вы можете обнаружить, что почти все обычные веб-сайты сегодня выглядят одинаково, поскольку они следуют аналогичным тенденциям дизайна и технологиям. Веб-сайт с необработанными макетами, взаимодействиями, шрифтами, иллюстрациями и типографикой, несомненно, будет выделяться среди остальных современных веб-сайтов.
- Стиль дизайна брутализм легко привлекает молодое поколение
Стиль дизайна брутализм — это дизайнерская тенденция, воспитанная молодыми поколениями. Он идет в ногу с молодым поколением, которое любит перемены, новые вещи и вызовы. Это помогает веб-сайтам привлекать гораздо больше молодых пользователей.
- Брутализм легко выделяет основной контент и функции
Как мы уже описали выше, веб-сайт жестокости всегда использует преувеличенные способы выделить основной контент и функции, помогая легко доставлять основную информацию пользователям. Уникальный фирменный стиль также будет создан в том же процессе.
Подходит ли дизайн в стиле брутализма для вашего следующего проекта?
Пока нет точного ответа. Вам следует учитывать две вещи:
- Нравится тебе это или нет
Нравится ли вам стиль дизайна брутализма — это часто первое, что вам следует учитывать. Конечно, это решение также следует принимать на основе ваших дизайнерских навыков и уровня. Если вы не так хороши в дизайне брутализма, узнайте об этом или сначала просмотрите несколько примеров веб-сайтов брутализма.
- Обратите внимание на типы веб-сайтов, например правительственные.
Очевидно, только вы можете решить, подходит ли дизайн брутализма для вашего следующего проекта.
Однако в случае непредвиденных проблем, прежде чем принимать решение, следует сначала рассмотреть типы веб-сайтов.
Когда дело доходит до некоторых веб-сайтов, которые требуют, чтобы вы представляли все в серьезном стиле или настроении, в том числе веб-сайт о жестокости или образовательный веб-сайт, веб-сайт, посвященный брутализму, кажется не лучшим вариантом. Однако, если вы создаете личный веб-сайт или веб-сайт-портфолио, индивидуальный стиль дизайна брутализма может стать хорошей попыткой выделить вас среди остальных.
Как создать сайт о брутализме?
Чтобы выделить веб-сайт, посвященный брутализму, помимо обычных шагов по дизайну веб-сайтов, вот несколько полезных советов, о которых следует помнить:
- Изучите свою аудиторию
Независимо от того, какой тип веб-сайта вы пытаетесь создать, исследование пользователей всегда имеет значение. То же самое и с дизайном веб-сайтов с использованием брутализма. Чтобы выделить правильный контент и функции, вы всегда должны сначала исследовать свою аудиторию, чтобы знать, чего на самом деле пользователи хотят от вашего веб-приложения.
- Играйте с формами и размерами
Чтобы предоставлять контент веб-сайта привлекательно и эффективно, вам также следует использовать уникальные формы, выбрать необычный размер буквы или изображения, жирную, но моноширинную типографику и другие элементы, чтобы произвести большое визуальное впечатление на аудиторию.
- Используйте сильные контрасты цвета или размера
Помимо визуальных элементов, таких как цвета и формы, вы также должны попытаться использовать сильные цветовые или размерные контрасты, чтобы выделить какое-то важное содержимое или элемент.
Как видите, контрастные цветные блоки помогают привлечь пользователей, а также разделяют экран на разные функциональные части, успешно создавая четкий веб-макет.
- Соблюдайте основные принципы дизайна веб-сайтов
Независимо от того, почему вы решили создать веб-сайт, посвященный брутализму, вы всегда должны изучать и соблюдать все основные принципы веб-дизайна . Например, что бы ни случилось, контент всегда находится наверху. Всегда поддерживайте согласованность своего веб-сайта или приложения. Никогда не прекращайте улучшать макет своего веб-сайта для быстрого сканирования и многого другого.
Вы всегда должны помнить об основных принципах дизайна, чтобы ваш сайт был эффективным, практичным и доступным для пользователей. Это один из основных секретов предотвращения создания плохих веб-сайтов .
- Проверьте свой сайт брутализма с помощью правильных инструментов
Чтобы сделать сайт популярным среди пользователей, вы всегда должны воплощать свои идеи в функциональные прототипы, чтобы полностью тестировать их снова и снова. Итак, когда вы пытаетесь создать веб-сайт, посвященный брутализму, вам также рекомендуется выбрать правильный инструмент для дизайна веб-сайтов, чтобы снова и снова полностью проверять свои идеи.
Примеры и шаблоны лучших бруталистских веб-сайтов
Мы также собрали 20 лучших примеров и шаблонов дизайна веб-сайтов с брутализмом, чтобы помочь вам быстрее создать свой собственный:
Примеры дизайна сайтов в стиле брутализм
1.Свен Сорич
Свен Сорич — графический дизайнер-фрилансер из Загреба, Хорватия. Его личный веб-сайт — это пример веб-сайта, который идеально сочетает в себе брутализм и минимализм.
На главной странице представлены все его дизайнерские кейсы с простыми и понятными списками. При наведении указателя мыши на какие-либо дела предварительный просмотр дела отображается в стороне. Список случаев также используется в качестве боковой панели для исправления с левой стороны, чтобы пользователи могли легко переключаться между различными случаями с помощью простых щелчков мыши.
Предварительный просмотр онлайн
2 Лука Порраккья
Портфолио Луки Порраккиа — еще один хороший пример минималистичного веб-сайта с брутальным дизайном. Веб-страницы разделены на две колонки: одна колонка простыми словами иллюстрирует дизайн-проекты, а другая демонстрирует дизайнерские изображения. Крутые переходы изображений и интерактивная домашняя страница дают пользователям действительно интересный опыт.
Предварительный просмотр онлайн
3.Умами посуда
Онлайн-сайт команды Umami Ware — хороший пример, который знакомит вас с тем, как создать потрясающий веб-сайт брутализма с огромной моноширинной типографикой. Богатые возможности взаимодействия при наведении, переходы, уникальная горизонтальная прокрутка и многое другое создают отличный визуальный эффект. Все они помогают произвести хорошее первое впечатление на пользователей.
Предварительный просмотр онлайн
4.Энди Картер
Персональный веб-сайт Энди Картера разумно размещает моноширинные слова и изображения вместе или по отдельности для создания четкого визуального макета. Даже без общей панели навигации вы все равно можете четко определить, какая часть является баннером, заголовком, подзаголовком и регистрами. Отличный пример, который научит вас, как сделать удобный веб-сайт из неупорядоченных элементов.
Предварительный просмотр онлайн
5. смелое новое слово
Brave New Word — один из прекрасных примеров дизайна веб-сайтов, созданный Энди Картером. Его домашняя страница имеет свежий дизайн, напоминающий доску объявлений. Весь важный контент представлен красочными стикерами. Яркие цвета контрастируют с белым фоном, выделяя контент.
Хороший пример, который вы должны проверить, чтобы узнать, как использовать цветовые контрасты для улучшения вашего сайта.
Предварительный просмотр онлайн
6.Шоенер
Schoener — это веб-сайт дизайн-студии с брутальным внешним видом. Помимо типичной типографики большого размера, этот веб-сайт предлагает богатые эффекты наведения и стиль оформления рассказов. Когда вы прокручиваете сайт вниз, вы запускаете серию интересных микровзаимодействий, а также не можете не следовать руководству по прокрутке вниз до конца страницы.
Изменяющийся большой курсор мыши, забавные изображения в формате GIF и свежие изображения для предварительного просмотра создают ощущение полного погружения при прокрутке вверх и вниз.
Предварительный просмотр онлайн
7.Блог Fuse
Fuse — замечательный блог, в котором регулярно публикуются творческие ссылки и цифровые развлечения. Его домашняя страница также оформлена в веселом бруталистском стиле. Его страница разделена на ряды, в которых отдельно представлены великолепные дизайнерские проекты. При наведении курсора на строку также отображается предварительный просмотр проекта. Верхняя панель тегов также интерактивна. Вы можете легко перетащить метку «мяч», чтобы поразить других, как в боулинге.
Предварительный просмотр онлайн
8 Патрик Дэвид
Патрик Дэвид — креативная студия дизайна веб-сайтов или мобильных приложений. Интернет-сайт этой дизайн-студии также использует стиль дизайна брутализм. Большой размер шрифта, меняющийся фон и постоянно вращающийся баннер помогают легко привлечь внимание пользователей.
Предварительный просмотр онлайн
9. Seele Studio
Интернет-сайт Seele Studio поддерживает горизонтальную прокрутку. На его веб-страницах также используется крупная типографика, «вызывающие» гифки и взаимодействия, а также короткие вступительные слова, чтобы дать пользователям ощущение брутальности.
10. Кафедра Artmuseum
Департамент Artmuseum — это сайт брутализма, созданный Музеем современного искусства arsaw. Он имеет интерактивную домашнюю страницу, позволяющую вам свободно перемещать цементные блоки по своему усмотрению.
При просмотре различных разделов этого веб-сайта эти цементные блоки также вращаются на экране, чтобы заблокировать просмотр в увлекательной игровой форме. Разбросанные повсюду разнообразные микровзаимодействия эффективно улучшают взаимодействие с пользователем.
Предварительный просмотр онлайн
11.Amazonnaws
Amazonnaws — это сайт о жестокости, созданный для интернет-магазина. Кажется, что все продукты и вступительные слова рассредоточены по экрану, перемещаются и вращаются, создавая очень впечатляющий визуальный эффект. Гифки моделей также скользят внутрь или наружу на заднем плане.
Это хороший пример веб-сайта, который поможет вам узнать, как произвести отличное визуальное впечатление.
Предварительный просмотр онлайн
12 Крисси Эбботт
Крисси Эбботт — дизайнер и арт-директор из Лондона. Домашняя страница ее сайта-портфолио оформлена в веселом качающемся тоне — все трясется в ритме. Этот веб-сайт также является хорошим примером того, как выделить дизайнерские работы яркими цветовыми контрастами.
Предварительный просмотр онлайн
13.Lazyeyes
Lazyeyes — это креативный онлайн-сайт, созданный для профессиональной дизайн-студии. На его домашней странице используются простые сетки для непосредственного представления всех изображений проекта. Без традиционной системы навигации этот веб-сайт использует простую панель, которая помогает пользователям перемещаться по клавиатуре со стрелками на вашем компьютере или ноутбуке.
Предварительный просмотр онлайн
14. музыкальный магазин
Музыкальный магазин предназначен для продажи альбомов в Интернете. На его домашней странице перечислены все музыкальные альбомы с забавными изображениями, переходами, эффектами прокрутки и т. Д. Если вы планируете создать сайт о брутализме, посмотрите этот. Вы получите вдохновение.
Предварительный просмотр онлайн
15 Джек Уайлд
Джек Уайлд — цифровой дизайнер и веб-разработчик из Берлина. На домашней странице его портфолио используются слова только для перечисления различного проекта и содержания страницы. Однако при прокрутке веб-страницы вниз курсор мыши превратится в бомбу. Нажмите на экран, бомба мгновенно взорвется, и текст вокруг также улетучится.
Предварительный просмотр онлайн
Шаблоны дизайна веб-сайтов Brutalism
16. бесплатный адаптивный HTML-шаблон
Этот адаптивный шаблон HTML-фреймворка с открытым исходным кодом является прекрасным примером того, как личный веб-сайт или веб-сайт портфолио выделяется среди остальных даже без четкой навигации и иерархии. Вместо обычных панелей навигации или меню на главной странице используется многоугольный поворотный стол, который помогает пользователям переключаться между различными разделами страницы.
Хороший бесплатный шаблон для разработчиков или инженеров для создания отличительного веб-сайта-портфолио.
17. Шаблон сайта креативного агентства Breton
Breton — это пакет креативных шаблонов веб-сайтов, который содержит несколько вариантов домашней страницы в стиле брутализма. Параметры режима дротика и света, уникальные макеты, полноэкранные презентации с богатой анимацией и многие другие функции делают его идеальным шаблоном для создания лучшей студии дизайна или личного веб-сайта.
18.Aurora Events Design Kit Sketch и Adobe XD
Aurora — это уникальный, современный и профессиональный дизайнерский набор, который поможет вам с легкостью создать блестящий веб-сайт в стиле брутализм. Он предоставляет 7 уникальных экранов, 12 сеток и высококачественные компоненты. Все слои организованы в соответствии с вашими требованиями к дизайну.
19. микстейп с дизайном веб-сайта
Этот шаблон веб-дизайна объединяет в себе серию брутальных концепций веб-дизайна. Все страницы дизайна украшены шрифтами особого размера, красочными изображениями и гораздо более брутальными элементами. Несмотря на то, что ссылки для скачивания нет, вы все равно можете связаться с дизайнерами, если вам это интересно.
20. трендовый монстр
Trend Monster от Dribbble — это крутой черно-белый сайт с элементами брутальности. Вы можете бесплатно скачать JPG-версию, если вам интересно.
