Обсудить проект
Знак Попутки

Попутка

Сайт сервиса совместных поездок в Бишкеке.

Дизайн и разработка сайта

Открыть сайт ↗

Экраны можно увеличить нажатием.

01 / Задача

Объяснить идею.
Дать первый шаг.

Водитель уже едет. Пассажиру — в ту же сторону. Объясняем этот принцип до открытия приложения.

Наша работа — дизайн и разработка сайта: от знакомства с сервисом до записи на бета-тест.

Наша роль
Дизайн и разработка сайта
Аудитория
Водители и пассажиры в Бишкеке
Языки сайта
Русский и кыргызский

Сайт помогает познакомиться с продуктом до первого запуска приложения.

02 / Первый экран

Сначала смысл.
Потом — действие.

Одна фраза объясняет модель поездки. Живое табло показывает особенность сервиса ещё до подробного рассказа.

Что увидит человек

«Кто-то уже едет туда, куда нужно вам»

Человек сразу узнаёт свою ситуацию: ему нужно туда, куда кто-то уже едет.

Почему это важно

Идея без лишних шагов

«Водитель уже едет» объясняет отличие совместной поездки от заказа машины.

Следующий шаг

Два понятных шага

Telegram — узнать больше. Бета-тест — попробовать. Каждая кнопка прямо называет следующий шаг.

03 / Сценарии

Один сервис.
Две точки входа.

Водителю и пассажиру нужны разные объяснения. Переключатель ролей оставляет на экране актуальный сценарий.

Задача пользователя

Откуда и куда — прежде всего

Сначала маршрут: знакомая последовательность помогает перейти от сайта к приложению.

Подача

Три простых шага

Маршрут → попутчик → поездка. Номера задают порядок, экраны показывают каждый шаг.

Визуальная связь

Маршрут как навигация

Линия маршрута соединяет разделы и помогает следовать за рассказом.

04 / Доверие

Доверие —
в деталях.

Показываем конкретные ориентиры: сведения о машине, PIN для старта и защиту номера телефона.

До посадки

Сведения о машине заранее

Марка, цвет и номер помогают узнать машину до посадки.

В начале поездки

PIN как понятный момент старта

Пассажир называет PIN, водитель вводит его — поездка начинается.

Личные данные

Скрытые номера — отдельным пунктом

Ответ о приватности телефона вынесен отдельно, чтобы его легко найти.

05 / Отличительная деталь

«СТРОЧКА» —
в действии.

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

Интерактивность

День, вечер, ночь

Три режима показывают табло в разных условиях прямо на сайте.

Типографика

Свой характер у табло

Matrix Sans Screen создаёт характер табло. Inter помогает спокойно читать основной текст.

Контроль движения

Пауза по запросу

Строку можно остановить. Настройка уменьшенного движения отключает анимацию.

Попробовать на живом сайте ↗
06 / Мобильная версия

Та же история.
В другом темпе.

На узком экране визуалы и объяснения идут последовательно. Главная идея и путь к действию сохраняются.

Нажмите на экран, чтобы рассмотреть детали.

Иерархия

Один фокус за раз

Заголовок, пояснение и экран идут последовательно, без конкурирующих колонок.

Действия

Понятные подписи

Подписи кнопок называют действие. Условия бета-теста объясняют, что будет дальше.

Контекст

Два языка

Русская и кыргызская версии учитывают обе языковые аудитории.

07 / Детали реализации

Качество —
в том, что работает.

Текст, управление и техническая структура поддерживают сценарий человека.

01

Текст остаётся текстом

Заголовки и объяснения доступны в HTML. Их можно выделять, читать вспомогательными технологиями и находить через поиск.

02

Клавиатурный фокус

В исходниках предусмотрен видимый focus-visible для ссылок и кнопок. Ориентир остаётся заметным без мыши.

03

Уменьшенное движение

prefers-reduced-motion отключает анимацию табло и появление блоков. Содержание не исчезает вместе с эффектами.

04

Состояния переключателей

Роли и режимы табло имеют обозначенное активное состояние. aria-атрибуты передают состояние вспомогательным технологиям.

05

Шрифты внутри проекта

Inter и Matrix Sans Screen размещены локально. font-display: swap позволяет показать текст до загрузки шрифта.

06

Честный переход к продукту

Пока приложение готовится к запуску, сайт ведёт к бета-тестированию в Telegram и объясняет дальнейшие шаги.

Цвет в презентации и продукте

#D4461E — яркий акцент кейса и действующего знака. #B8593D — исходная терракота интерфейса на реальных экранах. Снимки показаны без перекрашивания.

Результат работы

Сайт с понятным первым шагом.

Две языковые версии, понятные сценарии поездки, демонстрация «СТРОЧКИ» и запись на бета-тест.

На 15 октября 2026 года сайт опубликован, продукт готовится к запуску. Данных о конверсии пока нет.

Посмотреть сайт ↗