Как создать сайт с нуля: пошаговая инструкция до запуска

Создание сайта начинается не с выбора цвета, шаблона или конструктора. Сначала нужно понять, какую задачу он должен решать, кто будет им пользоваться и какое действие посетитель должен совершить.

Для одного бизнеса достаточно посадочной страницы с понятным предложением и формой заявки. Другому потребуется многостраничный сайт с услугами, статьями и региональными страницами. Интернет-магазину понадобятся каталог, фильтры, оплата, доставка и интеграция с системой учёта.

Если выбрать формат и платформу до анализа задачи, сайт может получиться красивым, но неудобным для продвижения и работы с клиентами.

Ниже — последовательность, по которой можно пройти весь путь: от идеи и исследования спроса до публикации, подключения аналитики и первых улучшений.

Шаг 1. Определите задачу сайта

Формулировка «нам нужен современный сайт» не объясняет, какой результат требуется бизнесу.

Сайт может решать разные задачи:

принимать заявки;
продавать товары;
показывать выполненные проекты;
объяснять сложную услугу;
помогать выбрать продукт;
привлекать переходы из поиска;
собирать регистрации;
автоматизировать предварительный расчёт;
направлять пользователей в офис или магазин;
поддерживать действующих клиентов.

Лучше выбрать одну основную задачу и несколько вспомогательных.

Например:

Основная задача сайта — получать заявки на комплексное продвижение от владельцев малого и среднего бизнеса. Вспомогательные задачи — показать состав услуг, подтвердить опыт кейсами и ответить на вопросы перед обращением.

Такая формулировка уже влияет на структуру. На сайте потребуются страницы услуг, кейсы, описание процесса, ответы на вопросы и понятная форма связи.

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

Вайтиру — создание сайтов, SEO-продвижение и интернет-реклама для бизнеса. Обсудить проект.

Шаг 2. Изучите аудиторию

Сайт создаётся для людей, которые будут искать информацию, сравнивать предложения и принимать решение.

Перед разработкой нужно понять:

кто может стать клиентом;
какую проблему он решает;
что уже пробовал;
по каким признакам выбирает;
чего опасается;
какие вопросы задаёт перед покупкой;
кто принимает окончательное решение;
сколько времени занимает выбор;
с какого устройства чаще посещает сайт.

Источником информации могут быть разговоры с клиентами, обращения в мессенджерах, записи звонков, данные CRM, отзывы, запросы в поисковых системах и вопросы менеджерам.

Для сложной услуги полезно разделить аудиторию не только по возрасту или городу, но и по ситуации.

Например, владельцы бизнеса могут искать сайт по разным причинам:

компания только выходит в интернет;
старый сайт перестал приносить обращения;
запускается новое направление;
нужно подготовиться к рекламе;
требуется каталог или интернет-магазин;
бизнес хочет получать клиентов из поиска;
текущий подрядчик не может объяснить результат.

Для каждой ситуации нужны свои аргументы и следующий шаг.

Перед разработкой во Вайтиру можно провести базовый анализ бизнеса. Он помогает оценить спрос, конкурентов, стоимость привлечения клиента и каналы, под которые должен быть подготовлен сайт.

Шаг 3. Проверьте поисковый спрос

Поисковый спрос показывает, как люди формулируют потребность и какую информацию ожидают увидеть.

Не стоит собирать список фраз и сразу вставлять их в текст. Сначала запросы нужно разделить по смыслу.

Допустим, компания занимается ремонтом квартир. Пользователи могут искать:

стоимость ремонта квартиры;
ремонт квартиры под ключ;
дизайн-проект квартиры;
этапы ремонта;
сколько длится ремонт;
отзывы о строительной компании;
ремонт квартиры в конкретном городе.

Часть запросов требует страницы услуги. Для других подойдут статьи, калькулятор, кейс или страница с ценами.

После сбора запросов нужно открыть Google и Яндекс и посмотреть, какие страницы занимают верхние позиции. Поисковая выдача помогает определить намерение пользователя.

Если по запросу показываются преимущественно каталоги, одна посадочная страница может не соответствовать ожиданиям. Если в выдаче подробные инструкции, короткого рекламного текста будет недостаточно.

Правила выбора запросов мы подробно разобрали в статье «Как выбрать правильные ключевые слова для SEO».

Шаг 4. Изучите сайты конкурентов

Анализ конкурентов нужен, чтобы понять стандарт предложения в нише и найти вопросы, на которые другие сайты отвечают слабо.

Смотреть следует не только на дизайн. Полезно проверить:

какие услуги вынесены в меню;
как сформулированы заголовки;
есть ли цены;
как показан процесс работы;
какие доказательства используются;
насколько подробно оформлены кейсы;
что находится рядом с формой;
какие вопросы разобраны;
какие страницы получают трафик;
как сайт выглядит на телефоне;
насколько быстро можно найти контакты;
где предложение остаётся непонятным.

Не нужно копировать чужую структуру. У конкурента могут быть другая аудитория, экономика и модель продаж.

Результатом анализа должен стать список решений:

что пользователи ожидают увидеть;
какие сведения обязательны;
какие возражения остаются без ответа;
чем можно подтвердить собственное предложение;
какие страницы действительно нужны.

Шаг 5. Выберите тип сайта

Формат зависит от задачи, количества направлений и способа привлечения посетителей.

Лендинг

Одностраничный сайт подходит, когда компания продвигает одну услугу, продукт или конкретное предложение.

На одной странице можно последовательно показать:

проблему;
решение;
состав услуги;
процесс;
примеры;
условия;
ответы на вопросы;
форму заявки.

Лендинг удобен для рекламной кампании, но может оказаться тесным, если у бизнеса много услуг или нужно развивать SEO по разным темам.

Многостраничный сайт

Такой формат подходит компании с несколькими направлениями.

Отдельные страницы позволяют:

подробно раскрывать услуги;
продвигать разные поисковые запросы;
публиковать кейсы;
вести блог;
создавать страницы под города или аудитории, если они действительно различаются;
строить внутреннюю перелинковку.

При этом нельзя создавать десятки почти одинаковых страниц только ради ключевых фраз. Если у страниц один интент и одинаковое содержание, они могут конкурировать между собой.

Интернет-магазин

Интернет-магазину нужны дополнительные функции:

каталог;
категории;
карточки товаров;
фильтрация;
поиск;
корзина;
оформление заказа;
способы оплаты;
доставка;
уведомления;
учёт остатков;
интеграция с CRM или системой учёта.

О разработке такого проекта можно прочитать в материале «Интернет-магазин: как мы создаём сайты для онлайн-продаж».

Портфолио или сайт специалиста

Здесь основную роль играют проекты, специализация, процесс работы и способы связи.

Недостаточно загрузить несколько изображений. Нужно объяснить задачу каждого проекта, роль специалиста и полученный результат.

Сервис или личный кабинет

Для проекта с регистрацией, персональными данными, оплатой и пользовательскими сценариями обычного конструктора может быть недостаточно. Потребуются проектирование интерфейса, программирование, база данных, серверная часть и тестирование.

Шаг 6. Составьте структуру

Структура сайта — это список страниц и связи между ними.

Для небольшого сайта услуг она может выглядеть так:

Главная
├── Услуги
│   ├── Услуга 1
│   ├── Услуга 2
│   └── Услуга 3
├── Кейсы
├── О компании
├── Блог
├── Цены
├── Ответы на вопросы
└── Контакты

Каждая страница должна иметь собственную задачу.

Главная знакомит с компанией и помогает выбрать направление. Страница услуги подробно раскрывает конкретное предложение. Кейс подтверждает опыт. Блог отвечает на информационные запросы. Контакты упрощают обращение.

Не нужно создавать отдельную страницу, если для неё нет самостоятельного содержания.

Например, три страницы «SEO-продвижение», «Продвижение сайта в поиске» и «Поисковая оптимизация» с одинаковым текстом создают дублирование. Лучше подготовить одну сильную страницу, которая полно отвечает на общий запрос.

Для SEO важно, чтобы до значимых разделов можно было добраться через обычные внутренние ссылки. Карта сайта помогает поисковым роботам узнать об URL, но не заменяет понятную навигацию.

Шаг 7. Опишите путь пользователя

Структура показывает страницы, а пользовательский путь — порядок принятия решения.

Человек может пройти по сайту так:

Статья → страница услуги → кейс → цены → форма заявки

Другой посетитель придёт из рекламы:

Рекламное объявление → посадочная страница → форма → страница благодарности

Для каждого основного сценария нужно проверить:

откуда приходит пользователь;
что он видит первым;
какую информацию ищет;
что может вызвать сомнение;
куда должен перейти дальше;
какое действие считается целевым;
что произойдёт после этого действия.

Проблема многих сайтов в том, что страницы существуют отдельно. Статья не ведёт к услуге, кейс не содержит следующего шага, а после отправки формы посетитель не понимает, принята ли заявка.

Шаг 8. Подготовьте прототип

Прототип — это схема страницы без окончательного визуального оформления.

На нём определяют:

порядок блоков;
заголовки;
расположение кнопок;
формы;
изображения;
переходы;
мобильную логику.

Работать с прототипом проще и дешевле, чем менять готовый дизайн. На этом этапе видно, отвечает ли страница на вопросы пользователя и не повторяются ли блоки.

Для страницы услуги прототип может включать:

Заголовок и краткое предложение.
Ситуации, в которых нужна услуга.
Результат для клиента.
Состав работ.
Процесс.
Кейсы.
Стоимость или способ расчёта.
Ответы на вопросы.
Форму связи.

Этот порядок не является обязательным для всех проектов. Его нужно адаптировать к задаче и сложности решения.

Шаг 9. Подготовьте тексты

Текст должен помогать посетителю понять предложение, а не заполнять свободное место в макете.

Перед написанием соберите:

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

На странице услуги полезно ответить:

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

Не стоит писать «индивидуальный подход», «высокое качество» и «команда профессионалов», если эти слова ничем не подтверждены.

Лучше показать конкретику: состав работ, специалистов, документы, примеры и результаты.

О том, как использовать подтверждения, можно прочитать в статье «Социальные доказательства на сайте».

Шаг 10. Подготовьте изображения

Изображения должны объяснять продукт или поддерживать визуальную систему.

Для сайта могут потребоваться:

фотографии команды;
изображения товара;
примеры работ;
иллюстрации;
схемы;
иконки;
фотографии помещения;
обложки статей;
изображения для социальных сетей.

Файлы следует подготовить в подходящем размере и сжать. Загрузка оригинальной фотографии весом в несколько мегабайт может ухудшить скорость страницы.

Содержательным изображениям нужны понятные alt-описания. Декоративную графику не следует превращать в список ключевых слов.

Шаг 11. Выберите платформу

Платформу выбирают после определения функций.

Конструктор

Конструктор подходит для лендингов, сайтов услуг, портфолио и небольших магазинов, если требуемые функции поддерживаются платформой.

Преимущества:

не нужно разворачивать собственную систему;
можно быстрее собрать типовые страницы;
хостинг часто входит в услугу;
контент можно редактировать без разработчика.

Ограничения зависят от конкретной платформы: интеграций, доступа к коду, каталога, личного кабинета и сложной логики.

CMS

Система управления содержимым подходит для многостраничных сайтов, блогов, каталогов и магазинов.

Она даёт больше возможностей для расширения, но требует обслуживания:

обновления компонентов;
резервного копирования;
защиты;
настройки хостинга;
контроля совместимости.

Индивидуальная разработка

Такой вариант выбирают, когда у проекта есть нестандартная логика: личный кабинет, сложные расчёты, интеграции, роли пользователей или собственный сервис.

Разработка с нуля обычно требует больше времени и ресурсов. Она оправданна, когда готовые решения не покрывают требования проекта.

Что проверить перед выбором

Составьте таблицу требований:

Требование	Обязательно	Желательно
Формы заявок	Да
Блог	Да
Интернет-эквайринг		Да
Интеграция с CRM	Да
Личный кабинет		Да
Мультиязычность		Да
Редактирование без разработчика	Да
Отдельные SEO-настройки страниц	Да

После этого станет понятнее, какая платформа подходит.

Если сайт планируется на Tilda, используйте раздел «SEO на Tilda». В нём собраны материалы по метатегам, индексации, структуре и технической настройке страниц.

Шаг 12. Зарегистрируйте домен

Домен — адрес сайта в интернете.

При выборе имени лучше придерживаться простых правил:

оно легко произносится;
его можно записать со слуха;
в нём нет лишних дефисов и сложных сочетаний;
оно связано с компанией или продуктом;
похожее имя не используется другим известным бизнесом;
доступы оформлены на владельца проекта.

После регистрации сохраните:

доступ к аккаунту регистратора;
дату продления;
данные владельца;
настройки DNS;
информацию об автоматическом продлении.

Домен не должен оставаться оформленным только на сотрудника или подрядчика. Владелец бизнеса должен контролировать основной аккаунт.

Шаг 13. Настройте хостинг и HTTPS

Если платформа не предоставляет хостинг, нужно выбрать сервер или тариф хостинг-провайдера.

Параметры зависят от нагрузки и технологии сайта. Для небольшого проекта важны:

поддержка используемой CMS;
резервные копии;
техническая поддержка;
SSL-сертификат;
достаточные ресурсы;
возможность масштабирования;
понятная панель управления.

HTTPS защищает соединение между посетителем и сайтом. После подключения сертификата следует проверить, что все страницы и ресурсы открываются по защищённому протоколу и не возникает смешанного содержимого.

Шаг 14. Создайте дизайн

Дизайн должен поддерживать задачу страницы.

Проверяйте:

читаемость текста;
контраст;
размеры кнопок;
единый стиль;
понятную визуальную иерархию;
достаточные отступы;
удобство на телефоне;
состояние форм;
качество изображений.

Не нужно добавлять анимацию только ради эффекта. Тяжёлое видео, сложные переходы и большое количество движущихся элементов могут мешать чтению и замедлять загрузку.

Подробнее о проектировании коммерческого сайта рассказано в статье «Услуги веб-дизайна от компании Вайтиру».

Шаг 15. Соберите адаптивные страницы

Сайт должен работать на компьютере, планшете и телефоне.

На мобильной версии проверьте:

нет ли горизонтальной прокрутки;
помещаются ли заголовки;
удобно ли нажимать кнопки;
читается ли текст;
не перекрывают ли элементы друг друга;
открывается ли меню;
видны ли поля формы;
правильно ли отображаются таблицы;
не занимают ли изображения весь экран;
можно ли быстро найти контакты.

Мобильная версия не должна быть уменьшенной копией десктопа. Иногда порядок блоков, размеры и способ взаимодействия приходится менять.

Шаг 16. Настройте формы

Форма должна передавать данные туда, где их увидит ответственный сотрудник.

Проверьте:

обязательные поля;
формат телефона и электронной почты;
сообщение об ошибке;
состояние отправки;
защиту от повторного нажатия;
страницу или сообщение об успешной отправке;
уведомление менеджеру;
передачу источника обращения;
запись заявки в CRM;
работу на телефоне;
согласие на обработку данных, когда оно требуется.

После настройки отправьте несколько тестовых заявок с разных устройств.

Важно пройти весь путь: заполнить форму, получить сообщение об успешной отправке, проверить уведомление и убедиться, что заявка появилась в нужной системе.

Если форма визуально показывает успех, но данные не дошли до менеджера, сайт не выполняет свою задачу. Инструкция по поиску таких проблем находится в статье «Где теряются заявки с сайта».

Шаг 17. Подготовьте юридические и служебные страницы

Набор документов зависит от страны, типа бизнеса, собираемых данных и способа оплаты.

На сайте могут понадобиться:

политика конфиденциальности;
согласие на обработку персональных данных;
пользовательское соглашение;
условия оплаты;
правила доставки;
условия возврата;
реквизиты;
сведения о продавце;
политика использования файлов cookie.

Тексты должны соответствовать реальной работе сайта. Нельзя копировать документ другого бизнеса без проверки: у компаний различаются данные, процессы и набор сервисов.

Служебные страницы также включают:

страницу ошибки 404;
страницу благодарности;
результаты поиска;
системные уведомления;
страницу входа, если она предусмотрена.

Шаг 18. Подключите аналитику

Аналитику лучше настраивать до запуска рекламы.

Минимально стоит отслеживать:

посещения;
источники переходов;
отправку формы;
нажатие на телефон;
переход в мессенджер;
оформление заказа;
успешную оплату;
ошибки формы;
посещение страницы благодарности.

Клики по кнопке и реальные заявки — разные показатели. Если пользователь нажал кнопку, но форма не отправилась, считать это обращением нельзя.

Полезно связать аналитику с CRM, чтобы видеть путь от источника до квалифицированной заявки и продажи.

О работе с данными подробнее рассказано в статье о Google Analytics и Яндекс Метрике.

Шаг 19. Подготовьте сайт к SEO

До публикации каждой значимой страницы проверьте:

один основной H1;
логичные H2–H3;
уникальный SEO Title;
содержательный Meta Description;
понятный URL;
canonical, если он нужен;
alt у содержательных изображений;
внутренние ссылки;
отсутствие случайного noindex;
доступность страницы поисковым роботам;
отсутствие дублей;
корректный код ответа;
работу мобильной версии;
скорость загрузки.

Главная ошибка — откладывать SEO до момента, когда структура и страницы уже созданы. Если поисковый спрос не учитывался в начале, может потребоваться переделка навигации, URL и содержания.

Основы поисковой оптимизации разобраны в статье «Основы SEO: как поисковики находят и ранжируют сайт».

Шаг 20. Проверьте сайт перед запуском

Удобно проводить проверку по отдельным группам.

Содержание

нет временного текста;
нет старых цен и контактов;
все услуги описаны правильно;
факты и цифры подтверждены;
ссылки ведут на нужные страницы;
изображения соответствуют содержанию.

Интерфейс

меню работает;
кнопки выполняют действие;
формы отправляются;
модальные окна закрываются;
состояния наведения и нажатия видны;
сайт работает без горизонтальной прокрутки.

Техническая часть

подключён HTTPS;
настроена основная версия домена;
отсутствуют битые ссылки;
изображения сжаты;
страница 404 работает;
нет ошибок в консоли;
сайт открывается в основных браузерах.

SEO

заполнены метатеги;
настроены человекопонятные URL;
проверены canonical;
сайт открыт для индексации;
сформирован Sitemap;
проверен robots.txt;
нет тестовых страниц в индексе.

Заявки

обращения приходят;
данные попадают в CRM;
менеджер получает уведомление;
фиксируется источник;
пользователь видит подтверждение отправки.

Шаг 21. Опубликуйте сайт

После публикации ещё раз проверьте формы и основные страницы на рабочем домене. То, что работало на тестовом адресе, может измениться после подключения домена, HTTPS или сторонних сервисов.

Затем добавьте сайт в:

Google Search Console;
Яндекс Вебмастер;
систему аналитики;
сервис мониторинга доступности, если он используется.

Загрузите Sitemap и проверьте robots.txt.

Google указывает, что Sitemap помогает сообщить поисковой системе о страницах, но не гарантирует их обход или появление в результатах. В Sitemap следует включать основные URL, которые должны участвовать в поиске. Требования опубликованы в документации Google Search Central.

Яндекс также рекомендует добавить сайт в Вебмастер, сформировать Sitemap и проверить доступность страниц для робота. Порядок описан в справке Яндекс Вебмастера.

Файл Sitemap может отображаться в Яндекс Вебмастере среди исключённых страниц как XML-документ. Само по себе это не означает проблему: Sitemap предназначен для передачи структуры и не должен появляться в обычной поисковой выдаче.

Шаг 22. Не запускайте продвижение вслепую

Перед рекламой проверьте:

соответствует ли посадочная страница объявлению;
работает ли форма;
настроены ли цели;
фиксируются ли реальные обращения;
понятна ли стоимость;
загружается ли страница на телефоне;
есть ли доказательства;
может ли менеджер обработать поступившие заявки.

Если посетитель переходит по рекламе, но не понимает предложение, увеличение бюджета не решит проблему.

То же относится к SEO. Продвижение страницы со слабым содержанием и непонятной структурой обычно требует сначала доработать сам сайт.

Услуги поискового продвижения Вайтиру представлены на странице продвижения сайтов.

Шаг 23. Проверьте первые недели после запуска

После публикации работа не заканчивается.

В первые недели нужно следить:

появляются ли страницы в поиске;
нет ли ошибок обхода;
работают ли формы;
какие страницы посещают;
откуда приходят пользователи;
где они покидают сайт;
какие вопросы задают менеджерам;
какие запросы получают показы;
есть ли нецелевые обращения;
корректно ли сайт работает на разных устройствах.

Не нужно менять страницу после каждого отдельного посещения. Сначала соберите данные, определите проблему и только потом проверяйте гипотезу.

Если сайт получает переходы, но мало обращений, изучите материал о повышении конверсии.

Что должно остаться у владельца после разработки

После завершения проекта заказчику нужно передать:

доступ к домену;
доступ к хостингу или платформе;
права владельца в аналитике;
доступ к Яндекс Вебмастеру;
доступ к Google Search Console;
доступ к CRM;
исходные материалы;
сведения об интеграциях;
инструкции по редактированию;
список платных сервисов;
даты продления;
резервную копию, если она предусмотрена;
контакты ответственных специалистов.

Сайт является активом бизнеса. Основные аккаунты не должны оставаться только у подрядчика или бывшего сотрудника.

Когда создавать сайт самостоятельно, а когда обратиться к специалистам

Самостоятельная разработка подходит, когда:

задача небольшая;
структура состоит из нескольких страниц;
используются стандартные функции;
у владельца есть время на изучение платформы;
возможные ошибки не приведут к заметным потерям.

Подрядчик полезен, когда сайт должен:

участвовать в поисковом продвижении;
принимать платный рекламный трафик;
передавать заявки в CRM;
продавать товары;
работать с большим каталогом;
интегрироваться с другими системами;
учитывать несколько аудиторий;
развиваться после запуска.

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

Посмотреть примеры комплексной работы можно в разделе проектов и кейсов Вайтиру.

Чек-лист перед публикацией

Сайт можно считать готовым к запуску, если:

определена его основная задача;
изучены аудитория и спрос;
выбран подходящий тип сайта;
структура не содержит смысловых дублей;
основные пользовательские пути пройдены;
тексты проверены;
изображения оптимизированы;
мобильная версия работает;
формы отправляют данные;
заявки доходят до ответственного сотрудника;
подключена аналитика;
настроены цели;
заполнены метатеги;
сайт открыт для индексации;
работают HTTPS, robots.txt и Sitemap;
настроена страница 404;
доступы переданы владельцу;
подготовлен план продвижения и дальнейших улучшений.

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

Во Вайтиру можно заказать разработку сайта как часть общей системы продвижения: от анализа спроса и проектирования до SEO, рекламы, карт и аналитики. Обсудить задачу можно на главной странице компании.