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

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

Менеджмент
Время прочтения — 42 минуты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Персональные данные в медицине
Персональные данные в медицине
Безопасность
Вайбкодинг в контексте 1С-Битрикс
Вайбкодинг в контексте 1С-Битрикс
1С-Битрикс
Как защитить сайт на 1С-Битрикс от спам-регистраций ботов
Как защитить сайт на 1С-Битрикс от спам-регистраций ботов
1С-Битрикс
Безопасность