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

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

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

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

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

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

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

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

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

• Логотип
• Телефон
• Кнопка “Заказать звонок”
• Гео
• Слайдер
• Категории
• Оплата
• Работы
• Отзывы
• Вопрос-ответ
• Прайс
• И т.д.м

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. Прототип - это не дизайн, и в дизайне может отличаться расположение кнопок и ссылок, но вся суть сохраняется в том виде, в котором мы ее закладываем.