Nice Manners - бренд дизайнерской одежды
Nice Manners — интернет-магазин дизайнерской одежды бренда Nice Manners.
Дизайн
Для сайта был отрисован индивидуальный дизайн в стилистике бренда. Для заголовков использован шрифт, похожий на шрифт логотипа, цвета мягкие пастельные оттенки бежевого и голубого, ассоциирующиеся с морем, пляжем и цветами тканей, используемых в изделиях бренда. Иконки для интерфейса были отрисованы в векторном формате для экономии трафика и удобного использования на сайте в любом размере и цвете.
На главной странице размещена информация о бренде, последние новости и карусель с товарами из новой коллекции. В конце расположен блок с контактами, QR-кодом со ссылкой на инстаграм бренда и сеткой фото из того же аккаунта.
Каталог разделён на несколько категорий, а также выделены последние коллекции. Товары выведены в виде карточек с большими фото, т.к. основным критерием для выбора товаров в данном случае является визуал. Здесь можно добавлять товары в корзину и список избранного или перейти на страницу товара.
На странице товара можно посмотреть все фотографии, прочитать подробное описание и ознакомиться со всеми характеристиками. Чтобы добавить товар в корзину нужно выбрать размер и цвет изделия. Помочь с выбором размера поможет специальная таблица размеров. Внизу страницы расположена карусель с рекомендуемыми товарами.
На странице корзины пользователь может отредактировать количество товаров, удалить лишние, ввести промокод и перейти к оформлению заказа.
Оформление заказа осуществляется в 3 шага:
- выбор адреса доставки - можно выбрать адрес из личных данных или заполнить форму с другими данными;
- выбор способа доставки - на этом этапе при выборе того или иного способа доставки его стоимость добавляется к общей сумме заказа;
- оплата - здесь пользователь переходит на страницу платёжной системы и после заверешения оплаты возвращается на страницу третего шага с отображением состояния оплаты (если оплата не прошла, то сайт предложит попробовать оплатить ещё раз или перейти к предыдущему шагу).
В личном кабинете отображаются личные данные и адрес доставки, которые всегда можно изменить, список избранного и история заказов.
В истории заказов в хронологическом порядке отображаются все заказы пользователя, которые содержат товары, общую сумму и дату заказа.
На странице с часто задаваемыми вопросами пользователь может найти важную информацию о производстве изделий бренда, о работе магазина, доставке и оплате, условиях возврата и особенностях ухода за изделиями.
Вёрстка
Шапка сайта в десктопной версии скрывается при прокрутке страницы вниз и возвращается при прокрутке вверх. Таким образом шапка не мешает просмотру страниц, но всегда доступна, если нужно перейти в другой раздел.
Для мобильной версии отдельно разрабатывался шаблон отображения сайта. В дизайне мобильной версии предусмотрен удобный таббар с меню навигации и ссылками на личный кабинет, список избранного, каталог и корзину. Все модальные окна привязаны к нижней части экрана, так удобнее взаимодействовать с сайтом со смартфонов.
