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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разработка прототипа главной страницы интернет-магазина икон

Рисунок 1 - Шапка сайта и первый экран

1. Иконка местоположения
2. Город - определяется по ip клиента, но также содержит в себе перечень городов, заданных через зону тега <a>. Перечень городов должна быть возможность открыть и выбрать + в админке возможность редактирования списка городов
3. О нас - переход на страницу “О нас”
4. Поиск - позволяет найти товары, после ввода первых трех символов открывать перечень подходящих товаров в списке. При нажатии ввода - открывает отдельную страницу результатов поиска.
5. Сотрудничество - переход на страницу Сотрудничество
6. Оплата и доставка - переход на страницу Оплаты и Доставки
7. Как купить - переход на страницу Как купить
8. Вопросы - ответы - переход на страницу Вопросов и ответов
9. Время работы и время приема заказов
10. Новости - переход на страницу Новости
11. Отзывы - переход на страницу всех отзывов
12. Статьи - переход на страницу Статьи
13. Контакты - переход на страницу контактов
14. Иконка с Номером телефона - по нажатию идет предложение о наборе номера
15. Иконка Viber - по нажатию вызов Viber
16. Иконка WhatsApp - по нажатию вызов WhatsApp
17. Кнопка Заказать звонок - открывает форму обратного звонка
18. Корзина - открывает страницу с отобранными в корзину товарами
19. Логотип - с ссылкой на главную страницу
20. Каталог - переход на страницу каталога
21. Иконы по алфавиту - позволяет найти товары на определенную букву. Открывает страницу с иконами начинающимися на определенную букву
22. Баннер на первом экране
23. Иконы - открывает меню с иконами, а также есть переход на страницу с иконами
24. Полки для икон - открывает меню с полками для икон, а также есть переход на страницу с полками для икон
25. Иконостасы - открывает меню с иконостасами , а также есть переход на страницу с иконостасами
26. Киоты - открывает меню с киотами , а также есть переход на страницу с киотами
27. Подобрать покровителя - переход на страницу с подбором покровителя
28. Подобрать икону - переход на страницу с подбором иконы
29. Иконки стрелочки для переключения картинок баннера
30. Картинка с текстовой вставкой иконы - при нажатии переход на страницу Иконы
31. Картинка с текстовой вставкой Иконостасы - при нажатии переход на страницу Иконостасы
32. Картинка с текстовой вставкой Киоты - при нажатии переход на страницу Киоты
33. Картинка с текстовой вставкой Полки для икон - при нажатии переход на страницу Полки для икон

Пункт 30-33 настраивается в админке и позволяет задать заголовок и ссылку через зону тега <a>

34. Слайдер баннеров

Рисунок 2 - Второй экран

35. Заголовок H2-H3

36. Небольшой текст об интернет магазине до 500 символов

37. Иконка для уникального торгового предложения

38. Описание уникального торгового предложения

39. Баннер

Рисунок 3 - Третий экран

40. Табы по характеристикам товара - Хит, Новинка, Скидка

41. Табы по различным типам категорий товаров. Слайдер с возможностью вручную все задать и отредактировать. По нажатию открывает свой листинг на главной странице

42. Фото товара - формируется из основного фото товара

43. Итоговый рейтинг товара на основании отзывов

44. Всего отзывов. Для корректной работы - на каждом товаре должен быть 1 отзыв. Добавить в ноуиндекс

45. Наименование товара на листинге. Сразу подумать о возможности задания уникального наименования, отличного от карточки товара.

46. Цена со скидкой

47. Цена без скидки

48. Кнопка в корзину - отправляет единицу товара в корзину

49. Переходит в карточку товара. Открывает форму покупки товара в 1 клик

50. Свойство товара - ХИТ, Новинка или Скидка

51. Иконка добавления товара в избранное

52. Свойство товара В наличии/Нет в наличии. Также добавить в Ноуиндекс

53. Размер скидки на товар

Нажатие на фото, наименование или цену - переводит в карточку товара

Рисунок 4 - Блок подбора иконки по имени

54. Заголовок H2-H3

55. Поле для ввода Имени

56. Кнопка Подобрать - открывает страницу помощи в подборе иконы

Рисунок 5 - пятый экран

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

58. Картинка иконы

59. Название иконы

60. Кнопка Показать еще - Открывает предусмотренную категорию (каталог), ссылку на которую задают в админке

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

62. Теги Популярных разделов с ссылками на соответствующие категории. Обязательно предусмотреть кнопку показать еще или сделать слайдер

Рисунок 6 - шестой экран

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

64. Перечисление ближайших праздников

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

66. Перечисление Поводов - переход на страницу с подбором подарков для выбранного праздника. (Ссылка на соответствующую категорию)

67. Баннер Новинки

Рисунок 7 - Блок с отзывами

68. Итоговый рейтинг - по отзывам о компании

69. Имя отправителя

70. Время и дата отзыва

71. Текст отзыва

72. Имя Менеджера

73. Ответ Менеджера

74. Кнопка Оставить отзыв

75. Итоговая оценка и всего оценок

76. Оценка данного отзыва

77. Прикрепленное к отзыву фото

Рисунок 8 - Блок Статьи и Новости

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

79. Табы типов статей. По нажатию открывают последнюю статью, новость, видео

80. Таб Новости

81. Название статьи

82. Баннер статьи

83. Дата, когда была выложена статья

84. Краткое описание статьи

85. Кнопка Читать - с переходом на статью. При наведении изменение цвета

86. Слайдер статей

87. Форма обратной связи

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

89. Поле для ввода имени

90. Поле для ввода E-mail

91. Кнопка Подписаться - отправление данных. Выдает сообщение о некорректном вводе имени или почты.

92. Текст о политике конфиденциальности

Рисунок 9 - Блок О нас

93. Текст о компании

Рисунок 10 - Блок География заказов

94. Заголовок H2-H3

95. Карта

96. Откуда и сколько заказывали икон

Рисунок 10 - Подвал

97. Логотип компании

98. Блок о компании с перечнем страниц. Редактироваться должно в админке

99. Категории со ссылкой на свою страницу

100. Блок с категориями с перечнем категорий. Редактироваться должно в админке

101. Текстовая вставка

102. Иконки со ссылками на соц сети

103. Контакты

104. Телефон

105. Кнопка заказать звонок - вызывает форму обратного звонка

106. Почта

107. Ссылка на подписку

108. Открывается форма подписки

109. Ссылка на публичную оферту

110. Карта сайта - с ссылкой на карту сайта

111. копирайт и год сайта

112. ЮР данные

Итог

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

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

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

P.S.

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