Тренд 1: Мінімалізм у думках – мінімалізм у вебі

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

Цікаво 70% працівників більш задоволені роботою, працюючи віддалено

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

Сайти
Ранні вебсайти не відрізнялися дизайнерськими особливостями / Скриншот

Чому власне виник тренд мінімалізму?

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

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

Провідний експерт у сфері веб-розробки, Єгор Комаров, розповів, що потрібно враховувати роблячи мінімалістичний дизайн:

  • На першому плані залишайте тільки найголовніші функції для користувачів.
  • Інтерфейс робіть "легким" - залишайте багато повітря на сторінці.
  • Не використовуйте багато акцентних кольорів, у центрі повинен залишатись контент.
  • Будуйте ваш дизайн на якісно підібраних шрифтах, бажано однієї гарнітури, правильно робіть акценти та якісну верстку.
  • Розміщуйте усі елементи на звичному місці для користувача. Наприклад, не треба іконку повідомлення розміщати в нижньому лівому кутку, залиште її там, де читачі звикли її бачити.

Розглянемо цей тренд на прикладах декількох великих компаній – YouTube та Behance.

Сучасні компанії слідкують за трендами у дизайні / Скриншоти

Як ми бачимо, більшість сайтів, особливо найвідоміші, дотримуються цього тренду. Усі вони виглядають майже однаково – відсутність кольорів у головному меню, мінімум акцентів, білий колір переважає, багато "повітря", контент у центрі уваги.

Тренд 2: Тіні та градієнти

Думаючи, що тіні та градієнти – це геть не новий тренд, ви будете абсолютно праві. Це не нове, раніше небачене, однак це – щось давнішнє, але модернізоване. Єдине, що на сьогодні змінилось – це більша "повітряність" (до цього слова будемо ще не раз повертатись), легкість та об’єм. За словами Єгора Комарова, все це повинно міксуватись з пастельними градієнтами та популярними зараз 3D зображеннями й іконками. В загальному, це той самий мінімалізм, але більш об’ємний.

Лише на пастельних тонах та об’ємності градієнти не зупинились, вони продовжують еволюціонувати. Розробляючи сучасний дизайн, UI/UX спеціалісти прибігають до так названих складних градієнтів та blur-ефектів.

Накладання
На цих прикладах можемо побачити мікс складних кольорів та ефект "накладання" / Скриншоти

На додаток інтерфейси все частіше почали застосовувати ефект Color Blur, часто у ролі background. Простими словами це надає глибину та об’ємність веб-сторінці.

Не пропустіть ЕДО, лідерство та стартапи: 5 онлайн-курсів для підприємців

Тренд 3: 3D ілюстрації та іконки

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

3d елементи

Такі прості елементи дуже круто урізноманітнюють візуальну складову будь-якого веб-продукту / Скриншот

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

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

Тренд 4: Фото + Графіка

Гібрид звичайних фотографій та графічних ілюстрацій – супер свіжий тренд кінця 2020 і початку 2021 років. Про це говорить Ніко Гібрадзе – провідний дизайнер в impulse.guru. Така колаборація – данина шані фанам поп-арту. Завдання цього тренду не лише створювати так би мовити грайливу атмосферу на сайті, а й надати певної багатошаровості вашому веб-продукту. Також це додає незвичності веб-дизайну та збільшує інтерес потенційного покупця до вашого продукту.

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

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

DePlace Maison – сайт з оригінальним взуттям, окрім тренду "фото+графіка", використовує ще одну "фішку" 2021 – плаваючу анімацію. На сайті цього бренду вашим курсором є чорна клякса, яка буде розпливатись, повторюючи ваші рухи.

Графіка
Поєднання фото, графіки та незвичних елементів допоможуть затримати клієнта на сайті / Скриншот

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

Тренд 5: Асиметричні макети

dada-data
Асиметричний дизайн привертає увагу / Скриншот

Погодьтесь, вам закортіло перейти на цей сайт та роздивитись ближче?

Такі нестандартні рішення – ключ до серця відвідувачів вашого сайту. Подібні макети стовідсотково принесуть прихильність та популярність вашій компанії.

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

І звісно, тепер звичні сітки розміщення новинних сайтів або інтернет-комерції сходять на ні. Поява нових форм, несхожих одна на одну – нові реалії інтернет простору. Звичне розміщення елементів меню, типу "Про нас", "Послуги", "Контакти" та інше можуть мати геть нешаблонний вигляд, за думкою Ніко Гібрадзе.

Новини Техно Сім партнерів Apple звинуватили у залученні примусової праці уйгурів

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

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

Матеріал підготувала Софія Лещименко