Доработка сайта Cyber Temple

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

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

При этом сайт должен был корректно работать на desktop, планшетах и мобильных устройствах, включая Retina-дисплеи.

Дополнительно требовалось связать frontend с CMS так, чтобы контент можно было изменять без вмешательства разработчиков: от изображений и видео до новостей, вакансий и страниц сайта.

Доработать сайт Cyber Temple до требуемого визуального и функционального состояния, сохранив его нестандартную стилистику и обеспечив стабильную работу на современных устройствах.

В рамках проекта необходимо было:

• исправить существующие визуальные и функциональные ошибки;
• привести анимации к поведению из макетов;
• корректно реализовать фиксированные визуальные композиции;
• добавить поддержку видео;
• улучшить работу с изображениями;
• интегрировать контент с Squidex CMS;
• реализовать работу страниц через SLUG;
• добавить кэширование данных;
• подключить поддержку CDN;
• добавить статистику посещений и KPI;
• обеспечить работу сайта в современных браузерах.

Было

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

В частности:

• анимации повторно запускались при обратном скролле;
• визуальные композиции пытались растягиваться под ширину экрана;
• отдельные изображения отображались некорректно;
• были проблемы с Retina-дисплеями;
• часть элементов не соответствовала макетам;
• работа с контентом через CMS требовала доработки;
• страницы использовали идентификаторы CMS вместо человекочитаемых URL;
• отсутствовала необходимая система кэширования и CDN.

Стало

Мы привели frontend к требованиям дизайна и одновременно усилили техническую часть проекта:

• переработали анимации;
• реализовали корректное поведение фиксированных визуальных композиций;
• добавили поддержку видео;
• исправили отображение изображений;
• адаптировали интерфейс под разные устройства;
• реализовали работу контента через Squidex CMS;
• добавили кэширование;
• предусмотрели CDN DigitalOcean;
• перевели страницы и посты на URL со SLUG;
• добавили статистику посещений;
• исправили работу галерей, новостей, вакансий и других динамических блоков.

Анимация была одной из ключевых особенностей сайта.

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

Для некоторых элементов было принято другое правило:

сохраняем фиксированный размер композиции → при недостатке места обрезаем края.

Это позволило сохранить задуманный дизайнером внешний вид.

Такой подход особенно важен для сайтов с большим количеством арт-объектов, где стандартный responsive-подход «растянуть всё по ширине» может разрушить композицию.

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

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

Мы изменили поведение таким образом, чтобы анимация появления текста и кнопок запускалась один раз при прохождении соответствующей точки страницы.

Дополнительно ускорили анимацию главного экрана и сделали её более плавной.

Видео вместо статичных изображений

Для сайта игровой студии визуальный контент является одной из главных составляющих коммуникации.

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

В частности, на странице About Us статичное изображение можно было заменить видео, которое открывается в полноэкранном режиме при клике.

Поддержка видео также была добавлена на уровне CMS для различных типов контента.

Это позволило отказаться от жёстко зашитого сценария:

одно поле → только картинка

и перейти к более гибкому:

медиа-контент → изображение или видео.

Одной из самых нетипичных задач стала адаптация сайта.

Для обычного корпоративного сайта стандартный responsive-подход достаточно прост: блоки уменьшаются, перестраиваются и занимают доступную ширину.

Для Cyber Temple такой подход не всегда подходил.

Некоторые баннеры и анимации должны были сохранять определённую композицию независимо от размера экрана.

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

Отдельно исправили проблемы:

на мобильных устройствах;

на планшетах;

на широких мониторах;

на Retina-дисплеях.

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

Раздел Games был одним из ключевых элементов сайта.

Здесь необходимо было одновременно работать с крупным визуальным контентом, анимациями и интерактивными элементами.

Мы скорректировали:

• фон страницы;
• масштабирование визуальных блоков;
• положение изображения героя;
• анимацию заголовков;
• поведение элементов при скролле;
• расположение формы подписки;
• переходы между элементами.

Отдельно исправили поведение постера DarkSwitch: клик по изображению стал работать так же, как кнопка Read More, и вести пользователя на страницу игры.

Это создало единый сценарий взаимодействия с карточкой.

Отдельно мы переработали логику адресов страниц.

Вместо URL, основанных на идентификаторах объектов в CMS, страницы и посты должны были открываться по SLUG.

Это сделало адреса:

• понятнее пользователю;
• удобнее для навигации;
• естественнее для поисковых систем;
• независимыми от внутренних ID объектов CMS.

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

Поэтому в рамках проекта была предусмотрена система кэширования данных, получаемых из Squidex.

Кэш распространялся не только на текстовый контент, но и на связанные медиафайлы — изображения и видео.

Дополнительно была предусмотрена поддержка CDN DigitalOcean.

Таким образом, архитектура должна была снизить количество прямых обращений к CMS и ускорить отдачу часто используемого контента.

Отдельный блок работ был связан с медиаконтентом.

Мы исправили отображение изображений и привели карточки к единой логике.

Для превью использовалось заполнение доступного пространства с сохранением пропорций изображения.

Также была исправлена сортировка новостей: первой должна отображаться последняя созданная публикация по полю Created Date.

Для новостей отдельно настроили логику отображения PreviewImage и TitleImage.

Это позволило CMS гибко управлять тем, как одна и та же публикация выглядит в списке и на отдельной странице.

Раздел Career также требовал не только визуальных изменений.

Мы переработали структуру страницы вакансий:

• убрали лишний верхний баннер;
• исправили фильтры Project и Type;
• добавили форму отправки резюме;
• скорректировали отображение текста вакансий;
• увеличили пространство для описания;
• выровняли кнопки Apply и Share;
• настроили расстояние между вакансиями и нижним баннером.

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

Мы превратили набор визуальных и технических требований в работающий frontend для игрового бренда с динамическим контентом, CMS-интеграцией, видео, анимациями, адаптивом и инфраструктурой для дальнейшего развития.

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

В рамках проекта мы выполнили комплексную доработку сайта Cyber Temple — от визуального поведения отдельных анимаций до архитектурных изменений в работе с CMS.

Основные результаты:

• интеграция динамического контента;
• поддержка изображений и видео;
• кэширование данных CMS;
• поддержка CDN DigitalOcean;
• URL на основе SLUG;
• статистика посещений и KPI;
• адаптация desktop / tablet / mobile;
• исправление проблем Retina;
• переработка анимаций;
• исправление галерей;
• доработка Games, About Us, Career, Media и Contacts;
• оптимизация работы новостей и медиаконтента.

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