Одностраничный сайт
шакшука в банке
Дизайн-концепция, креативная верстка на Tilda
о проекте
Eggsellent - популярная сеть кафе в Москве и Санкт-Петербурге, которые известны своим ярким фирменным стилем и классным маркетингом. В коллаборации с брендом Бондюэль вышел продукт «Шакшука в банке», Eggsellent выступили в качестве экспертов и получили отметку на упаковке
Что было сделано в ходе работы над проектом
Задача:
Сделать креативную страницу на Тильде для презентации продукта. Т.к в главной роли банка, нужно было создать интерактивный лендинг-историю с большим количеством анимации, чтобы было интересно долистать его до конца.

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

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