Strapi — удобная headless‑CMS, но итоговый бюджет зависит не только от «настройки админки». Самые большие разницы в цене рождаются на этапах дизайна и фронтенда: сколько уникальных шаблонов вы рисуете, как проработаны мобильные и планшетные версии, насколько «тяжёлая» верстка и есть ли SSR/SSG для SEO и скорости.
Ниже — практичный разбор: когда Strapi уместен, из чего складывается смета, сколько стоят дизайн и верстка для desktop/tablet/mobile, типовые сценарии и реальные подводные камни.
Когда Strapi уместен, а когда лучше поискать другое
Strapi подходит, если:
- нужны несколько каналов — сайт, приложение, партнёрские витрины;
- планируется рост контентных типов и интеграций;
- важны скорость и SEO (SSG/SSR на Next.js или Nuxt).
Лучше поискать альтернативы, если:
- нужна простая визитка «на вчера»;
- хотите «магазин из коробки» без кастома;
- команда не готова к headless‑архитектуре — двум отдельным частям: CMS и фронтенду.
Подробнее про выбор подхода — в материале Strapi vs Bitrix: сильные и слабые стороны headless и «всё‑в‑одном» и статье Почему разработчики массово переходят на Strapi.
Из чего складывается смета на проект со Strapi
Большинство клиентов фокусируются на «разработке Strapi», не замечая, что дизайн и фронтенд суммарно занимают 45–65% бюджета. Вот полный список блоков:
- Аналитика и ТЗ — цели, карта разделов, роли, SEO‑требования
- Дизайн — концепт, UI‑кит, макеты ключевых страниц для desktop/tablet/mobile
- Верстка и фронтенд — адаптивная семантическая верстка, компоненты, SSR/SSG, интеграция с API Strapi
- Проектирование модели контента — типы, связи, компоненты, локали
- Разработка Strapi — кастомные эндпоинты, права, импорт, вебхуки
- Интеграции — CRM/ERP, платежи, email, аналитика, поиск
- Тестирование и запуск — unit/e2e, UAT, нагрузка, деплой
- Обучение редакторов — онбординг, короткие гайды
- Поддержка — обновления, мониторинг, SLA
О том, как правильно составить ТЗ — вот полезный материал.
Дизайн: от концепта до макетов для desktop/tablet/mobile
Зачем это важно
Концепт задаёт визуальный язык — цвет, типографику, сетку — и экономит время на всех последующих экранах. Макеты для трёх срезов фиксируют поведение блоков и читаемость контента: меньше переделок в верстке, лучше конверсия и Core Web Vitals.
Что входит в дизайн
Концепт — 1–3 референс‑сессии, moodboard, пробные экраны (главная + типовая внутренняя), базовый UI‑кит, дизайн‑токены: цвета, шрифты, радиусы, тени.
Макеты страниц (10–20 ключевых шаблонов) — desktop (≥1280 px), tablet (768 px), mobile (360 px). Плюс пустые и ошибочные состояния, длинные заголовки, валидации форм.
Результат — Figma‑прототип с интерактивностью, спецификации, экспорт ассетов.
Смета и сроки (ориентиры 2026)
РаботаЧасыСтоимостьСрокКонцепт30–70 ч90–220 тыс. ₽1–2 неделиМакеты 10–20 шаблонов с адаптацией80–220 ч260–700 тыс. ₽2–4 неделиКастомные иллюстрации/иконки (опционально)10–60 ч40–180 тыс. ₽—
Как не раздувать бюджет на дизайн
- Фиксируйте список шаблонов: всё, что можно собрать из блоков, не рисуем отдельно
- Сначала каркасы (wireframes), потом «красота»
- Библиотека компонентов вместо уникальных экранов; тёмная тема — во вторую волну
Верстка и фронтенд: скорость, доступность, SEO
Что делаем
- Адаптивная семантическая верстка — сетка, флюидная типографика, retina‑медиа, lazy‑loading, skeleton‑загрузки
- Компонентная библиотека в Storybook — быстро собирать страницы, не плодить дубли
- Производительность — цель LCP < 2,5 с, CLS < 0,1; critical CSS < 20 кБ; изображения AVIF/WebP через CDN
- Доступность — контраст, aria‑атрибуты, фокус‑кольца, навигация с клавиатуры (WCAG AA)
- SEO‑слой — SSR/SSG, корректные метаполя из Strapi, микроразметка, sitemap, canonical/robots
Смета и сроки (ориентиры 2026)
Верстка и фронтенд (12–20 шаблонов, формы, поиск, анимации) — 150–340 ч, 400–1 100 тыс. ₽, 3–5 недель.
Критерии приёмки
- Пиксель‑перфект ±2 px к макетам, Storybook опубликован
- Lighthouse 90+ по Performance/SEO/Accessibility на ключевых страницах
- Браузеры: последние 2 версии Chrome/Safari/Firefox/Edge; iOS/iPadOS/Android
Типовые сценарии и вилки бюджета в 2026
Это ориентиры для проектов среднего уровня без «экзотических» интеграций. Точная смета — после короткого брифа.
Корпоративный сайт + блог (10–20 шаблонов, 1–2 интеграции)
— срок: 10–12 недель, бюджет: 600–800 тыс. ₽
Состав: анализ/ТЗ, Strapi (модели, роли), дизайн‑концепт + макеты desktop/tablet/mobile, верстка/SSR/SSG, SEO‑слой, формы лидов, обучение.
Контентный портал/медиа (редакционный workflow, поиск, мультимедиа)
— срок: 12–16 недель, бюджет: 1,0–1,2 млн ₽
Headless‑ecommerce витрина (каталог, фильтры, SEO‑листинги)
— срок: 16–22 недели, бюджет: 1,5–3,0 млн ₽
ЛК/UGC‑платформа (профили, модерация, роли, нотификации)
— срок: 16–26 недель, бюджет: 3,1–5,0 млн ₽
Миграция с Bitrix/WordPress на Strapi (перенос контента + редизайн)
— срок: 10–14 недель, бюджет: 1,0–2,2 млн ₽
Как переехать без потери трафика.
Детальная смета: «корпоративный сайт + блог»
Разбивка по часам
БлокЧасыDiscovery и ТЗ40–80 чАрхитектура Strapi (типы/связи/workflow)40–80 чBackend Strapi (эндпоинты, роли, плагины)100–160 чДизайн (концепт + макеты 12–15 шаблонов)100–180 чВерстка/фронтенд (Next.js, SSG/SSR, формы, поиск)120–200 чSEO‑слой (схемы, sitemap, редиректы)20–38 чИнтеграции (CRM/почта, аналитика)30–70 чИнфраструктура (S3/CDN, CI/CD, мониторинг)30–50 чТестирование и приёмка (unit/e2e, UAT)50–80 чОбучение редакторов12–22 чИтого542–960 ч
Умножьте на blended‑ставку команды — получите реальный бюджет в рамках вилок выше.
Доли в смете (типично)
- Аналитика и архитектура — 10–20%
- Дизайн — 20–30%
- Верстка/фронтенд — 25–35%
- Backend (Strapi) — 25–35%
- Интеграции — 10–25%
- Тестирование/запуск/обучение — 10–15%
Подводные камни и как их обойти
Непродуманная модель контента
Симптомы: дубли, тяжёлые правки, боль при миграции.
Что делать: 2–3 часа совместного контент‑моделирования до дизайна; компоненты вместо копипаста; миграции как код. Базовые этапы разработки — здесь.
Недооценка интеграций
Симптомы: «просто возьмём из CRM» превращается в месяц работы.
Что делать: прототип «конец‑в‑конец» до финальной сметы; заранее договориться о доработках API у партнёров.
Headless и SEO
Симптомы: клиентский рендер — поисковику нечего индексировать.
Что делать: SSR/SSG, метаполя в модели, карта редиректов, микроразметка. Почему сроки важны для SEO — тут.
Роли и безопасность
Симптомы: редактор может удалить прод‑данные, нет аудита.
Что делать: минимально необходимые права (RBAC), предпросмотр, черновики, бэкапы.
Дизайн без правил адаптивности
Симптомы: красиво на desktop — боль на мобилке.
Что делать: прописать гайд адаптации между брейкпоинтами, флюидную типографику.
Тяжёлые медиа и шрифты
Симптомы: плохие метрики, высокий TTFB/LCP.
Что делать: AVIF/WebP, сабсеты шрифтов, preconnect/preload критичных ресурсов, CDN.
Верстка в отрыве от Strapi
Симптомы: компоненты не совпадают с моделью контента.
Что делать: «данные‑первые»: верстаем на моках, согласованных со схемой Strapi.
Расфокус в ролях команды
Что делать: зафиксировать зоны ответственности на берегу. Кратко об этом.
Как оптимизировать бюджет без потери качества
- Делите проект на волны: MVP сейчас — ядро шаблонов и 1 интеграция, хотелки — этапом 2
- Ограничивайте число уникальных шаблонов и растите библиотеку компонентов
- Используйте готовые UI‑киты: иллюстрации — точечно по ключевым экранам
- SSG/ISR там, где можно — меньше требований к инфраструктуре
Что нужно от вас для точной сметы за 1–2 дня
Чтобы дать конкретные цифры, а не «от 100 тысяч до бесконечности», нам нужно:
- Цели и KPI — трафик, лиды, время публикации
- Список разделов и 2–3 примера ключевых страниц
- Перечень интеграций и доступ к тестовым API
- SEO‑требования — структура URL, редиректы, микроразметка
- Роли и права редакции, рабочий процесс
- Ожидаемые нагрузки — трафик, гео, доля мобайла, объём медиаконтента
Итог
Strapi в 2026 — про гибкость и скорость развития продукта. Бюджет определяют три вещи: продуманная контент‑модель, качественный дизайн с адаптивом для desktop/tablet/mobile и аккуратная верстка с SSR‑слоем.
Если контролировать число шаблонов, сразу строить компонентную библиотеку и проверять интеграции прототипом — проект уложится и по срокам, и по деньгам.
По теме:
Расскажите о задаче — ответим честно: что нужно сделать, сколько стоит и когда будет готово.
Отправить заявку →