Новый стиль Твигла

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

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

Сразу прикидываем, как может выглядеть избранное. Его рисуем на будущее, как идею. В эту итерацию оно не входит.

Чтобы зрителям хотелось возвращаться на Твигл, ещё на стадии понимания задачи мы с клиентом придумали томаторейтинг. Гипотеза: чем больше зритель совершает действий на сайте, тем больше вероятность, что он вернётся. Например, если он поставит оценку фильму.

Обычно оценка фильма реализована в виде пяти унылых звёздочек. Мы решили, что на Твигле оценка фильма должна быть максимально простой, эффектной и эмоциональной, чтобы зритель получал удовольствие от процесса. Идея — использовать метафору помидоров. Когда зритель досмотрит фильм, ему предлагается закидать плеер виртуальными тухлыми или спелыми помидорами, в зависимости от того, понравился или не понравился фильм. Оценки складываются в общий рейтинг, который виден всем посетителям сайта. Придумываем, как это могло бы выглядеть:

Ищем, как будет устроена вёрстка информации о фильме:

Видно, что структуру можно докрутить, но страница выходит скучной. Арт‑директор накидывает картинок для вдохновения:

Вдохновившись добавляем веселухи.

На старом Твигле плеер был объединён с описанием фильма, а фоновая реклама стояла в начале страницы.

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

Клиенту тоже больше нравится широкий плеер. Радуемся и собираем страницу до подвала:

Клиент просит не угробить СЕО страницы. Самые важные слова для поисковиков: «смотреть онлайн бесплатно». Просто писать это в тексте страницы не хочется. Поэтому придумываем превратить всё в шутку. Например, какой‑то персонаж говорит эти слова в подвале страницы. Ищем варианты:

Робот неплох, но узнаём, что подобную штуку уже придумали и сделали другие ребята до нас. Шутка, повторённая дважды, перестаёт быть смешной. Думаем ещё. Придумываем изобразить ключевые слова в виде криков виртуальных зрителей. Хлеба и зрелищ:

Прикидываем меню выбора серий:

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

Арт‑директор предлагает просто вывалить серии списком и добавить ссылки для быстрой навигации по сезонам.

Принимаемся за визуализацию томаторейтинга. Анимация помидоров должна быть сочной и динамичной. Вдохновляемся «Фрутниндзей».

Чтобы анимация выглядела кайфово, помидоры должны быть настоящими. Эту задачу поможет решить анимация стоп‑моушн.

Перед съёмкой нужно решить ещё одну задачу: придумать, что будет происходить со свежим помидором, который отвечает за хорошую оценку. С тухлым всё понятно — расквасил его об видео и успокоился. Но если представление нравится, то помидоры не швыряют. А что делают со свежими помидорами? Едят! Придумываем, что свежий помидор должен нарезаться в салат.

Организуем постановку. Снимаем в лайткубе на чёрном фоне со вспышкой:

С тухлым помидором всё более‑менее понятно — вот он целый, вот промежуточные состояния и вот расплющенный:

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

Как сделать тухлый помидор за короткое время? Тухлый помидор должен выглядеть мягким и сморщенным. Греем несколько помидоров на батарее, чтобы они стали мягкими. Осталось сморщить и помять. Для этого аккуратно вырезаем часть мякоти. Снимаем:

Арт‑директор замечает, что сок выглядит бедно. Бежим в ближайший магазин за кетчупом. Делаем «Шмяк!» и оставляем след от съехавшего помидора:

Всё ещё недостаточно смачно на вид. Подправляем кляксу в Фотошопе. В центре кляксы появляется некрасивое место:

Придумываем нарисовать там унылку:

Следующий вопрос: как заанимировать сплющивание помидора в момент удара об экран. Для этого засняли два кадра: с целым и сплющенным помидором. С помощью эффекта искажения трансформируем заснятые кадры один в другой. В результате получаем плавное расплющивание.

Арт‑директор: «Фигня. Салат должен приезжать снизу, а не с угла. И кусков помидора должно быть пять или шесть. Внизу должен получиться овощной салат, который должен хоть чутка зафиксироваться в мозгу, даже если он не останавливается до конца. Салат — антагонист раздавленного помидора, который задержался на экране».

Как разрубить подимор на шесть долек, чтобы выглядело сочно? И как это заснять в стоп‑моушене? На помощь приходит раскадровка:

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

Cледом снимаем дольки. Каждую дольку снимать очень долго, поэтому берём одну дольку и снимаем её вращение в каждом направлении.

Пластилин и зубочистки помогают фиксировать дольку в любом положении:

Фотошопим, вырезаем все кадры из фона и собираем анимацию в Афтер Эффектсе. Настраиваем траекторию полёта помидора и долек после разреза:

Добавляем салатницу, подправляем траектории долек:

Разбираемся, как реализовывать анимацию на сайте. Лучше всего подходит набор ПНГ и скрипт, который их сменяет.

Собираем версии страницы для планшета и телефона:

Дособираем все необходимые состояния:

По ходу работы, чтобы успеть в срок, решаем упростить систему рекомендаций, отключить комментарии и не делать кое‑какие вещи в мобильной версии.

Запускаем страницы нескольких сериалов в режиме АБ‑теста. Вносим исправления по результатам теста, докручиваем мелочи. Спустя некоторое время после пуска клиент сообщает, что командой разработчиков были допущены технические ошибки в реализации плеера и что решено поменять команду разработчиков и пересобрать страницу.

Не теряем контакт, по мере возможностей помогаем советами и замечаниями. В конечном счёте клиент открыл новый сайт сам.