Responses by Akaru Studio.

Background: To celebrate architecture and scenography studio Jacques Rival’s 20th anniversary, we revamped its site with the goal of showcasing all its client products. The studio’s audience is quite large, as its architecture business is B2C, but its scenography business is B2B.

Design core: We aimed for a simple, clean site, highlighting the diversity of Jacques Rival’s projects through an innovative and original browsing experience. We differentiated the two activities of architecture and scenography with a color code: the scenography, made of visual compositions taken at night, uses black to reinforce its mood; and its architectural work is accentuated by a pure white.

Favorite details: The Gosha Sans font, with its strong identity that reminds us of buildings and architectural lines. The design simplicity of the site and the focus given to the visuals. The hover function on the activities, which allow a sneak peak to other projects and improve the browsing experience. The lateral opening of the sections. The image reveal on the project headers. And the mouse hover effect on the project titles that follows the background images.

Challenges: Combining a simple design with an innovative site and a fluid browsing experience. Due to time constraints, the first version of the site faced some technical limitations, but we were able to launch the second version with the technology we wanted. We are pleased with the final result.

The most challenging technical part of the project was managing the two independent 3-D scenes. Each scene contains three states: the homepage state, the project opening and the recomposing state when a user enters a project. We made a bunch of prototypes to split apart and validate each effect’s look and feel. Then we worked on state transitions with the goal of making the user experience more fluid and as pleasant as possible.

New lessons: We learned to better anticipate our development choices, especially when it comes to assets optimization and the overall browsing experience.

Navigation structure: The main objective was to be able to change the mood and the content while keeping the same structure. That way, the site would guide the user while playing with the visuals and the animations.

Technology: To create this project, we used NuxtJS—based on Vue.js—which enabled us to generate static websites and increase global performance. The back end is generated on Prismic, a user-friendly CMS that fulfilled our needs for project listings and managing the About section. We used WebGL technology for the visuals with the lightweight library OGL. The planes are 3-D generated so we can apply all picture animations and deformations needed onto those while keeping the performance high, a priority for this kind of website.