Сайт-портфолио для студии дизайна из Дюссельдорфа

Главное о кейсе

Собрали сайт для дизайн-студии Radaville из Дюссельдорфа. Клиент хотел “всё, везде и сразу”, но денег у него было только на “часть, местами и постепенно”. Чтобы попасть в ожидания клиента и остаться в бюджете, мы обратились к набору компонентов с других наших фестивальных сайтов и как на конструкторе собрали по кускам стильный сайт, который смотрится дорого.

Как проект изменил жизнь пользователей

Раньше они не знали, кто такие Radaville, а теперь у них есть целый сайт для знакомства со студией.

Бизнес-задача и ее решение

Создать “дорогой” сайт-портфолио, оставшись в рамках бюджета и сроков.

Чтобы достичь поставленной задачи, мы решили применить наш подход “Affordable Gucci” — не выдумывать ничего с нуля, а собрать сайт из проверенных компонентов, которые накопились за годы участия на Awwwards. Таким образом мы используем красивые, дорого выглядящие компоненты, и переиспользуем их с минимальными трудозатратами. Итоговый результат выглядит как премиальный кастомный сайт, но реальная стоимость разработки остаётся в разумных пределах, потому что мы уже потратили силы на разработку и отладку компонентов на других проектах до этого.

На старте мы собрали дизайнера и тех команду на брейншторм. Ребята прошлись по ТЗ и предложили решения с прошлых наших проектов, которые отвечали требованиям. Так мы покрыли почти весь сайт. За счёт этого мы сильно сократили этап дизайна и согласования с клиентом — он уже утвердил все элементы после брейншторма. Дальше оставалось только сшить все компоненты в цельный сайт, сверстать, настроить интеграцию с CMS, заполнить контент и отправить в прод.

Крафт (мастерство), реализация, технические детали

На главной странице 3D infinite-слайдер, который работает как бесконечная лента.

На странице Сuration бесконечный скролл-слайдер, реагирующий на скорость прокрутки.

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

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

Но лучше всего просто открыть сайт и провести на нём пару минут — все компоненты прекрасно справляются с самопрезентацией.

Скриншоты