Responses by Kenta Toshikura, designer and front-end developer, Garden Eight.

Background: The main target audience for this website is users who are familiar with or want to learn more about Tokyo-based creative studio aircord, which specializes in creating digital installations and video content leveraging the latest technologies, with a secondary audience of users interested in technology. I developed and designed this website with the goal of allowing users to more strongly feel the experiences that aircord creates.

Design core: The design primarily utilizes 3-D expressions to explicitly illustrate that aircord is a company offering experiences. We placed special emphasis on smooth, intuitive page-transition animations, providing consistency and immersion. These transitions give users the feeling of entering a different space, enhancing the site’s interactivity.

The About page features a water-reflected floor in the 3-D space, adding depth and animating into the subaqueous realm as users scroll, enabling more refined and detailed expressions. Furthermore, the Project page showcases actual project examples through engaging videos and images, highlighting aircord’s technological expertise and creativity.

Challenges: The most challenging aspect of creating this website was implementing the unique transitions between 3-D and 2-D spaces to create a distinctive experience. This required complex techniques involving multiple RenderTargets. Explaining the complex movements was difficult using only words, so we created many demos, which, as a result, diverted resources from other areas. Particularly, the typography on the Home page required a delicate balance between animation, 2-D text and 3D space. Resolving this demanded extensive trial and error from both design and technical perspectives.

Navigation structure: The most crucial consideration for the navigation structure was usability. Given the site’s substantial nature with numerous animations, the UI elements that users interact with most frequently were designed to be intuitive. This lets users move smoothly and naturally within the site. The menu structure was kept simple and clear to facilitate easy access to essential content and features.

Technology: The primary technologies used in the development of this website were three.js and WebGL. To maximize the potential of these technologies, we employed various techniques like delivering static HTML for quick response times, designing a CMS that facilitates easy updates, serving optimized resources for each device, distributing content efficiently via CDN and dispersing resources to reduce server costs. Moreover, the site adheres to Web Accessibility standards, including keyboard navigation, text-to-speech, proper contrast ratios and appropriate click target areas. The aim is to ensure that the website is accessible to all users, regardless of their abilities or devices.