Байкнет
Социальная сеть для байкеров
Год:
2014 — 2019
Роль:
Дизайнер. Дизайнер продукта
Байкнет — это социальная сеть для байкеров. Байкнет, дочерний проект Артхива, начал свою историю примерно в феврале 2014 года. В то же время был разработан первый дизайн проекта, который был довольно концептуальным для социальной сети. Его сверстали, но не пустили в разработку поскольку отдел перевели на другой проект.
И гораздо позже, в 2016 году, когда на проект вновь выделили ресурсы, я предложил более классический подход, который на этот раз увенчался запуском.




Первый экран
Первым экраном проекта, традиционно для социальной сети, стала лента. В проекте мы учли много ошибок, которые были допущены при разработке Артхива, поэтому он сразу оказался более последовательным как с точки зрения структуры элементов, так и с точки зрения единого стиля.




Главная страница проекта
Главным героем проекта является Байк и его Владелец. Байк имеет две страницы: общую страницу самой модели и страницу конкретного байка.
На общей странице модели агрегируется информация со всех других байков. Отображается спецификация, похожие байки и канал, который также заполняется из блогов пользователей.




Главная страница модели




Байк пользователя
Все байки как им и положено находятся в гараже. Мы не забываем о бывших байках. Вся история сохраняется.




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




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




Список брендов




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




Категория




Список клубов




Страница клуба


Первые шаги после регистрации
Процесс. Создание системы
Принцип по которому разрабатывался Байкнет отличался от Артхива. Сначала я текстом описал весь проект. Этакая легкая форма технического задания. Затем я разработал каркас проекта, в котором окончательно определилось содержание страниц. После этого приступил к работе над UI Kit и сеткой проекта.
Из-за не очень сложной структуры и использования единого структурного подхода, после того, как UI Kit был готов, макеты создавались очень быстро. Вся работа заняла около 2,5 месяцев.
В этом проекте структура пользовательского интерфейса применялась так же, как в Артхиве.
- Карточки
- Контент
- Функциональные блоки
- Заголовочные блоки
- Иконки
- Лента
- Модальные окна
- Навигация и интерфейсные элементы
- Сквозные элементы (Шапка/Футер)


UI KIT
В связи с тем, что сетка была разработана с учетом адаптивности, ее столбцы рассчитываются таким образом, что определенное количество столбцов обычно соответствует основным разрешениям экрана. Поэтому работа над адаптивной частью была значительно упрощена.
Drop me a line
skorobogatkonn@gmail.com