Webflow Crash Course

Explore

Модуль 1, Урок 2: Адаптивний Дизайн, Функціональні Елементи та Анімації

У цьому уроці ми продовжимо працювати з розробкою Webflow проєкту. Ми почнимо з розгляду таких понять як Responcive Design та Liquid Design зосередившись на останньому та розглянемо чому він підходить більше і чому саме в проєктах вебфлоу це гарно імплементується. Після поглибимось в адаптації елементів до різних девайсів, розлянемо поняття Media Query.

Наступним кроком важливо подати інформацію стосовно масштабування проєкту, та як це можна реалізувати за допомогою такого інструменту як компоненти та до чого створення сторінки стилів. Такі елементи як Navbar і Footer – є першим кроком для масштабування проєктів.

Далі, для кращого розуміння можливостей Webflow, ми маємо розглянути такі елементи як форма, та функціональні елементи такі як Таби (Вкладки) і Слайдери. Важливо пояснити студентам важливість даних елементів та для чого вони використовуються у створенні проєкту, та на прикладі зміни анімації переходу поміж слайдами перейти до теми анімацій. Розвиваючи тему анімацій привести приклади різних типів анімацій та тригерів треба розглянути Webflow Interactions. Закінчити даний урок важливо розглядом css станів елементів, по типу Hover State, Focus etc.

План

Розуміння Рідинного Дизайну:

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

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

Дослідження Медіа Запитів (Media Query) та Оптимізації для Різних Пристроїв:

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

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

Надайте найкращі практики для забезпечення безперебійного користувацького досвіду на різних пристроях.

Введення до Компонентів:

Визначте компоненти та їх роль у створенні повторно використовуваних елементів дизайну.

Покажіть, як створювати, настроювати та керувати компонентами в середовищі Webflow.

Висвітліть переваги використання компонентів для створення послідовного дизайну.

Створення Сторінки Зразка Стилю (Style Guide):

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

Навчіть студентів створювати сторінку зразка стилю в їх проекті Webflow.

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

Налаштування Форм:

Навчіть студентів процесу додавання та налаштування форм у Webflow.

Поясніть, як налаштовувати поля форми, перевірку та дії при відправленні форми.

Робота з Вкладками (Tabs) та Слайдерами (Slider):

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

Демонструйте, як створювати та настроювати вкладки та слайдери.

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

Продемонструйте шлях зміни анімацій переходу поміж різними слайдами на прикладі Fade Out – Fade In

Впровадження Анімацій, Включаючи CSS-Анімації та Взаємодії (Webflow Interactions):

Почніть з короткого огляду важливості анімацій в веб-дизайні.

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

Покажіть, як впроваджувати CSS-анімації за допомогою вбудованих інструментів Webflow.

Спонукайте до творчості, показуючи приклади анімованих елементів.

Домашнє Завдання:

Відкрийте проєкт Webflow над яким ви працюєте;

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

Додайте форму у Footer;

Налаштуйте форму;

Змініть налаштування HTML Tag ‘Body’ – Font Size з 16px на 1vw;

Послідовно, для кожного елементу з зміненим Font Size або розміром (Widht/Height) змініть налаштування з px на em (наприклад, якщо ширина була 200px, то стане 12.5em (200/16em), або використайте Google Chrome Extention –

Wizardry Technique Converter⁠

);

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

Використовуючи панель пристроїв змініть налаштування CSS HTML Tag Body для Tablet на 1.3vw та Mobile на 16px;

Використовуючи панель пристроїв змініть налаштування CSS елементів для Tablet та Mobile брейкпоїнтів (аналогічно, якщо ширина була 200px, то стане 16.7em);

Перегляньте результат використовуючи ваш мобільний пристрій;

Додайте анімації

Анімацію завантаження

Анімацію появи елементів використовуючи – Fade, Slide, Grow

Критерії перевірки:

Дизайн проєкту відповідає дизайну файлу Figma другої ітерації

Дизайн проєкту адаптований для мобільних пристроїв і відповідає дизайну файлу Figma другої ітерації mobile

Проєкт виконано відповідно принципів рідкого/резинового дизайну та для desktop масштабується в залежності від розміру екрану

Анімації відповідають ТЗ

Якщо виникають складності – надається посилання на готову сторінку проєкту Webflow другої ітерації та сторінку Webflow Preview.Розділ – Елементи

Розділ – Елементи

Form (Форма) - це розділ на веб-сайті або додатку, який дозволяє користувачам вводити та надсилати дані. Зазвичай вона містить поля, в які користувачі можуть вводити інформацію, таку як імена, адреси електронної пошти та повідомлення.

Input (Блок введення) - це поле або елемент на формі, де користувачі можуть вводити дані. Це може бути текстове поле, прапорець, радіокнопка, випадаюче меню або інші типи полів введення.

Input Types (Типи блоків введення): Типи введення відносяться до різних типів даних, які можуть бути введені у поле введення. Загальні типи введення включають текст, електронну пошту, пароль, число, дату та файл.

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

Webflow Tabs: Webflow Tabs - це компонент інтерфейсу користувача, який дозволяє організовувати контент у кілька розділів або вкладок. Кожна вкладка представляє різний розділ контенту, і користувачі можуть перемикатися між вкладками, щоб переглянути потрібний контент.

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

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

Розділ – CSS налаштування

em: em - одиниця виміру, яка використовується для визначення розмірів шрифтів. Вона відноситься до розміру шрифту батьківського елемента. Наприклад, якщо розмір шрифту батьківського елемента дорівнює 16 пікселів, то 1em буде дорівнювати 16 пікселів.

rem: rem - також є одиницею виміру для визначення розмірів шрифтів, але вона відноситься до розміру шрифту кореневого елемента (html). Використання rem дозволяє створювати шрифти, які будуть масштабуватися відповідно до налаштувань користувача.

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

vw: vw - це одиниця виміру, яка відноситься до ширини видимої області вікна браузера. Значення vw відображається відсотками, де 1vw дорівнює 1% ширини вікна браузера.

vh: vh - це одиниця виміру, яка відноситься до висоти видимої області вікна браузера. Значення vh відображається відсотками, де 1vh дорівнює 1% висоти вікна браузера.

Розділ – Основні поняття

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

Responsive Design: Responsive Design (адаптивний дизайн) - це підхід до веб-дизайну, який забезпечує оптимальну відповідність та відображення веб-сторінки на різних пристроях та розмірах екранів. Він використовує гнучкий макет, медіа-запити та інші техніки, щоб забезпечити зручне користування та навігацію для користувачів.

Media Query: Media Query (медіа-запит) - це технологія CSS, яка дозволяє змінювати стилі та вигляд веб-сторінки в залежності від характеристик пристрою, на якому вона відображається. За допомогою медіа-запитів можна визначити, які стилі застосовувати для певного розміру екрану або пристрою.

Style Guide: Style Guide (гайд стилів) - це документ, який містить набір правил та рекомендацій щодо використання стилів, компонентів та інших елементів дизайну на веб-сайті або в додатку. Він допомагає забезпечити послідовність, однорідність та ефективну комунікацію між дизайнерами та розробниками.

JS: JS (JavaScript) - це програмувальна мова, яка використовується для створення динамічних та інтерактивних елементів на веб-сторінках. JavaScript дозволяє додавати функціональність, взаємодію та анімацію до веб-сторінок, що робить їх більш динамічними та користувацькими.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.