Основні тренди у веб-технології

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

Мета:

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

Очікувані результати: учні знають основні тренди у веб-дизайні.

Обладнання: комп’ютери з виходом в мережу Інтернет, інтерактивна дошка.

Тип уроку: комбінований.

Хід уроку

І. Організаційний етап

• привітання

Добрий день, шановні друзі, рада вас вітати,

Прошу на мої питання рухами відповідати.

Хто з гарним настроєм прийшов – махніть рукою,

Хто чує мене -  кивніть головою.

Хто любить життя  -  підніміться.

Хто ввічливий – сусідові злегка вклоніться

Хто любить навчатись – повинен на носочки піднятись,

               Хто в колективі любить працювати –той повинен пострибати.

• перевірка присутніх
• перевірка готовності учнів до уроку

Створення атмосфери психологічного комфорту.

ІІ. Актуалізація опорних знань і життєвого досвіду

Прийом «Продовжить речення»

Про веб-дизайн мені відомо...

Завдання веб-дизайну...

Про професію веб-дизайнера я знаю...

Рефлексивний прийом «Зроби висновок»

Чи можна сказати, що у вас достатньо знань про веб-дизайн?

Наскільки ви розумієтеся на сучасних трендах у веб-дизайні?

ІІІ. Повідомлення теми. Організація спільного з учнями формулювання мети й завдань уроку

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

Завдання уроку: зрозуміти, які зараз основні тренди у веб-дизайні; використати інформацію про тренди у веб-дизайні для обраного проекту.

IV. Мотивація навчальної діяльності

Мотиваційні запитання

Чому мені потрібно розумітися на трендах у веб-дизайні?

Як інформація про тренди у веб-дизайні допоможе зробити мій сайт більш цікавим?

Що допоможе мені зосередитися на завданнях уроку?

V. Вивчення нового матеріалу

Пояснення вчителя з елементами демонстрування презентації

(використовуються можливості локальної мережі кабінету або проектор)

Тренди в веб-дизайні постійно змінюються, удосконалюються, модернізуються. Те, що було актуально в 2016-2017 роках поступається абсолютно новим "фішкам". Саме тому необхідно знати про них, щоб результат розробки сайтів був не просто ефективним, а створював правильне враження про компанію, якій належить веб-ресурс.

Тенденції дизайну сайтів 2019: (Слайд 2-3)

1.                   Персоналізований UX
   В 2019 році найбільш успішні будуть сайти, які будуть надавати користувачу інформацію згідно його статі, віку та навіть особистих переваг. Таким чином конверсія Вашого сайту зросте в сотні разів.
2.                   Мобільна адаптація дизайну сайтів
   Статистика показує, що все більше користувачів використовують смартфони для серфінгу в інтернеті. 85% з них вважають, що сайт на телефоні має виглядати не гірше, ніж на десктопі, а то й краще. І тому, якщо ви ще не адаптували свій сайт під мобільні пристрої, то зробіть це прямо зараз.
3.                   Мінімалізм
   Інший важливий тренд, який перейде з 2018 – мінімалізм в web-дизайні.
   Цей стиль зробив справжній фурор в веб-розробці сайтів.
   Гасло «Менше означає більше» надихнув ціле покоління веб-розробників, завдяки яким ви бачите приголомшливі clean & simple сторінки без настирливих обрамлень, перевантажених «шапок» і незграбних «футерів».

4.                   Типографіка наше все
   Успіх контенту і веб-ресурсу в цілому сильно залежить від типографіки – незаслуговано забутого елемента, який вважають чимось простим і другорядним.
   Типографіка сайту керує настроєм користувача. Деякі шрифти акуратні і чисті, що надихають людей читати. Інші дратують, а треті зовсім ускладнюють читання. В 2019 при розробці дизайну сайту все частіше будуть концепти, де великі заголовки із засічками – ключовий елемент дизайну.
5.                   Доповнена реальність

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

6.                   Анімація – основа веб-дизайну наших днів

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

7.                   Паралаксний скролінг

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

8.                   Відео-контент в пріоритеті

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

VI. Закріплення вивченого матеріалу

Прийом «Найкращий журналіст»

Учням пропонують скласти запитання до вивченого матеріалу. Запитання мають бути змістовними, лаконічними, спонукати задуматися. Їх записують на аркушах і віддають у «прес-центр» (назначена група учнів). Запитання по черзі зачитують, і клас надає відповіді. Оцінюють якість складеного запитання.

VIІ. Практична робота «Пошук ідей розробки сайта на основі сучасних трендів у веб-дизайні»

Послідовність виконання роботи

Аналіз запропонованих сайтів

     Закрийте всі відкриті вікна.

Повідомте вчителя про завершення роботи.

VІІІ. Релексація.

Комплекс вправ для зняття втоми з очей:

1. Подивитися праворуч, не повертаючи голови, і зафіксувати погляд на кілька секунд, потім ліворуч на кілька секунд і подивитися прямо. Підняти очі вгору на кілька секунд і опустити їх униз, розслабивши м’язи очей, подивитися прямо. Повторити 4–5 разів.

2. Подивитися кілька секунд на кінчик пальця, віддаленого на 30 см від очей, потім перевести погляд удалечінь і затримати на 3–5 с. Вправу повторити 4–6 разів.

3. Заплющити очі на 5–10 с, розслабивши очні м’язи, і розплющити їх на 5–10 с. Повторити 4–5 разів.

4. Виконати декілька колових рухів очима (по 4–5 рухів) в один і інший бік.

5. Покліпати кілька разів очима, не напружуючи очні м’язи.

VIІI. Підбиття підсумків уроку. Рефлексія

Запитання для рефлексії

Що нового я дізнався на уроці?

Чи маю я задоволення від роботи над обраним проектом?

Чи можна сказати, що я розуміюся на основних трендах веб-дизайну?

Яку інформацію з теми уроку я розповім удома батькам?

VIІІ. Домашнє завдання

  Зробити пост у соціальних мережах про тренди веб-дизайну.

ІX. Оцінювання роботи учнів