Футумаркет 1.0
Первая коммерческая сеть
Футмаркет 1.0 Футумаркет 2.0
Год:
май 2017 — окт. 2019
Роль:
Дизайнер, Дизайнер продукта
Футумаркет — это сервис, который помогает людям взаимодействовать не в социальном, а в коммерческом плане. Новые и подержанные товары, услуги, прокат, поиск работы, продажа недвижимости и много чего еще.
В мае 2017 года я начал работу с Футумаркетом. Первая версия проекта была запущена в январе 2019 года.
Если провести аналогии, Футумаркет похож на обычную социальную сеть и доску объявлений. Но в основе лежит не дружба и социальные связи, а коммерческие взаимоотношения между людьми и компаниями.
Лицевая страница проекта. Вход и регистрация
Профиль пользователя
Как велась работа
Когда я пришел в команду, уже было составлено обширное и подробное двухсотстраничное техническое задание. Однако, в процессе работы, мы перепридумали практически всё.
Проект состоит из нескольких основных шаблонов:
— Вход и регистрация
— Страницы с результатами поиска и фильтрами
— Страницы субъектов — это компании и люди
— Страницы объектов — это товары, услуги, события, вакансии и т.д.
— Страницы добавления объектов и субъектов
— Технические страницы: настройки, админ.панель и прочие
Типов шаблонов на самом деле немного больше, но я перечислил основные из них. Мы начали работу с того, что сделали дизайн концепцию для всего проекта на примере основных шаблонов, а также разработали прототип в инвижне, с помощью которого представили дизайн-концепцию проекта для инвестора.
Основной гарнитурой мы выбрали Graphik. С ней приятно работать, в ней есть обширная палитра начертаний, удобочитаемость и характер.
Стиль проекта должен был с одной стороны быть интересным и современным, но с другой стороны строгим. Он должен создавать ощущение функционализма, ясности. Изысканности отводилось второе место.
Поиск по продуктам
Страница компании
Создание продукта
Страница продукта
После того, как концепция была одобрена мы продолжили работу уже на более глубоком уровне. Во-первых, начали разрабатывать детальный UI Kit, который затем подхватили фронтенд-разработчики, составляя список компонентов на Реакте. Во-вторых, начали прорабатывать отдельные состояния всех шаблонов для каждого из объектов. В-третьих, начали работать над адаптивной версией проекта.
Страница товара
Страница события
Резюме
Прокат
Недвижимость. Продажа
Для коммуникации между людьми был разработан чат.
Чат. Ввод сообщения
Чат. Поиск и редактирование сообщения
Также в проекте с нуля прорабатывался и классификатор для всех категорий. Для того, чтобы управлять классификатором была разработана специальная админ.панель.
Админ.панель управления каталогом. Пустая
Админ.панель. Взаимодействие
UI
С UI я работал уже привычным образом, так, как до этого работал с UI в Артхиве и Байкнете.
Весь проект был разделен на составные элементы. В Футумаркете они ярко выделялись.
— Элементы: кнопки, выпадающие списки, поля и области ввода, интерфейсные элементы управления
— Иконки
— Стили типографики
— Шапка, Футер и сквозные элементы
— Карточки: поисковая выдача товаров, событий, новостей, фотографий, отзывов
— Функциональные блоки: галереи, аватар, рейтинг и т.д
Конечно же не обошлось без нюансов и модификаций. Для проекта я выбрал одну сетку, которая используется зеркально в зависимости от шаблона. Я специально не использовал готовые решения в сетках, поскольку мы до конца не могли знать, какая структура материала нам может потребоваться. Поэтому широкая контентная колонка может делиться на любое число колонок.
Некоторые экраны UI