Техническая разработка сайтов: что делается «под капотом», сколько стоит и как проверить подрядчика
Из чего складывается техническая часть сайта: код, админка, скорость, безопасность, интеграции. Цены от 45 000 ₽, сроки от 14 дней и чек-лист проверки.
Содержание
- Что такое техническая разработка сайта и чем она отличается от дизайна
- Из каких технических работ складывается сайт
- Админка и интеграции: что нужно, чтобы не звать программиста за каждой правкой
- Скорость, безопасность и техническое SEO: что проверять
- Сколько стоит техническая разработка и от чего зависит цена
- Ошибки и подводные камни при заказе технической части
- Как я веду техническую разработку: этапы и кейсы
- Как выбрать подрядчика и что обсудить до старта
- Частые вопросы
Техническая разработка сайта — это всё, что не видно на макете: код, админка, формы и интеграции с Telegram и почтой, скорость загрузки, безопасность и техническое SEO. Для сайта компании она стоит от 45 000 ₽ и занимает от 14 рабочих дней, точная цена зависит от числа разделов и интеграций. Чтобы не переплатить, зафиксируйте до старта список технических работ и критерий приёмки по каждому пункту: что именно должно открываться, отправляться и сохраняться, чтобы работа считалась сданной.
Ниже разберу, из чего эта часть состоит, где скрыты лишние траты, как за 10 минут проверить результат и что обсудить с подрядчиком до договора. Пишу как человек, который запустил больше 40 проектов: от лендингов для салонов и барбершопов до магазинов, CRM и сервисов на нейросетях.
Что такое техническая разработка сайта и чем она отличается от дизайна
Самое простое разделение: дизайн отвечает за то, как сайт выглядит, а техническая часть за то, как он работает. Быстро ли открывается на телефоне, доходит ли заявка до вас, можно ли поменять цену без звонка программисту, не ломается ли страница после обновления.
Красивый макет сам по себе ничего не делает. Чтобы он стал сайтом, нужны:
- вёрстка: превращение макета в страницы, которые открываются в браузере;
- серверная логика: то, что обрабатывает формы, хранит данные, считает и отправляет;
- админка: раздел, где вы сами меняете содержимое;
- формы и интеграции: заявки в Telegram, на почту, в CRM или таблицу;
- хостинг и домен: где сайт живёт и по какому адресу открывается;
- аналитика: Яндекс Метрика и цели, чтобы видеть, откуда приходят заявки.
Кому нужна именно техническая часть
Обычно приходят в трёх ситуациях:
- дизайн или макет уже есть, а сайта, который по нему работает, нет;
- нужен функционал сверх шаблона: расчёт стоимости, онлайн-запись, личный кабинет;
- конструктор упёрся в ограничения: нельзя подключить нужную интеграцию, сайт тормозит, каждая правка превращается в возню с блоками.
Если у вас простая визитка на один экран, глубокая техническая часть не нужна. Хватит лендинга с формой и Метрикой. Если же сайт должен что-то считать, хранить и обновляться, начинается именно техническая работа.
Из каких технических работ складывается сайт
Ниже типовая цепочка для сайта компании. Названия этапов у подрядчиков разные, суть одна.
| Этап | Что делается | Что должно быть на выходе |
|---|---|---|
| Структура и прототип | Список страниц, блоки, логика переходов, расположение форм | Схема сайта, согласованная до вёрстки |
| Вёрстка | Макет превращается в рабочие страницы | Страницы совпадают с макетом в разных браузерах |
| Адаптив | Корректное отображение на телефоне и планшете | Ничего не уезжает, кнопки нажимаются, текст читается |
| Программирование | Формы, фильтры, расчёты, обработка данных | Функции работают на реальных данных |
| Админка | Разделы для правки цен, работ, акций, контактов | Вы меняете контент без программиста |
| Интеграции | Telegram, почта, CRM, таблицы, запись | Заявка доходит туда, где её увидит команда |
| Тестирование | Проверка форм, устройств, скорости, ошибок | Список проверок с отметками |
| Запуск | Домен, хостинг, HTTPS, Метрика | Сайт открывается по вашему адресу, состав передаваемых доступов зафиксирован заранее |
Что входит в базу любого моего сайта
Есть минимум, который я не вынимаю из проекта и не продаю отдельно:
- адаптив под телефон;
- подключение Яндекс Метрики;
- отправка заявок с форм в Telegram и на почту;
- защита формы от спама.
Последний пункт многие недооценивают. Без защиты форма через пару недель начинает собирать рекламные сообщения от ботов, и среди них теряются живые заявки. Это вопрос не красоты, а того, увидите ли вы клиента.
Что считается отдельно
Дороже и дольше становится там, где появляется нестандартная логика:
- расчёт стоимости по параметрам клиента;
- конфигураторы с пересчётом цены;
- личные кабинеты;
- несколько языков;
- онлайн-запись с выбором мастера, свободного времени и расписанием.
Про запись скажу отдельно, потому что здесь чаще всего путаница. Простая запись входит в сайт компании от 45 000 ₽: клиент выбирает услугу, оставляет желаемую дату и контакты, заявка приходит вам в Telegram. А вот если нужно показывать свободные окна по каждому мастеру, учитывать длительность услуг и перерывы, это уже расписание, и оцениваю я его после разбора задачи. Всё это решаемо, но каждый такой пункт нужно считать отдельно, а не прятать в общую цену «сайта».
Подробнее о том, из каких стадий состоит весь проект от задачи до запуска, я писал в статье «Разработка проекта сайта: от задачи до запуска».
Админка и интеграции: что нужно, чтобы не звать программиста за каждой правкой
Админка нужна не всем, но если цены, работы, товары или акции меняются чаще раза в месяц, без неё вы будете платить за каждую правку или ждать, пока подрядчик освободится. Поэтому, когда на сайте часто что-то обновляется, я делаю для этого админку.
Что вы меняете сами
- Прайс: цены и состав услуг.
- Портфолио: новые работы, фото, описания.
- Акции: включить, выключить, поменять срок.
- Тексты: описания услуг, ответы на вопросы.
- Контакты: телефон, адрес, график.
Пример из практики: у студии красоты «ПЛЕН» акции выводятся на сайт из админки. Администратор включает новую акцию сам, а заявки на скидку и обратный звонок приходят в Telegram. У строительной компании «ИнвестСтрой» админка нужна для пополнения объектов: сдан новый дом, добавили карточку в портфолио, и это не отдельная задача для разработчика.
Типовые интеграции
Чаще всего заказывают такой набор:
- заявки в Telegram и на почту;
- передача заявок в CRM или таблицу;
- онлайн-запись;
- уведомления команде о новой заявке или оплате.
Совет: не требуйте интеграций «на вырост». Подключайте то, чем будете пользоваться в ближайшие месяцы. Остальное добавляется позже, если архитектура сайта нормальная.
Если вам нужен сайт, где можно без программиста менять цены и работы, разбор того, что обычно входит в такой заказ, есть в статье про разработку сайта под ключ.
Скорость, безопасность и техническое SEO: что проверять
Эту часть заказчик обычно не видит, поэтому на ней чаще всего экономят. Хорошая новость: основные вещи проверяются самостоятельно и бесплатно.
Какая скорость считается нормальной
Ориентиры ниже общие, по порогам Google, а не обещание по конкретному проекту. Реальные цифры зависят от количества картинок, виджетов и сторонних скриптов, и их стоит обсудить до старта.
- Оценка PageSpeed Insights для мобильной версии: 90 и выше считается хорошей, 50 до 89 средней, ниже 50 плохой. Для небольшого сайта компании без тяжёлых виджетов разумная цель начинается примерно от 70.
- LCP (время появления основного блока страницы): до 2,5 секунды хорошо, от 2,5 до 4 секунд терпимо, дольше 4 секунд плохо.
- Вес главной страницы: по рынку обычно держат в пределах 2 до 3 МБ. Если одна фотография весит 5 МБ, проблема понятна без всяких тестов.
Если сторонний чат или виджет записи тянет оценку вниз, это нормально, но об этом нужно сказать заранее, а не после сдачи.
Чек-лист технической готовности
- Заголовки и метатеги. У каждой страницы свой title и description, один заголовок H1, логичная структура подзаголовков.
- Sitemap и robots. Карта сайта и файл с правилами для поисковых роботов: что индексировать, что закрыть.
- Микроразметка. Помогает поисковикам понять, где адрес, часы работы, цены и вопросы-ответы.
- HTTPS. Сертификат подключён, сайт открывается без предупреждений браузера, версия без https перенаправляет на защищённую.
- Адаптив. Проверка на реальных телефонах, а не только в окне браузера с уменьшенной шириной.
Безопасность
Для сайта небольшой компании «безопасность» сводится к нескольким приземлённым вещам:
- защита форм от спама и автоматических отправок;
- права доступа в админке: у сотрудника, который меняет акции, не должно быть доступа ко всему;
- резервные копии: сайт и база сохраняются по расписанию, и вы знаете, как восстановиться;
- обновления: если сайт на готовой системе с плагинами, их нужно периодически обновлять, иначе дыры накапливаются.
Как проверить самому за 10 минут
- PageSpeed Insights. Вставьте адрес сайта и посмотрите результат для мобильной версии. Смотрите не на красивую цифру, а на конкретные замечания: тяжёлые картинки, лишние скрипты.
- Яндекс Вебмастер. Добавьте сайт и проверьте, нет ли ошибок индексации, видит ли робот sitemap, доступны ли страницы.
- Просмотр с телефона. Откройте сайт на своём телефоне, а лучше на двух. Пролистайте все страницы, нажмите на каждую кнопку, откройте меню.
- Тест заявки. Отправьте форму сами. Проверьте, дошло ли сообщение в Telegram и на почту и как оно выглядит.
Если на любом шаге что-то не работает, это повод вернуться к подрядчику до подписания акта, а не после.
Пример приёмочного списка
Чтобы слово «готово» не зависело от настроения, оформите приёмку таблицей. Вот шесть пунктов, которые я бы включил в любой сайт компании. Пороги подставьте свои и согласуйте до начала работ.
| Что проверяем | Критерий «принято» |
|---|---|
| Заявка с формы | Тестовая отправка приходит и в Telegram, и на почту в течение минуты, с именем, телефоном и текстом |
| Защита от спама | Защита включена, пустая и заведомо некорректная отправка отклоняется, подрядчик объяснил, как она устроена |
| Телефон | Все страницы открыты на двух реальных телефонах (Android и iPhone): нет горизонтальной прокрутки, кнопки и меню нажимаются |
| Скорость | Главная в PageSpeed на мобильном не ниже согласованного порога (например, 70), LCP до 4 секунд, нет критичных замечаний про вес картинок |
| Админка | Вы сами меняете цену, добавляете работу и включаете акцию, и всё это видно на сайте без обращения к разработчику |
| Технические основы | HTTPS без предупреждений, открываются sitemap.xml и robots.txt, у каждой страницы свой title и description и один H1, Метрика видит визит и отправку формы |
Такой список занимает полчаса на проверку и снимает большую часть споров на финише.
Сколько стоит техническая разработка и от чего зависит цена
Мои стартовые ориентиры по типам сайтов:
| Тип сайта | Цена | Срок | Что в основе |
|---|---|---|---|
| Лендинг | от 25 000 ₽ | от 7 рабочих дней | Структура и тексты под услугу, адаптив, форма заявки в Telegram и на почту, Метрика |
| Сайт компании | от 45 000 ₽ | от 14 рабочих дней | Несколько разделов, своя админка, простая запись или заявки в Telegram, базовая SEO-настройка |
| Интернет-магазин | от 90 000 ₽ | от 21 рабочего дня | Каталог с фильтрами, корзина, заказ с уведомлением в Telegram, админка товаров и заказов |
Это стартовые цены, и по рынку это уровень опытного разработчика, а не студии. Я отвечаю за проект лично и веду его вместе с командой. Минимальная стоимость проекта 25 000 ₽. Сроки «от» относятся к типовому объёму, а точную цену и срок я называю после короткого разбора задачи, до начала работ.
Что двигает цену
- Число страниц и разделов. Пять страниц и тридцать страниц с услугами по районам это разный объём работы.
- Админка. Простая правка цен дешевле, чем сложная структура с ролями и фильтрами.
- Интеграции. Заявки в Telegram это быстро, связка с CRM и таблицей уже заметно дольше.
- Нестандартная логика. Расчёты, конфигураторы, запись с расписанием. Здесь цена зависит от количества правил, а не страниц.
Для сравнения с рынком: у большинства подрядчиков сайт компании с админкой обычно оценивается в широком диапазоне, от десятков тысяч рублей у фрилансеров до нескольких сотен тысяч у студий. Сравнивать нужно не итоговую цифру, а список работ внутри неё. О том, как сопоставлять предложения, есть отдельная статья про услуги разработки сайтов.
Ошибки и подводные камни при заказе технической части
Нет технического задания или списка результатов
Самая частая причина затянутых проектов. Если нигде не записано, что считается готовым, каждая правка становится спором: «это входило» или «это дополнительно». Решение простое: до старта получить список страниц, функций и интеграций и понять, как вы будете принимать каждый пункт (пример списка выше).
Сайт на закрытой платформе подрядчика
Иногда сайт живёт в системе, которую подрядчик не передаёт. Пока вы платите, всё работает. Захотели уйти, и выясняется, что код вам не принадлежит, доступов нет, а переезд означает разработку заново. Спросите прямо и до договора: что именно вы получите на руки, кто владелец домена и хостинга, какие доступы будут переданы. Состав передачи должен быть записан.
Нет админки
Сайт без админки дёшев на старте, но каждое изменение цены превращается в платную задачу. Если цены и акции у вас меняются, считайте не стоимость запуска, а стоимость владения за год.
Не проверили формы и заявки до запуска
Классика: сайт запущен, реклама идёт, а форма три недели отправляет заявки на неверный адрес. Тест отправки на этапе приёмки занимает пять минут и экономит месяц рекламного бюджета.
Выбор только по цене
Дешёвый сайт часто оказывается без адаптива, аналитики и защиты форм. Эти пункты потом докупаются отдельно, и итог выходит дороже изначально нормального предложения. Сравнивайте не цену, а состав.
Как я веду техническую разработку: этапы и кейсы
Я отвечаю за проект лично и веду его вместе с командой. Порядок такой: разбор задачи, фиксация объёма и цены, разработка, тестирование, запуск и доработки. Работаю удалённо по всей России, так что география значения не имеет.
Теперь о том, какие технические задачи приходилось решать на практике. Это лучше любых общих слов показывает, что такое «серверная логика».
Конфигуратор лодки «Арт-Марин»
Проблема: цена лодки зависит от комплектации и набора опций. Если считать вручную, менеджер тратит время на каждого посетителя, а покупатель не понимает, во что обойдётся его вариант.
Что сделали: интерактивный конфигуратор, где покупатель сам выбирает комплектацию и опции, а цена пересчитывается на сайте. Шаблонный сайт с каталогом так не умеет: здесь нужна отдельная логика расчёта, а не просто красивые страницы.
Медиапроект для медиафорума
Проблема: на сайте корпоративных авторов нужно было провести голосование за приз зрительских симпатий по QR-коду. Если ничего не делать, один человек может проголосовать много раз и исказить итог.
Что сделали: реализовали голосование по QR-коду с защитой от повторных голосов. Это типичная невидимая часть работы: на макете её нет, но без неё результатам нельзя доверять.
Магазин чая BAIHAO
Проблема: чай продаётся на вес, и цена зависит от выбранной граммовки, плюс действует скидка.
Что сделали: выбор граммовки с автоматическим пересчётом цены и скидкой, плюс корзина, личный кабинет и админка.
«ИнвестСтрой»
Проблема: строительная компания регулярно сдаёт объекты, и каждый новый кейс не должен превращаться в заказ разработчику.
Что сделали: сайт с этапами работ и портфолио объектов, админку для их пополнения и заявки сразу в почту и Telegram, чтобы менеджер увидел обращение в любом случае.
Что получаете на выходе
- рабочий сайт по вашему адресу;
- админку для самостоятельных правок, если она входит в проект;
- передачу доступов по договорённости: состав фиксируем до старта, чтобы потом не было сюрпризов.
Как выбрать подрядчика и что обсудить до старта
Вопросы, которые стоит задать
- Что именно входит в цену, а что оплачивается отдельно?
- Кому принадлежит код и что я получу после запуска?
- Кто отвечает за хостинг и домен, на чьё имя они оформлены?
- Как устроены доработки: по часам, по задачам, по подписке?
- Что будет, если после запуска найдутся ошибки?
Хороший подрядчик отвечает на эти вопросы спокойно и конкретно. Уклончивые ответы про «всё включено» без списка работ повод насторожиться.
Что подготовить заранее
- цель сайта: заявки, запись, продажи, имидж;
- два-три примера сайтов, которые нравятся, и что именно в них нравится;
- список услуг и цен;
- материалы: фото, логотип, тексты, если они есть;
- перечень сервисов, с которыми нужна связка: CRM, таблица, мессенджер.
Если части материалов нет, это не стоп: структуру и тексты можно сделать в рамках проекта. Но чем яснее вы опишете задачу, тем точнее будет цена.
Следующий шаг
Опишите задачу в заявке: что сайт должен уметь, нужна ли админка, запись, расчёты, интеграции. После короткого разбора я назову цену и срок, до начала работ.
Частые вопросы
Что входит в техническую разработку сайта?
Вёрстка, адаптив под телефон, программирование форм и логики, админка, интеграции с Telegram, почтой и другими сервисами, подключение аналитики, настройка хостинга и домена, тестирование и запуск. В моих проектах в базу всегда входят адаптив, Яндекс Метрика, заявки в Telegram и на почту и защита формы от спама.
Сколько стоит техническая разработка сайта компании?
Сайт компании у меня стоит от 45 000 ₽. В эту цену входят несколько разделов, своя админка, простая запись или заявки в Telegram и базовая SEO-настройка. Если нужны выбор мастера, свободное время и расписание, это оценивается отдельно после разбора. Итоговая цена зависит от числа страниц, интеграций и нестандартной логики.
Сколько времени занимает техническая разработка сайта?
Сайт компании делается от 14 рабочих дней, лендинг от 7, интернет-магазин от 21. Это сроки для типового объёма. Если в проекте есть конфигуратор, сложные расчёты или много интеграций, срок увеличивается, и точный я называю после разбора задачи, до начала работ.
Нужна ли админка и можно ли без неё?
Можно, если сайт почти не меняется: например, визитка с неизменным списком услуг. Если цены, работы, товары или акции обновляются чаще раза в месяц, админка окупается быстро: вы перестаёте платить и ждать из-за каждой правки.
Чем техническая разработка отличается от дизайна сайта?
Дизайн отвечает за внешний вид: макет, цвета, шрифты, расположение блоков. Техническая разработка делает так, чтобы этот макет работал: открывался на телефоне, принимал заявки, считал цену, давал менять контент и не тормозил. Это разные работы, и часто их делают разные люди.
Кому принадлежит код и доступы после запуска сайта?
Это нужно зафиксировать до старта, потому что у разных подрядчиков практика разная. Состав передачи (какие доступы вы получаете и на чьё имя оформлены домен и хостинг) обсуждается заранее и записывается в договорённостях. Если подрядчик не готов ответить на этот вопрос письменно до начала работ, это повод поискать другого.