Разработка прототипа для сайта услуг по аренде спецтехники

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

1 Этап анализ конкурентов

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

Проанализировано 15 конкурентов и выбраны растущие, на основании этих данных выписаны страницы каждого конкурента.

Пример, как делать анализ конкурентов рассказано в статье "SEO анализ конкурентов для будущего проекта".

2 Этап анализ коммерческих факторов сайтов конкурентов

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

Пример коммерческих факторов главной страницы:

1) Логотип

2) Телефон

3) Кнопка “Заказать звонок”

4) Гео

5) Слайдер

6) Категории

7) Оплата

8) Работы

9) Отзывы

10) Вопрос-ответ

11) Прайс

12) И т.д.

3 Этап построение структуры типовых страниц и их вложенность

На данном этапе мы выстраиваем структуру типовых страниц и их вложенность. Результатом будет карта зависимостей и какие прототипы необходимо будет реализовать.

4 Разработка прототипа с учетом п.2

Сейчас мы разберем пример построения прототипа страницы категории сайта услуг по аренде спецтехники

Прототип страницы категории по аренде спецтехники

Рассмотрим более подробно прототип категории

Прототип 1 - Шапка сайта

Из прототипа 1:

1. Логотип компании, на всех страницах кроме главной содержит ссылку на главную страницу
2. Адрес компании
3. Текстовая вставка
4. Кнопка открытия формы обратной связи
5. Время работы компании
6. Иконка телефона и телефон
7. Иконки соц сетей
8. Иконка и почта
9. Кнопка открытия формы обратной связи
10. Основное меню
11. Переход к калькулятору стоимости аренды
12. Поиск по сайту

Прототип 2 - Первый экран страницы категории

Из прототипа 2:

1. Хлебные крошки
2. H1 главный заголовок страницы
3. Итоговое число товаров в категории
4. Заголовок для облака тегов
5. Тег. Содержит собственное название и ссылку на страницу
6. Кнопка раскрывает все теги, по умолчанию выводятся максимум в 2 строки теги.
7. Открытие формы помощи в выборе - сразу же открывается нужный таб с категорией
8. Поле для ввода минимальной и максимальной цены
9. Другие виды фильтров
10. Сброс всех фильтров и вывод всего листинга
11. Подзаголовок
12. Баннер новости
13. Заголовок новости
14. Варианты сортировок
15. Варианты сортировок
16. Варианты числа товаров на листинге
17. Карточка транспорта, как на прототипе 4
18. Кнопка содержит ссылку на карточку

Прототип 3 - Низ категории товаров

Из прототипа 3:

1. Пагинация. На второй странице не забыть прописать Canonical
2. Структурированный уникальный текст
3. Подзаголовок
4. Блок вопросов и ответов, уникальные для категории
5. Форма связи, как в каталоге

Прототип 4 - Подвал

Из прототипа 4:

1. Логотип, содержит ссылку на главную страницу, на всех страницах, кроме главной
2. Иконка
3. Номер телефона
4. Иконка
5. Почта
6. Открывает форму для оставления заявки
7. Иконки соц сетей, с ссылками на аккаунты
8. Текстовый заголовок и блок ссылок на страницы о компании
9. Текстовый заголовок и блок ссылок на типы техники
10. Текстовый заголовок и блок ссылок на услуги
11. Кнопка открытия формы обратной связи с директором
12. Текстовый заголовок и блок ссылок на интересное
13. Копирайт и год создания сайта
14. Переход на html карту сайта
15. Переход на страницу Публичной оферты
16. Город. Содержит список городов, задающихся в админке.

17. Согласие на обработку куков, 1 раз выход при первом открытии

18. Кнопка согласия

Итог

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

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

В следующем кейсе по прототипам рассмотрим построение другой страницы.

P.S. Прототип - это не дизайн, и в дизайне может отличатся расположение кнопок и ссылок, но вся суть сохраняется в том виде, котором мы ее закладываем.