Как контролировать подрядчика при разработке Интернет-проекта?

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

В Indexis проектная команда состоит из 6 человек - это интернет-маркетолог, менеджер проекта, дизайнер, верстальщик, программист и контент-редактор, а роль тестировщика выполняет проектный менеджер и это оптимальный состав команды для получения отличного результата. Если при разработке нужны ещё и другие узкие специалисты, то они привлекаются дополнительно.

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

Какая информация нужна подрядчику?

Любой успешный проект начинается с брифа - анкеты, в которой вы, отвечая на вопросы, рассказываете о своих требованиях к проекту. На какие важные вопросы нужно ответить с самого начала?

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

• Покажите сайты 3-5 самых сильных конкурентов. Особое внимание обратите на те сайты, которые занимают высокие позиции в поиске Яндекс и Google по нескольким основным для вас запросам. Такие сайты выполнены, по мнению поисковиков, правильно и на них присутствует вся нужная для ваших клиентов информация. Разрабатывая проект нужно учесть все особенности, которые позволяют конкурентам находиться в топе поисковиков.
• Покажите ваших иностранных конкурентов и поставщиков, часто бывает так, что у них присутствуют фишки, которых ещё нет у ваших отечественных коллег.
• Если у вас корпоративный сайт, или интернет-магазин, или портал, то обязательно перед началом проекта соберите семантическое ядро. В случае корпоративного сайта вы поймёте какие разделы на нем нужно сделать и как их правильно назвать. В случае магазина будет понятно делать ли справочник брендов, какие фильтры для товаров использовать. Например, если вы продаете обои, то семантическое ядро покажет, что обои ищут по типу помещения - для детской, спальни, гостиной и т.д., ищут по рисунку - воздушные шары, облака, цветы, попугаи, ищут по материалу - флизилиновые или бумажные. Таких данных по результатам составления семантического ядра вы получите очень много и все это можно сразу учесть при проектировании сайта.

1 этап: Аналитика, прототип и ТЗ

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

На что нужно обратить внимание, чтобы утвердить прототип? Во-первых структуру разделов, вспомните все разделы, которые вы бы хотели видеть в проекте и их вложенность. Отдельно посмотрите каждую страницу, все ли там блоки присутствуют, устраивает ли вас их расположение - вертикальное или горизонтальное. Вы бы хотели расположить информацию в 1,2 или может 3 колонки. Будет здорово, если уже на этапе прототипа получиться использовать заголовки блоков, которые будут в боевом проекте. Проверьте как будут выглядеть всплывающие окна.

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

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

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

Если вы внимательно и вдумчиво отнесётесь к первому этапу работ, то все остальные пройдут сильно проще и быстрее.

2 этап: Дизайн

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

Здесь подрядчику нужно предоставить:

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

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

Для того, чтобы вам было проще ориентироваться в трендах дизайна, посетите помимо сайтов конкурентов, ещё и сайт Behance.com - это сообщество графических дизайнеров, а так же сайт awwwards.com - это сайт, который рейтингует дизайны и дизайнеров. На обоих есть поиск, попробуйте ввести название своей бизнес ниши на английском языке и возможно увидите интересные решения.

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

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

3 этап: Верстка

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

Поскольку мы говорим об адаптивном сайте, а другой сейчас и не имеет смысл делать, то вам необходимо будет проверить сайт на вашем настольном ПК под Windows в браузерах Chrome, Firefox, Opera и Edge. Что же нужно здесь отметить?

• верстка не должна отличаться от макета дизайна, для проверка в браузерах Chrome и Firefox вы можете использовать расширение pixelperfect, оно позволяет положить над версткой картинку с макетом и очень успешно сыграть в игру «Найти 10 отличий»;
• при наведении мыши все кликабельные элементы должны реагировать;
• элементы во всех браузерах не должны наезжать друг на друга.

Таким образом, кликайте на все ссылки, разворачивайте и сворачивайте блоки - все это должно работать корректно.

Затем, возьмите телефон на Android и протестируйте проект в Google Chrome, а здесь уже ориентируйтесь на мобильный макет. Хорошо иметь под рукой какой-нибудь iPhone из 2-х 3 -х последних поколений и протестировать проект в Safari на нем.

Если находите ошибку, то составляйте список с указанием той операционной системы и браузера, в котором проводите тестирование и этот список отправляйте разработчику. ВАЖНО: одним списком, в одном письме.

4 этап: Программирование

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

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

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

Как принимать программирование?

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

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

Если что-то работает не корректно, то нужно скопировать ссылку на баг и сделать скриншот. Общий список ошибок со скриншотами отправляйте подрядчику на электронный адрес. ВАЖНО: одним списком, в одном письме.

5 этап: Наполнение.

Итак, Вы убедились, что все работает как часы, но проект до сих пор «голый», в нем нет контента. Наполнение контентом вы можете взять на себя или поручить его разработчику, как правило услуга наполнения есть у всех. Что ж, новенький сайт готов, можно запускать, но не торопитесь. Перед тем как закупить на сайт рекламу, обязательно установите счетчики Яндекс.Метрика и Google.Analytics - вы узнаете сколько людей и из каких источников посещают ваш сайт и как себя ведут.

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

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

С нашей помощью вы можете реализовать проект любой сложности. Примеры проектов смотрите в портфолио.

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