Дизайн-кейс

Кампус

Telegram Mini App для студентов СФедУ — расписание и дедлайны всегда под рукой, прямо в мессенджере.

UX/UI дизайн Telegram Mini App 2026 Figma
01 Контекст и проблема

Расписание есть.
Найти его — отдельная задача.

📄

PDF на сайте деканата

Расписание публикуется в виде PDF-файла. Найти нужную пару = открыть браузер, вспомнить ссылку, дождаться загрузки, прокрутить до нужного факультета.

💬

Дедлайны — в чатах ВКонтакте

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

🤔

«Куда идти сейчас?»

Утром главный вопрос — одна пара, один кабинет, прямо сейчас. Ни PDF, ни чат ВК не дают этот ответ мгновенно.

🔔

Дедлайны внезапные

Без централизованного трекера каждый студент ведёт свой список — кто в заметках, кто в голове. Просроченные задания становятся неожиданностью.

Я сама была студенткой СФедУ и знала эту боль изнутри. Приложение начиналось как инструмент для себя — и для таких же, как я.

— Анна Петрухина, дизайнер

02 Выбор платформы

Почему Telegram Mini App,
а не отдельное приложение?

Три аргумента, которые определили платформу ещё до первого пикселя.

01

Не требует установки

Студент открывает бота — и уже внутри приложения. Никаких загрузок из App Store или Google Play, никакого барьера для первого использования.

02

Нативные паттерны TG

BackButton, MainButton, тема из Telegram — пользователь уже знает, как взаимодействовать. Не нужно объяснять, куда нажать. Меньше когнитивной нагрузки.

03

Вся группа уже там

Студенческие чаты СФедУ живут в Telegram. Приложение встраивается в существующий контекст — не надо тянуть людей на новую платформу.

03 Дизайн-система

Токены, которые держат всё вместе

Цвет как смысл, типографика как структура, радиус как характер.

Палитра
Индиго / Бренд
--c-indigo · #5c3ef4 → #9f6bff
Янтарь / Срочность
--c-amber · #f5a623
Красный / Просрочено
--c-danger · #ef4444
Светлая поверхность
--c-surface · #f6f5fb
Тёмный фон
--c-dark · #100e1f
Типографика
96px · 900
Кампус
32px · 800
Ближайшая пара
20px · 600
Математический анализ
15px · 400
Корп. 2, ауд. 301 · через 40 мин
11px · 700
СЕГОДНЯ · ПН 13 ЯНВАРЯ
Радиус-шкала
8px
--r-s
14px
--r-m
20px
--r-l
28px
--r-xl

Малый радиус — пилюли и чипы. Большой — карточки и панели. Консистентность ощущается интуитивно, даже если пользователь не может её назвать.

Пиктограммы-решения

Почему не синий Telegram?

Telegram Blue
vs
Кампус Индиго

Telegram Blue создаёт ощущение «системного» компонента внутри мессенджера. Индиго даёт приложению собственную идентичность — пользователь понимает, что это отдельный продукт.

Янтарь строго семантический

⚠️ Сдать через 2 дня
🔴 Просрочено

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

04 Ключевые решения

Не «красиво», а правильно

Каждое дизайн-решение объясняется через три вопроса: что сделали, что ещё было можно и почему выбрали именно это.

01
Решение
Герой-карточка — самый большой и контрастный элемент экрана, которая отвечает на один вопрос: «куда идти прямо сейчас?». Название пары, кабинет, время — всё в трёх строках.
Альтернативы
Список пар с равным весом; плиточная раскладка; «Today view» с неделей сразу.
Почему это
Утром у пользователя одна задача. Герой-карточка выдаёт ответ ещё до прокрутки. Остальное расписание — ниже, на таймлайне.
02
Решение
Таймлайн-рейл — вертикальная линия времени с датированными пилюлями. Каждый день отделён от следующего визуально, без таблиц и сеток.
Альтернативы
Горизонтальный календарь сверху; таблица ВТ/СР/ЧТ...; плоский список без разделителей.
Почему это
Мобильный экран узкий — горизонтальный скролл плохо считывается. Таймлайн привычен: так выглядит история сообщений и лента. Паттерн уже в голове.
03
Решение
Система срочности дедлайнов: красный — просрочено, янтарный — через ≤2 дня, индиго — через ≥13 дней. Бейдж с количеством дедлайнов.
Альтернативы
Единственный цвет для всех; только текст «осталось 2 дня»; цветная точка без карточки.
Почему это
Цвет обрабатывается быстрее текста. Трёхуровневая шкала срочности позволяет пользователю мгновенно приоритизировать список — даже при беглом взгляде.
Скриншот: система срочности дедлайнов
04
Решение
Тёмная тема через токены — один набор переменных CSS, не дублирование стилей. Переключение мгновенное, через `themeParams` Telegram.
Альтернативы
Отдельный CSS-файл для тёмной темы; только один вариант; media query `prefers-color-scheme`.
Почему это
Тема Telegram — это системный сигнал. Приложение должно подчиняться ему мгновенно. Токенная система исключает рассинхронизацию и упрощает поддержку.
05 До и после

Откуда пришли — куда пришли

Исходный скаффолд против финального дизайна. Без ретуши.

До
Исходный скаффолд приложения
— Дефолтный синий Telegram без идентичности
— Список без иерархии, всё одинакового веса
— Нет семантики срочности
— Эмодзи вместо иконографики
После
Финальный дизайн — светлая тема
✦ Собственная индиго-идентичность
✦ Герой-карточка + таймлайн-рейл
✦ Трёхуровневая цветовая срочность
✦ Тёмная тема через токены
06 Тёмная тема

Система,
а не другой дизайн

Тёмная тема — не отдельный скин. Это тот же продукт, говорящий на другом фоне. Токены переключаются через themeParams Telegram — пользователь не замечает переключения, оно просто происходит.

--bg-primary
#100e1f
--bg-card
#1e1a35
--c-brand
#9f6bff
--c-text-primary
rgba(255,255,255,0.85)
--c-urgent
#f5a623 (не меняется)
Расписание в тёмной теме
07 Доступность и ограничения платформы

Дизайн внутри клетки

Telegram Mini App накладывает ограничения — но правильные ограничения делают решения чище.

🎨
Контраст WCAG AA
Основной текст на светлом фоне — 7.5:1. Текст на индиго — 4.8:1. Срочный янтарь на тёмном — 5.2:1. Минимальный порог 4.5:1 выдержан.
🌀
prefers-reduced-motion
Анимации пульса и появления отключаются через CSS-медиазапрос. Функциональность не зависит от движения — данные видны без анимаций.
📱
themeParams Telegram
Цвета подгружаются из window.Telegram.WebApp.themeParams. Тема следует за системой — не переопределяет её принудительно.
🔙
BackButton и MainButton
Нативные кнопки Telegram ведут себя предсказуемо. Пользователь не теряется в навигации: BackButton всегда возвращает на предыдущий экран.
👆
Зона касания ≥ 44px
Все интерактивные элементы — карточки дедлайнов, кнопки добавления, пилюли дат — имеют минимальную область касания 44×44px по Apple HIG.
⚠️
Ограничение: только Telegram
Mini App работает исключительно внутри мессенджера — прямой браузерный URL не даёт полного опыта. Это платформенное ограничение, известное заранее.
08 Что дальше

Честный roadmap

Дизайн готов — следующий шаг это реальные пользователи и реальные данные.

исследование — в работе
01

Бот в Telegram

Запустить бота для одногруппников СФедУ. Получить первые сессии и реальный паттерн использования утром перед парами.

исследование — в работе
02

Юзабилити-интервью

5–8 одногруппников, задачный тест. Вопросы: герой-карточка понятна с нуля? Находят ли дедлайны без подсказки? Что раздражает?

после исследования
03

Метрики

Retention день-7, время до первого ответа на вопрос «куда сейчас?», количество добавленных дедлайнов — после выхода реального дизайна.

заметка дизайнера

Этот кейс честный. Я не придумываю цифры и не обещаю «рост конверсии на 40%». Пока приложение живёт как работающее демо на anna-campus.pages.dev. Когда появятся реальные пользователи — здесь появятся реальные выводы.