Разработка проекта сайта

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

Не менее важны стадии сбора информации, проектирования и проверки качества (QA). А иногда в проект включены и дополнительные услуги: создание контента, продвижение, обучение работе с CMS, периодическое обновление и поддержка. 

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

Этапы разработки сайта

Типичный процесс разработки сайта состоит из семи этапов:

1. Постановка целей, составление списка требований.
2. Проектирование и дизайн.
3. Разработка.
4. Тестирование.
5. Наполнение сайта контентом.
6. Запуск сайта.
7. Продвижение и поддержка. 

Рассмотрим каждую стадию подробнее.

Постановка целей и составление списка требований

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

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

Цель: нарастить объем продаж. 

Задачи: внутренняя SEO-оптимизация сайта, структурирование ассортимента товаров, упрощение навигации, внедрение CTA-элементов (призывов к действию) для повышения конверсии. 

Цель: создание авторитетного ресурса в целевой нише.

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

Цель: привлечение новых покупателей, улучшение отношений с текущими клиентами.

Задачи: создание новой CRM-системы, пересмотр стратегии email-маркетинга, реализация службы поддержки на сайте (написание чат-бота), уменьшения оттока клиентов (churn rate). 

Цель: популяризация и работа с имиджем бренда.

Задачи: активная PR-кампания в соц. сетях, интеграция социальных плагинов на сайте, проведение промо-акций. 

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

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

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

Пример списка требований:

• дизайн, выдержанный в корпоративном стиле согласно предоставленными гайдлайнами;
• адаптивная верстка, следование принципу Mobile First — мобильная версия сайта является основной; 
• наличие web-приложений, калькуляторов расчета стоимости и других виджетов;
• возможность заказа и оплаты через сайт;
• уровень безопасности соответствующий стандартам отрасли;
• реализация социальных функций — форума, элементов социальной сети, подключение плагинов комментирования. 

Проектирование

Составив список целей и требований, можно переходить к проектированию будущего веб-продукта. 

Процесс проектирования проходит в несколько этапов. Во время этой фазы разрабатывается:

1. Структура сайта;
2. Каркас страниц сайта; 
3. Макеты страниц;
4. Прототип сайта. 

Структура сайта

Схематическая структура сайта отражает иерархию страниц и взаимосвязи между ними. В идеале в этой работе должны принимать участие эксперты нескольких направлений: SEO-специалист, маркетолог, UX-дизайнер. 

Работа над картой или структурой сайта, в свою очередь, делиться несколько фаз: 

1. Сбор информации о бизнесе. Какие товары продаются, какие услуги предоставляются. Что из них является критичным для бизнеса, а что — второстепенным.
2. Составление семантического ядра. Анализ поисковых запросов релевантных вашей нише и формирование структуры сайта на основе семантических кластеров. 
3. Анализ сайтов конкурентов, поиск полезных наработок. Вместо изобретения велосипеда, лучше воспользоваться лучшим опытом топовых сайтов в вашей нише.
4. Проектирование иерархии страниц и удобной навигации. В структуру могут вноситься правки для достижения бизнес-целей и обеспечения положительного пользовательского опыта. Например, сокращение уровней структуры или добавление страниц, которые необязательно соответствуют популярным поисковым запросам, но все равно должны быть на сайте (юридическая информация, пользовательские соглашения и т.д.). 
5. Разработка внутренней ссылочной стратегии. Внутренние ссылки передают ссылочный вес — важный показатель для поисковых движков. 

Создание каркаса сайта и макетов страниц 

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

После утверждения каркаса, создаются более детализированные изображения страниц — макеты. Они уже содержат графические элементы, образцы шрифтов и точные размеры.

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

Прототип

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

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

Техническое задание

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

Верстка и разработка сайта

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

Далее программисты прописывают визуальную часть веб-приложений и серверную логику. Разрабатывают систему управления контентом — CMS. Или интегрируют готовую платформу, такую как WordPress. 

Тестирование 

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

Информационное наполнение сайта

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

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

Запуск сайта

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

Несмотря на кажущуюся простоту, данный процесс может быть довольно сложным. Существует множество способов реализации этого этапа: от использования сервисов для определенных CMS c интуитивно понятным интерфейсом до инструментов, где все происходит с помощью командной строки. 

В целом релиз сайта проходит в 5 шагов: 

1. Подготовка. Регистрация домена, оплата хостинга. Если у заказчика, собственный сервер, получение доступа к управление доменом и хостингом. 
2. Настройка DNS записей на сайте-регистраторе домена. 
3. Установка живого сайта на тестовом поддомене, например, на test.domainname.ua;
4. Настройка email аккаунтов;
5. Резервное копирование и запуск. 

Некоторые веб-студии также готовы проводить обучение работников тонкостям работы с новой CMS.

Продвижение и поддержка 

Разработка качественного сайта — это необходимое, но не достаточное условия для достижения бизнес-целей. Чтобы привлечь на свой ресурс целевых посетителей, нужно систематически заниматься его продвижением. Спектр работ по раскрутке включает в себя: оптимизацию для поисковых движков, работу с соц. сетями, настройку контекстной рекламы, а возможно и рекламную кампанию в традиционных СМИ. 

Мы рассмотрели базовый процесс создания сайта. В зависимости от выбранной методологии разработки, этапы могут протекать последовательно или циклично. А в случае с разработкой через тестирование (TDD) написание тестов предшествует программированию.

Методология разработки: Agile и Waterfall

Программное обеспечение, в том числе интернет-приложения, обычно разрабатывается по одной из двух методологий — Waterfall или Agile. В традиционной модели (Waterfall) этапы разработки следуют последовательно друг за другом. Условно говоря, в первый месяц происходит проектирование, во второй — разработка, в третий — тестирование и так до финального релиза. 

Однако до по разным отчетам до 97% компаний в той или иной степени применяют Agile методологию для разработки ПО. Ее суть заключается в том, что проект делится на спринты (обычно от недели до месяца), во время каждого из которых проходит полный цикл этапов разработки приложения. Результатом итерации является вариант готового продукта или его бета-версия. В конце спринта команда проводит ретроспективный анализ работы: что пошло не так, какие компоненты удались, на каких этапах были задержки. И с учетом полученной обратной связи начинается новый цикл. 

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

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

Команда разработки веб-проекта

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

Менеджер проекта (Project Manager, PM)

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

Аналитик требований или проектировщик

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

Дизайнеры

В представлении многих дизайнер —  это художник, создающий графический контент и визуальный стиль. Однако в диджитал отрасли значение слова “дизайнер” несколько шире. Дело в том, что в английском языке, откуда мы копируем названия диджитал профессий, основное значение слова “дизайн” — это проект, и только после — стиль. 

Таким образом, в веб-разработке есть принципиально разные типы дизайнеров:

• Графический дизайнер. Создает или обрабатывает двухмерные графические объекты, такие как логотипы и баннеры. 
• Технический дизайнер (Web designer). создает макеты, шаблоны и прототипы страниц на специализированном ПО — Adobe XD, Photoshop, Sketch, Moqups. 
• UX-дизайнер. Его задача — сделать так, чтобы продукт был прост, удобен и приятен в использовании. В его обязанности входит сбор пользовательских требований, создание структуры и каркаса сайта. Совместно с арт-директором разрабатывает концепцию дизайна продуктов. 
• UI-дизайнер. Следит за тем, чтобы интерфейс веб-приложения был удобным для пользователя. В его обязанности входит, визуализация идей дизайна через раскадровки и карты сайта, разработка элементов интерфейса, таких как формы, меню и вкладки, иногда — создание макетов страниц. В небольших и средних студиях, позиции UX и UI-дизайнеров часто объединяют в одну. 

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

Верстальщик

На основе макетов прописывает код разметки и внешнего вида страниц с помощью HTML и CSS. Позиция аналогична младшему front-end разработчику в международной терминологии. Но стоит отметить, что эксперт по верстке может быть профессионалом высокого уровня. Глубокое понимание HTML5 и CSS3, препроцессоров, фреймворков и CSS архитектур требует лет обучения и практики. 

Программист 

Он же кодер, разработчик ПО и Software Engineer. Программистов, которые создают интернет-приложения, называют веб-разработчиками. Они пишут front-end приложения и серверную логику, прописывают всевозможные скрипты, адаптируют стандартную или разрабатывают кастомную CMS. Иерархия в команде разработчиков от младшего к старшему: джуниор, миддл, синьор, тимлид (Team leader). 

Front-end разработчик 

Занимается программной частью проекта на стороне клиента. В случае с веб-девелопментом это всё, что пользователь видит в браузере. Фронтендер, в отличии от верстальщика, пишет код веб-скриптов и приложений, а не просто макеты. Он работает с JavaScript фреймворками для того, чтобы данные полученные с сервера, корректно отображались в браузере. 

Back-end разработчик 

Прописывает серверную логику веб-приложения — то, как происходит хранение, обработка информации на сервере, а также обмен данных с клиентской частью. Набор языков программирования для серверной части довольно широк, основные из них: PHP, Python, Java, C и С++, С#, Ruby, Rust, JavaScript (фреймворк Node.js). 

Тестировщик (QA-специалист)

Тестировщики делятся на QA (Quality Assurance) и QC (Quality Control) специалистов. QC-специалист проверяет, чтобы работа сайта соответствовала требованиям, прописанным в ТЗ. QA следит за соблюдением стандартов качества еще на этапе  проектирования продукта. 

В небольших студиях смежные позиции часто объединяются. Например, один человек может выполнять функции верстки и UI-дизайна, или front end и back end разработки (full stack). Ведением проектов и переговорами занимается сам директор студии. 

В крупных компаниях к проектам подключаются менее распространенные специалисты: Product Owner, Team Lead, Business Analyst, QA Automation, Data Scientist, а также топ-менеджмент. Например, арт-директор и CTO.

Арт-директор 

Отвечает за творческий процесс и разработку концепции дизайна веб-продукта. Курирует дизайнеров, иногда -- верстальщиков и фронт-енд разработчиков. 

Технический директор (CTO)

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

Роли в Scrum-команде

Scrum — самый популярный Agile-фреймворк. В нем задействованы как минимум, два уникальных участника — Product Owner и Scrum-мастер. 

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

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

Выбор исполнителей для разработки сайта

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

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

1. «Элита»

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

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

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

Недостатки:

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

2. «Профессионалы»

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

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

• хорошее соотношении цена-качество;
• имеют полный набор необходимых экспертов для доведения проектов до финала;
• более гибкие по сравнению с “Элитой” на стадии консультаций;
• работают через договор и ТЗ. 

Недостатки:

• компетентность в ограниченном стеке технологий. 

3. «Любители»

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

Плюсы:

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

Минусы:

• нет гарантий;
• сроки часто не соблюдаются, ввиду фактического отсутствия стадии планирования;
• нет резерва для масштабирования.

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

Стоимость создания сайта

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

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

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

Ключевые факторы, влияющие на стоимость разработки сайта:

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

Цена на разработку веб-проектов, как правило, оглашается только после составления ТЗ. К ценам названным после поверхностного ознакомления с требованиями стоит относится с долей скепсиса. Бриф не дает конкретного представления о предстоящем фронте работ, а соответственно, рассчитать их себестоимость не удастся. Если же цена называется еще до ознакомления с минимальными требованиями, то вероятно исполнитель намерен использовать шаблонное решение.