• Прототипи · Figma

Прототип: домовитись про структуру, поки зміна коштує годину, а не тиждень переробки

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

Подивитись, як це працює
Вартість
після безкоштовного аудиту
Гарантія
30 днів після підписання акта
Спеціалізація
сайти й магазини, переважно OpenCart і Next.js
після безкоштовного аудиту
Вартість
30
Гарантія

днів після підписання акта

сайти й магазини, переважно OpenCart і Next.js
Спеціалізація
від 5 до 20 робочих днів
Строк
безкоштовна розмова про задачу
Початок
протягом 2 годин
Відповідь
за письмовим договором
Робота
Що входить

Повний перелік робіт і того, що ви отримуєте на виході

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

Що не входить у роботу — щоб не було сюрпризів на здачі

  • готовий дизайн: прототип навмисно без кольорів, шрифтів і стилю
  • написання остаточних текстів для сторінок
  • верстка й розробка — наступна робота з окремою оцінкою
  • гарантія, що структура не зміниться під час розробки
  • обіцянки щодо позицій сайту в пошуку
Кому підходить

Ситуації, у яких ця послуга дає результат

Сценарій 1 із 4

Замовник, який робить сайт уперше

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

Розберемо вашу ситуацію на безкоштовному аудиті
Безкоштовна розмова про задачу

Зʼясовуємо, чи потрібен прототип окремим кроком: для простих сайтів він зайвий.

Що ми міряємо

  • Скільки типів сторінокЛендінг — це один тип. Магазин із каталогом, картками, кабінетом і статтями — пʼять-шість, і кожен треба погодити окремо.
  • Скільки людей ухвалює рішенняОдин власник домовиться сам із собою по ходу. Троє керівників — ні, і прототип тут окупається однією уникнутою переробкою.
  • Чи є складна логікаКалькулятор, багатокрокова форма, особистий кабінет. Такі речі неможливо погодити словами — їх треба побачити кроками.
  • Чи зрозуміло, що ви продаєтеЦе головне питання, і воно не про сайт. Якщо відповідь розпливчаста, прототип її не замінить, але добре виявить.
  • Чи є матеріалиФото, тексти, документи, дані про товар. Прототип покаже, скільки їх треба насправді, і це зазвичай неприємна несподіванка.
  • Чи не простіше одразу верстатиДля простого сайту з двох сторінок прототип — зайвий крок. Ми скажемо це прямо, а не продамо етап заради етапу.

Що ви отримуєте

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

Строк: 1 розмова

Чому це безкоштовно

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

Що далі

Ви отримуєте розуміння обсягу. Далі вирішуєте самі.

Коротка форма: контакт і адреса сайту

  • Договір, акт і гарантія 30 днів

    На кожен проєкт письмовий договір: обсяг, строки, сума, порядок приймання. Після здачі — акт і рахунок, а далі 30 календарних днів гарантії: помилки з нашої вини усуваємо безоплатно. Усне з дзвінка дублюємо письмово того ж дня.

  • ФОП і безготівковий розрахунок

    Виконавець — зареєстрований ФОП. Оплата на рахунок із закривними документами.

  • Права й доступи — ваші

    Код, дизайн і матеріали переходять до вас після повної оплати. Домен, хостинг, репозиторій, аналітику оформлюємо на вас.

  • Портал клієнта замість переписки

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

  • Замовники з Європи

    Серед робіт — проєкти для Норвегії, Болгарії, Молдови та Іспанії.

  • Цифри, які можна перевірити

    Кожен кейс у портфоліо — з посиланням на живий сайт і технічним виміром.

  • Спершу аудит, потім сума

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

  • Кажемо «ні», коли не впевнені

    Якщо задача не наша або строк нереальний — скажемо одразу.

Що впливає на вартість

Чому дві однакові на вигляд задачі рахуються по-різному

  • Кількість типів сторінокГоловний чинник. Не кількість сторінок, а саме типів: сто карток товару — це один тип, а каталог, картка й кошик — три.
  • Складність логікиСтатична сторінка малюється швидко. Багатокроковий сценарій із розвилками — це вже кілька станів на кожен крок.
  • Глибина опрацюванняСхематичні блоки з підписами дешевші. Прототип із заготовками текстів і реальними прикладами даних ближчий до документа.
  • Кількість погодженьОдин показ і правки — передбачувано. Погодження через кількох керівників з різними думками означає більше кіл.
  • Мобільна версіяПроєктувати вузький екран окремо — це майже другий прототип. Але без нього мобільні рішення ухвалюються навмання під час верстки.
  • Стан вихідних данихЯкщо перелік послуг чи товарів не впорядкований, спершу доведеться його впорядкувати — і це часто найдовша частина.
Кейси

Задачі та результат у цифрах — усі показники зняті нашим виміром

консалтингова компанія у сфері структурування бізнесу і залучення фінансування, односторінковий корпоративний сайт

Задача
Зробити корпоративний сайт під ключ для B2B-консалтингу: пояснити чотири напрями послуг (фінансовий менеджмент, корпоративне структурування, M&A, Government Relations), показати команду й процес роботи і привести відвідувача до заявки на консультацію.
Рішення
Односторінковий сайт на Next.js: анімована hero-секція, секції цільової аудиторії, послуг, процесу роботи, команди і форма заявки. Навігація — якорі (#services, #process, #audience, #team, #contact), у HTML лише одне внутрішнє посилання. Підключено GA4 (G-2ENCYLQ2S1) і gtag.
Результат
TTFB 0,25 с при 102 КБ HTML — найлегший документ серед 16 виміряних сайтів портфоліо і другий за швидкістю відгуку. Підключено GA4 (G-2ENCYLQ2S1) — на відміну від більшості вимірюваних проєктів, тут аналітика реально працює. Виміряно 31.07.2026.

український виробник негорючих стінових панелей

Задача
Показати технічну продукцію так, щоб проєктувальник і замовник з тендеру знаходили характеристики без дзвінка менеджеру.
Рішення
Корпоративний сайт на Next.js із каталогом продукції, калькулятором і структурованими даними. Розмітка Organization з адресою, країною і пошуковим сценарієм — щоб бренд коректно розпізнавався пошуком.
Результат
164 сторінки в карті сайту без жодного дубля; перша відповідь сервера 208-244 мс, картка продукції 208 мс; 8 типів структурованих даних (Organization, PostalAddress, Country, QuantitativeValue, SearchAction, WebSite, ImageObject, EntryPoint); коректний robots із закритими службовими розділами; аналітика підключена.

Не знайшли свій випадок?

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

Етапи роботи

Прозорі етапи з погодженням на кожному кроці

Загальний строк:5–20 днів

  1. Розмова про задачу

    1–2 робочих дні

    Зʼясовуємо, що продаєте, кому й яку дію має зробити відвідувач. Без відповіді на це прототип перетворюється на набір гарних прямокутників.

  2. Перелік сторінок

    1–3 робочих дні

    Складаємо список сторінок і типів, кожен з поясненням, навіщо він. Тут зазвичай і зʼясовується, що половина задуманого не потрібна.

  3. Склад сторінок

    2–8 робочих днів

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

  4. Вузький екран

    1–4 робочих дні

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

  5. Заготовки текстів

    1–3 робочих дні

    Ставимо на місця чернетки заголовків і підписів. «Текст буде потім» — найчастіша причина, чому готовий сайт виглядає порожнім.

  6. Погодження

    1–2 робочих дні

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

Технології та інтеграції

На чому будуємо і з чим це з'єднується

Стек

  • Figma
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • Next.js
  • React
  • Markdown
  • Git
  • GitHub
  • OpenCart
  • WordPress

Інтеграції

  • Figma
  • Git
  • Google Docs
  • Telegram
  • Notion
Прототип чи одразу дизайн

Чим цей варіант відрізняється від альтернативи

Про що розмова на погодженніпро склад і порядок
Ціна змінипересунути прямокутник
Оцінка розробкиспирається на погоджений перелік
Загальний строкдовший на етап прототипу
Коли можна без прототипузайвий для сайту з двох сторінок
Що потрібно від вас

Без цього не почнемо — краще підготувати заздалегідь

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

Якщо чогось із цього немає — скажіть, підкажемо, як зібрати або зробимо самі окремою задачею.

Часті питання

Те, що питають найчастіше — з конкретними відповідями

Чому прототип без кольорів?

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

Це не те саме, що технічне завдання?

Близько, але прототип чесніший. Технічне завдання можна прочитати трьома різними способами й кожен буде впевнений, що зрозумів правильно. Прототип видно: або блок є на сторінці, або його немає. Саме тому ми й погоджуємо результат письмово — від нього рахується обсяг розробки.

Скільки правок входить?

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

Ви робите й сам сайт після прототипу?

Так, і це найпоширеніший порядок. Але прототип лишається вашим незалежно від того, чи продовжите ви з нами. Це навмисно: етап, після якого ви прив'язані до виконавця, — поганий етап, і робити такий ми не хочемо.

Мобільну версію теж прототипуєте?

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

У нас ще немає текстів. Чекати?

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

Скільки це триває?

Від 5 до 20 робочих днів. Лендінг — тиждень. Магазин або сервіс із кабінетом і кількома сценаріями — ближче до верхньої межі. Найдовше зазвичай не малювання, а погодження, коли рішення ухвалює кілька людей.

Гарантуєте, що структура потім не зміниться?

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

Порахуймо, чи потрібен вам прототип окремим кроком

Коротка розмова про задачу — і чернетка переліку сторінок. Безкоштовно, відповідаємо протягом 2 годин.

З виміряних кейсівTTFB 0,25 с при 102 КБ HTML

Дивитись кейси
  • Відповідь протягом 2 годин
  • Без зобов’язань
  • Працюємо за договором

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