Дизайнер чекає тексти. Автор текстів чекає затвердженої структури. Власник чекає дизайн, щоб нарешті зрозуміти, які фотографії шукати. Усі зайняті, рахунок за хостинг уже оплачено, а сторінку послуги досі нічим наповнити. Це типова умовна ситуація, не опис конкретного клієнта.
Етапи створення сайту потрібні не заради красивого графіка в договорі. Вони показують, яке рішення має бути прийняте перед наступною роботою, хто дає матеріали й що саме власник приймає. Дизайн і код можуть затримати проєкт, але часто вузьке місце з’являється раніше: не визначені товари, тексти, фото, умови, доступи чи відповідальний за погодження.
Розберімо шлях від брифу до перших 30 днів після запуску. За прикладом візьмемо реальну роботу GrandMa над Ratner Beauty: магазин розпиву парфумів ми створювали з нуля, разом зі структурою каталогу, вимірюванням та редакційною системою. Цей кейс допомагає показати, чому сайт не зводиться до макета головної сторінки. Фактичний результат наведу наприкінці й відділю його від непідтверджених продажів.
1. Карта етапів створення вебсайту
Послідовність може змінюватися за типом сайту й договором. Частину робіт ведуть паралельно. Але для кожного етапу мають бути вхід, результат і людина, яка його приймає.
| Етап | Що потрібно на вході | Що прийняти на виході | Хто погоджує і що затримує |
|---|---|---|---|
| Бриф | Задача бізнесу, аудиторія, пропозиція, обмеження | Записана мета сайту, головні дії відвідувача, межі проєкту | Власник або керівник напряму; затримка, коли мета лишається «хочемо сучасно». |
| Дослідження й структура | Бриф, список послуг або товарів, питання клієнтів | Карта сторінок, каталог або групи послуг, маршрути до звернення | Власник і команда продажів; затримка, коли асортимент ще не визначено. |
| Прототип | Затверджена структура, ключові факти й сценарії | Порядок змістових блоків, форми, навігація на телефоні | Людина, що ухвалює рішення; затримка, коли макет погоджують за кольором до логіки. |
| Тексти й матеріали | Структура, ціни, умови, фото, доказові матеріали | Затверджені факти для сторінок, придатні файли, права на використання | Експерт бізнесу й редактор; затримка, коли «текст тимчасовий» стає постійним. |
| Дизайн | Прототип, реальний зміст, бренд і технічні вимоги | Макети основних сторінок і станів на desktop та mobile | Власник і відповідальний за бренд; затримка, коли нові вимоги виникають після погодження. |
| Розробка й наповнення | Прийняті макети, контент, домен і потрібні інтеграції | Робочий сайт у тестовому середовищі з наповненими сторінками | Команда проєкту; затримка через відсутні доступи або незавершені дані. |
| Тестування | Робочий сайт, сценарії клієнтів, критерії приймання | Список перевірених маршрутів і виправлених дефектів | Бізнес та виконавець разом; затримка, якщо тестують лише головну сторінку. |
| Запуск | Прийнятий сайт, план перенесення, доступи, резервна копія | Живі URL, форми, аналітика, карта адрес і передача власнику | Відповідальні за домен, сервер, аналітику й заявки; затримка через неузгоджене вікно запуску. |
| Перші 30 днів | Живий сайт і людина, яка приймає заявки | Перевірки помилок, фактичні питання людей, план дрібних виправлень | Власник продукту й підтримка; затримка, якщо після релізу немає відповідального. |
Ця таблиця допомагає прочитати кошторис. Якщо в ньому написано «сайт під ключ», але незрозуміло, хто пише тексти, завантажує товари й перевіряє форми, ключ поки лежить невідомо де.
2. Бриф і структура: найцінніші рішення до дизайну
У брифі не потрібні тридцять сторінок загальних побажань. Потрібна відповідь: хто прийде на сайт, що хоче зрозуміти, чому може не звернутися й яку дію ми хочемо зробити простою. Для магазину це може бути пошук товару, порівняння об’єму, оформлення й отримання замовлення. Для послуги - перевірка досвіду, умов і звернення.
Попроси показати карту сторінок до першого декоративного макета. Де будуть категорії? Чи є окремі сторінки для різних потреб? Як людина потрапить із пошуку на відповідний товар, а не лише на головну? У Ratner Beauty ми спочатку визначали офер і аудиторію, архітектуру сайту, товарну структуру, вимірювання та пошукову основу. Це підтверджений обсяг роботи в кейсі. Не варто приписувати проєкту вигадані наради, кількість прототипів або строк погодження, яких у доказах немає.
Прототип показує порядок інформації без фінального оздоблення. На сторінці товару мають бути назва, варіанти, умови, дія й відповіді на питання, які можуть зупинити покупку. Власник може перевірити цей маршрут до того, як дизайн робить зміни дорожчими. Мені важливо, щоб на прототипі людина знайшла потрібне з телефона, без екскурсії через усі сторінки сайту.
Не кожному проєкту потрібен великий окремий документ із прототипами. Для простого сайту достатньо схеми блоків і переходів. Але пропустити саму перевірку змісту й маршруту не варто. Інакше суперечка про те, чи потрібна сторінка «Доставка», почнеться після верстки футера.
3. Тексти, фото й факти: хто їх насправді готує
Копірайтер може написати зрозумілий текст, але не знає з повітря твоєї наявності товару, мінімального замовлення, умов повернення чи географії доставки. Дизайнер може красиво розкласти каталог, але не створить за власника товарну таксономію. Тому на початку визнач: хто збирає факти, хто пише, хто перевіряє, хто остаточно погоджує.
Для Ratner Beauty товарна структура була частиною основи магазину. Коли в каталозі багато брендів і варіантів, невдала класифікація відчувається всюди: у меню, фільтрах, картках, аналітиці та пошуку. Саме тому змістова структура й технічне SEO з’являються до масового наповнення, а не після нього.
Фото теж потребують рішення. Попроси перелік кадрів за сторінками: обкладинка, товар, деталь, команда, доказ роботи. Уточни формат, розмір і право використання. Не плануй сторінку з п’ятьма великими фотографіями, якщо бізнес має одну нечітку картинку з месенджера. І не заповнюй порожнечу випадковими AI-зображеннями, які не пояснюють продукт.
4. Дизайн і розробка: приймай робочий маршрут
На дизайні дивись не лише на головний екран. Попроси показати довгу сторінку, картку товару, форму, повідомлення про помилку, порожній результат пошуку та мобільний вигляд. Якщо текст збільшити, чи можна далі читати й натискати? Якщо йти клавіатурою, чи видно фокус і чи доступна дія? Швидкі перевірки W3C WAI допомагають помітити базові перешкоди, але не замінюють повного аудиту доступності.
Під час розробки макет стає HTML, сторінками, формами й інтеграціями. Потрібна тестова адреса, де власник може пройти три основні сценарії. Один: людина прийшла на потрібну сторінку й знайшла відповідь. Другий: вона заповнила форму або оформила замовлення. Третій: щось пішло не так, і сайт пояснив, що робити далі. Повідомлення «Дякуємо» ще не доводить доставки заявки; простеж її до пошти, CRM або іншого фактичного отримувача.
Якщо важливий контент з’являється лише після виконання JavaScript, перевір, як сторінка доступна для пошукових систем. Google описує особливості обробки JavaScript. Технічна можливість прочитати сторінку сама не гарантує індексації чи позицій, але це необхідна частина перевірки перед SEO-роботою.
5. Десять речей, які замовник може підготувати заздалегідь
- Одну головну задачу сайту. Що має статися після візиту: заявка, замовлення, бронювання чи запит прайсу.
- Перелік товарів або послуг. З варіантами, обмеженнями й тим, що поки не продається.
- Питання покупців. Візьми їх із листів і розмов, не з вигаданого FAQ конкурента.
- Умови продажу. Ціна або спосіб розрахунку, доставка, географія, строки, оплата, повернення.
- Факти для довіри. Дозволені до публікації кейси, відгуки, документи й фото роботи з джерелами.
- Відповідального за контент. Людину, яка може перевірити факти й швидко відповісти редактору.
- Відповідального за рішення. Хто остаточно погоджує структуру, тексти й дизайн, а не збирає нескінченне голосування.
- Доступи та власність. Хто контролює домен, хостинг, пошту, аналітику й рекламні акаунти.
- Чинні адреси сайту. Якщо сайт замінюють, потрібен список важливих URL для карти перенаправлень.
- План приймання. Які сценарії потрібно пройти, кому прийде тестова заявка і хто виправить помилки після запуску.
Частини списку може не бути до старту. Це нормально, якщо в плані названо, хто й коли їх підготує. Проблема з’являється, коли на третій місяць проєкту всі вперше запитують, хто має пароль від домену.
Як погоджувати, щоб сайт не чекав текстів три місяці
Визнач одну людину, яка збирає зауваження від бізнесу й повертає виконавцю узгоджене рішення. Якщо відділ продажів, бухгалтерія й власник коментують макет кожен у своєму чаті, команда отримує три несумісні версії. Корисно домовитися про один документ із правками, дату відповіді та того, хто вирішує суперечність. Це не усуває дискусію, зате не ховає її між повідомленнями.
Для кожного матеріалу запиши дату й формат передачі. Наприклад: до погодження прототипу дати перелік категорій; до дизайну картки товару надати реальні фото та характеристики; до наповнення узгодити правила доставки. Якщо бізнес не може підготувати частину матеріалів, скажи це на старті. Виконавець може включити їх підготовку в обсяг або змінити послідовність, але не має вдавати, що тимчасова заглушка є готовим змістом.
На прийманні етапу проси показати конкретний результат з таблиці вище. «Ми попрацювали над структурою» важко погодити. Карта сторінок, список типів товару й три маршрути відвідувача вже дають предмет розмови. Якщо з’ясувалося, що завдання змінилося, зафіксуйте новий обсяг, вплив на строки й вартість до наступного етапу. Тоді затримка матиме названу причину, а не перетвориться на взаємне «ми думали, ви це зробите».
6. День запуску: що перевірити до оголошення «готово»
Перед перемиканням домену зроби резервну копію чинного сайту й погодь спосіб повернення, якщо щось піде не так. Запиши, хто має право змінювати DNS, сервер і форми. Копія корисна лише тоді, коли відомо, де вона лежить і як відновити сайт. Це пов’язано з питанням власності: ми окремо пояснили, що має залишитися у бізнесу, якщо підрядник зникне.
Після перемикання пройди короткий список:
- Відкрий основні сторінки на телефоні й комп’ютері, перевір меню, посилання, зображення й повідомлення про помилки.
- Надішли тестову форму й простеж отримання, сповіщення та відповідального. Перевір і помилкове заповнення.
- Перевір оплату чи оформлення, якщо це магазин, у погодженому тестовому режимі.
- Звір назви сторінок, описи, canonical, індексаційні налаштування й наявність sitemap. Google нагадує, що подання карти сайту є підказкою, а не гарантією обходу чи індексації.
- Якщо змінилися адреси, перевір карту старих і нових URL та відповідні перенаправлення. Google дає окремий порядок для переїзду зі зміною URL.
- Переконайся, що аналітика бачить потрібні події, але не плутай натискання кнопки з доставленою заявкою.
- Передай власнику реальні доступи та коротку інструкцію підтримки, а не лише посилання на адміністративну панель.
Якщо в передзапусковому списку знаходять проблему сканування чи індексації, технічний SEO-аудит допомагає розставити пріоритети. Виправляй критичний маршрут до того, як додавати ще десять сторінок тексту.
7. Перші 30 днів теж належать до проєкту
Після запуску з’являються справжні люди й пристрої, які не брали участі в тесті. Щотижня перевіряй хоча б форми, помилки, основні сторінки, питання клієнтів і доступність команди для відповіді. Якщо багато людей питають те саме, можливо, важлива умова схована або написана незрозуміло. Якщо заявки є, але не доходять до менеджера, проблема не в кількості відвідувачів.
У Ratner Beauty підтверджений результат побудованої пошукової системи за 1 липня 2025 – 30 червня 2026 року: 156 379 кліків і 7 283 598 показів у Google Search Console. GA4 за той самий період зафіксувала 170 606 органічних сесій. Ці дані показують вимірюваний канал залучення протягом дванадцяти місяців. Вони не доводять конкретну виручку чи кількість покупок; таких цифр у публічному кейсі немає. І це не обіцянка, що інший сайт повторить результат після релізу.
Якщо плануєш власний сайт, послуга GrandMa з сайтів та інтернет-магазинів описує, як ми працюємо зі структурою, дизайном і запуском. Для невеликої задачі можна спершу безкоштовно подивитися макет майбутнього сайту за 9900 грн, щоб предметно обговорити напрям. Повний проєкт починається з окремого обсягу й рішень, які бізнес має прийняти. Сайт стає готовим не тоді, коли зникла картка в трекері, а коли реальний покупець може пройти свій маршрут, а бізнес бачить і контролює його результат.