ОБСУДИТЬ ПРОЕКТ
Расскажите о своих бизнес-целях и наш опыт поможет их достичь!
Фиксируем стоимость
до старта работ
Гарантируем результат
закрепляя его в договоре
Команда под каждый проект
во главе с опытным проект-менеджером
Бытует мнение, что разработка сайта — это прежде всего верстка и программирование. Действительно, это два важнейших этапа создания интернет-проектов. Но весь процесс работы над сайтом гораздо более многогранный и сложный.
Не менее важны стадии сбора информации, проектирования и проверки качества (QA). А иногда в проект включены и дополнительные услуги: создание контента, продвижение, обучение работе с CMS, периодическое обновление и поддержка.
Далее мы расскажем обо всех составляющих разработки веб-проекта: на какие этапы он разделен, кто участвует в разработке, и во сколько обойдется его реализация.
Типичный процесс разработки сайта состоит из семи этапов:
Рассмотрим каждую стадию подробнее.
Разработка сайта начинается с определения проблем и задач, которые он должен решить. Именно от поставленных бизнес-целей зависит, какой вид сайта вам нужен и какие функции должны быть в нем реализованы.
Примеры типичных маркетинговых целей, которых можно достичь с помощью разработки сайта, и соответствующих им задач:
Цель: нарастить объем продаж.
Задачи: внутренняя SEO-оптимизация сайта, структурирование ассортимента товаров, упрощение навигации, внедрение CTA-элементов (призывов к действию) для повышения конверсии.
Цель: создание авторитетного ресурса в целевой нише.
Задачи: регулярная публикация полезных материалов, аутрич, публикация на тематических блогах, продвижение сайта в социальных сетях, рейтингах и каталогах.
Цель: привлечение новых покупателей, улучшение отношений с текущими клиентами.
Задачи: создание новой CRM-системы, пересмотр стратегии email-маркетинга, реализация службы поддержки на сайте (написание чат-бота), уменьшения оттока клиентов (churn rate).
Цель: популяризация и работа с имиджем бренда.
Задачи: активная PR-кампания в соц. сетях, интеграция социальных плагинов на сайте, проведение промо-акций.
Крайне желательно, чтобы цели были конкретными, измеримыми и с намеченными сроками выполнения.
Далее следует определить сегменты целевой аудитории — ЦА. Обычно они классифицируются по региону, возрасту, полу, профессии и предпочтениям.
Исходя из поставленных задач и запросов целевой аудитории, можно составить предварительный перечень функциональных требований к сайту.
Пример списка требований:
Составив список целей и требований, можно переходить к проектированию будущего веб-продукта.
Процесс проектирования проходит в несколько этапов. Во время этой фазы разрабатывается:
Схематическая структура сайта отражает иерархию страниц и взаимосвязи между ними. В идеале в этой работе должны принимать участие эксперты нескольких направлений: SEO-специалист, маркетолог, UX-дизайнер.
Работа над картой или структурой сайта, в свою очередь, делиться несколько фаз:
Каркас сайта — это чертеж с низким уровнем детализации. На нем изображены структурообразующие блоки страницы. Он дает общее представления о том, как будет выглядеть сайт, но не передает художественные особенности и тонкости дизайна.
После утверждения каркаса, создаются более детализированные изображения страниц — макеты. Они уже содержат графические элементы, образцы шрифтов и точные размеры.
Для описания макетов с максимально точной детализацией часто используется термин "шаблоны страницы".
Прототип сайта можно условно назвать интерактивным макетом. Он содержит динамические элементы, такие как раскрывающиеся меню и анимации. Прототип помогает имитировать взаимодействие пользователя с готовым продуктом. Таким образом дизайнер может продемонстрировать стейкхолдерам, как будет выглядеть рабочий вариант сайта с помощью наглядной интерактивной модели.
Прототип дает возможность исправить недочеты на относительно ранней стадии, а также проверить, какие функции действительно необходимы, а какие лучше убрать. Также он может выступать дополнением к ТЗ.
Результаты всех этапов проектирования согласовываются с заказчиком и закрепляются в техническом задании. Наличие этого документа помогает заказчику и подрядчику убедиться в том, что видение обеих сторон относительно сути и содержания веб-проекта совпадает. Кроме того, исполнитель будет четко понимать, какой фронт работ ему предстоит выполнить. А заказчик сможет получить точную смету и расчет сроков выполнения проекта.
Теперь утвержденный технический дизайн нужно перенести в формат html-страниц. Порядок верстки соответствует иерархии карты сайта. Сначала верстальщик делает главную страницу сайта, за ней — страницы второго, третьего уровня и т. д.
Далее программисты прописывают визуальную часть веб-приложений и серверную логику. Разрабатывают систему управления контентом — CMS. Или интегрируют готовую платформу, такую как WordPress.
Цель тестирования или QA — выявить несоответствия спецификациям в разработанном продукте. В упрощенном виде — это просто поиск ошибок в технической части и недочетов в юзабилити. На этом этапе цена исправления бага на порядок ниже, чем в случае с уже запущенным в эксплуатацию проектом.
Чтобы не задерживать весь процесс, обычно создание контента происходит параллельно с разработкой сайта или используются заранее подготовленные заказчиком материалы.
О том, кто будет создавать текстовый и графический контент для сайта, стоит договориться заранее. Заказчики часто предполагают, что эти услуги входят в цену разработки по умолчанию. Написание контента — это отдельный трудоемкий процесс, за который берутся далеко не все веб-студии. А если и берутся, то этот сервис оплачивается отдельно.
Запуск или развертывание сайта — это перенос кода и контента с тестовой локальной среды или облачной системы контроля версий на хостинг-платформу.
Несмотря на кажущуюся простоту, данный процесс может быть довольно сложным. Существует множество способов реализации этого этапа: от использования сервисов для определенных CMS c интуитивно понятным интерфейсом до инструментов, где все происходит с помощью командной строки.
В целом релиз сайта проходит в 5 шагов:
Некоторые веб-студии также готовы проводить обучение работников тонкостям работы с новой CMS.
Разработка качественного сайта — это необходимое, но не достаточное условия для достижения бизнес-целей. Чтобы привлечь на свой ресурс целевых посетителей, нужно систематически заниматься его продвижением. Спектр работ по раскрутке включает в себя: оптимизацию для поисковых движков, работу с соц. сетями, настройку контекстной рекламы, а возможно и рекламную кампанию в традиционных СМИ.
Мы рассмотрели базовый процесс создания сайта. В зависимости от выбранной методологии разработки, этапы могут протекать последовательно или циклично. А в случае с разработкой через тестирование (TDD) написание тестов предшествует программированию.
Программное обеспечение, в том числе интернет-приложения, обычно разрабатывается по одной из двух методологий — Waterfall или Agile. В традиционной модели (Waterfall) этапы разработки следуют последовательно друг за другом. Условно говоря, в первый месяц происходит проектирование, во второй — разработка, в третий — тестирование и так до финального релиза.
Однако до по разным отчетам до 97% компаний в той или иной степени применяют Agile методологию для разработки ПО. Ее суть заключается в том, что проект делится на спринты (обычно от недели до месяца), во время каждого из которых проходит полный цикл этапов разработки приложения. Результатом итерации является вариант готового продукта или его бета-версия. В конце спринта команда проводит ретроспективный анализ работы: что пошло не так, какие компоненты удались, на каких этапах были задержки. И с учетом полученной обратной связи начинается новый цикл.
Waterfall целесообразно использовать в проектах с низкой вероятностью изменения требований. Когда известно, что необходимо построить и есть опыт выполнения подобных проектов.
Если же изначально собрать точные требования невозможно — заказчик еще не определился, что именно он хочет получить, или продукт подразумевает реализацию инновационных идей — то лучше использовать Agile фреймворки, такие как Scrum или экстремальное программирование (XP).
В этом разделе мы расскажем, какие специалисты участвуют на разных стадиях разработки сайта. Круг задействованных экспертов может изменяться, в зависимости от масштаба IT-компании и ее специализации. Поэтому мы перечислим ключевые должности.
Координирует рабочий процесс. Занимается формированием рабочей группы, планирует график работ, контролирует качество и сроки их выполнения, управляет бюджетом проекта. В его обязанности входит коммуникация как со стороной заказчика, так и с рабочей группой в своей компании.
Его главная задача — собрать и систематизировать требования к продукту. После чего — изложить их в форме подробного технического задания. В дальнейшем, остальные члены команды будут опираться на этот документ в процессе разработки.
В представлении многих дизайнер — это художник, создающий графический контент и визуальный стиль. Однако в диджитал отрасли значение слова “дизайнер” несколько шире. Дело в том, что в английском языке, откуда мы копируем названия диджитал профессий, основное значение слова “дизайн” — это проект, и только после — стиль.
Таким образом, в веб-разработке есть принципиально разные типы дизайнеров:
Кроме того, в разных IT-компаниях можно встретить такие должности, как анимационный дизайнер, моушн-дизайнер, дизайнер шрифтов и дизайнер продукта.
На основе макетов прописывает код разметки и внешнего вида страниц с помощью HTML и CSS. Позиция аналогична младшему front-end разработчику в международной терминологии. Но стоит отметить, что эксперт по верстке может быть профессионалом высокого уровня. Глубокое понимание HTML5 и CSS3, препроцессоров, фреймворков и CSS архитектур требует лет обучения и практики.
Он же кодер, разработчик ПО и Software Engineer. Программистов, которые создают интернет-приложения, называют веб-разработчиками. Они пишут front-end приложения и серверную логику, прописывают всевозможные скрипты, адаптируют стандартную или разрабатывают кастомную CMS. Иерархия в команде разработчиков от младшего к старшему: джуниор, миддл, синьор, тимлид (Team leader).
Занимается программной частью проекта на стороне клиента. В случае с веб-девелопментом это всё, что пользователь видит в браузере. Фронтендер, в отличии от верстальщика, пишет код веб-скриптов и приложений, а не просто макеты. Он работает с JavaScript фреймворками для того, чтобы данные полученные с сервера, корректно отображались в браузере.
Прописывает серверную логику веб-приложения — то, как происходит хранение, обработка информации на сервере, а также обмен данных с клиентской частью. Набор языков программирования для серверной части довольно широк, основные из них: PHP, Python, Java, C и С++, С#, Ruby, Rust, JavaScript (фреймворк Node.js).
Тестировщики делятся на 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.
Отвечает за творческий процесс и разработку концепции дизайна веб-продукта. Курирует дизайнеров, иногда -- верстальщиков и фронт-енд разработчиков.
Координирует разработку программной части проекта. В его подчинении находятся технические специалисты: верстальщики, программисты, тестировщики, архитекторы ПО)
Scrum — самый популярный Agile-фреймворк. В нем задействованы как минимум, два уникальных участника — Product Owner и Scrum-мастер.
Product Owner. Следит за тем, чтобы конечный продукт соответствовал видению заказчика и способствовал достижению его стратегических целей.
Scrum-мастер. Роль близкая к менеджеру проекта. Он следит за корректным и своевременным выполнением задач другими членами команды, поддерживает организацию канбан-доски, выступает ментором для младших членов команды.
Как видите, разработка сайта — комплексный процесс, в котором принимает участие целая команда специалистов. Если в вашей компании нет перечисленных экспертов, придется расширять штат или искать подрядчика.
Исполнителей на рынке веб-разработки условно можно разделить на три группы, принимая во внимание их размер, качество предоставляемых услуг и репутацию.
Крупные IT-компании, зарекомендовавшие себя на рынке веб-разработки. Их отличает высокий уровень услуг и квалификации работников. Персонал имеет сертификаты международного стандарта. Работают с широким стеком технологий.
Преимущества:
Недостатки:
Средние по размерам компании с достаточным опытом в сфере веб-разработки. Специализируются на конкретных нишах и на ограниченном количестве языков программирования и фреймворков.
Преимущества:
Недостатки:
Самая многочисленная категория подрядчиков. Работают по минимальным, часто демпинговым, ценам для получения опыта. Им вполне можно доверить создание базового сайта для малого бизнеса. Но делегирование им масштабных проектов несет в себе непропорциональные риски.
Плюсы:
Минусы:
Разумеется, эта классификация, как и любая другая, несколько упрощает общую картину. Среди разработчиков бывают исключения, которые не вписываются в приведенную модель. Например, бывают фрилансеры-одиночки с высокой компетентностью в узкой нише и подтвержденной репутацией.
Цена разработки веб-приложения зависит от задач, которые перед ним стоят, и рассчитывается индивидуально.
Для небольшой компании, желающей проинформировать потенциальных клиентов о предоставляемых услугах, достаточно создать сайт-визитку. Это обойдется на порядок дешевле, чем разработка корпоративного портала.
Если цель сайта — продавать большой ассортимент товаров через интернет, то придется прорабатывать гибкий и сложный функционал для взаимодействия с покупателями.
Ключевые факторы, влияющие на стоимость разработки сайта:
Цена на разработку веб-проектов, как правило, оглашается только после составления ТЗ. К ценам названным после поверхностного ознакомления с требованиями стоит относится с долей скепсиса. Бриф не дает конкретного представления о предстоящем фронте работ, а соответственно, рассчитать их себестоимость не удастся. Если же цена называется еще до ознакомления с минимальными требованиями, то вероятно исполнитель намерен использовать шаблонное решение.
Невозможно построить дом без плана и чертежей. Аналогично создание качественного веб-ресурс без технического задания не представляется возможным. Поэтому мы разрабатываем ТЗ абсолютно ко всем нашим веб-проектам
Узнайте 18 фактов о важности ТЗ и прототиповВ веб-проектировании сотрудничество по фиксированной стоимости идеально для создания небольших и средней сложности проектов, где возможно точно определить функционал и сроки выполнения на этапе составления технического задания для интернет-проекта. Работая с нами по данной модели, вы получаете гарантии выполнения проекта с закреплением стоимости и сроков выполнения в договоре.
Для веб-разработки Вашего проекта при использовании модели "time & material" мы тщательно подбираем отдельную команду необходимых специалистов для выполнения именно Ваших задач, разбиваем её на этапы – «спринты», на стадии завершения каждого из которых предоставляем Вам готовый к тестированию функционал. В Вашем распоряжении находится целый ряд гибких возможностей по изменению требований, приоритетов и контроля хода разработки согласно передовым agile-методологиям.
Расскажите о своих бизнес-целях и наш опыт поможет их достичь!
Фиксируем стоимость
до старта работ
Гарантируем результат
закрепляя его в договоре
Команда под каждый проект
во главе с опытным проект-менеджером
Мы всегда на связи
Расскажите о своих задачах и мы обсудим их решение в удобное вам время.
Спасибо за ваш интерес!
Мы с вами свяжемся в ближайшее время