Основні тренди у веб-дизайні
За навчальною програмою 2018 року
Урок 3
10
(11)
Актуалізація опорних знань і життєвого досвіду
Розділ 1 § 3
Продовжіть речення:
Про веб-дизайн мені відомо...
Завдання веб-дизайну...
Про професію веб-дизайнера я знаю...
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
В першу чергу, тенденції в дизайні торкнулися мобільних ґаджетів. Частота переглядів сайтів за допомогою мобільних пристроїв перевершує використання ноутбуків і комп'ютерів. Пристрої для перегляду інформації в Інтернеті:
комп'ютер
ноутбук
планшет
смартфон
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Логічно, що дизайн сайту повинен мати адаптивну версію дизайну.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Сторітеллінг — мистецтво складання і розповідання захопливих історій.
Сторітеллінг може виступати у вигляді:
відео
гіф-анімації
Або розділений за блоками і може бути розміщений по всій довжині сторінки.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Більше простору.
Великий білий простір візуально збільшує екран, що не дозволяє користувачеві втратити концентрацію. До того ж, цей колір поєднується з усіма іншими, тому в якості акцентів або дизайнерських ідей можна вибирати абсолютно будь-які відтінки.
І вони будуть виглядати просто чудово.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Адаптивні логотипи.
Адаптивні логотипи в залежності від розміру екрану мобільного девайсу можуть автоматично підлаштовуватися під нього.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Студійні мінімалістичні фото сфокусує увагу відвідувача і не дозволить йому відволіктися.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Яскраві кольори підкреслюють загальну ідею. Кольори передають емоції, а емоції - найголовніше для користувача.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Тренди в веб-дизайні – динамічна структура. Те, що ще вчора було модно і актуально, вже завтра може стати пройденим етапом, "минулим століттям".
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Нестандартне розташування блоків
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Повноекранне відео
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Повноекранне відео
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Геометричні форми і візерунки
Правильний підбір візерунків і форм допоможуть створити цілісну і привабливу композицію, яка дуже високо цінується веб-користувачем.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Геометричні форми і візерунки
І, незважаючи на те, що технологія 2D поступово здає свої позиції, поступаючись 3D, подібні прийоми можуть значно освіжити концепцію дизайну, зробивши його сучасним і дуже цікавим.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Сінемаграфи – ілюстрації з частковою анімацією.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Сінемаграфи – ілюстрації з частковою анімацією.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Гіф-зображення (анімація)
Гіфки максимально захоплюють увагу і дозволяють без великих красномовних описів дати зрозуміти користувачеві що йому пропонує компанія, на сайті якої він знаходиться.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Гіф-зображення (анімація)
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Соковита графіка і зображення
Якщо ж яскрава графіка не є суміжно з тематикою сайту, то виручать фотографії або зображення.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
3D-зображення
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Кольори в веб дизайні
Для зручності вибору трендових кольорів, можна скористатися палітрою Google.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Градієнт
Фон сторінки, виконаний в градієнті, створює враження свіжості і унікальності.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Унікальні шрифти
Шрифти дуже впливають на сприйняття інформації, і можуть, як привернути увагу читача до сайту, так і змусити його закрити вкладку.
До речі, застосування унікальних шрифтів «витягне» загальний вигляд сторінки, якщо її дизайн буде досить скромним.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Напівпрозорі кнопки
Такі кнопки так само, як і непрозорі, відмінно виконують свою функцію лідогенерації, але при цьому виглядають дуже оригінально і не перевантажують сайт.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Паралакс-ефект
Ефект паралакса – переміщення заднього фону та основних елементів з різною швидкістю. Будьте впевнені, кожен відвідувач зверне на це увагу і вважатиме цей ефект за дуже крутою іміджевою складовою ресурсу.
10�(11)
Основні тренди у веб-дизайні
Розділ 1 § 3
Використання штучного інтелекту. Комп'ютерний розум проник в роботу корпоративних CRM, пошукових систем, електронних перекладачів, онлайн-консультантів тощо.
10�(11)
Запитання для рефлексії
Розділ 1 § 3
10�(11)
Домашнє завдання
Розділ 1 § 3
Завести «Щоденник особистих вражень від вивчення інформатики».
Зробити пост у соціальних
мережах про тренди веб-дизайну.
10�(11)
Працюємо за комп’ютером
Розділ 1 § 3
10�(11)
Дякую за увагу!
За навчальною програмою 2018 року
Урок 3
10
(11)