Клиент сказал: «Хочу такой же яркий и живой сайт, как вы сделали для Газпром Медиа, только еще круче». «Без проблем!» — ответили мы и побежали мозгоштурмить.
Заказчик: Лицо, занимающееся продажей программного обеспечения для торговли на бирже.
Задачи, которые стояли перед нами:
- Сделать максимально анимированный сайт, чтобы все "двигалось и улетало в космос".
- Подобрать дизайн, соответствующий космической тематике.
- Разработать 3D-модели роботов и внедрить в верстку сайта.
- Создать праздничное оформление сайта к Новому году.
Сложности:
- Долго не могли выбрать стиль сайта.
- Заказчик просил больше анимаций, еще больше).
- Добавление новогодней темы в сжатые сроки (пришлось даже поработать 31-го декабря).
- Долгая загрузка сайта из-за сложных анимаций.
Решение.
Дизайн
Изначально обсуждали концепцию со светлой темой, но когда презентовали самый первый вариант, заказчику он не понравился. «Все-таки давайте тёмную!». Окнули и пошли все переделывать. На второй презентации мы согласовали новый вариант с темной темой и приняли в работу.
Анимации
Вообще, анимации — основа основ получившегося сайта. На каждом этапе работы клиенту хотелось добавить еще немножко)
В итоге мы сократили часть сложных анимаций и реализовали простые step-by-step. Стандартные для Tilda анимации придают динамики не меньше, чем кастомные. Но и кастомных (прописанных кодом анимаций) на сайте осталось порядка 60%.
А что за анимации? Это звезды, двигающиеся на заднем фоне, пролетающие метеориты, крутящиеся планеты — не сайт, а космос!
3D-модели
До этого момента мы ни разу не делали для заказчиков 3D. В итоге разработали 2 модели двух роботов — Eva и Hermes.
Выглядело круто, но они сильно утяжеляли сайт (мы это и раньше знали, но очень рассчитывали оптимизировать их). Чтобы не отказываться от полюбившихся моделек в угоду скорости, мы нашли лаконичное решение проблемы, о котором расскажем чуть ниже.
Нейросети
Впервые мы использовали не только 3D-модели, но и нейросети! Специально для новогодней темы «Midjorney» сгенерировала уникальные элементы дизайна, такие как ёлка и подарки. В итоге мы уволили нашего графического дизайнера успешно внедрили их в новогоднюю версию сайта!
Инсайты
1. Не надо усложнять! Стандартные для Tilda анимации могут выглядеть не хуже, чем сложные кастомные модификации.
2. Чтобы повысить скорость загрузки сайта, анимации и 3D-модели можно перевести в GIF. С точки зрения качества ничего не потеряется.
3. Нейросеть делает, конечно, круто, но своего графического дизайнера мы ни за что на свете не отдадим.
Результат
Ни одного стандартного блока — весь сайт выполнен в Zero block.
Все двигается, крутится и шевелится, а 3D-модели роботов приветливо машут ручкой каждому посетителю!
А посмотреть другие наши кейсы вы можете на сайте: https://contentservice.agency/madeontilda