Этапы создания эффективного сайта — от разработки до продвижения

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

1. Предварительная работа с заказчиком — брифинг.

Цели данного этапа:

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

Как это происходит: менеджер проекта встречается с представителем клиента и совместными усилиями они формулируют цели, ради которых создается сайт, а также задачи, которые сайт будет решать. Для этого заказчик заполняет бриф, проект-менеджер его изучает, задает свои вопросы и анализирует полученную информацию. Затем менеджер проекта оценивает объем предстоящих работ, количество исполнителей и сроки, требуемые для выполнения. Теперь можно составить коммерческое предложение, которое изучит клиент перед внесением предоплаты (если согласится с этим предложением, конечно же).

Риск на этой стадии один — неграмотная оценка ресурсов, выделяемых на проект. Причем, как со стороны заказчика, так и со стороны проект-менеджера.

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

2. Планирование и подготовка проектной документации.

Цель этапа — разработка проектной документации, на основании которой будет создан веб-сайт. Для чего это нужно? Коммерческий сайт — это проект, который должен быть реализован. Чтобы никто из представителей сторон не разводил руками во время презентации готового сайта, должна составляться проектная документация. При этом достигается взаимопонимание между клиентом и разработчиком. Согласитесь, что почти безболезненно можно изменять проект на стадии разработки. Если без описания того, что будет сделано, «сварганить» сайт, то практически на 100% полученный результат заказчику не понравится. Хотя, скорее всего, при таком подходе презентация готового сайта не состоится никогда.

Что включается в состав проектной документации:

1. Общая концепция сайта.
2. Детальная концепция, в которую входят:
   • техническое задание;
   • концепция дизайна.

Что это все значит? Давайте по порядку. Общая концепция сайта предназначена для понимания разработчиком особенностей бизнеса клиента с одной стороны, и понимания своих желаний и ожиданий заказчиком с другой стороны. Для этого собирается информация о предпочтениях заказчика, информация о его предприятии, отрасли, конкурентах, целевой аудитории сайта (потребностях). На основе полученной информации формулируются цели проекта, определяется функционал и средства мультимедиа, необходимые для сайта.

Далее — техническое задание (ТЗ). Оно разрабатывается после принятия заказчиком общей концепции. И совместно с концепцией дизайна является основным документом по созданию сайта. Что происходит на этом этапе:

• Собирается воедино вся информация, которая будет размещена на сайте. В результате становится ясно, что нужно, а что не нужно на страницах сайта для высокой эффективности его работы.
• Структурируется и классифицируется информация, проще говоря, упорядочивается.
• Определяется навигационная структура веб-сайта, представляется в виде схемы.
• Определяются дополнительные средства мультимедиа, если в них появилась необходимость.
• Создаются наброски домашней и внутренней страницы. Для этого подойдут карандаш и бумага, а еще лучше программа для рисования или построения диаграмм, наподобие Microsoft Visio. А еще лучше редактор HTML, в котором можно сделать набросок, реагирующий на действия мыши. Самое главное условие — набросок (прототип) не должен выглядеть, как готовый сайт. Иначе у клиента появится искушение принять его за конечный дизайн и подвергнуть критике. Поэтому очень важно помнить, что это всего лишь эскиз, с оглядкой на который будет разрабатываться дизайн.

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

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

3. Реализация дизайна.

Цель этапа — разработать дизайн сайта. Теперь, когда стало ясно, каким должен быть веб-сайт, предстоит его создать. Детальная концепция передается в креативный отдел, в котором создается дизайн главной страницы. После серии доработок, вытекающих из замечаний и пожеланий клиента, создается дизайн второстепенной страницы. Этот макет также рассматриваются заказчиком, дорабатывается и согласовывается.

4. Верстка статического HTML-прототипа сайта.

Цель этапа — сверстать будущую модель сайта на языке браузеров.

Страницы, созданные дизайнером, верстаются в HTML. Как правило, верстка осуществляется для главной и внутренней страницы. Этого достаточно, если иное количество не предусмотрено в техническом задании. Результат должен корректно отображаться во всех популярных браузерах, а код должен быть «чистым». Для этого проводится тестирование сверстанных страниц в самых распространенных браузерах: Microsoft Edge, Mozilla Firefox, Opera, Google Chrome, Safari. Верстка должна быть максимально простой и масштабируемой. «Чистота кода» или, как ее еще называют, валидность, проверяется на наличие ошибок сервисом консорциума W3C (validator.w3.org) или специальным плагином.

Таким образом, работы по верстке статического прототипа делятся на две стадии:

• Верстка макетов;
• Тестирование кода.

Результатом этого этапа станет утвержденный заказчиком статический прототип сайта.

5. Программирование и подключение системы управления сайтом (CMS).

Цель этапа — создание рабочего прототипа сайта.

Программируются все предусмотренные в детальной концепции модули и средства мультимедиа. К сверстанным страницам подключается система CMS (Content Management System). Content — это содержательная информация сайта, в которую входят текст, изображения, видео, аудио и т.п.). Использование CMS существенно упрощает и ускоряет редактирование и наполнение сайта, что обеспечивает удобство работы с сайтом (справляются даже начинающие пользователи). На рынке веб-разработок представлено немалое количество систем CMS, как платных, так и бесплатных. Основными недостатками бесплатных CMS являются трудоемкость создания нестандартных сайтов и отсутствие технической поддержки.

Результатом этого этапа станет реализованный на программном уровне сайт.

6. Наполнение сайта контентом.

Цель этапа — размещение на сайте предусмотренной договором информации.

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

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

7. Тестирование и доработка сайта.

Цель этапа — проверить сайт на правильную и стабильную работоспособность.

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

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

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

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

8. Прием-передача сайта. Размещение на хостинге. Обучение администратора сайта со стороны заказчика работе с CMS.

Цель этапа — передача сайта владельцу, открытие сайта, ознакомление владельца с навыками управления CMS.

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

Результатом этапа станет завершенный, работоспособный и доступный для всех сайт.

На этом сотрудничество, как правило, не заканчивается, а продолжается в виде продвижения сайта в интернете, а также технической поддержке.

9. Продвижение сайта. Техническая поддержка.

Цель этапа — привлечение на сайт целевой аудитории, развитие сайта, устранение технических неисправностей.

Успешная реализация проекта по созданию веб-сайта — это начало большого пути, на котором предстоит сделать его популярным и прибыльным. Заказчику всегда выгодно и удобно сотрудничать с разработчиком в целях развития своего интернет-представительства, а следовательно и бизнеса. Здесь подразумевается весь комплекс digital-маркетинга, подходящий для решения задач клиента.

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