Explore
Уложитесь в мой дедлайн?
Обязательное поле
Некорректный номер
Некорректный Email
Обязательное поле
Все поля обязательны к заполнению
Далее
Далее
Роль в проекте
Интересующая услуга
Примерный бюджет
Пожалуйста, проставьте по варианту в каждой категории
Отправить
Отправить
several colorful figures
Заявка отправлена
В ближайшее время с вами свяжется наш менеджер
Oops! Something went wrong while submitting the form.
Вам кажется, что с дизайном все нормально. Но так ли это?
Бесплатный чек-лист для проверки интерфейса. Оцените, насколько хорош ваш дизайн и определите, нужно ли вам что-то менять.
Забрать чек-лист
Забрать чек-лист
Соберите архитектуру EdTech-платформы. Без IT-экспертизы
Понятная инструкция по разработке архитектуры. Для  тех, кто хочет сменить платформу,
но не знает как.
Полезно онлайн-школам, частным оффлайн-школам и отделам корпоративного обучения, которые хотят масштабироваться.
Забрать инструкцию
Забрать инструкцию
Время чтения:
10
минут

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

Сергей Никоненко
COO
Опубликовано
Nov 11, 2025
Обновлено
Nov 12, 2025
Теги Фильмоскоп
кейс в фактах и цифрах

О проекте и клиенте

Фильмоскоп — мобильное приложение, в котором можно «сканировать» сцены из сериалов и находить товары, появляющиеся в кадре. Пользователь наводит камеру на экран телевизора и получает карточки вещей из сцены — одежды, мебели, посуды. Дальше можно перейти на маркетплейс и купить их.

Главная страница приложения: визуализация товаров из кадра с возможностью купить такие же.
Продукт объединяет технологию компьютерного зрения и онлайн-шопинг. Он превращает сериал из просто развлечения в интерактивный опыт, где зритель становится участником. 

Первым партнером стартапа стал онлайн-кинотеатр START. Команда выбрала их сериал «Два холма» для запуска пилотной версии. 

Сериал «Два холма» — первый проект Фильмоскопа, запущенный вместе с START

Хотели проверить гипотезу: будут ли зрители взаимодействовать с контентом глубже — искать одежду героев, читать материалы о съемках, проходить тематические игры.

Проект задумывался как MVP, который можно легко масштабировать, если будет отклик у аудитории. 

Задача

У клиента уже была собственная технология распознавания сцен и внутренняя команда разработчиков. Нужно было упаковать это в полноценный продукт — продумать пользовательские сценарии и понятные флоу, сделать красивый и стильный дизайн, а также создать айдентику. 

Клиенту было важно:

Мы понимали, что помогает запускать новую пользовательскую модель взаимодействия с сериалами. Задача требовала фокуса на киллер-фиче и балансировки между вау-эффектом и простотой использования.

Основной пользовательский флоу

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

Интерфейсы приложения: экран регистрации по номеру телефона, главный экран с подборками и каталогом, страница серии с товарами и актерами
Хотите как можно быстрее получить фидбек от реальных пользователей?
Мы умеем быстро собирать MVP, подключаться к существующим API и запускать продукты даже без полноценной бренд-платформы. Расскажите о своем проекте — подберем оптимальный формат.
Связаться
Связаться

Ключевые экраны и решения

Экран камеры

Здесь начинается магия: пользователь наводит телефон на телевизор — приложение анализирует сцену и определяет, что на ней изображено.

Мы добавили:

Экран камеры: пользователь наводит смартфон на телевизор, чтобы приложение распознало сцену
Fallback-сценарий: приложение подсказывает, что объект не удалось определить

Карточки сцены

После сканирования пользователю показываются товары, которые появились в сцене: одежда, предметы интерьера, посуда.

Карточки со ссылками на товары, которые были в кадре: одежда, интерьерные предметы, посуда.
Для наших дизайнеров это был интересный UX-вызов. Контент из разных сущностей (сцена → товары → актеры) нужно было компактно и логично разложить. Мы сделали ставку на модульную структуру, где блоки переиспользуются, но наполняются по-разному.

Карточка персонажа и актера

Карточка актера и персонажа: здесь можно почитать краткое био, посмотреть сцены с его участием и товары, связанные с персонажем.

Можно кликнуть по актеру из сцены и перейти в его карточку. Там:

  • краткое био,
  • сцены, в которых он снимался,
  • товары, с которыми он взаимодействовал (например, одежда его персонажа).
Мы продумали перекрестные переходы:
Из карточки сцены → в карточку актера → обратно в другие сцены — чтобы пользователь мог исследовать сериал как вселенную.

Раздел «О сериале»

Информационный блок с фото и видео со съемок, лором, описанием вселенной, статьями о создании сериала.

Раздел «О сериале»: фото и видео со съемок, описание вселенной и материалы о том, как создавался проект.
Это было важно партнеру START:
Чтобы подчеркнуть, что проект — официальное расширение сериала, а не стороннее приложение. Мы сделали акцент на фирменном визуале, использовали фреймы и обложки, схожие с промо-съемками.

Викторины и игры

Развлекательный контент — для вовлечения и увеличения времени в приложении. Можно пройти тесты и игры, связанные с героями и событиями.

Раздел с играми и викторинами: тесты и задания по героям и событиям сериала.
Мы предложили приоритизировать эти фичи так:
Сначала — главная фича (поиск товаров), потом вики и карточки, а интерактивы — в конец спринта. Так уложились в сроки и сохранили фокус.

Визуальный стиль и UI-решения

Мы знали, что приложение должно выделяться на фоне классических стриминговых и маркетплейс-интерфейсов: быть ярким, дерзким, чуть-чуть гиковским — и при этом оставаться простым и понятным.

Вот ключевые решения, которые помогли этого достичь:

  • Градиенты как основа визуала. Мы выбрали насыщенный градиент от алого к оранжевому — он добавляет энергии, ассоциируется с эмоциями, светом софитов и огнями съемочной площадки.
  • Взяли шрифт Roboto для основного текста. Он нейтральный и хорошо читается, особенно на небольших экранах. А Roboto Condensed взяли для заголовков: он визуально экономит пространство и добавляет легкий «цифровой» вайб.
Ключевые элементы стиля: энергичный градиент от алого к оранжевому и сочетание шрифтов Roboto и Roboto Condensed
  • Камера — как сценическая рампа. На экране сканирования мы встроили микроанимации, тени, затемнения по краям — чтобы создать ощущение «просмотра сцены». Все подсказывает: ты сейчас в главной точке приложения.
Экран мобильного приложения со сканированием, оформленный как сценическая рампа с анимациями и затемнениями.

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

У вас уже есть контент? Отлично! Мы умеем превращать сериалы, шоу и фильмы в интерактивные продукты: от мобильных приложений до интеграций с e-commerce. Приходите — обсудим, как вовлечь аудиторию глубже.
Связаться
Связаться

Логотип и айдентика: попасть в образ

Параллельно с интерфейсом мы работали над экспресс-логотипом. Задача стояла непростая: разработать запоминающийся знак, который будет считываться и в диджитале, и офлайн — но без полноценной бренд-платформы, сжатых сроках и в условиях, когда проект все еще активно формировался.

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

Финальные варианты логотипа, среди которых клиент выбрал текущий знак.

Клиенту было важно избежать клише и «технологичности ради технологичности». Он хотел образ, в котором будет что-то живое, узнаваемое и чуть-чуть киношное.

Финальный логотип — это надпись «Фильмоскоп», в которой буква «О» превращается в глаз-объектив. Он символизирует и процесс сканирования, и саму идею «взглянуть внимательнее» — в кадр, в сцену, в детали.

Предфинальная версия логотипа: надпись «Фильмоскоп», в которой буква «О» превращается в глаз-объектив
Финальная версия логотипа: надпись «Фильмоскоп» с глазом-объективом в букве «О». Мы доработали форму — сделали глаз более заостренным и направленным, чтобы усилить ассоциацию с фокусом и технологией сканирования.

Как мы работали

Проект «Фильмоскоп» — это как сериал с плотным сценарием и сжатым графиком: тут все нужно было сделать быстро, слаженно и на уровне. И мы справились!

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

Дизайн должен был быть готов к началу сентября — и мы уложились. За это время:

  • вместе с клиентом сформировали флоу, приоритизировали фичи и заложили структуру приложения
  • разработали флоу и вайрфреймы
  • согласовали дизайн-концепт
  • нарисовали все экраны и собрали компоненты,
  • передали все в разработку.

Работали в формате Time & Materials — когда клиент оплачивает фактически затраченное время и ресурсы, а приоритеты можно менять на ходу. Это спасло: мы могли быстро реагировать на новые идеи, выносить менее важные задачи за скобки и брать в работу то, что становилось актуальнее. Такой подход позволил нам не тратить время на лишнее и сфокусироваться на главном — превратить технологию распознавания сцен в понятный и красивый пользовательский опыт.

Что получилось в итоге

По словам клиента, среди первых тестовых пользователей приложение показало хорошие поведенческие метрики: люди пользовались распознаванием, листали карточки, вовлекались в контент.

Фильмоскоп (Filmoskope) сейчас доступен в сторах:

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

Мы создали для приложения яркий и удобный дизайн с гибкой архитектурой интерфейса, который легко подстраивается под разные типы контента. Сделали логотип, помогли собрать промо и передали все в том виде, с которым удобно продолжать работу своей командой. Проект был не из простых — с сжатыми сроками, новыми сценариями и живущей в процессе идеей. Но как раз в таких задачах особенно важны внимание к деталям, умение подстроиться и двигаться быстро. Мы рады, что смогли поддержать запуск и вложиться в этот классный и необычный запуск 💜

Нужен яркий, современный дизайн, который вовлекает зрителей в ваш продукт?

Команда Purrweb готова помочь, ведь уже более 10 лет мы создаем UI/UX-дизайн для мобильных приложений, веб-сервисов и продуктов в сфере развлечений. Мы знаем, как превратить идею в понятный и красивый сервис, который работает на пользователя и на бизнес. Оставьте заявку — обсудим вашу задачу, разберем детали и подберем решение под ваши цели.

Почему мы?

✅ Глубокая экспертиза в цифровом дизайне. Более 550 проектов в портфолио: от медиаплатформ и стримингов до финтеха и маркетплейсов.
✅ Полный спектр задач. В команде — UI/UX-дизайнеры, графические и моушн-дизайнеры, иллюстраторы и 3D-специалисты. Соберем все — от интерфейсов и айдентики до анимации и визуала.
✅ Умеем работать с идеями на ранних стадиях. Можно прийти к нам с гипотезой или черновиком. Мы уточним детали, предложим креативные решения и соберем MVP, который легко протестировать на реальной аудитории и масштабировать дальше

Содержание
Ищете слаженную команду разработки?
Готовы помочь с дизайном  и разработкой приложений для бизнеса и стартапов
10 лет на рынке
550+ проектов

Похожие статьи

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