Какие цели у создания сайта?
Цели создания и разработки сайта сводятся к 4 задачам бизнеса: продажи и заявки, доверие к компании, ответы на типовые вопросы пользователей без участия менеджера и привлечение клиентов из поиска. Цель формулируют через целевые действия посетителя: не «рассказать о компании», а «получать заявки на бухгалтерское обслуживание из своего города». От цели зависят все следующие этапы: состав страниц, формы, тексты и аналитика в Яндекс Метрике, по которой потом видно, работает ли сайт. Создание сайта без измеримой цели заканчивается набором красивых страниц, которые никуда не ведут.
Что сделать перед созданием сайта?
Перед созданием сайта подготовьте 6 вещей о своём бизнесе, тогда проект пойдёт без простоев:
- цель и бюджет, хотя бы в виде вилки;
- список услуг или товаров с ценами и условиями;
- сайты конкурентов и примеры, которые нравятся, с пояснением, чем именно;
- логотип, фирменные цвета и шрифты, если они есть;
- контент: фото, документы, сертификаты, отзывы клиентов;
- доступы к домену, хостингу и счётчикам, если сайт уже есть.
Обратите внимание на роли: заранее решите, кто со стороны компании принимает решение на каждом этапе. По опыту, сроки чаще сдвигаются из-за ожидания ответов, чем из-за разработки.
Этапы разработки сайта по порядку: 7 шагов
Мы работаем по 7 этапам. Правильный порядок создания сайта одинаков для любого проекта: каждый следующий этап опирается на принятый результат предыдущего, поэтому создание сайта не превращается в бесконечные переделки. Краткое описание каждого шага:
- 01Бриф и анализ ниши
Изучаем бизнес, целевую аудиторию и конкурентов в топе Яндекса, собираем запросы, по которым ищут услугу. На выходе задачи проекта, список будущих страниц и смета, которую фиксируем в договоре.
- 02Структура и прототип
Раскладываем запросы по разделам и рисуем схемы страниц без цвета и картинок: где какой блок, кнопка и форма, какой путь пользователя ведёт к заявке. Заказчик утверждает логику до начала дизайна.
- 03Дизайн
По утверждённому прототипу рисуем макеты для компьютера и телефона: типографика, цвета, фото, иконки, состояния кнопок и форм. Правки собираем по экранам, а не по всему сайту сразу.
- 04Вёрстка и адаптив
Переводим макеты в код, подключаем систему управления (CMS) или пишем сайт на чистом HTML, CSS и JavaScript, настраиваем формы, интеграции и адаптив под экраны устройств.
- 05Тексты и SEO-разметка
Пишем тексты и готовим контент по брифу под поисковые запросы, заполняем title, description и заголовки, добавляем микроразметку Schema.org.
- 06Тестирование
Проверяем скорость, заявки, аналитику, доступность и разметку на реальных устройствах и в 5 браузерах, исправляем найденное до запуска.
- 07Запуск и передача
Подключаем домен и хостинг, выпускаем HTTPS-сертификат, создаём почту на домене, включаем резервные копии, открываем сайт для индексации и передаём доступы одним документом.
Что входит в анализ перед разработкой сайта?
Анализ перед разработкой отвечает на 3 вопроса: кто клиент, как он ищет услугу и что ему уже предлагают конкуренты. Запросы ниши раскладываем по будущим страницам, а у сайтов конкурентов из топа смотрим, какие разделы, цены и аргументы помогают им продавать. Обращаем внимание на портрет целевой аудитории: город, устройство, с которого заходят, и то, что мешает оставить заявку. Результат анализа: список страниц под реальный спрос, требования к функциям и ориентир по объёму работ.
Как создать проект сайта?
Проект сайта собирают из 5 частей, по которым его можно построить и проверить: задачи и описание аудитории, структура разделов, прототипы ключевых страниц, технические и функциональные требования, смета со сроками. Создать проект нужно после брифа и анализа: в нём видно, какие страницы будут на сайте, и только после этого начинается создание дизайна. Требования удобно оформить в техническое задание на разработку сайта, а схемы страниц в прототип. Чем подробнее проект веб-сайта, тем меньше споров при приёмке: заказчик и разработчик сверяются с одним документом.
План разработки сайта: что согласует заказчик
План разработки сайта удобно держать в таблице: 7 этапов, результат каждого и решение, которое заказчик принимает перед переходом дальше.
| Этап | Результат | Что согласует заказчик |
|---|---|---|
| Бриф и анализ ниши | Задачи, список страниц, смета | Бриф, смету и договор |
| Структура и прототип | Карта разделов и схемы страниц | Состав страниц и блоков |
| Дизайн | Макеты для компьютера и телефона | Макеты по экранам |
| Вёрстка и адаптив | Рабочая версия на тестовом адресе | Вид страниц и работу форм |
| Тексты и SEO-разметка | Тексты, title, description, разметка | Тексты, цены, факты о компании |
| Тестирование | Проверки и исправления | Результаты проверок |
| Запуск и передача | Сайт на домене и документ с доступами | Приёмку работ |
Длительность этапов зависит от объёма и скорости согласований, общий срок фиксируем в договоре.
Сколько времени занимает разработка сайта?
Время разработки сайта зависит от типа проекта: от 2 недель на лендинг, от 3 недель на редизайн, от 4 недель на корпоративный сайт, Telegram-бот или веб-сервис и от 8 недель на интернет-магазин. Срок растёт с объёмом и функциями: ориентиры по каждому дополнению собраны в таблице ниже, а итог под ваш проект показывает калькулятор стоимости. Сократить срок проще всего ресурсами заказчика: материалы до старта и быстрые ответы на согласованиях.
Что добавляет время к разработке
Ориентиры из нашего калькулятора по 10 дополнениям: на сколько недель удлиняется проект и на каком этапе это происходит.
| Что добавляется | Какой этап удлиняется | Плюс к сроку |
|---|---|---|
| 6-15 страниц | Прототип, дизайн, вёрстка | 1 неделя |
| 16-50 страниц | Прототип, дизайн, вёрстка | 3 недели |
| Больше 50 страниц | Все этапы | 6 недель |
| Тексты от студии | Тексты и SEO-разметка | 1 неделя |
| Тексты и фото | Тексты и SEO-разметка | 2 недели |
| Логотип и фирменный стиль | Дизайн | 1 неделя |
| Интеграция с CRM-системой | Вёрстка и программирование | 1 неделя |
| Онлайн-оплата | Вёрстка и программирование | 1 неделя |
| Личный кабинет | Вёрстка и программирование | 2 недели |
| Каталог и обмен с 1С | Вёрстка и программирование | 2 недели |
Ориентиры для расчёта, точный календарный план составляем после брифа.
Что входит в разработку сайта?
В разработку сайта входят 10 составляющих: анализ, структура, прототип, дизайн, вёрстка, программирование или настройка системы управления, тексты, SEO-разметка, тестирование и запуск. В запуск у нас входят и вещи, о которых часто забывают: домен на имя заказчика, хостинг, HTTPS, почта на домене, резервные копии и документ со всеми доступами. Сопровождение ресурса в течение 30 дней после сдачи бесплатное: правки, консультации, мелкие доработки. Создание фирменного стиля, интеграции с CRM и 1С, онлайн-оплату и личный кабинет оцениваем отдельно.
Чем отличаются этапы для лендинга, корпоративного сайта и магазина
Набор этапов у 4 типов проектов одинаковый, но вес этапов разный:
| Тип проекта | Где больше всего работы | Что важно согласовать заранее |
|---|---|---|
| Лендинг | Прототип и тексты одной страницы, оффер, форма заявки | Главное предложение и действие, которого ждём от посетителя |
| Корпоративный сайт | Структура услуг, тексты для каждой страницы, SEO-разметка | Список направлений и цены |
| Интернет-магазин | Структура каталога, фильтры, карточка товара, оплата и доставка, обмен с 1С | Источник цен и остатков, способы доставки |
| Веб-сервис или бот | Техническое задание, роли пользователей, логика, интеграции | Сценарии работы и бизнес-задачи |
Технология создания сайта: на чём делают сайты
Технология разработки сайта складывается из 3 слоёв: фронтенд (HTML, CSS и JavaScript в браузере), бэкенд (логика на сервере, база данных пользователей и заявок, система управления) и инфраструктура (домен, хостинг, HTTPS, резервные копии), на которой ресурс работает. Платформу и техническую часть подбираем под задачу: под лендинг и визитку берём статический HTML без CMS, под корпоративный сайт и магазин WordPress или 1С-Битрикс, под личные кабинеты, сервисы и боты Python и Node.js, а каталог Rilis собран на Astro. Подробнее в статье что такое веб-разработка.
Процесс создания сайта: кто участвует и как идут согласования
В процессе создания сайта участвуют 2 стороны: заказчик отвечает за задачи бизнеса, контент и решения, исполнитель за проектирование, дизайн, код и запуск. В больших студиях между ними стоит менеджер, у нас проекты ведёт лично основатель, Артём Салыев: отдела продаж нет, и на связи с вами тот, кто делает работу. Каждый этап заканчивается согласованием, и следующий начинается только после принятия предыдущего, поэтому правки не превращаются в переделки, а информацию о ходе работ заказчик видит на каждом шаге.
Как тестируют сайт перед запуском?
Проверка перед запуском у нас состоит из 5 групп тестов по стандартам, общим для любого проекта:
- скорость по Core Web Vitals: LCP до 2,5 с, INP до 200 мс, CLS до 0,1;
- доступность: контрастность текста, альтернативный текст у изображений, управление с клавиатуры;
- HTML без ошибок валидатора и микроразметка Schema.org;
- формы по 152-ФЗ: политика обработки персональных данных и согласие;
- адаптивная вёрстка на реальных устройствах и в 5 браузерах.
После технической проверки проходим сайт глазами пользователей и поисковых роботов: каждая форма отправляет заявку, цели Метрики срабатывают, страница 404 настроена, robots.txt и sitemap.xml доступны поисковикам. О том, как проверить и ускорить загрузку сайта, рассказываем в отдельной статье.
Пример создания сайта: корпоративный сайт на 10 страниц
Пример разработки сайта: компании нужен корпоративный сайт на 10 страниц с текстами от студии. Ориентир по калькулятору 310 000 ₽ и 6 недель: база 250 000 ₽ и 4 недели, плюс 40 000 ₽ и 1 неделя за объём 6-15 страниц, плюс 20 000 ₽ и 1 неделя за тексты. Внутри этих 6 недель идут те же 7 этапов: бриф и анализ конкурентов региона, структура, в которой будут главная, 6 страниц услуг, цены, о компании и контакты, затем прототипы, дизайн, вёрстка на выбранной платформе, тексты, тестирование и запуск на домене компании. Живые корпоративные сайты, например «Бухуслуги33» во Владимире, можно открыть в портфолио.
Как проверить исполнителя и как устроена оплата?
Проверку исполнителя перед подписанием договора сводите к 3 вещам: портфолио, отзывы и сам договор. Сайты из портфолио должны открываться и работать: посмотрите скорость, вид на телефоне и отправку заявок. Контакты 2-3 заказчиков с похожими задачами мы даём по запросу, так информацию о работе вы получите из первых рук, а не из подборки на сайте. Этапы оплаты договорные: смета, сроки и порядок оплаты фиксируются в договоре до начала работ, и смета не растёт, пока заказчик сам не расширит задачу.
Частые вопросы
Можно ли пропустить прототип и сразу делать дизайн?
Пропустить прототип можно только на одностраничном сайте, где логика очевидна. На сайте от 5 страниц без прототипа структуру обсуждают уже на макетах, и каждое изменение превращается в перерисовку дизайна. Схему без цвета и картинок править быстрее, поэтому прототип согласуют первым, а дизайн рисуют поверх утверждённой логики. В итоге решение по структуре принимается один раз, а не на каждом экране.
Можно ли изменить структуру после согласования дизайна?
Можно, но изменение после согласования возвращает проект на 1-2 этапа назад: новая страница тянет за собой прототип, макет, вёрстку и тексты. Поэтому структуру утверждают до дизайна, а после согласования меняют только по необходимости. Если задача выросла, например добавился каталог или личный кабинет, новый объём оцениваем отдельно и до начала работ согласуем с заказчиком, как изменятся смета и сроки.
Кто готовит тексты и фото для сайта?
Тексты мы пишем сами по брифу с учётом поисковых запросов, а с фото три варианта: ваши, стоковые или съёмка, которую помогаем организовать. Тексты от студии добавляют к сроку 1 неделю, тексты и фото 2 недели. От заказчика нужны факты: цены, условия, документы, примеры работ, без них текст получается общим. Как подготовить материалы, разобрано в статье контент для сайта.
