Основні тренди у веб-дизайні

1. Основні тренди у веб-дизайні

2. Статистичні дані користування Інтернетом у 2020 році за даними Аналітичної агенції We Are Social і SMM-платформи Hootsuite

СТАТИСТИЧНІ ДАНІ КОРИСТУВАННЯ ІНТЕРНЕТОМ У 2020
РОЦІ ЗА ДАНИМИ АНАЛІТИЧНОЇ АГЕНЦІЇ WE ARE SOCIAL
І SMM-ПЛАТФОРМИ HOOTSUITE

3. Кількість користувачів мережі Інтернет в Україні

4. Дві тенденції:

швидке орієнтація на
завантаження мобільні
сайтів сайти

5. Швидкість завантаження сайтів

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

6. Орієнтація на мобільні сайти

85 % користувачів впевнені, що на смартфоні сайт повинен виглядати не гірше (а то
й краще), ніж на моніторі стаціонарного комп’ютера чи ноутбука.

7. Цікава статистика

89% часу витраченого на мобільний
інтернет, люди проводять в додатках
75% мобільних користувачів насамперед
використовують «пошуковик»
Майже половина всіх онлайн транзакцій
здійснюється з мобільних пристроїв
90% переглядів відео на твіттері
здійснюються з мобільних пристроїв
70% всіх мілленіалов дивляться відео на
мобільному у вертикальній орієнтацій
Третина всіх пошуків з мобільних включає в
себе місцезнаходження

8. Цікаво

Джош Кларк (Josh Clark)
фахівець
в
області
мобільного
дизайну,
вдало
поєднує
ергономіку та психологію
мобільного дизайну.
У книзі «Проектування для дотику» (Designing for
Touch) досліджує, як користувачі тримають свої
мобільні телефони та як їхні рухи мають
оброблятися в процесі роботи з сайтом

9.

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

10. Цікаво

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

11. Аналізуємо. Обговорюємо

АНАЛІЗУЄМО. ОБГОВОРЮЄМО
Мобільний сайт
Стандартний сайт

12. Найпопулярніші напрями веб-дизайну за версіями інтернет-журналів AWWWARD і Designmodo

• Візуалізація даних
• Персонелізація сайтів
• Зростання ролі типографіки
• Пріоритетність відео-контенту
• Синемаграфіка
• Геометричні форми
• 3D-графіка
• Яскраві кольори
• Застосування розділеного екрана (спліт-екрана)
• Поширення використання штучного інтелекту

13. Українські веб-дизайнери на сайті awwwards

УКРАЇНСЬКІ ВЕБ-ДИЗАЙНЕРИ НА САЙТІ AWWWARDS
Discover the best agencies and professionals in Ukraine

14. Візуалізація даних

є цікавим і
наочним способом подання
великих обсягів інформації.

15. Візуалізація даних

ВІЗУАЛІЗАЦІЯ ДАНИХ
вже давно
сприймається як частина
дизайну.

16. Приклад анімованої візуалізації

ПРИКЛАД
АНІМОВАНОЇ
ВІЗУАЛІЗАЦІЇ
https://he.net/3d-map/

17. Персоналізація сайтів

ПЕРСОНАЛІЗАЦІЯ САЙТІВ
Найуспішнішими стануть сайти, орієнтовані на користувача, тобто ті, які
надають інформацію з урахуванням статі, віку і навіть особистих уподобань
користувача. Відповідно електронна комерція стане ще більш витонченою.

18. Зростання ролі типографіки

ЗРОСТАННЯ РОЛІ ТИПОГРАФІКИ
• Часто використовуються незвичайні шрифти, різноманітні художні елементи,
креативні прийоми на кшталт складання текстів з «газетних вирізок». З’явився
термін «вінтажна типографіка» (стиль старовинної типографії).
• Набуває популярності використання шрифтів із зарубками, заокруглених плит
і текстових елементів, які здаються більш старими, Дуже популярними стають
так звані варіативні шрифти - змінні літери, які поступово збільшуються і
зменшуються.

19. Типографіка у веб-дизайні

ТИПОГРАФІКА У ВЕБ-ДИЗАЙНІ

20. Використання великих літер

ВИКОРИСТАННЯ ВЕЛИКИХ ЛІТЕР

21. Синематографіка

СИНЕМАТОГРАФІКА
Статичні картинки містять один або декілька анімованих (динамічних) елементів.
Таке поєднання фотографії та анімації є особливо привабливим з точки зору
маркетологів.

22.

Приклади синематографіки

23.

24. Паралакс-ефект або паралакс-скролінг

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

25. Приклад паралаксу

ПРИКЛАД
ПАРАЛАКСУ

26. Анімація

АНІМАЦІЯ

27. Геометричні форми

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

28. Геометричні форми

29. 3D-графіка - природна еволюція плоского дизайну

3D-ГРАФІКА - ПРИРОДНА ЕВОЛЮЦІЯ
ПЛОСКОГО ДИЗАЙНУ
• Тривимірні візуалізації забезпечують оновлення дизайну. Поєднання 3Dреалістичних і плоских інтерфейсів є складним та візуально цікавим. Такі
інтерфейси «чіпляють» і привертають пильну увагу користувача.

30.

31. Яскраві кольори

ЯСКРАВІ КОЛЬОРИ
Тренд, який ніколи не втрачає власну актуальність. Використання градієнту є
багатофункціональною кольоровою тенденцією, що працює в дизайні будьякого типу. Це може бути цікавим способом розбити елементи тексту або
виділити певний контент, або створити неординарний фон для розміщення
продукту. З точки зору колористики застосування градієнтів - це чудова ідея. Тло
сторінки, в створенні якого задіяний градієнт, викликає враження унікальності і
свіжості.

32. Голосовий інтерфейс

ГОЛОСОВИЙ ІНТЕРФЕЙС
Голосові інтерфейси або розмовні пристрої актуальні, тому що
вони скорочують час і зусилля взаємодії. За допомогою голосової
команди ми можемо увійти на платформу, позбавляючись від
необхідності запам'ятовувати і вводити паролі, орієнтуватися в
додатку, розуміти його інтерфейс, структуру контенту і. Голосові
інтерфейси базуються на «читанні» веб-сайтів для отримання
інформації та даних. Таким чином, все більше уваги приділяється
розробці сайтів, здатних взаємодіяти з голосовими інтерфейсами.
У звіті відомої агенції Gartner про нові технології прогнозується, що
в 2020 році 30% відвідувань веб-сайтів будуть здійснюватися за
допомогою голосу, і, за оцінками ComScore, у тому ж році 50% всіх
пошукових запитів будуть здійснюватися за допомогою голосового

33. Застосування розділеного екрана (спліт-екрана)

ЗАСТОСУВАННЯ РОЗДІЛЕНОГО ЕКРАНА
(СПЛІТ-ЕКРАНА)
Естетичний поділ екрана насамперед за рахунок кольору передбачає, що сайт,
призначений для перегляду на великому моніторі, розподіллено на дві панелі, які
згортаються в вертикальний вміст блоків на менших пристроях.
Асиметричне розбиття екрану передбачає певний взаємозв’язок контенту — він
доповнює або контрастує. Популярною є схема, коли під час наведення миші на
одну частину сторінки затінюється решта, що дає змогу фокусуватися на
вибраному.

34. Приклад асиметричного спліт-екрану

ПРИКЛАД
АСИМЕТРИЧНОГО
СПЛІТ-ЕКРАНУ

35.

36. Поширення використання штучного інтелекту

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

37. Чат-бот (англ. Chatbot) —

ЧАТ-БОТ (АНГЛ. CHATBOT) —
комп’ютерна програма, розроблена на
основі
нейромереж
та
технологій
машинного навчання, яка веде розмову за
допомогою слухових або текстових методів.
Програма імітує розмову з людиною в
Інтернеті, саме тому цей сервіс найкраще
зарекомендував себе в месенджерах
(Facebook Messenger, Telegram тощо).

38.

• Siri і Google Assistant вже широко використовуються на мобільних пристроях.
Google Home і особливо Alexa розробляють величезні екосистеми, які
дозволяють нам взаємодіяти з ними і інтегрувати їх в продукти і послуги.
• Згідно зі звітом Amazon, з 1 вересня 2018 року був розроблено більше 50 000
навичок Alexa.

39. Поміркуйте

ПОМІРКУЙТЕ
Перегляньте наступне відео. Які тренди, на вашу думку, використані у наведених сайтах.