Услуга Разработка дизайна сайта услуг
Цель Функциональный прототип для SEO продвижения
Результат 15 прототипов

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

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

Прототип сайта по ремонту и замене замков

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

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

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

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

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

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

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

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

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

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

Структура типовых страниц

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

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

Прототип главной страницы

Рисунок 1 - Прототип шапки

Из рисунка 1:

1) Гео. Данный блок необходим, только для SEO продвижения. В него будем добавлять города Московской области
2) Ссылка на страницу “О компании”
3) Ссылка на страницу “Цены”
4) Ссылка на страницу “Гарантия”
5) Ссылка на страницу “Наши работы”
6) Ссылка на страницу “Отзывы”
7) Ссылка на страницу “Контакты”
8) Логотип компании - с ссылкой на главную страницу
9) Услуги - при нажатии открываются основные направления
10) Режим работы компании
11) Кнопка “Калькулятор цен” - при нажатии перемещение на калькулятор
12) Кнопка “Оставить заявку” - показывается окно для заполнения данных
13) Кнопка “Перезвоните мне” - такая же форма, как в пункте 12
14) Адрес компании
15) Кликабельный Московский номер
16) Вотсап - при нажатии переход на чат с менеджером
17) Вайбер - при нажатии переход на общение с менеджером
18) Основные услуги в виде иконок с текстом

Рисунок 2 - Прототип первого экрана главной

Из рисунка 2:

1) Н1
2) Текст - для привлечения и добавления ЛСИ слов
3) УТП 1
4) УТП 2
5) УТП 3
6) Поле ввода телефона с проверкой на ввод
7) Текст перед формой заявки
8) Кнопка “Вызвать мастера” - при нажатии уходит заявка на почту и в админку сайта, если номер введен верно
9) Текст иконки
10) Иконка
11) Картинка двери
12) Ссылка на услугу
13) Ссылка на услугу
14) Ссылка на услугу

Рисунок 3 - Прототип прайса на главной

Из рисунка 3:

1) Н2
2) При наведении на ячейку, если есть подсветка, значит можно перейти на страницу
3) Нет ссылки
4) Цена услуги
5) Текст об услуге

Рисунок 4 - Прототип услуг


Из рисунка 4:

1) Н2
2) Карточка услуги
3) Иконка услуги
4) Название услуги и цена через зону тега <а>
5) Кнопка “Посмотреть все услуги” при нажатии переход на страницу со всеми услугами
6) Карточка услуги при наведении на нее
7) Название услуги через зону тега а
8) Цена
9) Текст об услуге с ЛСИ словами
10) Кнопка “Подробнее” при нажатии переход на услугу
11) Бесконечный слайдер

Рисунок 5 - Прототип этапов работы

Из рисунка 5:

1) Н3
2) Этап 1
3) Кликабельный телефон
4) Этап 2
5) Этап 3
6) Этап 4


Рисунок 6 - Прототип калькулятора

Из рисунка 6:

1) Н3
2) Первый этап “Выбор услуги”
3) Активный выбор
4) Неактивный
5) Второй этап “Выбор типа замка”
6) Активный выбор
7) Выбор из списка бренда замка
8) Третий этап “Выбор типа двери”
9) Радиобаттон выбора - можно выбрать 1 вид
10) Четвертый этап “Выбор дополнительной опции”
11) Чекбокс, можно выбрать несколько дополнительных действий
12) Поле ввода адреса
13) Подсчет стоимости - цена
14) Кнопка расчета - при нажатии считается на основании выбранных данных и происходит появление кнопки “Заказать эту услугу”
15) Кнопка “Заказать эту услугу” - при нажатии выходит форма, при этом все данные с калькулятора передаются в заявке
16) Текст, как работать с калькулятором

Рисунок 7 - Прототип Гео

Из рисунка 7:

1) Н2
2) Не активный район
3) Активный район - на который нажали, сама кнопка в зоне тега а
4) Активный выбранный район - в зоне тега а
5) Неактивный район, но находится в зоне тега а, при нажатии смена карточек услуг
6) Карточка услуги для района
7) Иконка услуги
8) Тест в зоне тега а услуги
9) Цена услуги
10) Кнопка “Посмотреть все услуги района N” при нажатии попадаем на страницу со всеми услугами для данного района

Рисунок 8 - Прототип брендов замков

Из рисунок 8:

1) Н2
2) Логотип замка
3) Бесконечный слайдер логотипов
4) Название замка через зону тега а

Рисунок 9 - Прототип типов замков

Из рисунка 9:

1)Н2
2) Название типов замков через зону тега а, т.е. при нажатии можно попасть на страницу услуги связанной с данным типом замков


Рисунок 10 - Прототип наши работы

Из рисунок 10:

1) Н2
2) Картинка работы - кликабельная
3) Слайдер
4) Название работы через зону тега а


Рисунок 11 - Прототип отзывов

Из рисунка 11:

1) Н2
2) Картинка работы
3) Автор отзыва
4) Оценка
5) Текст отзыва
6) Слайдер отзывов
7) Кнопка “Оставить отзыв”, при нажатии открывается окно, рисунок 12

Рисунок 12 - Прототип формы оставить отзыв

Из рисунка 12:

1) Н3
2) Текст сопровождения
3) Поле ввода имени - обязательное
4) Поле ввода телефона - обязательное
5) Поле ссылки на соц сети - не обязательное
6) Поле оценки работы
7) Поле выбора услуги - обязательное
8) Поле ввода имени мастера - обязательно
9) Поле ввода текста отзыва - обязательное
10) Чекбокс - согласия на обработку персональных данных
11) Кнопка “Отправить отзыв” - срабатывает если все обязательные поля введены

Рисунок 14 - Прототип вопрос-ответ

Из рисунка 14:

1) Вопрос - ответ - неактивный
2) Краткое содержание вопрос-ответ
3) Открытый ответ на вопрос

Рисунок 15 - Прототип подвала сайта

Из рисунка 15:

1) Н2
2) Текст о компании
3) Логотип компании, как в шапке
4) Адрес компании
5) Режим работы компании
6) Основные услуги компании
7) Страницы для клиентов
8) Кликабельный номер телефона
9) Кнопка “Перезвоните мне”, как в шапке
10) Вотсап и вайбер, как в шапке
11) Кликабельная электронная почта
12) Кнопка “Калькулятор цен”, как в шапке
13) Копирайт

Итог по разработке прототипа для сайта услуг по ремонту замков

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

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

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

P.S.

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

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

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