Garden Eight — токийская студия, специализирующаяся на цифровом дизайне, в первую очередь для корпоративных и брендовых веб-сайтов. Имея команду из семи человек и сеть внешних партнеров, мы поддерживаем компании и бренды в их цифровых коммуникациях в сфере веб-дизайна, разработки, арт-директорства и управления проектами.
Для Garden Eight важнее всего добросовестно создавать хорошую работу, продолжая при этом подходить к веб-сайтам с чувством игры. Руководствуясь такими идеями, как «хорошие и веселые вещи» и «игривые, но скромные», мы стремимся создавать веб-сайты, которые не просто привлекательны визуально, но также эффективны и надежны как для клиентов, так и для пользователей.
Наш подход
Что мы ценим в веб-производстве
В Garden Eight мы уделяем особое внимание не только визуальному воздействию, но и тому, как веб-сайт может активизировать цифровую коммуникацию компании или бренда. Мы изучаем контекст, отрасль, тон и точки взаимодействия с пользователем каждого проекта, а затем объединяем правильную информационную архитектуру, визуальные эффекты, движение и взаимодействие для разработки целостного веб-интерфейса.
Связь между дизайном и разработкой
Поскольку большинство членов Garden Eight занимаются как дизайном, так и разработкой, мы можем двигаться вперед, не разделяя эти две дисциплины полностью. Параллельно рассматривая визуальные эффекты, движение, взаимодействие и техническую осуществимость, мы делаем больше, чем просто переносим статический дизайн в Интернет — мы уточняем, как он выглядит, движется и реагирует в браузере.
CMS/Операции/Производительность/Доступность
В Garden Eight мы подбираем CMS и интерфейсную архитектуру для каждого проекта в соответствии с назначением сайта и операционной структурой. Принимая во внимание простоту обновлений, значительную гибкость, операционную нагрузку и возможность сопровождения после запуска, мы разрабатываем гибко — от традиционных решений CMS до автономных архитектур и статически генерируемых настроек.
Производительность и доступность также являются областями, которые мы постоянно учитываем на протяжении всего производства. В зависимости от требований проекта мы тестируем и дорабатываем скорость загрузки, нагрузку доставки, контрастность и фундаментальную доступность с целью улучшения сайта даже после запуска. В последние годы мы также расширили наш интерес к оптимизации поиска и понимания информации на основе искусственного интеллекта.
Движение/Взаимодействие
В работе сайта Garden Eight движение и взаимодействие рассматриваются не как украшение, а как элементы, которые напрямую определяют качество опыта. С точки зрения дизайна, реализации и движения мы изучаем темп, поток внимания и реакцию на действия пользователя, корректируя их так, чтобы общее впечатление и удобство использования сайта соединялись естественным образом.
При разработке этих эффектов нашим главным приоритетом является не мешать действиям пользователя или потоку контента. На этой основе мы добавляем выражения, которые придают сайту характер и атмосферу. Переходы страниц, прокрутка, видео и WebGL разрабатываются с учетом визуального мира и информационной структуры каждого проекта, при этом темп и непрерывность уточняются, поэтому взаимодействие остается плавным и непрерывным.
Избранные проекты
Сад Восемь
Это было обновление нашего собственного веб-сайта, созданного как корпоративный сайт и портфолио.
Благодаря визуальному оформлению, общему опыту и основному контенту (кейсам нашего проекта) сайт призван передать настроение «Восьмого сада» и вызвать интерес посетителей.
В нашей компании уже давно существует культура, в которой каждый участник выбирает любимое животное и использует его в качестве значка. Для этого обновления мы превратили этих животных в персонажей, создали их 3D-модели и сделали их исполнителями, которые оживляют сайт. Посетителей встречает игривое сочетание мягких мотивов и эстетики с искажениями.
воздушный шнур
Это был не первый раз, когда мы работали над сайтом Aircord. Мы сотрудничали при четырех обновлениях и благодаря этому процессу пришли к пониманию Aircord не по жанрам ее работы или технологиям, которые она использует, а как к студии, которая сочетает в себе изображение, свет, звук и системы для создания впечатлений в физическом пространстве. По этой причине мы чувствовали, что обычное портфолио, просто упорядоченное расположение проектов, не будет отражать истинную природу студии.
Нашей целью было сделать сам веб-сайт пространством, через которое посетители входят в мир Aircord и перемещаются по нему. На верхней странице экран выглядит как далекий трехмерный объект. В «Проектах» поверхности, на которых отображаются кадры проекта, перемещаются по кольцеобразному пространству. Когда проект выбран, камера приближается, а изогнутая поверхность разворачивается в плоскость и плавно становится страницей деталей. Вместо того, чтобы переключаться на отдельную страницу, сайт меняет состояние того, что зритель уже видит, создавая единый непрерывный опыт между 2D и 3D.
Такой непрерывности невозможно было достичь, просто создавая DOM и WebGL отдельно и объединяя их вместе. Видео, типографика, прокрутка, движение камеры и шейдеры были спроектированы как единое изменение состояния, поэтому весь экран трансформируется в одном потоке. Поскольку один и тот же человек занимался и дизайном, и разработкой, мы могли перемещаться между внешним видом и реализацией, настраивая все: от форм букв и скорости движения до ракурсов камеры и интенсивности освещения, не принимая слишком преждевременных решений с обеих сторон.
То, что мы создали для Aircord, было не просто контейнером для ее работы, а веб-сайтом, который позволяет пользователям ощутить природу самой студии через информацию, движение, пространство и код. Для Garden Eight этот проект — один из ярчайших примеров проектирования и реализации не как последовательных этапов, а как единого творческого акта, развивающегося одновременно.
ХОНКА РЕ:РАММА!
ХОНКА РЕ:РАММА! — это выборочный класс с отличием в новой очной стипендиальной программе, запущенной Digital Hollywood весной 2026 года. Объединяя CG/VFX, XR и UI/UX, класс предлагает студентам подумать, какие вопросы они сами будут продолжать задавать в эпоху, когда ИИ сможет дать ответы. По этой причине мы хотели, чтобы сайт не просто передал информацию, но и заставил каждого посетителя почувствовать что-то посредством самого опыта.
Четкое повествование и ощущение воплощения были необходимы для того, чтобы этот опыт сработал. Под воплощением мы подразумеваем человеческие жесты, на которые зрители могут легко спроецировать себя. Это побудило нас поместить человеческую фигуру в центр опыта.
Задача заключалась в том, чтобы не ограничивать абстрактную идею «вопроса» объяснением, а также не допустить, чтобы визуальное направление превратилось в пустую атмосферу. Мы удалили из фигуры как можно больше признаков возраста и идентичности и рассказали историю с помощью жестов: остановки, протягивания руки и начала ходьбы. Шар в руке фигурки состоит из бесчисленных частиц; оно приближается к определенным очертаниям, но никогда не принимает фиксированную форму.
Во второй половине шар исчезает, и фигура, ранее стоявшая на месте, начинает ходить. Опыт переходит от периода постановки вопроса к периоду действия и творчества. Вместо того, чтобы объяснять это словами, мы выразили чувство воодушевления того, кто собирается начать обучение через изменение самого тела.
Фигура и анимация были созданы в Blender, затем объединены в Three.js с частицами, движением камеры, светом и типографикой. Garden Eight рассматривала дизайн, 3D и разработку как один непрерывный процесс, формируя конечный результат, балансируя при этом воздействие 3D-визуализации с читабельностью текста непосредственно в браузере.
https://school.dhw.co.jp/p/honka_reframe
ФОТОЁШИ
PHOTOYOSHI — это сайт-портфолио Такамицу Мотоёси, фотографа из Японии. Сайт был разработан, чтобы раскрыть весь характер его фотографий в цифровой среде и обеспечить захватывающий фотографический опыт.
На главной странице используется бесконечная прокрутка для создания непрерывного просмотра, который естественным образом ведет посетителей от одной работы к другой. Он также предлагает два режима просмотра, позволяющие пользователям плавно переключаться между обзором всей работы и целенаправленным просмотром отдельных фотографий. Кроме того, действия пользователя, такие как движение мыши и прокрутка, напрямую влияют на визуальное представление изображений, создавая ощущение активного манипулирования фотографиями. Вместе эти механизмы превращают просмотр страниц в захватывающий опыт.
Горизонтальная прокрутка может улучшить погружение, но она также представляет собой проблему с удобством использования: посетители, впервые попавшие в сайт, могут не сразу понять, как перемещаться. Чтобы решить эту проблему, мы реализовали анимацию во время загрузки и переходов, которые естественным образом сообщают направление прокрутки.
В качестве CMS сайт использует WordPress, что позволяет администраторам выбирать, какие изображения будут отображаться на главном экране. Весь сайт генерируется статически для оптимизации производительности. В результате каждое посещение главной страницы предлагает новую, случайную встречу с разными фотографиями.
АНАИ ВУД
Корпоративный веб-сайт Anai Wood Industry отражает как честность компании, работающей с древесиной, так и ее креативность в производстве посредством дизайна и взаимодействия.
Визуальная концепция всего сайта построена вокруг двух противоположных качеств: естественной индивидуальности деревьев, каждое из которых растет в лесу по-разному, и закономерности, привнесенной в процессе фрезерования пиломатериалов. Текстовые анимации, которые растут вверх, макеты, которые сходятся в сетку при прокрутке пользователем, и поперечные сечения дерева, которые меняют форму каждый раз, когда появляются, превращают деятельность компании в движение, уникальное для Интернета.
В индексе проекта используется ползунок с бесконечным циклом, которым можно управлять путем прокрутки или перетаскивания. При переходе между страницами выбранное изображение и текст переносятся, обеспечивая непрерывный просмотр. На фоне меню также изображен лес WebGL, созданный с помощью Three.js, что сразу же запоминает связь компании с лесным хозяйством.
Система использует архитектуру Jamstack, созданную с использованием Nuxt, Contentful и Netlify, с тщательным вниманием к скорости загрузки, безопасности и простоте обновлений. Проект сочетает в себе яркое визуальное выражение идентичности компании с практической функциональностью, необходимой для корпоративного веб-сайта, используемого в повседневной деятельности.
растение
Plantica — японская креативная студия флористики, которой руководит Такаши Кимура. Его работа охватывает широкий спектр областей, включая искусство, моду, образ жизни, пространственный дизайн, инсталляции, текстиль, продукцию и художественное направление — все сосредоточено на цветах. Веб-сайт должен был не только организовывать и представлять разнообразную деятельность Plantica, но и функционировать как каталог ее многочисленных моделей.
Нашей целью было передать профессиональный, но сложный дух студии, максимально подчеркнуть яркую красоту ее цветочных работ и представить огромный объем проектов и изображений так, чтобы их было удобно и приятно просматривать.
Мы усовершенствовали каждую анимацию и рассматривали даже время загрузки как часть направления, улучшая общую плавность игры. Результатом стал веб-сайт, который элегантно инсценирует каждую встречу с прекрасными работами.
Как мы работаем
Garden Eight — небольшая команда, в которой режиссеры, дизайнеры и разработчики находятся рядом друг с другом. Мы продвигаем проекты вперед, делясь решениями, которые требуются для каждого проекта. Вместо того, чтобы разделять дизайн, реализацию, движение, архитектуру CMS и операции, мы рассматриваем их как части единого веб-интерфейса и совершенствуем их вместе.