Creative Dev
React
Prismic
WebGL
Three.js
GSAP
Awwwards
The FWA
CSSDA
Creative Dev
React
Prismic
WebGL
Three.js
GSAP
CUSP — это международная команда специалистов, которая занимается разработкой digital-решений мирового класса. И, как всякому хорошему сапожнику, ей понадобилась пара модных туфель.
CUSP — это студия цифрового дизайна. Их целевая аудитория довольно широка: от крупных мировых брендов до стартапов и малых предприятий. Они хотели создать что-то веселое и экспериментальное, что дало бы представление о том, что они за команда, и было бы познавательно для пользователей. Новый сайт должен был стать заявлением и отличительной чертой, выделяющей CUSP среди других агентств.
Сайт был тепло встречен сообществом и получил множество престижных наград. Более того, он появляется в различных подборках и компиляциях в качестве источника вдохновения и примера на таких платформах, как Mindsparkle Mag, Greensock, Commarts и Codrops.
Чтобы ничто не ограничивало наши творческие возможности, нам было нужно нечто большее, чем CSS и JS. Сайт использует такие современные веб-инструменты как WebGL, GLSL, PixieJS и ThreeJS. Это позволило нам разработать анимации, которые невозможно создать с помощью традиционных технологий. Шейдеры, написанные с помощью GLSL, перекладывают вычисления с CPU на GPU. Это помогает поддерживать высокую производительность при одновременном рендеринге нескольких сложных анимаций.
Общая эстетика сайта — минимализм, что очень хорошо сочетается с интерактивностью элементов. Мы проработали множество комбинаций анимации, чтобы найти баланс. Во время обсуждений проекта мы поняли, что ни один из референсов не вписывался в должной мере в аутентичный внешний вид сайта. Поэтому мы разработали собственные решения для большинства анимаций и взаимодействий.
Заставить работать такое количество сложных анимаций на любом устройстве, будь то старый ноутбук или смартфон, было непросто. Использование шейдеров в сочетании с лучшими практиками оптимизации значительно повысило скорость работы сайта. Рефакторинг самых ресурсоемких частей проекта также позволил повысить быстродействие. Таким образом, нам удалось достичь работы сайта на 60 FPS на большинстве устройств, сохранив уникальный визуальный стиль.
Сайт относительно небольшой по сравнению с другими, поэтому мы сфокусировались на навигации. Мы много работали над темпом: хотели, чтобы все элементы передвигались быстро, но в то же время довольно спокойно.
Нам всегда нравилась бесконечная прокрутка, поэтому мы включили ее в основную навигацию. Кроме того, на странице «Кейсы» есть два режима просмотра, позволяющие посетителям переключаться между более интерактивным расположением проектов и более быстрой прокруткой.
Страница переведена с помощью искусственного интеллекта.
The FWA
CSS DESIGN AWARDS
AWWWARDS