Одностраничный сайт
сценарная комната
Дизайн-концепция, креативная верстка на Tilda
о проекте
Короткометражный фильм «Сценарная комната» был снят по заказу ПАО «СИБУР» (крупнейший в России производитель полимеров).
По сюжету главные герои (в ролях: Юлия Пересильд, Константин Хабенский и Сергей Минаев) пытаются разобраться в вопросе
«Кто спасет будущее?». Может, это сильные женщины, врачи или современные технологии?
Что было сделано в ходе работы над проектом
Задача:
В короткие сроки (10 календарных дней) создать креативный лонгрид на платформе Тильда с описанием сюжета фильма. Данный лендинг будет публиковаться на сайте Комсомольской правды.

Что было сделано:
  • коррекция текстов от Заказчика, создание полной структуры;
  • подбор мудборда и примеров будущего дизайна;
  • создание дизайна страницы;
  • креативная верстка макета на платформе Тильда со всеми адаптивными разрешениями, настройка анимации.
первоначальные наработки
Изначально СИБУР планировали заказать лендинг в самой Комсомольской правде, но они не смогли предложить решение, которое было нужно. Дизайн получался примитивным и не погружал в атмосферу и сюжет фильма
проработка концепции
Главными референсами от Заказчика стали сайты Blueprint и мой креативный проект про микропластик. Нужно было сделать что-то среднее: простая верстка с применением градиентов в дизайне
и в меру креативная уместная анимация.
мудборд
Так как тема фильма — будущее, было важно использовать элементы футуристичности. Но, как сразу оговорились во время первых обсуждений проекта, не нужно уходить в космическую тематику. Должен быть баланс.
Я предложила добавить интерфейсные элементы: фокус на героях, рамки, полупрозрачные «стеклянные» плашки, сетки перспективы.
Дизайн-концепция
В дизайне были еще свои ограничения по использованию определенных шрифтов. Из предложенных вариантов нейтральнее и подходящее всего оказался шрифт Open Sans. Если бы этих ограничений не было, я бы использовала моноширный шрифт, он бы лучше подошел к теме футуристичности.

Интерактивность:
На главном экране используется анимация с плавающим элементами, которые разлетаются в разные стороны при наведении. Также настроен эффект дыма при движении курсора. Помимо этого на сайте используется большое количество видео с кадрами из фильма для усиления повествования и погружения в контекст.
итоги работы
  • сайт передает нужную атмосферу и погружает в сюжет фильма
  • благодаря креативной анимации и интерактивности пользователю интересно изучить сайт до конца
  • лонгрид опубликован на сайте Комсомольской правды (ссылка на проект в самом начале описания данного кейса)
Made on
Tilda