Разработка сайта по грузоперевозкам
Сегодня я вам покажу разработку сайта услуг для компании TLC. Регион продвижения ориентирован на всю страну, но основной — это Москва и область.
В этой статье хочу поделится с вами жирными идеями, и хочу поблагодарить клиента — за своевременные ответы и пунктуальность в отношении утверждений правок!
Итак поехали….
Из чего состоит любая разработка:
1 Идея клиента
2 Бриф опрос
3 Подготовка технического задания (далее — ТЗ)
4 Анализ конкурентов
5 Построение структурной карты типовых страниц
6 Построение прототипов типовых страниц
7 Дизайн главной страницы
8 Дизайн всех типовых страниц десктопной версии и мобильной
9 Верстка макетов
10 Натяжка макетов на CMS
11 Наполнение сайта контентом
12 Первичная SEO оптимизация
13 Тестированние
14 Настройка аналитики
14 Запуск проекта
Разберем каждый из этих пунктов и выжмем самый сок
Идея создания сайта
Ко мне обратились с проблемой — необходимо сделать электронное представительство для компании по международной логистике из Китая.
У заказчика было представление о аудитории с которой предстоит работать — начиная от возраста и заканчивая достатком.
Целевая аудитория определена
Основываясь на этих данных мы приняли решение оформить все данные в виде технического задания по проекту и построили первоначальный перечень страниц. Для этого заказчику был передан бриф опрос.
Бриф опрос клиента
Вы спросите — для чего заказчику заполнять какие-то вопросы? Часто бывает что у человека в голове есть абстрактная идея, но нет четкого представления. Для этого стоит ответить на ряд вопросов, позволяющих структурировать желания и представить их в виде четкого плана.
Так например вопросы могут быть следующего плана:
1 Целевая аудитория
2 Цветовая гамма
3 Сайты конкурентов, которые нравятся и т.д.
Получив такие ответы, остальным специалистам проще справится со своими задачами
Техническое задание на разработку
Один из важнейших этапов, это сформировать полноценное техническое задание, и учесть все что будет делаться в процессе разработки сайта. Такое задание позволяет четко отслеживать выполненные этапы, а так же ставит рамки по желаниям и возможностям.
Чек-лист задач на проекте
Т.е. все что обговорено в ТЗ оценивается специалистами и закладывается в часы разработки, стороннее — должно обсуждаться отдельно и соответственно дополнительные задачки увеличиваю время выполнения пропорционально сложности.
Анализ конкурентов
Имея на руках представление о идеи в форме ТЗ можно приступать к сбору необходимой информации. На первом этапе стоит анализ конкурентов.
Почему он важен спросите вы? Отвечу — зачем изобретать велосипед, возьми и объедени, то что работает, скорректировав од себя. Данный этап нужно делать скрупулёзно и ответственно, выявляя главные фишки лидирующих конкурентов.
Формат анализа конкурентов представлен на следующем рисунке:
Анализ конкурентов
Как видно из скриншота — отобраны растущие конкуренты (Зеленый цвет), как по Яндекс, так и по Google. Получив достаточный список конкурентов, выделяются самые жирные — на них мы и будем ориентироваться в первую очередь!
Структурная карта типовых страниц
Чтобы не забыть какие именно страницы стоит учесть на сайте, я предпочитаю формировать структурную карту, и уже по мере формирования прототипов отмечать что готово, а что еще нужно подготовить.
Первоначальный вид структуры выглядит следующим образом
Структура типовых страниц
Прототипы типовых страниц
После подготовки перечня типовых страниц, я приступил к формированию прототипов. Основываясь на анализе присутствующих на страницах сайтов конкурентов коммерческих факторов (таблиц, блоков текста и т.д.) были подготовлены прототипы. Часть из них представлена ниже:
Часть прототипа главной страницы
Часть прототипа услуги логистики
Сразу же при построении прототипов продумывал уникализирующие страницу элементы. Весь прототип постранично утвердился заказчиком и только после этого был переход на следующий этап.
Обязательно хочу поставить ремарку — то что утверждено на этапе прототипирования и будет реализовываться. Если вы согласны с представленным вариантом, он и будет реализован. Любая переделка на следующих этапах, вернет разработку на данный этап и сильно затормозит весь процесс + будут задействованы дополнительные часы специалистов, которые не входили в первоначальный план.
Каждую страницу специально для дизайнера описал в формате ТЗ. После этого в работу подключился мой проверенный профессионал.
Пример описания элементов прототипа
Подготовка дизайна сайта
Что первое видит посетитель на вашем сайте? Чаще всего это главная страница — это квинтэссенция информации о проекте, самая яркая и зазывающая часть. Вместе с дизайнером работа над этой страницей ведется достаточно долго, и после этого идет ее утверждение. Здесь стоит отдать должное заказчику, он оперативно принял работу, указав на ряд замечаний, которые тут же были устранены.
Сам дизайн страницы очень близок к протипу, что позволило в последующем разработчику легко воспользоваться ТЗ по прототипу и сформировать проект.
Дизайн главной страницы — яркий, насыщенный и информативный
Дизайн главной страницы
Дизайн всех типовых страниц десктопной версии и мобильной
Далее процесс шел по накатанной. Дизайнер опираясь на прототип подготовил красочные страницы по типовым страницам. Стоит отметить что в своей работе мы используем такой сервис, как https://www.figma.com/
Дизайн типовой страницы
Данный сервис мне нравится тем, что можно дать доступ и клиенту к проекту и в режиме реального времени скорректировать замечания. Также формирование прототипов — после подготовительной работы, это творческая работа, с использованием подготовленных ранее технических заготовок. О формировании прототипа и заготовок, я подготовлю отдельный пост.
Верстка макетов
Неотъемлемым плюсом сервиса — это формирование стилей. Программисту в его работе становится просто копировать готовые куски кода, в результате работа над версткой занимает меньшее время.
Стоить отметить, что на данном этапе важен самоконтроль со стороны исполнителя, чтобы в последующем не тратить время на исправления.
Выполненная задача должна работать, как швейцарские часы
Обдуманность действий и самоконтроль
Натяжка макетов на CMS
Правильная верстка позволяет бэкенд-специалисту оперативно выполнить свои работы, и заложить алгоритм функционирования. Поэтому для всех специалистов я готовлю техническое задание, чтобы каждый был в курсе функционирования всего проекта.
Мой специалист, с которым я делаю уже не первый проект, приноровился все элементы управления закладывать в удобные места. Это позволяет контент-менеджеру легко заниматься наполнением сайтов — все элементы находятся в нужных местах, и не нужно 10 раз открывать различные вкладки в админке сайта.
Наполнение сайта контентом
В ходе наполнения сайта, со стороны заказчика очень вовремя был предоставлены все необходимые для сайта данные. Это очень важный момент! Не стоит оставлять на последок подготовку контента, это затянет реализацию проекта.
В случае появления каких-либо проблем, у меня в команде организовано оперативное взаимодействие между специалистами, что позволяет быстро их решить. Например был момент что контент не входил в отведенное место — подключились дизайнер и программист и быстро решили данную ситуацию!
Первичная SEO оптимизация
Что представляет из себя данный пункт? Это проверка сайта после работ программиста:
- Проверка валидности кода
- Проверка микроразметки
- Наличие на страницах 1 единственного H1
- Проверка SEO тегов (их я готовлю заранее, чтобы к моменту внедрения страниц уже все было готово)
- Проверка alt изображений
- Проверка сайта на наличие битых ссылок
- Проверка сайта на дубликаты
Все ошибки после выявления сразу же устраняются.
Командная работа — это часть успеха компании!
Тестирование
Стараюсь следовать в совей работе поговорке:
Семь раз отмерь, один раз отрежь
Поэтому обязательно проверяйте свои работы, прежде чем представить публике. На тестирование проектов я подключаю свою команду и мы все тестируем проект, прогоняя его вдоль и поперек. Выявленные ошибки сразу же передаются ответственным специалистам.
За свою работу у болею душой, поэтому стараюсь делать с максимальной ответственностью!
Настройка аналитики
Перед самим запуском проекта необходимо сразу же настраивать аналитику. Получения оперативной информации о переходах, отказах, кликах и т.д. позволит оперативно вносить изменения на сайте и корректировать ошибки.
Не забывайте данный момент! В одном из следующих своих кейсов выложу алгоритм по которому проверяю сайт перед открытием, думаю вам будет интересно.
Запуск проекта
После всех настроек и проверок сайт открывается к индексации.
В первое время обязательно нужно следить за появлением ошибок в Яндекс.Вэбмастер, оперативно их устранять.
Проект был запущен в августе 2021 года и в настоящее время я наблюдаю за его активностью
Подводя итог могу сказать следующее — разработка сайта это кропотливая работа, требующая от каждого звена ответственного подхода. Хороший продающий сайт — это как лицо компании, поэтому стоит понимать, на таких вещах нельзя экономить!
