Puget Digital

Puget Digital делали e-commerce-проекты корпоративного уровня, но в интернете их как будто не существовало. Работа первоклассная, а показать её негде — парадокс «невидимого качества». Я с нуля сделал агентству цифровой флагман: стратегию, дизайн, анимацию и разработку. Это кейс о том, как гибкая философия агентства превратилась в быстрый современный сайт, причём от концепции до живого кода прошло всего 8 недель.

1. Выглядеть как серьёзное агентство. Чтобы Puget Digital воспринимали не как сеть фрилансеров, а как стратегического партнёра, который на равных конкурирует со старыми фирмами — только без их неповоротливости.

2. Система вместо страниц. Модульная дизайн-система и CMS, в которой CEO публикует новый кейс за минуты, а не за дни.

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

Ведущий продуктовый дизайнер и креативный директор. Вёл проект целиком: определил бренд-стратегию, спроектировал UI/UX-систему, сделал анимации взаимодействий и сам написал фронтенд.

Я как ведущий дизайнер и CEO агентства. Всю продуктовую часть я закрывал сам, CEO отвечал за бизнес-требования и контент.

Puget Digital быстро даёт результат e-commerce-клиентам, но без цифрового лица агентство упиралось в узкое место в продажах:

1. Нет доверия. Без сайта с портфолио крупные клиенты сомневались, подписывать ли договор, — отсутствие в сети выглядело как риск.

2. Непонятно, кто мы. Бренд должен был одновременно говорить «премиально» и «быстро». В дизайне эти качества обычно спорят: премиальное часто значит тяжёлое и медленное.

3. Некуда расти. Новые проекты было просто негде публиковать.

Этот кейс про запуск с нуля: как за жёстко ограниченные два месяца превратить идею в реальный и быстрый цифровой продукт.

Времени было мало, поэтому я работал по принципам Lean UX: быстро определить «ДНК Puget» и найти свободное место на рынке.

Что делал:

Разобрал конкурентов — больше 20 бутиковых агентств.

• Вывод: почти все выглядят «раздуто» или «по-корпоративному».

• Возможность: сделать Puget Digital «тёмной темой» среди агентств — строго, быстро, технично.

Расспросил CEO

• Инсайт: главная ценность агентства в том, что оно убирает лишние расходы и прослойки.

• Что это значит для дизайна: никаких украшений, каждый пиксель должен работать. Структура важнее красивостей.

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

A. Гибкая дизайн-система. Вместо шаблонов я взял модульную сетку. Контрастная типографика и много пустого пространства придают сайту вес.

• Как: библиотека компонентов в стиле «бенто» в Figma, которая один в один переносится в CSS Grid.

• Что дало: визуальный язык, который масштабируется и с первого дня выглядит зрело и солидно.

B. Анимация, которая рассказывает (60 fps). Статичные страницы выглядят дёшево, поэтому анимации ведут взгляд и подчёркивают премиальность.

• Как: разные кривые сглаживания для появления элементов и для реакции на действия.

• Что дало: сайт ощущается как приложение, а не буклет, — ровно то, что обещает агентство цифровых решений.

C. Разработка без потерь. Чтобы успеть к декабрю, я совместил дизайн и разработку. Фронтенд писал сам, поэтому ничего не потерялось при передаче.

• Стек: React и Next.js — ради скорости и SEO.

• Что дало: сайт в продакшене полностью совпадает с макетом в Figma.

Анимация главной страницы:

Анимация страницы услуг:

Анимация страницы «О нас»:

• Система готова: дизайн-система с первого дня в продакшене, и агентство может добавлять контент сразу после запуска.

• Бренд: новый визуальный язык утвердили. Он ясно отличает Puget Digital от традиционных, более тяжеловесных агентств.

• Скорость: полностью адаптивный сайт с анимациями уложился в жёсткие 8 недель.

• Отзыв заказчика: «Точно, первоклассно и очень в духе нашей гибкости». Юрий Карпенко, CEO.

Превью сайта