Главная страница
Содержит все привычные элементы, которые расположены на привычных для интернет-магазина местах — логотип, телефон, корзина.
Широкое горизонтальное меню без второго уровня вложенности. Левый сайдбар содержит категории каталога, баннер и подписку на новости (через сервис google feedburner).
В контентной части располагается слайдер, текстовый блок и несколько популярных товаров.
Список разделов каталога в сайдбаре имеет два уровня вложенности и разворачивается при нажатии на три точки под названием основного раздела.
Данная схема открытия второго уровня вложенности несколько запутанная для пользователя и я убеждён, что большинство посетителей сайта столкнётся с непониманием и незнанием, что есть подразделы.
Страница со списком записей в блоге
Каждый запись в блоге на странице списка записей с превьюшным текстом и изображением выполнены в виде плашки белого цвета с округлыми краями. С большим количеством записей они будут располагаться каждая на своей плашке друг под другом с определённым расстоянием.
Подробная запись в блоге
Под текстом каждой записи располагается кнопка обратной связи «Оставить комментарий» по нажатию на которую появляется форма обратной связи с полями, капчей от google и добавлением изображений.
Раскрывающаяся форма для комментирования записи в блоге:
Страница списка новостей
Страница общего списка новостей выполнена по аналогии с блогом, потому что используется такая же система вывода записи.
Страница отзывов
Список отзывов выполнен в индивидуальном стилистическом минимализме. Форма для отзывов сразу отображается на странице под всеми отзывами.
Каталог. Общий список товаров
В связи с тем, что в цене каждого товара имеются копейки, необходимо было учитывать количество знаков после точки. С копейками надо было производить расчёт вплоть до оформления заказа.
Каждый товар имеет бейджи с пометкой «ХИТ» и «NEW», старой и новой ценой, выбор количества.
С дизайном нам досталась интересная вёрстка элемента выбора количества и корзины, с которой пришлось повозиться, потому что выбор количества и кнопка «купить» имеет отношение к одному табличному типу, а так как между этими двумя элементами идёт разделяющая полоса, то пришлось подумать над реализацией.
Корзина товаров
В корзине присутствуют все необходимые элементы для работы над добавленными товарами — очистить корзину, обновить корзину при изменении количества, удалить конкретный товар, продолжить покупки, оформить заказ.
Интересная особенность корзины заключается в подсчёте общей стоимости выбранных товаров. Здесь мы можем посмотреть, сколько будут стоить выбранные позиции без доставки, а также без доставки с учётом скидки.
Без доставки считается в связи с тем, что компания отправляет товары по всей России, в том числе транспортными компаниями; не готовы объявить конечную стоимость доставки. Именно поэтому сумма с доставкой считается уже после получения менеджером заказа.
Страница оформления заказа
Где-то запутанная, но, тем не менее, согласованная страница оформления заказа.
На мой взгляд, способы доставки не обязательно было указывать в качестве выбора, потому что этот выбор имеет только информационный подтекст; стоимость с доставкой не считается. Лучше пользователю дать это как информацию для размышления и оформить её иконками.
После оформления заказа письмо отправляется менеджеру и заказчику.
Заключение
Данный клиент пришёл к нам с готовым дизайном. Ни с маркетологами, ни с специалистом из отдела разработки данный проект не согласовывался. Тем не менее мы выполнили свою работу по вёрстке и программированию интернет-магазина с минимальными пост-правками. Большинство правок заключалось в моментах, которые не были продуманы изначально, до того как начать рисовать дизайн. Не с дизайна необходимо начинать создание сайта.