Дизайн интернет-магазина официального партнера Schneider Electric

Статус:
Дизайн готов
Ссылка:
Задача:
Разработать дизайн-проект интернет-магазина, включающий в себя главную страницу, каталог, карточку товара, корзину, страницу оформления заказа, всплывающие окна.
Решение:

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

#00AB4D
#42B4E6
#E83032
Font-family:Arial

Поскольку Schneider Electric предоставляет свои баннеры и они выполнены в определенном стиле, решено сделать кнопки также скругленные, чтобы всё на сайте смотрелось гармонично. Были разработаны иконки для идентификации свойств товаров: новые, хиты, рекомендованные и со скидками.

Требование к главной странице: узкая шапка, чтобы после слайдера с банерами от самого бренда были на первом экране видны и товары (которых планируется быть всего на сайте порядка 30тыс) при этом в шапке нужно, чтобы сразу была вся основная информация: город, контактная информация (оба телефона, email и what's up), поиск по сайту, меню с определенными пунктами и пользовательское меню развернутое (это "Доставка и оплата", "Адреса шоурумов", "Возврат и обмен товаров", возможно еще какие-то пункты добавятся). Так же в шапке должны быть: личный кабинет, корзина, избранное и сравнить товары.

Разделы каталога должны быть крупнее чем серии, и они тоже должны быть сразу на главной странице. Обязательно наличие акций и новостей для сео. Остальные блоки на моё усмотрение. Поэтому мною был добавлен блок с информацией по доставке и самовывозу с преимуществами доставки и пунктами самовывоза. Расписала шаги заказа, объединив их с контактной информацией и формой "Перезвоните мне". А так же блок с преимуществами "Почему мы?".

В подвал мы вынесли контактную информацию и основные пункты каталога + полное пользовательское меню.

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

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

Каталог сделан в 2ух видах: товары плиткой и списком. Проработан фильтр, который находится справа. При выборе каких-либо пунктов фильтрация происходит не сразу (чтобы была возможность выбрать разные фильтры сразу), а после нажатия на всплывающей плашке "применить" под информацией о количестве найденных товаров. Предусмотрена сортировка по популярности/алфавиту и цене, выбор количества на странице. Для удобства разделы каталога из фильтра были вынесены на самый верх в виде картинок с подписями для быстрого перехода между разделами. Картинки все подбираются по возможности в бело-сером цвете, чтобы всё смотрелось лаконично и в едином стиле. Внизу на этой странице идет текст-описание раздела, необходимый для сео.

Помимо основной корзины должна быть возможность заказа в один клик (быстрого заказа). Так же для удобства мы сделали выпадающий список товаров в корзине при клике на иконку корзины в шапке. Чтобы всегда можно было посмотреть что там уже есть без перехода в саму корзину.

Так же в мою задачу входило сделать макет одно всплывающего окна для примера.

Оформление заказа состоит из 3ех этапов:

1) личные данные (это может быть как физическое так и юридическое лицо). Если покупатель авторизуется, то данные из личного кабинета берутся сюда автоматически

2) Доставка в зависимости от заказа доставки или самовывоза: сразу наглядно видны сроки.

3) Оплата, где можно выбрать способ и ввести промокод для скидки.

Другие страницы:
Отзыв о проделанной работе:
Анна, хотим Вас поблагодарить за работу над дизайном нашего интернет-магазина 220se.ru*. Работать с Вами было очень комфортно: Вы учли все наши требования, пожелания и правки. А так же мы очень рады предложенным Вами идеям для удобства пользователей. Осталось дело за малым: реализовать все задумки. Интересно посмотреть как новый сайт отразится на статистике и будет принят нашими клиентами. Спасибо за скорость и качество!
*Разработка ведется на адресе se.220city.ru
Отправить заявку