Разработка прототипа для сайта санатория Сибирь

Сегодня мы рассмотрим прототип сайта по санаторно-курортному лечению “Сибирь”.

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

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

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

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

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

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

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

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

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

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

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

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

Прототип главной страницы санатория “Сибирь”

Сейчас рассмотрим каждый элемент страницы.

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

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

Из рисунка 1:

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

Рисунок 1.1 - Меню основное

Из рисунка 1.1:

1) Иконка
2) Эффект при наведении на поле меню
3) Фильтр4) Страницы
5) Картинка к странице меняющаяся

22) Меню “Спецпредложений”

Рисунок 2 - 1 экран

Из рисунка 2:

1) Картинка живая
2) Н1
3) Форма бронирования
4) Выбор даты заезда
5) Выбор даты выезда
6) Выбор количества гостей
7) Поиск номера

Рисунок 3 - Блок с программами

Из рисунка 3:

1) Заголовок Н2
2) Текст пояснения
3) Слайдер
4) Активный выбор
5) Не активный выбор
6) Картинка программы
7) Заголовок программы Н3
8) Краткий текст о программе
9) Кнопка “Подробнее”

Рисунок 4 - Выбор услуги

Из рисунка 4:

1) Иконка ативная
2) Иконка неактивная
3) Активный выбор всех номеров
4) Отдельный номер, рисунок 4.1 и 4.2

Рисунок 4.1 - Выбор номера

Из рисунка 4.1:

1) Выбранный корпус
2) Картинка корпуса
3) Номер корпуса

Рисунок 4.2 - Выбор коттеджа

Из рисунка 4.2:

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

Рисунок 4.3 - Выбор раздела питания

Из рисунка 4.3:

1) Выбор вида питания
2) Фото ресторана
3) Название
4) Описание
5) Картинки питания
6) Кнопка перехода на подробное описание ресторана

Рисунок 5 - Спецпредложения

Из рисунка 5:

1) Побуждение
2) Кнопка брони
3) Н2
4) Картинка спецпредложения
5) Переход на страницу

Рисунок 6 - Информация

Из рисунка 6:

1) Фото персонала
2) Фио, должность и слова сотрудника
3) Н3
4) Текст
5) Фото санатория
6) Активное фото санатория
7) Название фото

Рисунок 7 - Отзывы и статьи

Из рисунка 7:

1) Н2
2) Рейтинг
3) ФИО
4) Текст отзыва
5) Плюсы
6) Минусы
7) Кнопка на страницу всех отзывов
8) Н2
9) Обложка
10) Дата публикации
11) Заголовок
12) Краткое описание

Рисунок 8 - Контакты

Из рисунка 8:

1) Адрес
2) Почта
3) Картинка телефона
4) Заголовок Н3
5) Ссылка на Google
6) Ссылка на App Store
7) Расположение на карте

Рисунок 9 - Подвал сайта

Из рисунка 9:

1) Ссылка на бронирование
2) Ссылка на страницу цен
3) Ссылка на платные услуги
4) Фильтр Новости санатория
5) Ссылки на страницы по новостям
6) Фильтр по размещению и питанию
7) Фильтр по лечению8) Фильтр по отдыху
9) Фильтр контактов
10) Фильтр важной информации
11) Ссылка на фотогалерею
12) Ссылка на страницу по конференц слугам
13) Ссылка на страницу с графиком мероприятий
14) Ссылка на страницу по спецпредложения

Итог

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

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

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

P.S.

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