Гайд

Етапи розробки проєкту

на Webflow. Покроковий
план
Зміст гайду
Для кого цей гай ................................................................................................................................................................. 1

Перевірка макет ................................................................................................................................................................... 2

Вивчення макет .............................................................................................................................................................. 3-6

Порядок робі ...................................................................................................................................................................... 7-11

Посилання на гайд в excell ......................................................................................................................................... 12

 01
Для кого цей гайд
Для webflow-розробників, які
працюють над комерційним або
творчим проєктом
Для замовників, які приймають
роботу у розробника
 02
Перевірка макета
1 . На наявність всіх необхідних сторінок та компонентів

2. На наявність всього необхідного контента (фото, відео, текст, графіка)

3. На наявність неоднозначних елементів, які вимагають додаткових пояснень

4. На наявність помилок
 03
Вивчення макета
Вкрай необхідно для обрання раціональної стратегії розробки проекта.
Макет вивчається одночасно десктоп+мобільна версія. Тому що, наприклад,
один незалежний блок на десктопі може мати 2 реалізації на мобілці.

1. Шрифти. Якщо шрифти нестандартні - їх може надати клієнт або можемо їх

завантажити (підключити) самостійно

2. Загальні стильові особливості, які зустрічаються впродовж всього проекта

(кольори шрифтів або бекгрануда, бордери, тіні, фільтри). Можливо, під них
доцільно зарезервувати глобальні класи у Webflow
 04
Вивчення макета
3. Всі можливі комбінації шрифтів (розмір, колір, накреслення, курсивність, line
height, uppercase/lowercase, letter spacing).
Під найбільш популярні комбінації, скоріш за все, варто виділити в окремі
службові класи.
Під менш популярні - комбо-класи до цих службових класів.
Тим, що зустрічаються поодиноко в проекті, можливо, доцільно надавати
унікальні користувацькі класи з прив'язкою до місця їхнього застосування
4. Секції або логічні блоки, які повторюються на різних сторінках проекта (якщо
ми розробляємо багатосторінковий сайт). Наприклад, header, footer, попапи,
меню та ін. Доволі часто для них доцільно використовувати Webflow-компоненти
 05
Вивчення макета
5. Спільні риси найбільш популярних секцій, блоків та компонентів в макеті.
На цьому етапі нам необхідно декомпозувати макет на незалежні блоки, які ми
зможемо перевикористовувати впродовж проекта (кнопки, форми, блоки
загальної розмітки, рухомі рядки, окремі популярні модулі тощо). Значно
простіше їх перевикористовувати, ніж кожного разу створювати повторно.

6. Додаткова технічна документація від клієнта (якщо є), де зазначаються

коментарі, що стосуються функціоналу або логіки роботи складних технічних
блоків.
 06
Вивчення макета
7. Анімація. Краще знати ще до початку розробки, які інтеракції нам доведеться
реалізувати і як ми плануємо це робити. Тому що доволі часто сценарій анімації
пов'язаний з html структурою.

8. Визначаємо разом із замовником/дизайнером поведінку сайта в динаміці.

Тобто як себе веде проект на широкоформатних моніторах, таблетах, різних
видах розширень ноутбуків тощо. Чи потрібно нам застосовувати flexible-
верстку, чи необхідно обмежувати контейнер максимальною шириною та ін.
 07
Порядок робіт
Звісно, це - на розсуд розробника. Але ми робимо так:

1. Створюємо службові класи під проект (секції, контейнери,

тексти, заголовки, лінки та ін.)

2. Створюємо блоки, які перевикористовуються впродовж

проекта (форми, кнопки, картки товарів/послуг тощо)

3. Переходимо до реалізації найбільш технічно складних

блоків та модулів. Неважливо, стосується це анімації або
функціоналу/логіки. Наше завдання - створити те, що на мові
маркетингу називається MVP (Minimum viable product), тобто
"Мінімально життєздатний продукт"
 08
Порядок робіт
Чому пункт 3 стоїть саме тут?

На це важко розрахувати ча

Складні технічні рішення можуть

потребувати особливостей у
структурі, найменуванні класів або
стилізації

Після реалізації, як правило, їх

необхідно узгодити з клієнтом
 09
Порядок робіт
4. Розробляємо десктопну версію всіх сторінок проєкта

5. Аналізуємо швидкість завантаження сайту. Якщо

результати не влаштовують - оптимізуємо

6. Адаптуємо верстку під всі види простроїв

7. Реалізуємо всі необхідні сценарії анімації та стани

елементів (hover, click, focused і т.д.)

8. Тестуємо проект на всіх видах гаджетів, софта та

розширень екранів. Краще - буквально. Але можна і
через емулятор
 10
Порядок робіт
9. Аналізуємо швидкість завантаження сайту. Якщо
результати не влаштовують - оптимізуємо

10. Імплементуємо всі необхідні SEO-налаштування

(title, description, alt text тощо)

11. Перевіряємо коректність відправки форм та вигляд

отримання даних

12. Видаляємо всі зайві стилі, медіа файли, сценарії

анімації, закоментований код в embed-блоках

13. Передаємо проєкт клієнту

 11
Порядок робіт
14. Отримуємо доступ до клієнтського Workspace
(гостьовий або за логіном/паролем), підключаємо
домен (для цього клієнт повинен придбати Site Plan)

15. Записуємо клієнту інструкцію користування і

редагування контенту на сайті.
 12
Переходь до гугл тиблиць і користуйся
цим гайдом
Посилання на таблицю

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

Школа Webflow Tutor Наша агенція Instagram школи