BotiCord

До и после

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

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

Цвета

Прошлый сайт собирали наспех, и палитра это выдавала: блёклые цвета с низким контрастом. Подобрал новую — тёмная основа и насыщенный синий. Выделил функциональные цвета для состояний и поддерживающие оттенки для акцентов.

Типографика

Выбрал шрифт Onest за читабельность в разных размерах — от заголовков до небольших подписей. Типографику адаптировал под десктопы, планшеты и телефоны.

Компоненты

Я собрал UI-кит из 50 компонентов. Кнопки, поля ввода, табы, карточки и другие элементы оформлены в едином стиле и сочетаются между собой для сборки страниц сайта.

Страница проекта

У каждого проекта есть собственная страница, где пользователи голосуют, смотрят описание или оставляют отзывы с оценкой. Ботов можно сразу пригласить к себе в сообщество, а если это сообщество — присоединиться к нему.

Процесс добавления

Раньше добавление проекта на сайт происходило в одном блоке без ясной структуры. Я разбил процесс на 4 этапа:

1. Идентификация — Ввести ID бота или выбрать сообщество из списка
2. Заполнение данных — Заполнить описание, теги, указать ссылки и другое
3. Персонализация — Выбрать стандартный баннер и цветовую тему
4. Верификация — Проверка владения и качества проекта

Каждый этап сопровождается подсказками, а также сохраняется прогресс между шагами. После обновления получили много положительного фидбека — пользователи отметили, что добавлять проекты стало удобнее.

Покупка улучшений

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

Анимации

На кнопку голосования за проект и секретные поля я добавил CSS анимации.

Когда пользователь нажимает на кнопку, стрелка взлетает, появляется индикатор загрузки, а в фоне происходит проверка на робота. Как только проверка проходит — кнопка выключается и стрелка возвращается. Это сделано с помощью @keyframes и кривых cubic-bezier.

Анимация появления и скрытия секретного поля написана с использованием mask-image. Вместо резкого появления часть строки скрывается за градиентной маской, создавая эффект затухания.

Комьюнити и контент

Для сообщества в Дискорде оформлены посты к новым фичам, акциям и событиям.

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

Разработка

Собрали сайт на TypeScript и Vue. Стили — на SCSS с модульной архитектурой, состояние держим в Pinia. Такой стек позволил быстро собирать страницы из переиспользуемых компонентов.

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

BotiCord использует технологию PWA, поэтому его можно установить как приложение на компьютер или телефон.

Итог

После обновления пользователи отмечали, что платформой стало удобнее пользоваться — находить проекты и добавлять свои.

BotiCord стал для меня первым большим продуктом: здесь я начал мыслить архитектурно и понял, как устроены крупные интерфейсы — от системы компонентов до сценариев пользователя.