Необруталізм у дизайні сайтів: усе про нашумілий UX/UI тренд 2024 року

З початку нульових вебдизайн досяг небувалого рівня. Красиві форми з заокругленими краями, м’які та барвисті градієнти, ненав’язливі тіні та шрифт без зарубок — сучасний мінімалізм однозначно виглядає стильно, однак останнім часом його стало занадто багато.

Людям почали набридати ідеальні сайти. У відповідь на цей запит з’явився необруталізм — оригінальний стиль, що поєднує у собі звичний архітектурний бруталізм та сучасні стандарти типографіки, ілюстрації та анімації. Він виглядає хаотично, сміливо і іноді навіть лякаюче, але його продовжують обирати дизайнери Google, Spotify, GitHub. Чому — розбираємося в цій статті.

Що таке нео-бруталізм

Бруталізм — відомий архітектурний стиль — походить від французького слова «brut», що в перекладі означає «сирий». Він з’явився в середині двадцятого століття, а популярним став у кінці 50-х років. Для нього характерні прості геометричні фігури, грубі текстури, гострі краї та металеві відтінки.

Основна філософія цього напрямку заснована на думці «Дизайн = функціональність». Будівлі у стилі бруталізму виглядають просто, іноді грубо і провокативно, але дуже структуровано. Натхненні ними дизайнери створили стиль необруталізм — він вирізняється своєю простотою, функціональністю та показною неідеальністю.

Спочатку neo brutalism використовувався в дизайні газет і журналів 90-х, але кілька років тому успішно перекочував в інтернет. Сьогодні дизайн користувацького інтерфейсу у подібному стилі виділяється своєю сміливою та безрозмірною типографікою, яскравими кольорами, сильними контрастами та чіткими краями. Ключове гасло сайтів у цьому стилі — «Геть нудні правила та буденність».

Чому стиль neo brutalism популярний саме зараз

Спостерігаючи за останніми тенденціями у дизайні, можна помітити, що сучасний вигляд необруталізму став своєрідним гібридом двох напрямків — старого-доброго мінімалізму та грубого і сміливого бруталізму.

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

З появою необруталізму у світі вебдизайну з’явилося більше різноманітних інструментів, які допомагають завойовувати увагу користувача. У наш час, коли акуратний і стильний сайт можна зробити за кілька тижнів, потрібно шукати нові способи викликати емоції у аудиторії.

У чому різниця між необруталізмом, бруталізмом та мінімалізмом

1. Бруталізм нагадує велику будівлю з бетону. У нього немає вигадливих деталей та стильних декорацій — тільки сувора і чітка структура. Виглядає трохи лякаюче, проте дуже функціонально.
2. Мінімалізм асоціюється з простою і ідеально прибраною кімнатою. Тут усе лежить на своїх місцях, а на полицях не зустрінеш оригінальних статуеток чи кричущих картин — простір заповнений лише необхідними речами у світлих тонах.
3. Необруталізм — це механізм, що працює чітко, як годинник, але при цьому розфарбований у різні кольори веселки та прикрашений вигадливим декором. Він виглядає яскраво та цікаво, але при цьому виконує свою функцію.

Хочете знати більше про сучасні напрямки в дизайні? Тоді реєструйтеся на наші платні та безкоштовні заходи, присвячені цій темі. Дізнатися більше про нашу програму можна тут.

Характеристики необруталізму

Необруталізм — оригінальне поєднання звичного бруталізму у вебдизайні та більш сучасних стандартів типографіки, ілюстрації та анімації. Це чудова альтернатива класичним видам дизайну користувацького інтерфейсу, яка не дозволяє йому стати нудним і буденним. Але що саме робить необруталізм таким особливим і виділяє його серед інших стилів? Про усі ключові характеристики напрямку поговоримо далі.

Контраст і тіні

Висока контрастність — одна з головних особливостей необруталізму. Чіткі чорно-білі поєднання створюють драматичний ефект, що моментально привертає до себе увагу. Замість звичних м’яких тіней у цьому стилі використовуються сміливі, чітко окреслені кольорові контури, розташовані як по осі X, так і по осі Y. Вони обрамляють елементи дизайну, роблячи їх візуально значимими та помітними.

Суцільні чорні або кольорові прямокутники в такому дизайні створюють ефект спливаючого вікна, виділяючи кнопки, заклики до дії та декоративні елементи. Головне правило — не використовувати розмиття: тіні повинні бути максимально чіткими, ніби під основним елементом знаходиться ще один темніший прямокутник. Також у необруталізмі тіні і 3D-елементи часто розташовуються під кутом 45°, що надає дизайну ще більш сучасного вигляду.

Кольори

Необруталізм у дизайні не боїться візуальних конфліктів і використовує контрастні кольори для створення драматичного ефекту. Якщо у класичних стилях використання чистого чорного (#000000) — табу, то в необруталізмі він не просто повсюдно зустрічається, а ще й свідомо комбінується з яскравими відтінками.

Типова кольорова палітра цього стилю включає в себе:

• чистий чорний колір у якості акцентного;
• насичені та енергійні відтінки;
• вінтажні та приглушені кольори, що створюють ретро-ефект.

Окремо варто сказати про фон. Фонові кольори у необруталізмі можуть бути будь-якими, і частіше за все вони яскраві. Традиційний білий або світло-сірий тут використовується вкрай рідко. Також у подібному дизайні практично не зустрінеш градієнти — всі кольори завжди однотонні та насичені.

Необруталісти не бояться використовувати колірні комбінації, які інші дизайнери могли б вважати неграмонічними або конфліктними. Наприклад, поєднання чистого чорного з неоново-жовтим (#FFFF00) або вогняно-помаранчевим (#FFA500). Смілива кольорова палітра робить необруталізм ідеальним для творчих та інноваційних брендів, які прагнуть привернути увагу користувачів з першого погляду.

Розділення

У необруталізмі роздільники використовуються для чіткого розмежування елементів сайту та направляючих ліній для користувачів. Замість тонких і непомітних ліній тут переважають сміливі товсті межі, які створюють навмисно грубі розділення. Це підсилює загальне відчуття зухвалості, притаманне стилю.

Роздільники можуть приймати форму яскравих ліній або помітних геометричних фігур, виділяючись на фоні решти дизайну. Вони грають ключову роль у візуальній організації контенту, допомагаючи користувачам легко орієнтуватися на сайті та підкреслюючи структуру сторінок.

Спливаючі вікна

Необруталізм у дизайні не дотримується строгих правил при створенні ілюстрацій та елементів: натомість він поєднує різноманітні стилі, натхненні старими відеоіграми, рекламою та поп-культурою. Часто у такому дизайні використовуються знайомі кожному елементи спливаючих вікон, які створюють ностальгічні асоціації з класичним інтерфейсом Windows 7 або Mac.

Цей підхід допомагає продемонструвати користувачам функціональність елементів, роблячи їх доступними та інтуїтивно зрозумілими. Однак важливо використовувати цю концепцію тільки у тому випадку, якщо вона відповідає категорії вашого продукту. Наприклад, вона ідеально підійде для сайту програмного забезпечення, але при використанні з більшістю повсякденних продуктів і послуг цей прийом може лише заплутати користувача. Пам’ятайте, що вікна повинні підкреслювати функціональність продукту, а не відволікати від його суті.

Проста естетика та навмисна потворність

Необруталізм використовує елементи дизайну у їх необробленій формі, уникаючи зайвого декору. Наприклад, тут часто використовуються прості кнопки CSS та примітивні навігаційні панелі.

Стиль демократичний у своєму підході: у дизайні часто використовуються стандартні форми та стилі, знайомі всім за програмами для презентацій, такими як PowerPoint. Саме їх можна побачити у типовому дизайні Figma, виконаному у стилі необруталізму.

На прикладі нижче ви бачите три картки з непослідовним дизайном — це зроблено спеціально. Кнопка «Опублікувати» на одній з карток зміщена вліво, створюючи відчуття недбалості та простоти. Інші картки виглядають як стандартні фігури з Power Point.

Для необруталізму типово порушувати правила та нормалізувати певну потворність. У користувача повинна виникнути думка: «Такий дизайн я міг би зробити і сам!» Саме ця доступність викликає у брендів бажання звернутися до стилю необруталізму: він наочно показує, що будь-хто може створити щось подібне, а отже викликає підсвідомий зв’язок з продуктом як з чимось простим і функціональним.

Типографіка

Типографіка у необруталізмі є не просто засобом передачі інформації, а й ключовим декоративним елементом, який привертає увагу і акцентує важливі моменти. У рамках цього стилю часто використовується великий і жирний шрифт без зарубок. Основна мета — зробити текст ефектним і чітким.

Ключові характеристики текстів у такому стилі:

• для заголовків використовуються великі розміри шрифтів, які допомагають привернути увагу;
• висота рядків та інтервал між літерами може відрізнятися від ряду до ряду;
• найпопулярніші шрифти — Sans Serif, Lexend Mega, Public Sans, Mabry Pro, Archivo Black, Bebas Kai.

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

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

Ілюстрації та анімації

Ілюстрації в необруталізмі часто поєднують у собі ті кольори, які в сучасному мінімалізмі не використовуються через їх конфліктність — наприклад, червоний із синім або оранжевий із зеленим. В основі лежить вільна естетика: лінії можуть бути як товстими, так і тонкими, божевільні форми можуть комбінуватися з чіткими геометричними фігурами, а загальний вигляд може виглядати неорганічно. Це створює відчуття, що ілюстрації могли бути зроблені будь-якою людиною, підсилюючи демократичність стилю.

Необруталізм у дизайні часто поєднує сучасні графічні елементи та анімації з плоскими кольорами. Контрастні відтінки оживляють дизайн, роблячи його неймовірно привабливим. Вебдизайнери часто обирають трохи безглузді ілюстрації, щоб зробити свої роботи більш ефектними.

Також необруталісти можуть поєднувати непоєднуване: наприклад, використовувати графіку нового покоління, суміщаючи її з HD-фотографіями та елементами мобільного дизайну. Ефект паралаксу, створюваний під час прокручування, додає глибини та інтересу до сайту.

Анімації в необруталізмі часто прості. Переходи в них мінімалістичні, без зайвих ефектів, які зазвичай зустрічаються в традиційних проектах. Занадто продумані та технологічні анімації не використовуються — фокус зберігається на чіткості та функціональності.

Ілюстрації та анімації в необруталізмі вдихають у дизайн життя і створюють ту саму унікальну та привабливу естетику, від якої неможливо відвести погляд.

Основні сильні сторони необруталізму

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

Давайте почнемо з переваг:

1. Сміливий і помітний. Завдяки своєму нетривіальному і дивакуватому вигляду neo brutalism легко привертає до себе увагу аудиторії. Використання високої контрастності, геометричних форм і необроблених текстур створює ефектний сайт, тому з таким дизайном ви одразу ж отримуєте +100 до впізнаваності.
2. Ідеальний для творчості. Необруталізм може використовуватися у широкому спектрі галузей, але найкраще він підходить креативним проєктам. Що може краще продемонструвати творчі навички команди, ніж їх власний сайт? Стиль можна використовувати для маркетингових агентств, дизайнерських команд, брендів одягу та багатьох інших творчих ніш.
3. Зручний з точки зору SEO. Завдяки своїм особливостям стиль легко оптимізується для пошукових систем. Такий дизайн часто зрозумілий і зручний у навігації, а за рахунок простих форм, анімацій та зображень його стає просто просувати.
4. Зрозумілий. Мінімалістична естетика необруталізму допоможе зробити сайт простішим у використанні. З ним на сторінці менше безладу і відволікаючих факторів, а процес створення такого сайту стає більш гнучким та веселим.

Ще одна важлива перевага необруталізму — він поступово завойовує світові тренди. В останні роки все більше великих компаній обирають використовувати його у своєму дизайні. Це означає, що якщо ви хочете створити у користувача асоціацію з вашим брендом як із чимось сучасним та актуальним, варто включити необруталізм до списку потенційних стилів.

Недоліки необруталізму: у яких випадках його краще не використовувати

Як і будь-який стиль, необруталізм підійде далеко не всім. У нього є ряд недоліків, які важливо враховувати при виборі напряму для майбутнього дизайну.

Основні мінуси необруталізму:

1. Візуальне напруження. Поєднання яскравих контрастних кольорів, великих елементів і товстих ліній може перевантажувати зорове сприйняття, викликаючи у користувачів дискомфорт та втому очей.
2. Неуніверсальність. Сміливий і зухвалий стиль необруталізму може бути занадто агресивним для деяких брендів та аудиторії.
3. Обмежена читабельність. Через великі шрифти та високу контрастність тексту з фоном не всі користувачі зможуть легко сприймати написану інформацію, тож довгі тексти або складні інструкції в дизайні краще не використовувати.
4. Складність реалізації. Створення якісного дизайну в стилі необруталізму може вимагати більше часу та зусиль, ніж традиційні підходи. Необхідно ретельно продумувати кожну деталь, щоб уникнути зайвого хаосу і досягти золотої середини.

Незважаючи на свою оригінальність та привабливість, необруталізм може не підійти ряду бізнесів. Його не варто використовувати у проєктах з атмосферою елегантності, витонченості або спокою — наприклад, у медичних установах.

Як дизайнер-необруталіст допомагає бізнесу

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

Привернення уваги

Необруталізм у дизайні створює візуально потужний стиль, який однозначно виділяється серед конкурентів. Сміливі контрасти, великі елементи та яскраві кольори привертають погляд користувачів, змушуючи його затримуватися на сайті довше. Це особливо важливо для тих брендів, які прагнуть миттєво захопити інтерес своєї аудиторії та скоротити проміжок часу між першим дотиком і покупкою.

Формування унікального стилю

Завдяки оригінальному і зухвалому стилю необруталізм допомагає бізнесам створювати унікальний і впізнаваний дух. Один раз натрапивши на бренд, наприклад, у таргетованій рекламі, користувач однозначно впізнає його наступного разу. Використання нестандартних візуальних рішень і навмисно грубих елементів робить бренд відмінним від інших, що сприяє формуванню його сильної ідентичності.

Інноваційність

Необруталізм підкреслює креативність компанії та сучасний підхід команди. Бізнеси, які обирають цей стиль, показують аудиторії, що готові йти на ризик і використовувати нестандартні підходи. Це привертає до них креативну та прогресивну аудиторію, яка цінує сміливість і оригінальність.

Економія ресурсів

Використання простих і навмисно грубих елементів дизайну може знизити витрати на розробку і підтримку сайту. Відмова від складних візуальних ефектів і прикрас спрощує процес створення дизайну і зменшує навантаження на сервери. Це особливо вигідно для новачків, маленьких брендів і бізнесу з обмеженими ресурсами.

Привернення уваги громадськості

Неординарні дизайни часто привертають увагу ЗМІ і блогерів. А це — безкоштовна реклама, цінна для більшості бізнесів. Необруталізм, завдяки своїй зухвалості і нестандартності, може стати гучною темою обговорення і привернути додаткову увагу до вашого бізнесу, чого не зробив би жоден стандартний дизайн.

Як великі бренди використовують neo-brutalism у своїх сайтах: 7 прикладів

Що може сказати про затребуваність стилю краще, ніж гучні імена всесвітньо відомих компаній, які з безлічі альтернатив обирають саме його? Необруталізм уже давно проник на сайти продуктів, про які ви чули не раз. Давайте розглянемо приклади великих брендів, яким вдалося знайти баланс між простотою і естетикою, впровадивши яскраві фішки необруталізму у свої проекти.

Як ми згадували раніше, neo brutalism ідеально підходить творчим проектам. Не дивно, що один із найбільших інструментів дизайну UI/UX Figma частково виконаний саме в цьому стилі. Фактично продукт має мінімалістичний вигляд, але елементи блогу і головної сторінки — чистий neo-brutalism. Велика типографіка, грайливі форми, широкі контури, творчі орнаменти — на сторінках Figma ви побачите всі ознаки необруталізму.

Gumroad — платформа електронної комерції для продажу цифрових продуктів, підписок і багато іншого — цілком виконана в стилі необруталізм. Наприкінці 2021 року в компанії відбувся ребрендинг, і новий дизайн якнайкраще відображає дух і естетику бренду. Зверніть увагу на поєднання кольорів, типографіку і химерні форми — ці, здавалося б, божевільні окремо елементи досить гармонійно поєднуються один з одним.

Стартап, пов’язаний з дизайном, — чудова платформа для експериментів у стилі необруталізм. Свого часу компанія Bestsized зробила свій сайт саме в такому напрямку, використавши стиль старого меню атмосферного ресторану. Від необруталізму тут взяли кілька яскравих характеристик: поєднання контрастних кольорів і фірмова типографіка.

Компанія UsByNight зробила крок у бік божевільної креативності і створила сайт у кращих традиціях необруталізму. Перше, що кидається в очі — сильний контраст насиченого червоного і чорного кольорів. Як ми згадували в одному з попередніх розділів, у необруталізмі вітається використання чистого чорного, і на прикладі вище це наочно видно.

FigChallenge — додаток для дизайнерів, які хочуть об’єднуватися в команду і разом працювати над проектами. У кожного користувача є список своїх завдань, і в процесі роботи він набирає очки та досягнення за виконання різних дій. FigChallenge використовує багато фішок необруталізму: від геометричних форм до яскравих кольорів.

Сайт компанії Wunderbar взяв від необруталізму широкі рамки розділів і щільні тіні. Цей прийом створює ефект упорядкованості та допомагає нам краще сприймати інформацію. До того ж, тут використовується кілька видів шрифтів, що також властиво стилю.

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

2024 рік — чудовий час для того, щоб відійти від звичних мінімалістичних сайтів і виділитися за допомогою оригінального стилю. Якщо ваш бренд транслює сучасний підхід і креативний дух, вам підійде свіжий і нестандартний neo-brutalism. Враховуючи його «сиру» естетику, він допоможе вам дотримати баланс між суворістю і порядком, а фірмовий божевільний стиль дозволить виділитися серед конкурентів.

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