Проект
Lumen
Спокойный интерфейс для поиска, сравнения и сохранения интересных событий рядом.
- Роль
- Концепция продукта · Дизайн опыта
- Стек
- TypeScript · React · Next.js · CSS · Git · Figma · Playwright
- Период
- Демонстрационный концепт
- Результат
- Спокойный поиск
Обзор
События рядом, легко выбирать.
Демонстрационный концепт. Lumen создан специально для этого портфолио. Это не опубликованный продукт и не клиентский проект; описанные ниже решения показывают предлагаемое направление.
Задача
Поиск события рядом часто начинается с перегруженных календарей, непонятных фильтров и карточек, которые слишком поздно показывают практические детали. Быстро сравнить несколько вариантов оказывается сложнее, чем должно быть.
Lumen исследует спокойный сценарий поиска, построенный вокруг времени, места, доступности и желаемого типа впечатлений.
Роль и ограничения
Концепт охватывает формирование пользовательского опыта, иерархию контента и адаптивный дизайн интерфейса.
- Основные детали события должны быть видны до открытия отдельной страницы.
- Фильтры должны оставаться понятными на узком экране.
- Сохранение события не должно прерывать просмотр.
- Продажа билетов и инструменты организатора не входят в рамки концепта.
Архитектура и решения
Предлагаемый сайт использует Next.js для индексируемых страниц городов и событий. Серверный рендеринг выдаёт полезный результат по умолчанию, а небольшой клиентский слой фильтров обновляет текущий список без превращения всей страницы в клиентский компонент.
Карточки событий используют постоянный порядок: дата и время, название, площадка, формат и сведения о доступности. Компактный гид по городу группирует связанные события, не заменяя основной список результатов.
Взаимодействие и доступность
Фильтры используют нативные элементы с постоянными подписями и явной кнопкой применения на мобильных устройствах. Изменение сохранённого состояния объявляется вспомогательным технологиям и не зависит только от смены иконки.
Карточки остаются обычными ссылками, фокус хорошо виден поверх фотографий, а движение ограничено короткими переходами состояний с учётом настройки уменьшенной анимации.
Результат и следующие шаги
Концепт показывает направление адаптивного интерфейса, а не измеренную конверсию. Полезный прототип должен проверить карточку события, мобильную панель фильтров и сохранённые события с реалистичной длиной контента.
Главный вывод
Интерфейс поиска работает лучше, когда практические детали доступны при первом просмотре. Сильная информационная иерархия делает большой каталог спокойнее, не убирая полезный выбор.
Визуальная галерея
Результаты
- 3
- Основные сценарии поиска
- <3
- Шаги до сохранения события
- 100%
- Цель адаптивности
- AA
- Цель по контрасту
Обсудим проект
Давайте создадим что-то вместе.
Есть проект или просто хотите познакомиться? Я всегда открыт хорошему разговору.
Обсудить проект