Loading ...

Responses by Frédéric Fornini and Paule Jorrot, cofounders, Ensemble.

Background: Wanda is a Paris-based, award-winning production company that operates through the following divisions: W+ for advertising, Mynd for music, W+ Originals for TV series, Wonder for photography, and Jungler and Jungler Lab for animation. The company recently underwent a few important changes, among which was the birth of these subsidiaries, and so saw this as an opportunity to freshen its image. This site is part of a larger network of companies that all went through the same revamping—the most radical of all design-wise being wonder.paris, Wanda’s talent production and agency. All in all, the project consisted of six new sites with four new logotypes.

Favorite details: We wanted to deliver a balanced experience with an engaging showcase and an efficient exploration tool that comprised a few handy features: likes, video download, and selecting and sharing videos from a director, among others. The feature we are most proud of is the dynamic layout system. We had to go through some trial and error to find a sweet spot that would combine randomized positions, sizes and video loops with an interesting layout no matter how many times visitors refreshed the page—all the while maintaining good performance.

On that note, we were lucky to have a great client and development team working with us. This site truly was a collective effort. It can sound a bit mushy, but this collaboration was essential in delivering a seamless experience.

Design core: The core is a sum of little details—the blurry effects to avoid interference between the background text and overlays, the adaptive type size for directors’ names, the transitions. The main grid is formed by classical twelve columns that contrast with the relatively freeform homepage composition. Because of the production company’s nature, the whole body of work needed to feel alive and animated; this echoes the team at Wanda’s energy and sense of attention to details—and they are really sharp.

One major aspect for us is the typography. The mix of Bruta Types’s Trash with Söhne and Söhne Mono from Klim Type Foundry gives the site an unusual tone of voice that brings a breath of fresh air to the field of visual production. The client wanted a completely different feeling for Wonder: something more elegant but not something you would see in a glossy paper magazine. After a few exchanges, we agreed on a combination of Pangram Pangram Foundry’s Migra and RL Unno from Regular Lines. Keeping a similar navigation and grid structure helped speed up the design process while the site exhaled a different flavor.

Challenges: The dynamic layout proved to be the biggest challenge, especially as we moved from the mockup to the real thing. We had to prototype as much as we could to get a good result. The tools available for unconventional websites and animations are still too limited, and as a consequence, they’re time consuming. We feel there’s still a gap to be filled here from design to production with powerful, animated prototyping solutions—anyone?

The six-site structure also presented another challenge. Since we wanted to use the same navigation system to create a visual feeling of belonging, we had to consider their common ground while leaving room for specific needs. We were set to go live in March at first, so the site was ready at that time, but some content was still missing. Never underestimate the time it takes to create quality video thumbnails. We had to postpone the release—which brought a new set of modifications—but it was for the better in the end.

Divergent paths: Over time, the objectives of the back office became a moving target with new scenarios that were difficult to foresee. The evolving structure forced us to twist the arm of the system we built. Spending as much time as you can with your client to understand their work process is a crucial step. This is one thing we would change.

Navigation structure: We wanted to avoid a burger menu and a crowded top navigation system while having enough freedom to go back at any point in the site in a short time. Our main focus was the talent pages’ browsing speed, which forms the core of the experience: hence, the straightforward folder structure that shows where you are at any time, plus a few contextual navigational features and keyboard shortcuts to ease the navigation. All the extras are in the plus menu, which is quickly accessed on hover.

Special features: The ability to create your own playlists out of a director’s set, reorder and share your selection, which is quite practical for TV producers—the generated page includes a director’s biography as well—and a like button to pick films from Wanda’s entire library.

Technology: Based on Nuxt.js, the site is built completely from scratch without any framework. We used GSAP to create the animations and Principle and Origami to prototype them. Contentful powers the back end, and the website is deployed on Netlify.

wanda.net

Browse Projects

Click on an image to view more from each project
X

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

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