Дизайн для интернет-магазина "МОЛОТОК"
Магазин «Молоток» обратился к нам за помощью в обновлении их старого интернет-магазина. Изначально у нас была задача сделать проект под ключ, но в конечном итоге Заказчик приостановил разработку проекта по своим внутренним непредвиденным обстоятельствам после утверждения прототипа сайта и готового дизайна для интернет-магазина.
- Изучили старый сайт Заказчика, а так же сайты основных конкурентов;
- Составили список основных страниц сайта, которые нужно спроектировать и красиво оформить;
- Спроектировали удобный фильтр для поиска товаров;
- Спроектировали дополнительный функционал интернет-магазина: личный кабинет, избранные товары, сравнение товаров и многое другое;
- Разработали «живой» прототип для основных страниц сайта;
- Разработали уникальный и современный веб-дизайн для всех страниц из прототипа.
"Молоток" - это большой магазин инструментов и различного профессионального оборудования для строительства, ремонта и прочих подобных вещей. Нам нужно было спроектировать новый сайт таким образом, чтобы навигация по разделам была логичной и понятной каждому. Для удобства и простоты доступа к разделам сайта мы создали два меню, в шапке расположили поиск по сайту и все важные элементы личного кабинета: избранные товары, сравнение товаров и корзину.
Товаров очень много и соответственно много разных производителей, мы заранее подумали о людях, которым принципиально важна марка / бренд и заложили в проект поиск по брендам. Всего мы спроектировали 16 страниц:
Главная / Каталог товаров / Внутренняя страница каталога товаров (список и сетка) / Карточка товара / Список брендов / Корзина / Оформление заказа / Личный кабинет / История заказов / Избранное / Сравнение товаров / Новости / Внутренняя страница новостей / Контакты / Страница с элементами оформления
На главной странице вверху размещен слайдер с акциями и специальными предложениями, ниже расположен поиск по брендам.
Далее идет блок товары со скидкой из разных категорий (категорию можно выбрать). Так же не главной есть блок с подпиской на рассылку магазина и блок популярные товары. Внизу расположились анонсы последних новостей.
Большое количество брендов мы решили представить в виде отсортированного в алфавитном порядке списка.
Идея заключается в том, чтобы представить каталог товаров в виде красивых графических иконок. Напротив наименования категории должно выводиться количество товаров, которое в ней присутствует.
Тут мы не стали изобретать велосипед и сделали классический вид внутренней страницы каталога товаров для интернет-магазина.
По-умолчанию карточки выводятся в виде списка, но можно выбрать вариант представления товаров в виде сетки.
Слева расположен фильтр для сортировки и поиска товаров. В карточках товара выводится наименование, краткое описание, рейтинг товара и стоимость.
В карточке товара отображается вся необходимая информация: наименование, фото, характеристики, наличие, сопутствующие товары и т.д.
Чтобы сделать страницу более удобной и менее громоздкой, мы заложили в проект размещение информации в виде табов.
В корзину мы добавили модуль "с этим товаром покупают", чтобы увеличить средний чек интернет-магазина. Информация о сопутствующих товарах появляется при нажатии на одноименную кнопку.
Процедуру оформления заказа мы разделили на несколько этапов, каждый из которых свернут в спойлер для экономии пространства.
В личном кабинете пользователь может отредактировать свою информацию, посмотреть список покупок и избранных товаров, а так же сравнить несколько товаров друг с другом. Так же в личном кабинете можно найти историю просмотров - это бывает очень полезно, когда видел интересный товар, но не отложил его ни в корзину, ни в избранное, а потом пытаешься его снова найти на сайте.
Сравнивать можно товары из одной категории, то есть нельзя сравнить шуруповерт с лопатой, но шуруповерты разных брендов можно. При поиске нужных товаров, пользователь может добавлять их в сравнение, а затем перейти в этот раздел, чтобы увидеть результаты.
Можно сравнивать товары по всем имеющимся характеристикам, а можно отобразить только отличия, для этого предусмотрен специальный фильтр.
Логика работы этого раздела похожа на "сравнение товаров", только тут просто отображается сборка понравившихся вам товаров без сравнения характеристик.
Каждый товар будет отображаться в своей категории, чтобы пользователь мог быстро найти все, что ему нужно, а не рыться в куче закладок из молотков, электродрелей и мешков для строительного мусора.
Страница с анонсами новостей компании. Всего на странице отображается 9 карточек новостей.
Тут мы отобразили типовые варианты размещения контента на странице: текст в одну колонку и в две колонки, фотогалерею и заголовки.
На странице отображены контакты всех отделов компании, а так же карта проезда к офису.
Внизу расположена удобная форма обратной связи для отправки сообщений через сайт и реквизиты компании.
