Иллюстрация платформы Lumen с карточками событий, фильтрами и городским гидом.

Lumen

Спокойный интерфейс для поиска, сравнения и сохранения интересных событий рядом.

Роль
Концепция продукта · Дизайн опыта
Стек
TypeScript · React · Next.js · CSS · Git · Figma · Playwright
Период
Демонстрационный концепт
Результат
Спокойный поиск

События рядом, легко выбирать.

Демонстрационный концепт. Lumen создан специально для этого портфолио. Это не опубликованный продукт и не клиентский проект; описанные ниже решения показывают предлагаемое направление.

Задача

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

Lumen исследует спокойный сценарий поиска, построенный вокруг времени, места, доступности и желаемого типа впечатлений.

Роль и ограничения

Концепт охватывает формирование пользовательского опыта, иерархию контента и адаптивный дизайн интерфейса.

  • Основные детали события должны быть видны до открытия отдельной страницы.
  • Фильтры должны оставаться понятными на узком экране.
  • Сохранение события не должно прерывать просмотр.
  • Продажа билетов и инструменты организатора не входят в рамки концепта.

Архитектура и решения

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

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

Взаимодействие и доступность

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

Карточки остаются обычными ссылками, фокус хорошо виден поверх фотографий, а движение ограничено короткими переходами состояний с учётом настройки уменьшенной анимации.

Результат и следующие шаги

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

Главный вывод

Интерфейс поиска работает лучше, когда практические детали доступны при первом просмотре. Сильная информационная иерархия делает большой каталог спокойнее, не убирая полезный выбор.

3
Основные сценарии поиска
<3
Шаги до сохранения события
100%
Цель адаптивности
AA
Цель по контрасту

Давайте создадим что-то вместе.

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

Обсудить проект