Дизайн, код и AI в одних руках - проект под ключ
- Город
- Москва
- Опыт работы
- 6 лет
- На сайте с
- 2026 года
- Юридический статус
- Самозанятый
Собственный проект, не клиентский заказ: рабочая концепция сайта для реально существующего объекта — пассажирского порта в устье реки Шоша, части кластера «Волжское море». Порт принял первый теплоход в 2022 году, в сезоне 2025 обслужил 59 круизных судов, в плане на 2026 — 63 судозахода и более 10 000 гостей.
Задача, которую я себе поставила: проверить гипотезу, что стандартные форматы такому объекту не подходят. Поисковик билетов, каталог отелей и афиша сортируют предложение по категории и цене — и полностью игнорируют то, как порт живёт на самом деле.
А живёт он вспышками. Пришёл теплоход — на берегу двести человек и ровно четыре часа: им нужны экскурсия, обед, катер, такси, сувенир прямо сейчас и строго в этом окне. Через четыре часа они уйдут и не вернутся. Судов нет примерно два дня из семи — посёлок пустой, прокат простаивает, гид без группы. Это не сбой расписания, а штатный режим.
Отсюда вывод, из которого вырос весь продукт: главная ось сайта — не категория товара, а время между трапом и отходом.
Пересобрала сайт вокруг одного механизма: день → окно стоянки → витрина, отфильтрованная по длительности → заказ, привязанный ко времени отхода конкретного судна.
Главный экран — не поисковая строка, а полоса недели: у каждого дня видно, сколько судов придёт и сколько человек сойдёт на берег, тихие дни помечены серым и не прячутся. Карточка судна показывает стоянку физически — реальный отрезок закрашен на шкале суток, чтобы человек видел не «11:30–15:30», а какую часть дня это занимает. Одно нажатие перестраивает всю витрину ниже.
В витрине товар — не «экскурсия», а «экскурсия, которая влезает в ваши четыре часа». Всё, что длиннее окна, не исчезает, а гаснет и краснеет: человек должен видеть, что теряет, а не думать, что этого нет. У неподходящего предложения кнопка меняется на «всё равно взять» — вдруг пассажир сходит здесь насовсем.
Отдельно спроектировала механику, которой нет ни у кого из конкурентов: доставка к трапу. Двести человек оказываются в одной точке в известную заранее минуту — значит, к этой минуте можно привезти обед, копчёную рыбу или кружку местного фаянса. Такое возможно только там, где есть расписание судов.
Транзакционное ядро сохранено полностью: поиск рейса, выдача с фильтрами, схема палуб с тремя классами кают и заблокированными занятыми, анкеты пассажиров, автоматическая надбавка за одиночное размещение, оплата, билет. Всего 11 разделов в трёх слоях: медиа и витрина, транзакция, справка.
Реализация: один HTML-файл с клиентским роутером — без сборки, бэкенда и внешних библиотек. Чистый JS, весь интерактив написан руками, ноль растровых картинок — вся графика векторные SVG прямо в разметке. Три брейкпоинта (1080, 900, 600), aria-pressed и aria-expanded, работа с клавиатуры в картах и вкладках, отключение анимаций по prefers-reduced-motion. Типографика: Exo 2, Scada, PT Mono.
Отдельное решение по данным. Объект существует, по макету человек может реально поехать — поэтому выдуманное помечено прямо в интерфейсе. Проверенные по открытым источникам факты отделены от демонстрационных: расписание недели, часть цен, предложения витрины и афиша помечены как демо. Телефоны и почту порта я сознательно не заполняла — публиковать выдуманные контакты реального объекта нельзя.
Получился работающий прототип, а не картинка: файл открывается двойным кликом и после загрузки шрифтов работает офлайн, весь интерактив кликается — выбор дня, окна, пересборка витрины, пять шагов покупки билета.
Кейс показывает три вещи сразу. Первое: продуктовое мышление — механика выросла из наблюдения за тем, как объект живёт, а не из списка стандартных разделов. Второе: дизайн и фронтенд в одних руках, от концепции и типографики до написанного руками роутера и доступности. Третье: аккуратность в работе с фактами о реальном объекте.
Тот же подход переносится на любой объект с расписанием и коротким окном спроса: порт, вокзал, фестивальная площадка, курорт с сезонностью. Использую как демонстрацию метода в переговорах — быстро показывает заказчику, что я умею вытащить из его бизнеса неочевидную главную ось, а не разложить его по категориям.
