Основные этапы разработки сайта

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

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

Ниже приведены основные этапы разработки сайта:

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

2. Создание технического задания (ТЗ). Техническое задание – это документ, который описывает требования к будущему сайту, его предполагаемые вид, составные части, устройство, функциональность и предназначение, а также регламентирует процесс его создания. С одной стороны, в нем фиксируются главные аспекты разработки в их логической и хронологической взаимосвязи, с другой – то, какими средствами и по какому алгоритму будет достигаться цель. Попросту – что будет делаться, кем, как именно и когда. И главное – зачем.

Возможна следующая рубрикация ТЗ[1]:

  • Термины и определения;
  • Назначение технического задания;
  • Обязанности исполнителя и заказчика;
  • Назначение и задачи сайта;
  • Описание работы сервиса и механики сайта;
  • Структура сайта и его составляющие;
  • Дизайн сайта;
  • Требования к технической и программной реализации сайта;
  • Условия сдачи и приемки.

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

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

Работа над дизайном сайта предполагает следующие стадии:

  • Анализ требований пользовательского интерфейса. Интуитивно понятная организация материала и продуманная навигация являются необходимыми условиями эффективного дизайна. Мы стремимся к тому, чтобы наши разработки были удобны и понятны любому пользователю.
  • Разработка концепции дизайна. В ходе этой стадии продумывается и создается проект дизайна системы, помогающий идентифицировать решение, которое наилучшим образом представляет все функциональные возможности проекта, удовлетворяет запросам целевой аудитории и при этом соответствует всем требованиям к функциональности сайта.
  • Одобрение дизайна. Стадия предполагает согласование и внесение необходимых корректив в первоначальную концепцию дизайна проекта.

Результатом работы на этапе разработки дизайна и архитектуры проекта станут эскизы (дизайн-макеты) всех типовых страниц веб-сайта.

После того, как эскизы будут готовы, начинается работа над версткой сайта. Верстка сайта – это конечный этап разработки дизайна сайта, создание структуры сайта, которая будет определять отображение текста и графики на сайте в различных браузерах. Верстают веб-мастера с помощью языка разметки HTML[2], который задает расположение блоков на странице и их соотношение друг с другом, а стили элементов (цвет шрифта, фон, рамки и т. п.) задаются при помощи таблиц стилей CSS[3]. Так же возможно создание анимации или всплывающих окон с помощью языка JavaScript. Эту часть сайта, внешнюю, которая не включает в себя работу с данными и внешними сервисами, называют front-end частью сайта. Это все, что не связано с сервером и интерпретируется на стороне браузера.

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

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

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

5. Запуск (Размещение сайта в сети). После проведенного тестирования и исправления обнаруженных дефектов, проект готов к размещению в сети Интернет и его наполнению. Этот этап включает в себя размещение на хостинге под заранее обдуманным и, если необходимо, приобретенным доменным именем, а так же контент-менеджмент или наполнение сайта необходимым контентом.

6. Продвижение. Продвижение сайта – это действия, которые популяризуют ресурс в сети Интернет. Сюда относится реклама и SEO-оптимизация[4].

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

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


[1] Бабаев А., Евдокимов Н., Боде М. Создание сайтов. – СПб: Питер, 2013 — 304 с.

[2] HTML (HyperText Markup Language, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице.

[3] Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.

[4] SEO является аббревиатурой от Search Engine Optimization, что в переводе означает оптимизация под поисковые системы или просто поисковая оптимизация.