BDSM & Fetish Marketplace - Fetish-x.com

Хороший большой проект, который полностью реализован мной. Согласно ТЗ, требовалось создать площадку, на которой любой посетитель мог создавать собственный магазин и продавать свои товары
По дизайну и проектированию стояло много задач. Требовалось решить дилемму с курицей и яйцом: площадка должна быть проста и понятна как для продавцов, так и случайных посетителей-покупателей.
Цветовые сочетания были выбраны близкие к классическим в тематике БДСМ и фетиш-ниши. Для удобства была создана параллельно и светлая тема, которая не отличается красотой, но и служит для другого.
Начнем с того, что все поля ввода максимально валидируются с помощью VUE при вводе информации и не дадут ошибиться пользователю. Уведомления, которые помогают контролировать ситуацию выглядят, например вот так:
При этом во всем интерфейсе я следил за классическими канонами проектирования и дизайна: например, обратите внимание на кнопки в моменте с созданием магазина выше.
Общие элементы, настройка и навигация
Не смотря на кажущуюся простоту, на экране всегда располагается множество элементов: переключатель языка, переключатель валюты, переключатель темы, поле поиска, личное меню. И потому блок настройки темы, валюты и доступ информации вынесен в правый верхний угол - удобно, везде доступно. При этом требовалось подчеркнуть, что сервис международный и не отпугнуть не англоговорящих - переключатель языка сразу по центру.
Первоначально неизвестно количество категорий и подкатегорий, которые могут быть и потому был выбран вариант с Amazon-кнопкой, которая выпадает с умышленной задержкой:
Страница категории
Кроме UX стояли требования и по SEO. Потому страница категории выполнена именно так: лаконично и функционально:
Карточка товара
В карточке товара следовало так же проработать как UX, так и хорошую перелинковку и SEO в целом. При этом конечно не скатиться в AliExpress:
Страница магазина
Довольно болезненная ситуация была с первым экраном страницы магазина, который создает пользователь. Мы не можем знать, какую обложку он загрузит. И для себя тяжело, но обязательно надо было принять то, что качество этой обложки будет ужасное... Но UGC есть UGC. Первый экран важен и содержит самую важную информацию. При разработке я ссылался на AliExpress, FetLife и Etsy.
Функционал поиска
Поле поиска раздвигается по нажатию и подгружает нужную информацию через axios. При наличии вариантов происходит отображение магазинов/товаров:
Далее идет переход на отдельную страницу поиска
Личные сообщения
Раздел личных сообщений реализован с помощью VUE + VUEX в качестве стора. Помимо этого реалтайм функционала не планировалось и потому все было сделано через Pusher. При желании посетителя купить товар экшн происходит через личные сообщения: с помощью "#" парсер подставляет ссылки на товары на сайте.
Личный кабинет, создание магазина и публикация товаров
Личный кабинет стандартен и имеет кучу классических элементов. Для простоты все было максимально выделено:
Ну и наконец, создание магазина и работа с товарами - самая активная часть...
В наиболее "сложной" части для посетителя работа реализована пошагово. Это максимально просто и понятно. Пройдя через три простых шага, посетитель получает магазин и предложение о его настройке:
В целом создание магазина занимает не более одной минуты
Создание и редактирование товаров выглядит вот так. При этом доступно быстрое меню для экономии кликов и ускорения работы:
В динамике это выглядит так:
Если с товаром есть какие-то проблемы, то посетитель это не пропустит:
Само же создание товара максимально линейно и завалидировано. Вот фрагмент:
Со стороны бэкэнда реализовано следующее: