Создать небольшой сайт

Техническое задание на УП ПМ.08

К Вам обратилась компания «My-Giro», занимающаяся продажей гироскутеров, чтобы Вы создали им небольшой сайт, который бы рассказывал потенциальным клиентам о компании и демонстрировал их товарный ряд. Главная цель – совершение заказа потенциальным клиентом. 

Технологии: HTML5, CSS3, Граф. дизайн.

Описание проекта и задач:

Вам необходимо разработать одностраничный сайт в формате Landing Page, на котором будут находиться следующие блоки:

1. Шапка, содержащая логотип, телефон компании и кнопку для заказа звонка;

2. Блок со слайдером, содержащим преимущества компании;

3. Блок, содержащий особенности гироскутеров, электросамокатов и сигвеев;

4. Блок со списком товаров: фото, название, цена, вид;

5. Фильтр по виду: Всё, Гироскутеры, Электросамокаты, Сигвеи;

6. Блок, содержащий информацию о консультантах;

7. Блок, содержащий бренды, представленные в магазине;

8. Блок, содержащий полезную информацию: фото и текст к нему;

9. Блок, содержащий краткую информацию о компании и форму для подписки на email-рассылки. Поля формы: имя, адрес эл. почты, кнопка «Подписаться».

10. Блок с отзывами.

11. Кнопка, позволяющая вернуться наверх.

Общее требования к дизайну:

• Дизайн сайта должен соответствовать целевой аудитории. Целевая аудитория: 20-30 летние жители мегаполисов;

• Дизайн сайта должен соответствовать деятельности компании;

• Должны использоваться простые и понятные заголовки;

• Дизайн сайта должен быть привлекателен:

a. Размеры шрифтов должны использоваться гармонично (должна быть предусмотрена некая иерархия размеров); 

b. Используемые цвета должны помогать восприятию контента;

с. Свободное пространство должно быть равномерным в однотипных блоках.

• Интерфейс должен быть удобен.

Общие требования к логотипу:

• Логотип должен быть разработан в векторе.

• Логотип должен быть оригинальным и соответствовать теме сайта. 

Макет сайта должен быть разработан в Adobe PhotoShop.

Интерактивные требования:

• Изначально в блоке со списком товаров выводятся товары по всем видам. При клике на соответствующий вид в фильтре, в блоке остаются только товары этого вида. При клике на категорию «Все» фильтр должен сбрасываться;

• Преимущества в блоке со слайдером должны переключаться;

• Кнопка, позволяющая вернуться наверх страницы всегда зафиксирована снизу экрана;

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

• HTML и CSS должны быть валидны;

• Ваш код должен быть структурирован и комментирован. Его должен понять другой разработчик; 

• Верстка должна быть, в том числе адаптирована для просмотра через планшеты (1024X1366px).