Разработка прототипа для сайта услуг по аренде спецтехники
Сегодня рассмотрим прототип сайта услуг по аренде спецтехники в Барнауле, что должно в него входить и как он должен выглядеть.
Прототип для сайта услуг по аренде спецтехники в Барнауле
1 Этап анализ конкурентов
Для того, чтобы понять какие страницы должны быть на сайте и с какими коммерческими факторами необходимо сделать анализ конкурентов, что у нас было сделано.
Проанализировано 15 конкурентов и выбраны растущие, на основании этих данных выписаны страницы каждого конкурента.
Пример, как делать анализ конкурентов рассказано в статье "SEO анализ конкурентов для будущего проекта".
2 Этап анализ коммерческих факторов сайтов конкурентов
На данном этапе как раз происходит анализ коммерческих факторов. По итогу у нас получается список пересечений по коммерческим факторам, которые присутствуют у всех конкурентов, и которые дополнительно можно добавить.
Пример коммерческих факторов главной страницы:
1) Логотип
2) Телефон
3) Кнопка “Заказать звонок”
4) Гео
5) Слайдер
6) Категории
7) Оплата
8) Работы
9) Отзывы
10) Вопрос-ответ
11) Прайс
12) И т.д.
3 Этап построение структуры типовых страниц и их вложенность
На данном этапе мы выстраиваем структуру типовых страниц и их вложенность. Результатом будет карта зависимостей и какие прототипы необходимо будет реализовать.
4 Разработка прототипа с учетом п.2
Сейчас мы разберем пример построения прототипа страницы категории сайта услуг по аренде спецтехники
Прототип страницы категории по аренде спецтехники
Рассмотрим более подробно прототип категории
Прототип 1 - Шапка сайта
Из прототипа 1:
- Логотип компании, на всех страницах кроме главной содержит ссылку на главную страницу
- Адрес компании
- Текстовая вставка
- Кнопка открытия формы обратной связи
- Время работы компании
- Иконка телефона и телефон
- Иконки соц сетей
- Иконка и почта
- Кнопка открытия формы обратной связи
- Основное меню
- Переход к калькулятору стоимости аренды
- Поиск по сайту
Прототип 2 - Первый экран страницы категории
Из прототипа 2:
- Хлебные крошки
- H1 главный заголовок страницы
- Итоговое число товаров в категории
- Заголовок для облака тегов
- Тег. Содержит собственное название и ссылку на страницу
- Кнопка раскрывает все теги, по умолчанию выводятся максимум в 2 строки теги.
- Открытие формы помощи в выборе - сразу же открывается нужный таб с категорией
- Поле для ввода минимальной и максимальной цены
- Другие виды фильтров
- Сброс всех фильтров и вывод всего листинга
- Подзаголовок
- Баннер новости
- Заголовок новости
- Варианты сортировок
- Варианты сортировок
- Варианты числа товаров на листинге
- Карточка транспорта, как на прототипе 4
- Кнопка содержит ссылку на карточку
Прототип 3 - Низ категории товаров
Из прототипа 3:
- Пагинация. На второй странице не забыть прописать Canonical
- Структурированный уникальный текст
- Подзаголовок
- Блок вопросов и ответов, уникальные для категории
- Форма связи, как в каталоге
Прототип 4 - Подвал
Из прототипа 4:
- Логотип, содержит ссылку на главную страницу, на всех страницах, кроме главной
- Иконка
- Номер телефона
- Иконка
- Почта
- Открывает форму для оставления заявки
- Иконки соц сетей, с ссылками на аккаунты
- Текстовый заголовок и блок ссылок на страницы о компании
- Текстовый заголовок и блок ссылок на типы техники
- Текстовый заголовок и блок ссылок на услуги
- Кнопка открытия формы обратной связи с директором
- Текстовый заголовок и блок ссылок на интересное
- Копирайт и год создания сайта
- Переход на html карту сайта
- Переход на страницу Публичной оферты
- Город. Содержит список городов, задающихся в админке.
17. Согласие на обработку куков, 1 раз выход при первом открытии
18. Кнопка согласия
Итог
Мы с вами рассмотрели построение прототипа на основании действующего проекта. Я вам подробно расписал, как строился прототип страницы категории по аренде спецтехники, и какие элементы использовались для построения.
Прототип - это экономия времени на реализацию дизайна сайта, а также творческий рубеж для маркетолога и seo оптимизатора.
В следующем кейсе по прототипам рассмотрим построение другой страницы.
P.S. Прототип - это не дизайн, и в дизайне может отличатся расположение кнопок и ссылок, но вся суть сохраняется в том виде, котором мы ее закладываем.
