Стандартные элементы страниц

Стандартные элементы страниц – это элементы, присутствующие на всех страницах сайта.

Шапка страницы

Шапка страницы (header) – верхняя часть страницы, визуально отделенная от основного контента, содержащая навигаторы и графические элементы оформления.

Шапка страницы содержит:

● элемент фирменного стиля сайта (логотип);

● навигация

o Главная страница

o Наши услуги

o Наши работы

o Вопрос - ответ

o Контакты

● Телефон

● Кнопка «заказать звонок»

Логотип сайта является ссылкой на главную страницу сайта, на всех страницах сайта, за исключением главной страницы. На главной странице ссылкой не является.

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

Подвал страницы

Подвал страницы (footer) – нижняя часть страницы, визуально отделенная от основного контента.

Подвал страницы содержит:

● элемент фирменного стиля сайта (логотип);

● социальные сети

● копирайты;

● контакты

● ссылка «политика конфиденциальности» и «пользовательское соглашение»

 

Навигационная цепочка

«Хлебные крошки» (англ. Breadcrumbs).

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

Пагинация по страница

Присутствует на страницах Наши проекты и Отзывы

Описание страниц

Главная страница

Содержание страницы:

● Шапка страницы

● Стартовый блок:

○ Фотография:

○ Заголовок

○ Подзаголовок

○ Кнопка «Рассчитать стоимость»

● Преимущества

○ Список состоит не менее чем из 4 пунктов:

■ Иконка;

■ Описание в одно предложение;

● Описание самой компании

○ Текстовый блок

● Этапы работы

○ Список этапов работы

■ Иконка

■ Описание

● Подвал страницы

Наши услуги

Содержание страницы:

● Шапка страницы

● Навигационное меню категорий

○ Ремонт квартир под ключ

○ Капитальный ремонт

○ И т.д.

● Описание услуги + кнопка «Рассчитать стоимость»

○ При клике на кнопку появляется модальное окно с формой калькулятора

● Подвал страницы

Наши работы

Содержание страницы:

● Шапка страницы

● Список проектов

○ Фотография (или галерея)

○ Описание проекта

○ Кнопка “Узнать стоимость”

■ При клике на кнопку появляется модальное окно с формой обратной связи

● Пагинация по страницам

● Подвал страницы

Вопрос - ответ

Содержание страницы:

● Шапка страницы

● Список вопросов

○ Вопрос

○ Ответ

● Подвал страницы

Контакты

Содержание страницы:

● Шапка страницы

● Контактные данные

○ Телефон

○ Адрес

○ Электронная почта

● Форма для связи

● Подвал страницы

 

 

Формы

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

Контактная форма

Действующее лицо: незарегистрированный пользователь.

Интерактивные элементы

Элемент	Обязательно для заполнения	Примечание
Поле «Имя»	да
Поле «E-mail»	нет	Проверка на валидацию
Поле «Телефон»	да	Проверка на валидацию
Капча	да
Чек-бокс «Я согласен на обработку персональных данных согласно Политике конфиденциальности»	да	При клике по ссылке «Политике конфиденциальности» пользователю в новой вкладке открывается PDF-страница «Политика конфиденциальности».
Кнопка «Отправить»

Основной сценарий:

Пользователь заполняет поля, нажимает на кнопку «отправить». После нажатия на кнопку «отправить» в этом же блоке появляется окно успешного бронирования с текстом «Спасибо, ваша заявка отправлена! Мы свяжемся с вами и ответим на все ваши вопросы».

Форма заказать звонок / Узнать стоимость

Действующее лицо: незарегистрированный пользователь.

Интерактивные элементы

Элемент	Обязательно для заполнения	Примечание
Поле «Имя»	да	Проверка на валидацию
Поле «Телефон»	да	Проверка на валидацию
Кнопка «Отправить»

Основной сценарий:

Пользователь заполняет поля, нажимает на кнопку «отправить». После нажатия на кнопку «отправить» в этом же блоке появляется окно успешного бронирования с текстом «Спасибо, ваша заявка отправлена! Мы свяжемся с вами и ответим на все ваши вопросы».

Форма расчет стоимости

Действующее лицо: незарегистрированный пользователь.

Интерактивные элементы

Элемент	Обязательно для заполнения	Примечание
Поле «Имя»	да
Поле «Телефон»	да	Проверка на валидацию
Поле «Тип Жилья»	да
Поле «Количество комнат»	да
Поле «Необходимо»	да
Поле «Площадь»	да
Поле «Высота потолков»	да
Кнопка «Отправить»

Основной сценарий:

Пользователь заполняет поля, нажимает на кнопку «отправить». После нажатия на кнопку «отправить» в этом же блоке появляется окно успешного бронирования с текстом «Спасибо, ваша заявка отправлена! Мы свяжемся с вами и ответим на все ваши вопросы».

Функциональные требования

1. При скролле страницы header должен прилипать к верху окна (эффект slicky)
2. В пунктах меню подсвечивается активный пункт меню (на какой странице сейчас находишься)
3. Все взаимодействия с кликабельными элементами должны происходить плавно
4. Стиль и функционал калькулятора оформляется на ваше усмотрение

 

Нефункциональные требования

Контент

Кто предоставляет контент – заказчик или исполнитель своими силами генерирует его

Дизайн

Для разработки сайта создаются прототипы, на основе которых осуществляются последующие работы по дизайну.

Стилистическое оформление сайта основывается на имеющемся брендбуке проекта и материалах текущего сайта.

Также рекомендуем ссылаться на «Бриф на дизайн» и другие документы, которые позволяют обеспечить базу для работ по дизайну.

Требования к верстке

Необходимо выполнить HTML, CSS, JS (jQuery) верстку сайта по макету, предоставленному в Figma.