Кейс создания сайта моушен студии
Подразделение нашей студии, специализирующееся на создании анимированных визуализаций ювелирных украшений.
Задача.
Разработать сайт, который демонстрирует портфолио студии. Оптимизировать видеоконтент и сделать загрузку максимально быстрой.
Решение.
Для выполнения задачи мы выбрали фреймворк Gatsby. Поскольку он построен на React и GraphQL, он позволяет создавать молниеносно быстрые сайты и удобен в разработке. Для быстрой загрузки видео без потери качества решили использовать CDN.
Технологии.
- React (Gatsby)
- Tailwind
- Figma
- Bitbucket
- Nginx/HTTP 2.0
- CDN Yandex.Cloud
Контент.
Поскольку мы имеем дело с видеоконтентом, в том числе на главной странице, самая главная задача стояла в его оптимизации. Мы сразу отказались от демонстрации видео с помощью готовых встраиваемых плееров типа ютуб, поскольку они могут ужимать качество, а нам важно показать свою работу в высоком разрешении.
Решение было использовать CDN от Yandex Cloud, это провайдер контента, который имеет прямую связь с локальными сетями и обеспечивает быструю скорость передачи данных и загрузки контента.
Адаптивная верстка.
Вёрстку разработали используя технологии CSS: flexbox и grid. Сайт полностью адаптивен и хорошо просматривается и на компьютере и на мобильных устройствах.
