главная //5&5
04
5&5
приложение для регистрации на забеги
О ПРОЕКТЕ
Мобильное приложение авторской серии городских забегов в Астане. Регистрация на забеги, выбор дистанции, профиль и прогресс участника — с перспективой развития в полноценный сервис. Реализация — Telegram Mini App.
КЛИЕНТ
авторская серия забегов, Астана
ЗАДАЧА
приложение для регистрации на забеги
ПЛАТФОРМА
Telegram Mini App
РОЛЬ
UX-структура · UI-дизайн · система
Скрипт аккордеона
id: 6
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 5
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 4
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 3
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 2
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
Скрипт аккордеона
id: 1
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить
Для настройки аккордеона перейдите в окно настроек. Для этого выделите этот блок, блок с кодом или любой элемент аккордеона, кнопка настроек появится на панели инструментов справа.
как это было сделано
Процесс работы над приложением — от задачи до экранов.
01
Знакомство и задача
Авторская серия городских забегов в Астане, старт — 2027. Нужно приложение для регистрации участников на забеги, с перспективой развития в полноценный сервис.
02
Исследование и структура
Разобрал пользовательские сценарии: вход, регистрация на забег, выбор дистанции, профиль, прогресс. Определил ключевые экраны и логику переходов между ними.
03
Прототип
Выстроил путь пользователя от входа до аналитики. Собрал структуру и логику каждого экрана ещё до отрисовки визуала.
04
Дизайн-система
Тёмная тема, энергичный оранжевый акцент, крупная дисплейная типографика. Собрал токены и UI-kit, чтобы приложение легко масштабировалось.
05
Экраны
Отрисовал шесть ключевых экранов: вход, регистрация, главная, активный забег, профиль и аналитика — по ним читается весь пользовательский путь.
06
Реализация в Telegram
Приложение реализуется как Telegram Mini App — быстрый доступ без установки, с заделом под развитие функций.
экраны приложения
Шесть ключевых экранов пользовательского пути — от входа до аналитики.
01 Вход
02 Регистрация
03 Главная
04 Главная · актив
05 Профиль
06 Аналитика
Шесть ключевых экранов — от входа до аналитики.
цвета и шрифты
Палитра и типографика, на которых держится всё приложение.
ЦВЕТА
#141414
фон
#2A2A2A
поверхности
#E84F03
акцент
#FAFAFA
текст
ШРИФТЫ
ИНТЕРФЕЙС И ТЕКСТ
Основной шрифт интерфейса — чёткий и универсальный. АаБбВв 0123456789
Montserrat · Light / Regular / SemiBold
ДИСПЛЕЙ · АКЦЕНТНЫЕ ЗАГОЛОВКИ
Широкий дисплейный гротеск для крупных экранных заголовков (ТРИАТЛОН ПАРК, 5&5) — задаёт спортивный характер. Кастомный шрифт.
ДИСПЛЕЙ · ЗАГОЛОВКИ
Широкий дисплейный гротеск для крупных экранных заголовков. Кастомный шрифт.