Тренди дизайну 2021-2022

30.12.2021 645

У 2020-2021 роках тенденції графічного дизайну визначалися яскравими подіями. Перше та головне серед них – пандемія. Світ повільно, але поступово відновлюється.

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

UI Design

1. Текстовий гігантизм + Нові шрифти

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

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

Тому розмір шрифту на сайті буде зростати в геометричній прогресії, в найближчому майбутньому, і це неминуче.

2. Бруталізм

Бруталізм - це сміливий, шорсткий, необроблений стиль, який не прагне ідеальності, він є відлунням перших сайтів початку 90-х. Часто цей стиль називають "анти дизайном" через свою грубість і неохайність.

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

Тому цей напрямок набирає все більше обертів, тому що бруталізм приваблює, як щось нове та парадоксальне.

3. Ретро-ностальгія

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

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

4. Автентичність

Автентичність - це новий тренд, що народився з різноманіття різних візуальних рішень. Загалом, ця тенденція добре описує всю ситуацію у світі дизайну.

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

5. Плавність

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

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

6. Табличність

7. Скетчінг

Різні каракулі та малюнки від руки стали дуже потрібні в сучасному веб-дизайні. Найчастіше вони виглядають неохайно та мінімалістично, що додає дизайну унікальності та “свого почерку”.

8. Дуже яскраві кольори

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

Найбільше має попит саме теплі відтінки кольорів: червоний, жовтий, помаранчевий, зелений. Пов'язано це з тим, що теплі кольори більше впадають у вічі, добре поєднуються між собою і приємніші людському оку.

9. ЧБ стиль

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

 

Тому такі роботи добре передають дух часу і занурюють у певний настрій.

10. Мінімалізм

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

11. Модернізовані 3D елементи

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

12. Абстрактна візуалізація

13. AR & VR

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

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

14. Емоційний дизайн

Дизайн, що приваблює, допомагає встановлювати тісний зв'язок з вашою аудиторією. Візуальні "живі" елементи викликають у глядачів різні почуття та реакції, привертають увагу до сайту та спрощують продаж. Використовуйте яскраві кольори, щоб виділити головні частини розділу UI/UX. Наприклад, оригінальний дизайн у стилі 90-х років викликає почуття ностальгії. Можна використовувати ідею як відсилання у минуле із застосуванням сучасних технологій.

15. Геометрична структура

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

16. Темний дизайн

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

17. Дизайн із розділеним екраном

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

Важливі моменти, які потрібно завжди враховувати

• 3D в інтерфейсі користувача

• Гармонія кольору

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

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

• Анімація

Дизайн без анімації виглядає незакінченим та статичним. Є кілька способів її створення.

Анімація має багато переваг.

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

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

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

• Ілюстрація продукту та культури її творця

• Асиметрія

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

• Реальні фотографії

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

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

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

• Поточні зміни

• Neomorhism

• Glassmorphism

• Пастельні тони

• Scroll 

• Material Design 3

UX Design

Темна тема

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

Причини популярності темної теми:

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

Оновлення оформлення надасть нового вигляду вже існуючим додатком.

Анотація візуалізації даних

Переваги абстрактної візуалізації:

• покращення зв'язку з потенційним користувачем;
• мінімальне витрачання часу на знайомство з послугами або продуктом;
• імітація глибини сайту;
• оригінальність;
• створення функціонального інтерфейсу користувача.

Досвід користувача на першому місці.

Інклюзивний дизайн

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

Найкращий спосіб враховувати здібності кожного – вчитися з його потребах. Ви створюєте продукт для мільйонів людей по всьому світу, і ви повинні зробити його доступним та зрозумілим для кожного з них. Рекомендації щодо забезпечення доступності веб-контенту (WCAG) – чудова ініціатива, що поєднує методологію створення доступного веб-дизайну. Наприклад, Intercom Messenger слідує всім правилам WCAG, забезпечуючи підтримку програм читання з екрана, навігацію за допомогою клавіатури та обмежену колірну палітру.

Ще одна річ, про яку вам потрібно подумати, це точки зору користувачів. Найкращий спосіб поважати думку кожного користувача – працювати з абстрактними термінами. Уявімо аватар за замовчуванням у якійсь соціальній мережі. Якщо людина вводить «чоловічий» у поле статі, ви, ймовірно, встановіть зображення за замовчуванням, яке зображує здорову бородату людину з чоловічими рисами обличчя. Однак, всі користувачі індивідуальні. Деякі користувачі можуть не порівнювати себе з аватаром, який ви їм призначаєте.

Ось чому варто думати про людей як про щось абстрактне. Страхова компанія Lemonade – чудовий приклад того, як можна впоратися із цією проблемою. Коли веб-сайт запитує співмешканців користувачів, він не зображує користувачів як реальних людей. Він показує «сусідів по кімнаті» як пару кухлів пива, «партнерів» як дві келихи вина, «дітей» як пачку соку. За такого підходу компанія дистанціюється від гендерних стереотипів і стереотипів взаємовідносин.

Ручний чи голосовий пошук?

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

Мікрозаємодія

Мікро взаємодія складається з таких елементів:

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

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

#trends #ux_design #ui_desing #trends_2022