Вы хотите «нормальный сайт, который приносит заявки», а не очередную красивую визитку? Тогда давайте по-взрослому: разложим основные этапы разработки сайта по полочкам, добавим немного закулисных секретов и проверенные лайфхаки из практики mädseven. Материал подойдёт руководителям, маркетологам и всем, кто ищет исполнителя на разработку сайтов и хочет понимать, что будет происходить на каждом шаге.

Коротко: что вы получите на выходе

• Понятный процесс из 10 шагов без «магии в бэклогах».
• Вменяемые сроки, прозрачные артефакты на каждом этапе.
• Сайт, который не стыдно показывать и удобно поддерживать.
• Два месяца техподдержки — чтобы запуск прошёл мягко.

Этап 1. Техническое задание (ТЗ): кладём фундамент

• Что делаем: интервью с вами, аудит текущих материалов, разбор целей (лиды/продажи), целевой аудитории и сценариев: «пришёл → понял → сравнил → оставил заявку/купил». Фиксируем KPI, структуру, требования к контенту, интеграции и ограничения.
• Что получаете: документ «Техническое задание» — не роман, а рабочая инструкция: карты пользовательских сценариев, карта сайта, требования по SEO-базе, чек-лист функционала, макеты-наброски ключевых экранов.
• Секрет mädseven: прежде чем рисовать, мы формулируем главную мысль сайта (big message) и 2–3 «ударных» сценария. Если big message не читается за 5 секунд на первом экране — переделываем.

Этап 2. Концепция дизайна (3 варианта)

• Что делаем: визуальный мудборд, палитра, шрифты, принципы сетки, референсы. На основе главной страницы (desktop) готовим три разных визуальных направления.
• Что получаете: три концепции главной: разные настроения и композиционные решения. Выбираем одну и при необходимости смешиваем удачные элементы.
• Секрет mädseven: сперва делаем ч/б «скелет» (композицию без отвлекающих цветов), затем включаем стиль. Так меньше соблазна «прикрыть смысл декоративностью».

Этап 3. Полный дизайн

• Что делаем: отрисовываем все страницы в desktop-версии, затем адаптивы (мобильный и планшет). Прорабатываем формы, состояния полей, модальные окна, системные страницы (включая страницу 404), поп-апы, микроинтеракции.
• Что получаете: согласованный комплект макетов + прототип кликабельных сценариев.
• Секрет mädseven: проводим «пятиминутный клик-тест» с 2–3 людьми, не знакомыми с проектом. Если навигацию «угадывают» без подсказок — идём дальше.

Этап 4. Вёрстка (frontend)

• Что делаем: семантическая HTML-вёрстка, аккуратный CSS, адаптив под популярные разрешения, оптимизация графики, lazy-loading, систематизация компонентов.
• Что получаете: живые страницы, которые быстро грузятся и выглядят одинаково прилично в современных браузерах.
• Секрет mädseven: БЭМ-нейминг, SVG-спрайты, «умные» шрифты (variable), изображения в современном формате. Lighthouse — целимся 90+ без шаманства.

Этап 5. Программирование (backend) и админка на Strapi

• Что делаем: настраиваем контентные типы в Strapi, роли и права, интеграции, API-эндпоинты. Подготавливаем удобные формы ввода контента — без «сломанной» разметки.
• Что получаете: понятную админку: страницы, карточки товаров/кейсов, блоги, формы, теги. Добавлять контент сможет любой обученный менеджер, а не только «тот самый разработчик».
• Секрет mädseven: сначала моделируем контент, потом кодим. Так не появляются «поля-загадки» и «параметры, о которых знает только Вася». Плюс — отдельные окружения для контента: Stage (пробуем) и Prod (живём).

Этап 6. Аналитика и цели

• Что делаем: подключаем счётчики (Яндекс.Метрика), настраиваем цели и события: отправка форм, клики по CTA, звонки, прокрутки, просмотр ключевых блоков, 404, скорость.
• Что получаете: дашборд, где видно, что работает и где «течёт». А главное — понятные рекомендации, что улучшать в первую очередь.
• Секрет mädseven: сквозные UTM-метки и единые правила именования кампаний. Потом не придётся угадывать, «какая реклама дала заявки, а какая — просто охваты».

Этап 7. Тестирование и исправления

• Что делаем: функциональные тесты, кроссбраузерное и кроссплатформенное тестирование, проверка форм, адаптивов, 404/301, микроразметки, валидаций, доступности (контраст, таб-навигация).
• Что получаете: закрытый чек-лист, регресс после фиксов и финальный билд.
• Секрет mädseven: «тест бабушки» — даём человеку вне проекта пройти ключевой сценарий. Если вопрос «а куда нажимать?» звучит чаще одного раза — возвращаемся к дизайну.

Этап 8. Контент (по запросу)

• Что делаем: наполняем сайт текстами, изображениями и видео. Правим заголовки H1–H6, мета-теги Title/Description, делаем перелинковку, прописываем alt-тексты, прикручиваем schema.org.
• Что получаете: сайт, который уже можно индексировать: без заглушек «lorem ipsum» и без пустых разделов.
• Секрет mädseven: заводим таблицу контента: «где лежит», «кто ответственный», «какой формат», «какой дедлайн». Звучит скучно, зато экономит недели жизни.

Этап 9. Публикация и индексация

• Что делаем: настраиваем домен/SSL, robots.txt, sitemap.xml, редиректы и каноникалы, подключаем веб-мастера (Yandex), отправляем на переобход, проверяем код ответов, делаем бэкап.
• Что получаете: корректный релиз без «битых» ссылок и потерь трафика.
• Секрет mädseven: на старте ограничиваем индексацию «черновых» разделов, чтобы в поиск не улетели страницы с тестовым контентом. Когда всё готово — аккуратно открываем.

Этап 10. Поддержка и развитие

• Что делаем: 2 месяца техобслуживания бесплатно: мониторим, чиним, улучшаем. По итогам — план развития: что оптимизировать по скорости, где усилить контент, что автоматизировать.
• Что получаете: сайт не «брошен в продакшн», а живёт и приносит пользу.
• Секрет mädseven: ведём журнал изменений и настраиваем алерты: если форма вдруг перестала отправляться — знаем раньше, чем нам напишет ваш клиент в 23:47.

Частые вопросы (и короткие ответы)

• Сколько концепций дизайна делаете? Три. Выбираем одну и допиливаем лучшее из остальных.
• Зачем отдельная страница 404? Потому что это тоже точка контакта. Хорошая 404 и возвращает человека в нужный раздел, и иногда даже продаёт.
• Почему Strapi? Удобно моделировать контент, быстро развивать проект, гибко настраивать роли и интеграции. И без боли переносить данные.
• Будет ли сайт «дружить» с SEO? Да. Мы закладываем SEO-базу с ТЗ: структура, семантика, мета-теги, скорость, микроразметка, перелинковка.

Мини-чек-лист заказчика (сохраните!)

1. Есть ли ТЗ с KPI и сценариями?
2. Показали ли 3 концепции главной (desktop) и объяснили логику?
3. Согласованы ли адаптивы (моб/планшет) и все системные страницы (включая 404)?
4. Прописаны ли события в аналитике (формы, клики, 404, прокрутки)?
5. Проверена ли скорость/доступность и закрыт ли чек-лист тестирования?
6. Настроены ли robots/sitemap/редиректы/каноникалы и веб-мастер?
7. Есть ли план развития на 3–6 месяцев и 2 месяца поддержки на старте?

Почему этот процесс работает

• Он закрывает и бизнес-цели (лиды/продажи), и задачи контента/SEO, и заботится о скорости/доступности.
• Он делает разработку сайтов предсказуемой: на каждом этапе вы видите результат и понимаете, за что платите.
• Он экономит время: меньше переделок, потому что решения проверяются на прототипах и в аналитике, а не «по ощущениям».

Немного юмора и серьёзный вывод

Сайт — это не ёлка, на которую вешают всё подряд: пара слайдеров, анимированный поп-ап «кошечка просит подписаться» и таймер «акция заканчивается через 3… 2… 1…». Это система коммуникации. Если она собрана по шагам, из понятных блоков, с внятной аналитикой — она работает. Хотите так же? Расскажите вашу задачу — подберём оптимальный путь и соберём сайт, который приносит заявки, а не головную боль. В mädseven мы любим проекты, где дизайн дружит с смыслом, а бэклог — с календарём.

Итог: основные этапы разработки сайта от mädseven

1. Техническое задание →
2. Концепция дизайна (3 варианта на desktop главной) →
3. Полный дизайн (desktop всех страниц + мобильные и планшетные версии, формы, 404) →
4. Вёрстка →
5. Программирование и админка на Strapi →
6. Аналитика и цели →
7. Тестирование и фиксы →
8. Наполнение контентом (по запросу) →
9. Публикация и индексация →
10. 2 месяца техподдержки бесплатно.

Если коротко, разработка сайтов — это не «нарисовать главную и загрузить на хостинг». Это последовательность решений, где каждый шаг влияет на деньги. Делайте шаги правильно — и сайт начинает окупаться быстрее, чем вы успеете сказать «где в админке поменять баннер».