Fl dating — сервис знакомств
// Цель
Спроектировать сервис знакомств, в котором знакомство не заканчивается свайпом: у пользователя есть события, календарь и поводы для встречи.
// Задача
Собрать продукт сразу на двух платформах — десктоп и мобильные — на единой библиотеке компонентов, и показать логику переходов интерактивным прототипом.
Реализация
У сервисов знакомств есть общая проблема: интерфейс сводит всё к бесконечной ленте, и продукт живёт ровно до того момента, пока не надоест листать. Поэтому структура здесь построена вокруг поводов встретиться: кроме ленты и чатов есть события и календарь, а профиль показывает не только фотографии, но и то, чем человек занят.
Оба контура — десктопный и мобильный — спроектированы параллельно на одном UI Kit. У них разная логика плотности: на десктопе профиль и лента живут рядом на одном экране, на мобильном это последовательные шаги. Компоненты, типографика и состояния при этом общие, поэтому продукт читается как один и тот же сервис на любом устройстве.
Тёмная тема выбрана не как украшение: сервисом пользуются в основном вечером и ночью, с телефона в руке. Акцентная пара — фиолетовый и розовый — работает на действиях и статусах, всё остальное держится на нейтральной шкале, чтобы фотографии людей оставались главным на экране.
Этапы реализации
Структура продукта
Лента, профили, чаты, события и календарь как равноправные разделы — вместо одной бесконечной ленты.
Мобильный контур
Экраны регистрации, ленты, профиля, переписки и событий, спроектированные под работу одной рукой.
Десктопный контур
Раскладка, где лента и профиль соседствуют на одном экране, а переписка не перекрывает контекст.
UI-кит
Единая библиотека: типографика, цвета, кнопки, поля, карточки и их состояния — общая для обеих платформ.
Интерактивный прототип
Кликабельная сборка переходов: как продукт ведёт себя в движении.
Результат
Продукт спроектирован на двух платформах сразу, на общей библиотеке компонентов: более 35 экранов, единый UI Kit, интерактивный прототип переходов.
Ниже — запись прототипа и часть экранов: несколько мобильных, два десктопных и разворот UI Kit.
Другие кейсы
Хотите такой же результат?
Расскажите о задаче — спроектируем, соберём и запустим решение под неё.