В сотрудничестве с Бисус Производствомы переосмыслили их цифровое присутствие посредством полной творческой переработки, включающей художественное руководство, дизайн пользовательского интерфейса/UX, разработку и анимацию.
Bisous — креативная студия, специализирующаяся на производстве 3D и компьютерной графики, создающая захватывающие визуальные повествования для брендов посредством инновационных и содержательных коммуникаций. Задача заключалась в том, чтобы разработать платформу, способную демонстрировать высокодетализированную визуальную работу, не перегружая при этом пользовательский опыт.
Нашей реакцией было создание чистого, гибкого и захватывающего веб-сайта, на котором визуальные эффекты естественным образом занимают центральное место. Эта минималистская основа сочетается с сильным редакционным подходом, который создает динамичный ритм чтения и позволяет различным форматам контента гармонично сосуществовать на протяжении всего процесса чтения.
Концепция
Весь опыт работы с веб-сайтом структурирован вокруг четырех основных столбцов. Эта система компоновки стала визуальной основой проекта, обеспечивая единообразие каждого раздела и страницы, а также предоставляя пользователям четкую и интуитивно понятную пространственную привязку на протяжении всей навигации.
Сетка создает баланс и точность, оставляя при этом достаточную гибкость для естественного дыхания крупномасштабных изображений, кинематографических переходов и редакционных композиций в интерфейсе.
Типографика и цветовая система
Чтобы усилить двойственность между художественным выражением и технической точностью, мы объединили два взаимодополняющих шрифта.
Основная типографика без засечек сочетает в себе визуальные коды люксового бренда и швейцарского дизайна, чистая, изысканная и легко читаемая. Напротив, моноширинный шрифт представляет собой более технический уровень, тонко отсылая к производственным рабочим процессам и процессам компьютерной графики, лежащим в основе творческой практики Бисоуса.
Цветовая палитра намеренно остается сдержанной и минимальной, позволяя изображениям и движению определять эмоциональный тон происходящего.
Технологический стек
Проект был построен с использованием легкого и гибкого технического стека, предназначенного для поддержки высококачественного движения и иммерсивной навигации.
Куча
- WordPress
- ГСАП
- Пользовательская интеграция проигрывателя Vimeo
GSAP сыграл центральную роль в создании плавных переходов и плавного взаимодействия движений на веб-сайте, а специальный проигрыватель Vimeo позволил нам сохранить полную визуальную согласованность и контроль над воспроизведением видео.
Кинематографический загрузчик
Вступительная часть была задумана как кинематографическое погружение во вселенную Bisous.
На этапе загрузки появляется последовательность тщательно подобранных визуальных эффектов, сразу определяющих визуальный язык и атмосферу веб-сайта. Помимо своей эстетической роли, эта последовательность также служит основой для слайдера домашней страницы, создавая непрерывность между процессом загрузки и основным потоком навигации.
Результат меньше похож на традиционный загрузочный экран и больше похож на начальную сцену визуального повествования.
Слайдер Главная
На главной странице мы реализовали полноэкранный вертикальный слайдер, призванный погрузить пользователей непосредственно в проекты.
Навигация улучшена за счет бесконечной прокрутки в обоих вертикальных направлениях, что обеспечивает плавность и непрерывность исследования. Эта механика усиливает ощущение постоянного перемещения по визуальной галерее, а не просмотра отдельных страниц.
Что касается названий проектов, мы исследовали идею сотрудничества, объединив имя Bisous с именем каждого представленного клиента или проекта, подчеркнув диалог между студией и брендом.
Анимация заголовка
Чтобы представить движение тонким и сложным способом, мы разработали специальную анимацию появления текста, основанную на случайных переходах непрозрачности, происходящих буква за буквой.
Эффект остается намеренно сдержанным, но при этом органичным, повторяя недостатки и процедурный характер, часто встречающиеся в 3D-рендеринге и цифровых экспериментах.
Этот язык микроанимации оживляет интерфейс, не отвлекая от самого контента.
Работает навигация
Чтобы пользователи могли быстро перемещаться между проектами, мы разработали дополнительную навигационную систему, вдохновленную техническими пользовательскими интерфейсами и эстетикой производственного программного обеспечения.
Вместо того, чтобы напрямую копировать эти визуальные коды, мы переосмыслили их в редакционном и минималистском направлении проекта. Полученный интерфейс выглядит одновременно функциональным и целостным, почти напоминая помеченные производственные теги, естественным образом интегрированные в визуальную систему.
Постоянный опыт «Следующего проекта»
Внизу каждой страницы проекта мы ввели систему непрерывного перехода, которая плавно ведет пользователей к следующей работе.
Целью было сохранить погружение и стимулировать непрерывное исследование. Вместо резких перерывов в навигации переход кажется плавным и почти незаметным, как будто сам веб-сайт постоянно разворачивается от одного проекта к другому.
Такой подход превращает просмотр в более инстинктивный и кинематографический опыт.
Пасхальные яйца и микровзаимодействия
Для взаимодействия с меню и состояний наведения ссылки мы расширили визуальный язык проекта за счет тонких рандомизированных преобразований букв.
Внутри этих взаимодействий спрятаны буквы, извлеченные из слова «Bisous», незаметно интегрированные в интерфейс в виде маленьких пасхальных яиц. Эти детали усиливают игривый и экспериментальный характер студии, одновременно вознаграждая внимательных пользователей моментами открытий.
Кто мы
Мы — цифровая студия, процветающая на стыке повествования, технологий и визуальной точности.
Что касается Bisous, нашей целью было не просто разработать веб-сайт-портфолио, но и создать опыт, способный перевести художественную чувствительность студии на захватывающий цифровой язык. Благодаря минималистичным макетам, редакционной композиции и тщательно спланированному движению платформа становится продолжением их визуальной вселенной.
Мы считаем, что самые сильные цифровые впечатления — это те, которые кажутся живыми, минималистичными, преднамеренными и глубоко выразительными.