Loading ...

Responses by Tom Anderson, creative director; Ellie Gillespie, creative developer; and Jake Whiteley, lead developer, Green Chameleon.

Background: Founded by German architect Jan Clostermann, CLOU is a cosmopolitan team of architects based in Beijing, Shanghai and Shenzhen, China, designing the best social spaces in the world. The architectural firm’s work spans a wide range of industries and varies hugely in style, scale and complexity, and the team’s experience and creative spirit enable them to take advantage of unexpected potentials, manage complex conditions and successfully deliver projects that are outstanding, active and social. CLOU tasked us to showcase its ethos and vast portfolio of work to the world.

The website is the driving force behind CLOU’s marketing outreach. The first port of call for prospective clients and pivotal in the public’s perception of its brand. Our approach to this project centered on embodying CLOU’s brand essence, encapsulating the user and providing the same intuitive utility that it strives for in its own work.

Design core: The digital experience needed to mirror CLOU’s ethos—the simple, minimal visual language uses a monochrome color palette, allowing the work to speak for itself. CLOU wanted an innovative way to display its work, so the site needed to be visually impressive but, more importantly, functional. This key desire led to the development of the project ring, which sits at the epicenter of the website.

The word clou is defined as “an idea that transforms the ordinary into something extraordinary” or “a design that fulfills multiple objectives.” This ideology inspired our approach to CLOU’s project page. We knew we had to elevate the feature beyond a two-dimensional scrolling experience. Inspired by the nature of the architectural world, we conceptualized how we might combine project imagery and 3-D geometry to create a more digitally tactile interface. After multiple iterations, tests and refinements, we found a solution.

Because of its 3-D form and innovative interface, the ring can handle a large number of project images—something that would have been impossible in a more conventional approach. In addition, the ring tells a deeper story, becoming an interactive data visualization that enables users to glean comparative insights into the specializations and nuances of CLOU’s projects, from genre and scale to status and scope.

New lessons: The ring was certainly the central focus of the project. However, the remaining pages were equally as important. Our visual approach was to mix the geometric style of the homepage with influences from minimalist, editorial layout design to create content-rich, engaging pages. A major consideration was the bilingual requirements of the site: it needed to look good in both Chinese and English. Therefore, while designing, we laid out two versions of the site in tandem to ensure this throughout the design process.

Working with Chinese characters was not only a design challenge; it was also technically complicated. The primary issue we encountered was that written Chinese has no spaces or Western punctuation. GSAP’s SplitText breaks down words according to the Latin conventions. The site uses SplitText animations, which play in a staggered order—by line, word or character; because written Chinese does not follow the same boundaries as Western punctuation, using SplitText with Chinese characters made discerning line width impossible. Our solution involves manipulating all animated Chinese text on the page to artificially add zero-width spaces and other somewhat-obscure typographic characters so that we can control how the text wraps and give SplitText the ability to find word boundaries.

As a result, SplitText would only accept a one-word delimiter, which meant that—after overcoming the issue of working with Chinese characters at all—we then had Chinese punctuation marks to contend with while trying to avoid awkward punctuation widows. Sharing the site with English also meant that all the metrics around the fonts were completely different. This visibly affected the text wipe animations, which rely quite heavily on hiding overflow and clipping tricks. Any change made to the English version would have an adverse effect on the Chinese version and vice versa. Simple things, like avoiding clipping off the top of a character, suddenly became very complicated.

Technology: CLOU is a WordPress multilingual site—using the WPML plugin—which is hosted physically in China and delivered worldwide via the Alibaba Cloud CDN. For the front end, we used GSAP and three.js primarily, with our own CSS framework and JavaScript libraries bringing everything together.

Special technological features: With the ring being the main focus of the site and the only way for users to navigate through CLOU’s portfolio, it was integral that experience and interaction with the ring felt natural and facilitated easy navigation. One issue we flagged early on was the image hover interaction. If users hovered over an image that moved, the “hover area” would also move and cause usability issues. This was a non-stop loop of conflict for the image plane, jittering in and out of selection from the raycaster. To solve this problem, we separated the hover area from the image plane, which elevated the hover interaction to something satisfying when guiding your mouse around the ring.

Another substantial challenge we faced was ensuring the mobile and other touch device experiences were as intuitive as accessing the site on desktop. Due to screen size constraints, we decided that mobile users would need a totally different experience and layout to accommodate the ring and allow easy selection of projects.

Large touch devices would also have to function slightly differently to account for the lack of hover interaction, a key part of the desktop experience. With the addition of a small subnavigation on touch devices to allow users to scroll to a specific group, as well as a wheel-of-fortune-type movement on the ring, we were able to get a just-as-functional experience for touch devices.

State management was one of the largest technical challenges of the project. Not only did we have zoomed-in and -out versions of the ring, but we also had different states dependent on mouse input and screen size. Additionally, we decided to have the ring state and rotation remain the same when users would navigate away from the ring and return. Although we felt this was a good decision to keep a smooth user experience, it added another layer of complexity when combined with the various states and intro animations, as the site would have to check and recalculate multiple things when users revisited the ring.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In