Какие этапы разработки сайта важно согласовывать

Согласование
Разработка
Примеры из опыта
Вадим Кендюхов
Вадим Кендюхов
,
08 августа 2017

Если вы не хотите читать всю статью, для вас мы выделили тезисы

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

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

Важно!

Необходимо соблюдать график сдачи этапов работ

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

01. Бриф

Бриф

Список ответов клиентов на ключевые вопросы, выполняющий функцию технического задания

Все начинается с него. Конечно, лучший способ описать все задачи проекта – это детально проработать Техническое задание. Но работа над ним может занять не одну неделю, учитывая согласование отдельных его частей, что значительно увеличит стоимость всего проекта. При создании сайта с небольшим бюджетом разработка ТЗ неслыханная роскошь для разработчика. Здесь нам на помощь приходит Бриф. Это упрощенная форма ТЗ в форме анкеты. В разных студиях Бриф может содержать от 15-20 вопросов до 150 (Карл!). Этот документ позволяет достаточно быстро собрать всю необходимую от клиента ключевую информацию и приступить к следующему этапу – проектированию. Таким образом, студии могут заменить разработку ТЗ тремя этапами: Бриф, проектирование, прототипирование.

02. Анализ сайтов конкурентов

Анализ конкурентов

Позволяет определить поведенческие факторы, интересы, график активности вашего пользователя

Если у вас в кармане нет свободного миллиона на несколько детально проработанных дизайн-концепций вашего сайта, превентивных маркетинговых кампаний и ряд А/Б-тестирований, ваш лучший помощник – конкурент. Причем не абы какой, а лучший, лидер отрасли. Именно эти первопроходцы положили на алтарь своего успеха уйму времени, денег и нервов. Они проделали за вас всю работу — проанализировали поведенческие факторы, интересы, график активности и многое другое. У вашего конкурента можно многому научиться, все отстройки должны быть тщательно выверены, а все его наработки должны быть взяты на вооружение!

03. Получение материалов по «первому списку»

Процесс получения от заказчика материалов мы намеренно разбили на два этапа:

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

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

04. Проектирование сайта

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

Постановка задач к функциональности, структуре, дизайну и эффектам на сайте

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

05. Прототипирование

Прототип

Создание схематичного представления сайта

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

06. Согласование прототипа

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

07. Разработка дизайн-концепции

Дизайн

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

На основе созданного прототипа разрабатывается дизайн. Результатом данного этапа является дизайн-макет в формате PSD, реже в форматах CDR, SKETCH, AI или XD. На практике макет для согласования предоставляется клиентам в виде изображения формата JPG или PNG. В зависимости от бюджета проекта прорисовывается от 3 страниц (главной и 2 внутренних) до нескольких десятков. В последнее время необходимыми становятся варианты макетов для мобильных устройств, однако реализуются они только в средних и крупных проектах, а в маленьких вопросы мобильного дизайна перекладываются на плечи front-end разработчиков.

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

08. Согласование дизайн-концепции

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

09. Получение материалов по «второму списку»

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

10. Сборка и программирование

Сборка сайта

Техническая реализация сайта и его функциональности

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

11. Контентное наполнение

Контент

Заполнение сайта материалами заказчика

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

12. Верстка сайта

Верстка

Верстка десктопной версии сайта, ориентированной на настольные компьютеры и ноутбуки

Собранный и заполненный сайт вместе с дизайн-макетом передается front-end разработчикам. Их задачей является «надеть» на готовый сайт дизайн. Учитывая, что далеко не всегда в верстку поступают макеты всех страниц, на данном этапе часто привлекается и дизайнер, работавший над концепцией. В результате мы получаем дизайн, как на картинке, с набором дополнительных эффектов – поведение элементов навигации при наведении, нажатии, горизонтальном и вертикальном пролистывании, анимацией отдельных элементов.

13. Согласование десктопной версии сайта

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

14. Адаптивная верстка

Адаптивность

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

После согласования десктопной версии сайта вновь к проекту подключается дизайнер. Вместе в front-end разработчиком они прорабатывают верстку для мобильных устройств – планшетов и смартфонов. Зачастую адаптивная версия включает в себя 4 состояния: горизонтально повернутый планшет, вертикально повернутый планшет, горизонтально повернутый смартфон и вертикально повернутый смартфон. Отмечу, что с увеличением доли пользователей, использующих смартфоны, необходимость в большом количестве состояний адаптивной верстки постепенно уменьшается.

15. Согласование адаптивной версии

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

16. Тестирование и исправление ошибок

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

Проверка структуры сайта и его функциональности

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

17. Подготовка сайта к запуску

Подготовка к запуску

Проверка сайта по чек-листу (списку требований)

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

18. Запуск и согласование проекта

Запуск

Перенос сайта на оригинальный домен, настройка кэширования

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

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

Вадим Кендюхов
Вадим Кендюхов
Директор по развитию, сооснователь студии

Последние статьи

11 ноября 2017
Если вы столкнулись с сомнениями и неуверенностью в себе, проделав путь от разработчика до главы собственного агентства, это нормально.
Нетология
 
09 сентября 2017
Мы собрали 20 критериев интернет-магазина, которому не страшно доверять
Советы
08 августа 2017
Описываем все этапы разработки сайта и указываем, какие из них обязательно нужно согласовывать с заказчиком
Согласование
 
07 июля 2017
4 июля были подведены итоги ежегодного рейтинга веб-студий, наша студия добилась за год больших результатов!
Создание сайтов
 

Готовы на собственный сайт? Оставьте заявку!

Оставьте заявку любым удобным для вас способом — по телефону, в социальных сетях, в мессенджерах или заполните форму. Мы свяжемся с вами в считанные минуты!

Оставить заявку