Разработать адаптивный дизайн интернет-магазина по продаже товаров

Разработать адаптивный дизайн с отдельными макетами для мобильной и планшетной версий.

Специализация - онлайн магазин по продаже мебели.

В настоящий момент разработан и согласован логотип + главная страница. Стиль в целом утвержден, но возможны не существенные изменения - цвет/ шрифт.

Есть полное понимание по расположению элементов на страницах - надо сделать по аналогии с др. сайтом.

Структура главной страницы:

По порядку, сверху вниз,слева на право.

В верхней части – шапка сайта: регион; ссылки на информационные страницы «о компании, доставка, отзывы

и т.д.»; окно с поиском; вход в личный кабинет.

Далее: логотип; иконки сУТП в виде мини-слайдера; контактный телефон; время работы; кнопка «заказать

звонок»; корзина;

Далее – горизонтальное выпадающее меню.

Далее: большой баннер на2/3 страницы в ширину, и справа 2 маленьких баннера на пол высоты большого

баннера.

Далее – 2 переключающиеся вкладки с карточками популярных товаров, и с товарами, на которые действуют

скидки.

Далее – текстовый CEOблок.

Далее вкладка «Портфолио»с картинками выполненных работ.

Далее вкладка «Нам доверяют» с логотипами магазинов клиентов.

Далее – блок отзывов.

Далее – блок новостей.

Далее – страница подписки на новости в СС.

Далее подвал с информационными страницами + контактами.

Дизайн внутренних страниц:

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

Нижняя часть, начиная с подписки – также для всех страниц одинаковая.

Страница категории:

1) под горизонтальным фильтром разместить хлебные крошки;

2) слева вертикальный каталог (каталог раскрыт на выбранной категории, и данная категория выделена

отдельным цветом; показать, что вручную, нажатием на плюсики, можно раскрыть

все категории);

3) под вертикальным каталогом – разместить виджет «просмотренные товары» по 2 товара в строке;

4) справа под хлебными крошками – 3 маленьких адаптивных слайдера (если убрать один или два, крайний

слева всегда растягивается по ширине).

Сделать макет как со слайдерами, так и без них;

5) После слайдеров –название категории;

6) Чуть ниже –горизонтальный фильтр (при выборе параметра фильтра, нажатии на него – он

должен подсвечиваться);

7) Ниже – краткое описание категории (показать первые 3 строчки с кнопкой «читать далее» др.

цвета; и макет где кнопка нажата и текст полностью раскрыт);

8) Ниже – карточки товаров (показать карточки с одной ценой; со старой и новой; с наведением на

карточку и показом доп. кнопок (доп. фото; быстрый просмотр; кнопками

«вкорзину» и «сравнить»;

9) Пагинация страниц: 1) в виде последней карточки; 2) в виде кнопок страниц под карточками товаров;

10) Описание категории –текст;

11) Доп. ссылки на др.категории

Страница товара:

1) под горизонтальным фильтром разместить хлебные крошки;

2) ниже на 50% от ширины страницы большая фотография товара, остальные 50% делят блок с характеристиками

товара и окна с ценой, кнопкой «Вкорзину» и информацией о доставке;

3) под основным фото, 50%от ширины страницы – занимают доп. фото. Следом за доп. фото, оставшиеся 50% -

занимает кнопка/ форма «Быстрый заказ»;

4) Ниже расположены переключающиеся вкладки «Описание», «Доставка», «Отзывы» и т.д.;

5) Разработать дизайн вкладки «Отзывы»;

6) Ниже вкладка«Аксессуары» с карточками товаров;

7) Ниже вкладка«Аналогичные товары» с карточками товаров

Страница корзины:

1) под горизонтальным фильтром разместить хлебные крошки;

2) ниже располагается таблица, разделенная на 5 частей, слева на право: фото товара; название товара;

цена; количество; сумма;

3) под добавленными вкорзину товарами выводится общая сумма заказа;

4) под суммой – окно с кнопкой «применить купон» и кнопки «продолжить покупки» и «оформить заказ»

Страница блога/ новостей

1) под горизонтальным фильтром разместить хлебные крошки;

2) слева вертикальный каталог (каталог раскрыт на выбранном разделе блога или конкретной новости, и

данный раздел/ новость, выделена отдельным цветом; показать, что вручную,

нажатием на плюсики, можно раскрыть все разделы каталога);

3) под вертикальным каталогом – разместить виджет «просмотренные товары» по 2 товара в строке;

4) справа от вертикального каталога, под хлебными крошками – название раздела Блога с

вертикальным фильтром по колич. новостей на странице;

5) под названием раздела«Блога» - разместить карточки с новостями. Последняя карточка – переключение на

след. страницу;

6) ниже – пагинация страниц.

Страница «Помощь» (спец.информационная страница, на которой под названием страницы, будут расположены

несколько вкладок с названиями др. страниц типа «Сервис», «Как заказать» и

т.д.)

1) под горизонтальным фильтром разместить хлебные крошки;

2) слева вертикальный каталог;

3) под вертикальным каталогом – разместить виджет «просмотренные товары» по 2 товара в строке;

4) под названием категории разместить вкладки;

5) под вкладками – информационный блок.

Доп. функционал:

1. Быстрый просмотр;

2. Выпадающая корзина сназванием, фото и ценой добавленного товара + кнопками «купить» и «продолжить

покупки»;

3. Фиксация верхней шапкипри прокрутке страницы на ПК версии (закрепляем до горизонтального меню

включительно);

4. Зум на странице товара(в быстром просмотре не нужен);

5. На странице категории,в карточке товара – показать, что при наведении на карточку, слева от основного

фото, появляются доп фото – при нажатии на которые, меняется основное;

6. Подготовить следующиеформы «попап»: 1) заказать звонок; 2) выбрать регион; 3) вход в личный кабинет;

4) сообщить о поступлении товара; 5) товар добавлен в корзину.