AIRCORD CASE STUDY
Aircord Case Study
Goal
The goal of this project is to maximize the features of Aircord and provide an impressive online experience that allows users to feel the "experience" of Aircord more strongly. The aim was to create a website that deeply resonates with specific users, including clients, through uncompromising design and development.
About Page: Water Surface Expression
For the About page, the floor was designed with a water reflection effect to add depth to the 3D space. An animation that moves underwater as the user scrolls was incorporated to enhance the user experience.
Visuals and Functionality
To balance beauty and usability in the design, attention was paid to details in both the visual and functional aspects. The design is divided into layers:
- Single Page Layer (deepest layer): This 2D layer displays videos and images of each project.
- Page Layer: This 3D layer renders the PlaneGeometry using the Single Page Layer as a texture. The About page is also rendered on this layer. UI elements such as the cursor are rendered over this plane, allowing seamless transitions between 2D and 3D.
Optimization Measures
In addition to the layer interaction, Aircord implemented the following optimization measures:
- Optimized video delivery using Vimeo: Videos are uploaded to Vimeo, generating multiple resolutions (SD, HD, FHD) for appropriate delivery based on the user's environment.
- Control of loading timing: Instead of loading all media during the initial load, Aircord staggers loading times for each piece of media and preloads for transitions incrementally.
- Reduced code size for mobile: By rendering icons as text instead of using 3D files, Aircord was able to reduce the code size for mobile by 1MB.