Услуга Разработка прототипа интернет-магазина
Цель Функциональность поискового продвижения без ущерба для дизайна
Результат Полноценный прототипа интернет-магазина электрики

Разработка прототипа для интернет-магазина электрики

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

Прототип интернет-магазина электрики


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. Итоговый рейтинг по отзывам - идет в Shema
  5. Всего отзывов
  6. Артикул товара
  7. Новая цена со скидкой
  8. Старая цена без скидки
  9. Экономия в рублях
  10. Размер скидки
  11. Текстовая вставка
  12. В наличии/не в наличии
  13. Кнопка в корзину - отправляет единицу товара в корзину
  14. Добавление товара в избранное
  15. Открывает форму покупки товара в 1 клик
  16. Количество товара - с возможность добавлять/убавлять
  17. Характеристики товара. Настраиваются в админке
  18. Кнопка Все характеристики - открывает весь перечень характеристик товара
  19. Информация о доставке
Рисунок 2 - описание товара

20. Табы описания товара

21. Название

22. Значение

Рисунок 3 - блок Похожие товары и Смотрите так же

23. Текстовый блок - описание товара

24. Заголовок Н2-Н3

25. Картинка товара

26. Название товара

27. Цена товара

28. Заголовок Н2-Н3

29. Название категории

30. Теги категории

31. Кнопка Показать еще - раскрывает весь список тегов

Рисунок 4 - Блок С этим товаром покупают

32. Заголовок Н2-Н3

33. Карточка товара

Итог

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

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

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

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

Обсудим ваш проект бесплатно

Сделайте заказ прямо сейчас, и уже сегодня мы приступим к работе!
Заполняя данную форму вы соглашаетесь на обработку персональных данных в соответствии с законом №152-ФЗ "О персональных данных"