Бриф на розробку сайту: шаблон, який власник заповнює сам

Ти написав трьом студіям одне й те саме: «Потрібен новий сайт, скільки коштує?». Через тиждень у тебе три відповіді. Одна студія просить суму, за яку можна купити вживане авто, друга вкладається в бюджет корпоративу, третя прислала анкету на сорок питань і чекає. Порівняти ці пропозиції неможливо, бо кожен підрядник сам домислив, що ти замовляєш. Хтось уявив лендинг на один екран, хтось магазин з особистим кабінетом.

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

Щоб приклади не висіли в повітрі, крізь усю статтю пройде одна умовна компанія: «Периметр», яка продає й монтує відеоспостереження та контроль доступу для складів, офісів і житлових комплексів. Компанія вигадана, ситуації типові.

Ці два документи часто плутають, і через це власник або пише ТЗ, якого не вміє писати, або взагалі нічого не пише, бо «ТЗ має робити розробник».

Бриф відповідає на питання «що і навіщо». Його пише замовник, мовою бізнесу, без технічних термінів. Технічне завдання (ТЗ) відповідає на питання «як саме». Його зазвичай складає підрядник або аналітик на основі брифу та обговорень, і воно стає частиною договору.

Якщо ти шукаєш «тз на сайт», щоб прийти з ним до підрядника, тобі, найімовірніше, потрібен саме бриф. Нормальний порядок такий: ти пишеш бриф, підрядник ставить уточнювальні питання, разом ви доходите до ТЗ, і вже ТЗ ти підписуєш. Якщо підрядник готовий стартувати без ТЗ, лише «за брифом», варто хоча б погодити письмовий перелік сторінок і функцій. Інакше приймати роботу буде нема з чим порівнювати.

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

Головне правило: пиши так, щоб текст не можна було прочитати двома способами. «Сучасний дизайн» прочитають по-різному всі троє підрядників. «Хочемо, щоб головна виглядала спокійно, як сайт банку, а не як афіша концерту» вже зрозуміло. Кожна двозначність у брифі пізніше перетворюється на раунд правок, а раунди правок перетворюються на терміни й гроші.

Писати ідеально не треба. Чесне «не знаю, порадьте» корисніше за вигадану відповідь: підрядник бачить, де потрібна його експертиза.

Перший розділ пояснює, хто ти. Не історія компанії з року заснування, а те, що допоможе людині ззовні зрозуміти бізнес за п’ять хвилин.

Що варто написати:

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

Погано: «Периметр - надійний партнер у сфері безпеки з багаторічним досвідом». Добре: «Продаємо й монтуємо відеоспостереження та контроль доступу. Головні гроші приносять склади й ЖК, приватні будинки - близько чверті замовлень. Відрізняємося тим, що даємо власний сервіс після монтажу. За рік плануємо продавати обладнання онлайн».

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

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

Тут ти описуєш межі роботи. Підрядникові треба знати кілька речей.

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

Що вже є. Логотип у векторі, фірмові кольори й шрифти, брендбук, фото, тексти, відео, сертифікати, відгуки клієнтів. Перелічи і вкажи, де лежить.

Чого в проєкті немає. Цей пункт найчастіше пропускають, хоча він найдешевше рятує від суперечок. «Логотип не перемальовуємо», «рекламу не налаштовуємо», «тексти пишемо самі» знімає питання ще до кошторису.

Скільки часу ти готовий віддавати проєкту. Хочеш бачити кожен проміжний макет чи лише ключові етапи? Хто з твого боку відповідає на питання і як швидко? Підрядник планує роботу під цю відповідь.

Стиль. Опиши словами, які асоціації має викликати сайт, і дай приклади (про них нижче). Для «Периметра» це може бути «технічно, спокійно, без мілітарі-естетики і без чорно-червоних кольорів, бо ми не охоронна фірма з фільмів».

Сайт без мети перетворюється на візитку, яку ніхто не відкриває. Сформулюй, навіщо він потрібен, і обов’язково, що має зробити людина, яка на нього прийшла.

Типові цілі: отримувати заявки, продавати онлайн, пояснювати складний продукт до розмови з менеджером, збирати підписки, давати клієнтам документацію, наймати людей. Обери одну головну і кілька другорядних. Якщо головних п’ять, головної немає.

Для «Периметра» головна мета могла б звучати так: «отримувати заявки на безкоштовний виїзд інженера від складів і ЖК». Дія відвідувача: заповнити коротку форму або написати в месенджер. Другорядна мета: щоб чинні клієнти знаходили інструкції й контакти сервісу і не телефонували з цим у відділ продажів.

Якщо є старий сайт, напиши, що на ньому спрацювало, а що ні: звідки приходили заявки, на що скаржилися клієнти.

І одразу домовся про вимірювання. Сьогодні стандарт для більшості сайтів - Google Analytics 4. Те, що раніше називали «цілями» й «конверсіями», у GA4 тепер зветься ключовими подіями: надіслана форма, клік на телефон, оформлене замовлення. У брифі достатньо написати, які дії ти хочеш рахувати. Налаштувати їх - задача підрядника, і краще, щоб це було в переліку робіт, а не «потім якось».

Класичні анкети просять вік, стать і доходи аудиторії. Для сайту важливіше, у якій ситуації людина приходить на сайт і що їй треба, щоб наважитися на наступний крок.

Опиши два-три типи відвідувачів за схемою: хто це, яку задачу розв’язує, що його турбує, що він хоче побачити на сайті.

Для «Периметра» це могло б виглядати так:

• Керівник складу або логістики. Задача: зменшити крадіжки й контролювати територію. Турбує: простій під час монтажу, сумісність із наявними камерами. Хоче побачити: схожі об’єкти, терміни, як працює сервіс.
• Управитель ЖК або ОСББ. Задача: домофон і камери на під’їзди, погоджені з мешканцями. Турбує: бюджет, абонплата, хто обслуговуватиме. Хоче побачити: зрозумілу ціну за під’їзд або хоча б принцип розрахунку, документи для зборів.

Якщо ти не знаєш, хто твої клієнти, запиши, з якими питаннями люди приходять до менеджерів. Це вже половина розділу.

Тут два різні списки, і їх не варто змішувати.

Конкуренти. Три-п’ять компаній, з якими тебе порівнюють клієнти. Не тільки найбільші на ринку, а саме ті, до кого реально йдуть люди, коли не прийшли до тебе. Біля кожного напиши, що в них зроблено добре і що ти хотів би зробити інакше.

Сайти-приклади. Сайти будь-якої галузі, які тобі подобаються. І тут головне правило брифу: посилання без пояснення майже марне. «Подобається сайт X» підрядник прочитає як «скопіюйте сайт X», а ти, можливо, мав на увазі лише зручний калькулятор на одній сторінці.

Пиши так:

• «Сайт X: подобається, що ціни видно одразу на сторінці послуги, без “дізнайтеся у менеджера”».
• «Сайт Y: подобається, як показано етапи роботи, кроками з термінами. Кольори й шрифти не подобаються».
• «Сайт Z: подобається мобільна версія, кнопка зв’язку завжди під пальцем».

Додай і антиприклад: сайт, який тобі точно не подобається, і чому.

Цей розділ найближчий до ТЗ, але писати його треба все одно мовою бізнесу. Не «інтеграція з REST API», а «заявка з сайту має потрапляти в нашу CRM, ми працюємо в такій-то».

Що перелічити:

• Структура й сторінки. Які розділи потрібні: послуги, ціни, кейси, про компанію, блог, контакти. Не обов’язково знати остаточну структуру, але приблизний перелік сторінок суттєво впливає на ціну. Як продумати меню і структуру, щоб людина не губилася, розповідає стаття про навігацію на сайті.
• Функції. Форма заявки, калькулятор, каталог, фільтри, кошик, особистий кабінет, бронювання, онлайн-чат.
• Інтеграції. Онлайн-оплата (який платіжний сервіс), CRM, служби доставки, облікова система, розсилки, месенджери. Назви сервіси, якими вже користуєшся.
• Для магазину. Скільки приблизно товарів, які в них варіанти (розмір, колір, комплектація), звідки беруться ціни й залишки, чи потрібні промокоди, як рахується доставка.
• Мови. Які мови й чи всі сторінки перекладаються. Для бізнесу, зареєстрованого в Україні, який продає українцям, це ще й вимога закону: з 16 липня 2022 року сайт має мати версію українською, не меншу за обсягом і змістом за іншомовні, і саме вона має завантажуватися для користувачів в Україні за замовчуванням, як пояснює Уповноважений із захисту державної мови (стаття 27 Закону «Про забезпечення функціонування української мови як державної»). Інші мовні версії можна мати поруч. Google радить давати кожній мовній версії окрему адресу і не перекидати людей автоматично за здогадкою про їхню мову. Так зроблено і на нашому сайті: українська живе під /ua/, німецька під /de/, англійська без префікса, а мову людина перемикає сама в шапці.
• Фірмовий стиль. Якщо стиль уже є і його треба зберегти, передай оригінали: логотип у векторі, коди кольорів, файли шрифтів або їхні назви, брендбук. Скриншот логотипа з Instagram - не оригінал.

«Периметру» тут варто згадати і незвичне: розділ з інструкціями до камер у PDF, форму, куди можна прикріпити план приміщення.

Проєкти «без дедлайну» трапляються рідко, і зазвичай вони тягнуться без кінця. Напиши, коли сайт потрібен і чому саме тоді: виставка, сезон, запуск реклами, кінець договору зі старим підрядником.

Розрізняй жорсткий і бажаний термін. «До 1 березня, бо стартує рекламна кампанія» - жорсткий. «Хотілося б до весни» - бажаний. Підрядник спланує роботу інакше.

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

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

Багато власників не пишуть бюджет, бо бояться, що підрядник «підтягне» ціну під названу суму. На практиці бриф без бюджету дає три пропозиції, розрахованих під три різні уявлення про проєкт, і порівнювати їх знову неможливо.

Достатньо діапазону: «плануємо від X до Y». Так підрядник зможе запропонувати рішення під твої гроші, а не під свою фантазію. За скромнішого бюджету він, наприклад, запропонує частину сторінок зібрати на типових блоках, а унікальний дизайн зробити лише для головної та сторінки послуги.

Одна поширена неточність: «невеликий бюджет означає CMS або конструктор, великий означає індивідуальну розробку». Система керування вмістом (CMS) потрібна майже будь-якому сайту, який власник хоче оновлювати сам, і на WordPress чи іншій CMS працюють як прості, так і дуже великі сайти. Бюджет визначає радше обсяг унікального дизайну, кількість функцій та інтеграцій і глибину підготовки, ніж сам факт наявності CMS.

Попроси підрядника окремим рядком назвати витрати після запуску: хостинг, домен, ліцензії, підтримка. Що впливає на вартість розробки, видно на сторінці нашої послуги розробки сайтів і магазинів.

Одна з найкорисніших функцій брифу - домовитися, що буде на виході. Крім дизайну й коду, це тексти, фото, переклади, аналітика й інструкція для твоєї команди.

Пропиши, хто за що відповідає:

• Тексти. Пишеш сам, пише підрядник, пише окремий копірайтер? Якщо сам, то коли. Сайт без текстів не можна ні запустити, ні нормально оцінити дизайн.
• Фото й відео. Є власні знімки об’єктів, треба організувати зйомку чи тимчасово беремо стокові?
• Переклади. Хто перекладає і хто перевіряє.
• SEO на старті. Чи очікуєш, що сторінки будуть базово підготовлені до пошуку: заголовки, описи, зрозумілі адреси, переадресації зі старого сайту.
• Навчання. Чи потрібна коротка інструкція або зустріч, щоб твоя команда могла сама додавати новини й змінювати ціни.

Про карту сайту (sitemap) часто кажуть як про обов’язковий пункт. Насправді Google пише, що невеликому сайту (до приблизно 500 сторінок, які мають бути в пошуку) з добрими внутрішніми посиланнями вона може бути не потрібна, хоча в більшості випадків карта сайту корисна. Більшість сучасних CMS генерують її автоматично, тож це не окремий дорогий пункт кошторису, а галочка в чеклісті приймання.

Наприкінці ще раз перелічи все, що має бути здано: з цим переліком ти прийматимеш роботу.

Останній розділ найнудніший і, мабуть, найважливіший на довгу дистанцію.

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

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

І домовся про життя після запуску: оновлення, резервні копії, дрібні правки, реакція на поломку, і скільки це коштує щомісяця. Якщо хостинг купуєш сам, попроси підрядника підтвердити, що тариф підходить.

Нижче готовий шаблон. Відповідай коротко, своїми словами. Де не знаєш, пиши «не знаю» або «порадьте».

1. Бізнес і продукт - Чим займається компанія (одне-два речення)? - Які продукти чи послуги головні для доходу? - Чим ви відрізняєтеся від конкурентів? - Де працюєте: місто, країна, кілька країн? - Які плани на рік-два можуть вплинути на сайт?

2. Цільова аудиторія - Хто основні клієнти (2-3 типи)? - Яку задачу кожен розв’язує, що його турбує перед покупкою? - Які питання клієнти ставлять найчастіше?

3. Мета сайту і дія відвідувача - Навіщо потрібен сайт (одна головна мета)? - Що має зробити відвідувач: заявка, дзвінок, покупка, підписка, повідомлення в месенджер? - Які дії ти хочеш рахувати в аналітиці? - Якщо сайт уже є: посилання, що працює, що ні?

4. Конкуренти і сайти-приклади - 3-5 конкурентів: посилання і що в них добре чи погано. - 3-5 сайтів, які подобаються: посилання і що саме подобається. - 1-2 сайти, які не подобаються, і чому.

5. Структура і сторінки - Які розділи потрібні (послуги, ціни, кейси, про нас, блог, контакти, інше)? - Скільки приблизно сторінок послуг або товарів? - Що найважливіше показати на головній?

6. Контент - Хто пише тексти? Коли вони будуть готові? - Є власні фото й відео? Потрібна зйомка? - Є логотип у векторі, брендбук, фірмові кольори й шрифти?

7. Функції й інтеграції - Які функції потрібні: форма, калькулятор, каталог, кошик, кабінет, бронювання, чат? - Онлайн-оплата: потрібна чи ні, який сервіс? - CRM, облік, доставка, розсилки: якими сервісами вже користуєтеся?

8. Мови - Які мови потрібні? - Перекладаються всі сторінки чи лише частина? - Хто перекладає і хто перевіряє?

9. Домен, хостинг, доступи - Чи є домен і на кого він оформлений? - Чи є хостинг, корпоративна пошта? - Хто купуватиме відсутнє? - Чи потрібна підтримка після запуску і в якому обсязі?

10. Бюджет і терміни - Діапазон бюджету на розробку. - Бюджет на щомісячні витрати після запуску. - Бажаний і жорсткий термін запуску, і з чим він пов’язаний.

11. Хто приймає рішення - Хто з вашого боку контактна особа? - Хто погоджує дизайн, тексти, бюджет? - Скільки людей бере участь у погодженнях? - Чого точно немає в цьому проєкті?

Останній блок не формальність. Коли макет погоджує менеджер, а наприкінці приходить власник із «все переробити», це найдорожча правка проєкту.

Навіть заповнений шаблон може не спрацювати. Ось що трапляється найчастіше:

1. Загальні слова замість фактів. «Сучасний», «стильний», «зручний», «для широкої аудиторії» нічого не кажуть підряднику. Заміни кожне таке слово прикладом.
2. Посилання без пояснень. Список з десяти гарних сайтів без жодного коментаря змушує підрядника вгадувати, що з цього тобі важливо.
3. Немає мети, або їх сім. Сайт, який водночас продає, наймає, розважає, навчає і збирає підписки, зазвичай не робить добре жодного.
4. Немає бюджету. Пропозиції приходять у різних «вагових категоріях», і ти порівнюєш непорівнянне.
5. Контент «потім». Дизайн малюють під уявні тексти, а реальні його розвалюють.
6. Паролі прямо в брифі. Документ розсилають кільком підрядникам, і доступи опиняються в чужих скриньках.
7. Бриф як анкета на сорок сторінок. Якщо документ ніхто не дочитає, головне в ньому загубиться.

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

Останній рядок недооцінюють. Підрядник, який прочитав бриф уважно, зазвичай повертається з уточненнями: «а що з інструкціями для клієнтів», «звідки беруться ціни на обладнання». Відсутність питань теж інформація, і не завжди хороша.

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

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

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

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

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