• 100
  • 99
  • 98
  • 97
  • 96
  • 95
  • 94
  • 93
  • 92
  • 91
  • 90
  • 89
  • 88
  • 87
  • 86
  • 85
  • 84
  • 83
  • 82
  • 81
  • 80
  • 79
  • 78
  • 77
  • 76
  • 75
  • 74
  • 73
  • 72
  • 71
  • 70
  • 69
  • 68
  • 67
  • 66
  • 65
  • 64
  • 63
  • 62
  • 61
  • 60
  • 59
  • 58
  • 57
  • 56
  • 55
  • 54
  • 53
  • 52
  • 51
  • 50
  • 49
  • 48
  • 47
  • 46
  • 45
  • 44
  • 43
  • 42
  • 41
  • 40
  • 39
  • 38
  • 37
  • 36
  • 35
  • 34
  • 33
  • 32
  • 31
  • 30
  • 29
  • 28
  • 27
  • 26
  • 25
  • 24
  • 23
  • 22
  • 21
  • 20
  • 19
  • 18
  • 17
  • 16
  • 15
  • 14
  • 13
  • 12
  • 11
  • 10
  • 09
  • 08
  • 07
  • 06
  • 05
  • 04
  • 03
  • 02
  • 01
  • 00
...
Услуги

Creative Dev

Избранные Проекты
Технологии

React

Prismic

WebGL

Three.js

GSAP

Награды / Упоминания

Awwwards

The FWA

CSSDA

Creative Dev

React

Prismic

WebGL

Three.js

GSAP

20
CUSP Site

Сайт для digital-агенства из Канады

Дизайн: CUSP
Сайт: heycusp.com

CUSP — это международная команда специалистов, которая занимается разработкой digital-решений мирового класса. И, как всякому хорошему сапожнику, ей понадобилась пара модных туфель.

CUSP:
самые
лучшие
сапоги
для
модного
сапожника

CUSP — это студия цифрового дизайна. Их целевая аудитория довольно широка: от крупных мировых брендов до стартапов и малых предприятий. Они хотели создать что-то веселое и экспериментальное, что дало бы представление о том, что они за команда, и было бы познавательно для пользователей. Новый сайт должен был стать заявлением и отличительной чертой, выделяющей CUSP среди других агентств.

Сайт был тепло встречен сообществом и получил множество престижных наград. Более того, он появляется в различных подборках и компиляциях в качестве источника вдохновения и примера на таких платформах, как Mindsparkle Mag, Greensock, Commarts и Codrops.

Чтобы ничто не ограничивало наши творческие возможности, нам было нужно нечто большее, чем CSS и JS. Сайт использует такие современные веб-инструменты как WebGL, GLSL, PixieJS и ThreeJS. Это позволило нам разработать анимации, которые невозможно создать с помощью традиционных технологий. Шейдеры, написанные с помощью GLSL, перекладывают вычисления с CPU на GPU. Это помогает поддерживать высокую производительность при одновременном рендеринге нескольких сложных анимаций.

Общая
эстетика
сайта
минималистичная
и
дерзкая,
что
очень
хорошо
сочетается
с
интерактивными
элементами.

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

Заставить работать такое количество сложных анимаций на любом устройстве, будь то старый ноутбук или смартфон, было непросто. Использование шейдеров в сочетании с лучшими практиками оптимизации значительно повысило скорость работы сайта. Рефакторинг самых ресурсоемких частей проекта также позволил повысить быстродействие. Таким образом, нам удалось достичь работы сайта на 60 FPS на большинстве устройств, сохранив уникальный визуальный стиль.

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

Нам всегда нравилась бесконечная прокрутка, поэтому мы включили ее в основную навигацию. Кроме того, на странице «‎Кейсы»‎ есть два режима просмотра, позволяющие посетителям переключаться между более интерактивным расположением проектов и более быстрой прокруткой.

Страница переведена с помощью искусственного интеллекта.

Награды

The FWA

  • FWA of the Day

CSS DESIGN AWARDS

  • Website of the Day
  • Studio Site of the Year 2020

AWWWARDS

  • Site of the Day
  • Developer Award
  • Mobile excellence
t
o
:
s
a
l
t
a
n
d
p
e
p
p
e
r
П
р
и
в
е
т
,
м
е
н
я
з
о
в
у
т