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

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

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. Кнопка перехода к калькулятору ремонта
5. Адрес, настраивается в админке для всего сайта
6. Время работу - также настраивается в 1 месте для всего сайта
7. Почта, по нажатию переход к написанию письма
8. Кнопка открытия формы обратной связи
9. Телефон, по нажатию предлагает вызов
10. Иконки соц сетей - по нажатию переход к диалогу
11. Сэндвич, открывает меню
12. Основной пункт меню, задается в админке
13. Основной пункт меню, задается в админке
14. Основной пункт меню, задается в админке. Ведет в портфолио
15. Основной пункт меню, задается в админке. Ведет к информации об оплате
16. Основной пункт меню, задается в админке. Ведет к информации об акциях
17. Основной пункт меню, задается в админке. Ведет к списку отзывов
18. Основной пункт меню, задается в админке. Открывает список страниц о компании, сам пункт также имеет ссылку на страницу нужную
19. Основной пункт меню, задается в админке - ведет на страницу контакты
20. Заголовок H1 - единственный на странице. На других баннерах не должно быть
21. Текстовая вставка
22. Открытие формы обратной связи
23. Баннер

Прототип 2 - Второй экран главной страницы

Из прототипа 2:

1. Текстовая вставка
2. Иконка УТП
3. Текстовая вставка
4. Текстовая вставка

Прототип 3 - Главная страница о компании

Из прототипа 3:

1. Текстовая вставка - структурированный текст
2. Переход на страницу с данными о компании
3. Видео - может быть интеграция с Youtube канала

Прототип 4 - Главная страница обзоры объектов

Из прототипа 4:

1. Подзаголовок H2 или ниже
2. Таб со всеми типа объектов
3. Таб с дизайнерскими объектами
4. Таб с объектами, где делался евроремонт
5. Таб с объектами, где делали капитальный ремонт
6. Объекты по площади
7. Слайдер
8. Фото объекта
9. Видео обзор объекта
10. Иконка метража
11. Текстовая вставка
12. Значение
13. Кнопка открытия формы обратной связи

Прототип 5 - Главная страница обзоры объектов

Из прототипа 5:

1. Подзаголовок H2 или ниже
2. Текстовая вставка
3. Выбор площади - здесь стоит дать ограничения по вводу значения
4. Чек-бокс
5. Текстовая вставка
6. Фото ремонта, какая-то картинка под тип ремонта
7. Тип ремонта
8. Стоимость работ за м2
9. Стоимость черновых материалов
10. Стоимость чистовых материалов
11. Текстовое описание
12. Итоговая стоимость
13. Переход к форме обратной связи

Прототип 6 - Главная страница Процесс ремонта

Из прототипа 6:

1. Подзаголовок H2 или ниже
2. Текстовая вставка
3. Фото процесса
4. Слайдер следующего этапа процесса
5. Текстовая вставка
6. Заголовок H2 или ниже
7. Выпадающий список
8. Чек-бокс
9. Текстовая вставка
10. Чек-бокс
11. Открытие формы обратной связи
12. Текстовая вставка

Прототип 7 - Главная страница Дизайн проект

Из прототипа 7:

1. Подзаголовок H2 или ниже
2. Выбор площади - здесь стоит дать ограничения по вводу значения
3. Чек-бокс
4. Текстовая вставка
5. Фото ремонта, какая-то картинка под тип ремонта
6. Тип проекта
7. Стоимость работ за м2
8. Ненумерованный список
9. Текстовая вставка
10. Итоговая стоимость
11. Переход к форме обратной связи

Прототип 8 - Главная страница Работы по ремонту

Из прототипа 8:

1. Подзаголовок H2 или ниже
2. Фотографий проекта
3. Видео обзор
4. Обзор 3D
5. Первое выводимое фото
6. Слайдер
7. Наименование
8. Расположение проекта
9. Площадь
10. Время работ
11. Количество комнат
12. Стоимость

Прототип 9 - Главная страница порядок работ

Из прототипа 9:

1. Подзаголовок H2 или ниже
2. Иконка этапа
3. Подпись

Прототип 10 - Главная страница Специалисты

Из прототипа 10:

1. Подзаголовок H2 или ниже
2. Текстовая вставка
3. Таб по типу работ, со своими специалистами
4. Следующий таб
5. Показать следующие табы - можно слайдер сделать
6. ФИО специалиста выбранный
7. ФИО специалиста
8. Слайдер ФИО
9. Специальность и лучшие навыки
10. Основное фото
11. Фото за работой
12. Текстовая подпись
13. Оценок по отзывам
14. Сертификация
15. Когда начал сотрудничать

Прототип 11 - Главная страница Сертификаты

Из прототипа 11:

1. Подзаголовок H2 или ниже
2. Фото сертификата

Прототип 12 - Главная страница отзывы

Из прототипа 12:

1. Подзаголовок H2 или ниже
2. Таб с вариантами отзывов
3. Таб с видео отзывами
4. Итоговая оценка по отзывам
5. Всего оценок
6. Имя того, кто отзыв оставил
7. Оценка по отзыву
8. Фото, прикрепленное к отзыву
9. Текст отзыва
10. Переход на страницу всех отзывов

Прототип 12 (2) - Главная страница отзывы

Из прототипа 12(2):

1. Таб с видео отзывов
2. Сам видеоотзыв
3. Наименование отзыва, в зоне тега <a>
4. Переход на страницу всех отзывов

Прототип 13 - Главная страница Новости

Из прототипа 13:

1. Подзаголовок H2 или ниже
2. Подзаголовок H3 или ниже
3. Переход на все новости
4. Дата новости
5. Заголовок новости
6. Фон новости
7. Наименование новости
8. Дата новости
9. Другая новость

Прототип 14 - Главная страница FAQ

Из прототипа 14:

1. Подзаголовок H2 или ниже
2. Закрытый вопрос ответ
3. Открытый вопрос ответ
4. Подзаголовок H2 или ниже
5. Текстовая вставка
6. Поле ввода номера, с проверкой введенного номера
7. Передача введенных данных
8. Согласие на обработку персональных данных

Прототип 15 - Главная страница Калькулятор

Из прототипа 15:

1. Подзаголовок H2 или ниже
2. Вопросы для выбора данных
3. Чек-бокс
4. Текстовая вставка
5. Выбор площади - бегунок
6. Площадь выбранная
7. Выпадающий список вариантов
8. Фото специалиста
9. ФИО
10. Должность
11. Бегунок сроков
12. Получить скидку
13. Передать введенные данные

Прототип 16 - Главная страница Подвал

Из прототипа 16:

1. Логотип, на всех страницах кроме главной страницы ссылка на главную
2. Иконка телефона
3. Номер телефона
4. Иконка почты
5. Почта
6. Открытие формы обратной связи
7. Иконки соц сетей. Содержат ссылку на соц сеть
8. Блок ссылок о компании
9. Ссылки на страницы о компании
10. Открытие формы обратной связи
11. Копирайт
12. Переход на карту сайта
13. Переход на политику конфиденциальности
14. Переход на страницу пользовательского соглашению
15. Согласие на обработку куков
16. Согласие

Итог

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

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

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

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