Создание интернет-магазина по созданию слингобус

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

Содержит все привычные элементы, которые расположены на привычных для интернет-магазина местах — логотип, телефон, корзина.

Широкое горизонтальное меню без второго уровня вложенности. Левый сайдбар содержит категории каталога, баннер и подписку на новости (через сервис google feedburner).

В контентной части располагается слайдер, текстовый блок и несколько популярных товаров.

Создание интернет-магазина по созданию слингобус

Список разделов каталога в сайдбаре имеет два уровня вложенности и разворачивается при нажатии на три точки под названием основного раздела.

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

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Страница со списком записей в блоге

Каждый запись в блоге на странице списка записей с превьюшным текстом и изображением выполнены в виде плашки белого цвета с округлыми краями. С большим количеством записей они будут располагаться каждая на своей плашке друг под другом с определённым расстоянием.

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Подробная запись в блоге

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

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Раскрывающаяся форма для комментирования записи в блоге:
Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Страница списка новостей

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

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Страница отзывов

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

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Каталог. Общий список товаров

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

Каждый товар имеет бейджи с пометкой «ХИТ» и «NEW», старой и новой ценой, выбор количества.

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

С дизайном нам досталась интересная вёрстка элемента выбора количества и корзины, с которой пришлось повозиться, потому что выбор количества и кнопка «купить» имеет отношение к одному табличному типу, а так как между этими двумя элементами идёт разделяющая полоса,  то пришлось подумать над реализацией.

Корзина товаров

В корзине присутствуют все необходимые элементы для работы над добавленными товарами — очистить корзину, обновить корзину при изменении количества, удалить конкретный товар, продолжить покупки, оформить заказ.

Создание интернет-магазина по созданию слингобус Веб-студия Шанти

Интересная особенность корзины заключается в подсчёте общей стоимости выбранных товаров. Здесь мы можем посмотреть, сколько будут стоить выбранные позиции без доставки, а также без доставки с учётом скидки.

Без доставки считается в связи с тем, что компания отправляет товары по всей России, в том числе транспортными компаниями; не готовы объявить конечную стоимость доставки. Именно поэтому сумма с доставкой считается уже после получения менеджером заказа.

Страница оформления заказа

Где-то запутанная, но, тем не менее, согласованная страница оформления заказа.

На мой взгляд, способы доставки не обязательно было указывать в качестве выбора, потому что этот выбор имеет только информационный подтекст; стоимость с доставкой не считается. Лучше пользователю дать это как информацию для размышления и оформить её иконками.

Страница оформления заказа

После оформления заказа письмо отправляется менеджеру и заказчику.

Заключение

Данный клиент пришёл к нам с готовым дизайном. Ни с маркетологами, ни с специалистом из отдела разработки данный проект не согласовывался. Тем не менее мы выполнили свою работу по вёрстке и программированию интернет-магазина с минимальными пост-правками. Большинство правок заключалось в моментах, которые не были продуманы изначально, до того как начать рисовать дизайн. Не с дизайна необходимо начинать создание сайта.

Один из организаторов работы веб-студии Шанти, автор. Продвигаю и создаю сайты, настраиваю контекстную рекламу в Яндекс Директ, работаю с графическими программами, регистрация доменов, работа с хостингом, перенос сайтов.