From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
With the hyper-growth phase our studio has undergone, it was crucial that our website reflected our values and our distinctive model.
“We deliver brands with high objectives the strategy and the creativity it takes to have that impact, by teaming up with some of the best talents out there. Without ever compromising on keeping your teams happy and sane.”
We aspired to create an experience that matched our ambitions. The goal was to generate visual impact, incorporate captivating details, and highlight our culture.
Today, our website is much more than just a showcase. It has become the cornerstone of our brand strategy and embodies all our initiatives. It’s about more than just following the trend, it’s about taking the lead and providing immersive experiences that serve our long-term objectives. To achieve this, we adopted a strategy inspired by product marketing and SaaS startups, an unconventional approach for a design studio, yet more engaging than a traditional portfolio. The idea was to articulate a value proposition centered around the benefits and features of our business model.
We also took this opportunity to transform the branding of Vendredi Society while staying true to our DNA. Every element of the website contributes to communicating our vision and strives to convey the culture of Vendredi Society.
Process
From the start, we accumulated numerous visual references, creating several mood boards that integrated 3D, UI, motion design, photography, and even copywriting.
All creatives worked closely together to explore these different areas in synergy. We iterated extensively to arrive at the final design, with each person bringing their perspective and aiming to push the boundaries of creativity. This led to epic weekly design sessions, where everyone built upon each other’s ideas.
We proceeded step by step, with the goal of defining a new design language. Alongside UI production, a studio shoot and the creation of a showreel with 3D elements were carried out. These components enrich the website’s content, creating a visually rich and harmonious universe that extends across all the pages.
We also created a digital style guide to ensure consistency and facilitate the hand-off and development phase. Beyond the website alone, this was a comprehensive artistic direction effort for our brand throughout this redesign.
User Interface
We designed a website that is both creative and interactive, ensuring that this did not come at the expense of the user experience. The navigation is smooth; we are convinced that animations should not hinder the user in any way. The clean interface aims to be a true showcase of the content, where every detail matters. Subtlety and clarity were our guiding principles, ensuring pleasant and attractive readability.
Our objective was to emphasize the “product” aspect. To do this, we integrated visual codes borrowed from software and iOS. The intuitive and innovative video player is inspired by video editing tools and your favorite photo gallery.
The menu, designed for performance, makes everything accessible with a single click without distracting from the main content. Inspired by Apple’s operating system.
Unlike traditional portfolio websites with intrusive menus, we opted for an alternative menu that adopts a product-oriented design approach, facilitating fast and efficient navigation aligned with our conversion objectives.
We also animated various elements to enrich the interface with micro-interactions, using Lottie, in particular, to add dynamism to the whole. These animations allowed us to condense information while enhancing the visual appeal of the designs.
Motion Design
We invested significant time in motion design to bring a dynamic dimension to the website. This approach touched several aspects of the website, including typography, UI components, transitions, and content.
Typographic animation was a central element of our design considerations. We developed subtle and consistent text animations across all pages, reinforcing our visual identity. Most of these animations rely on a “scramble” technique, adding rhythm while maintaining a fast execution speed (to avoid hindering navigation), with a slight random delay between characters. Some of these animations were meticulously synchronized with the scrolling of the page, creating moments of surprise throughout the navigation.
In parallel, we integrated transitions between different pages of the website. The old pages blend harmoniously into the new ones, ensuring smooth and seamless navigation through CSS animation.
Finally, animated visual elements were integrated to enrich each page, notably in case studies where we recreated numerous contents.
Development
The website was designed with each block functioning autonomously. A preliminary UX analysis allowed us to identify and categorize the different blocks and their variants, resulting in the creation of a detailed style guide including variables, colors, fonts, etc. The main challenge lies in creating this modular system, which provides the flexibility to intuitively compose page templates while allowing for great diversity.
This system strengthens the durability of the website through its extreme flexibility. It allows us to quickly generate landing pages for our acquisition campaigns while ensuring smooth interactions and a high level of design quality.
The development of our website was orchestrated on the WordPress platform. We integrated the PHP Timber framework, which played a crucial role by offering tailored adaptability to our specific requirements. To ensure thorough customization and efficient modularity of each component, we selected Advanced Custom Fields. This solution perfectly addressed our specific needs, allowing seamless and intuitive content block management.
Video Management
We optimized the loading of videos by integrating short and lightweight clips that only load when they become visible or on mouse hover, depending on the context. Larger videos, on the other hand, load on demand upon a click, via a custom player that allows for full immersion. This strategy ensures optimal use of resources and significantly improves the website’s responsiveness.
The video player was developed in JavaScript with the native video API. The progress bar is a styled <input type="range"/>, allowing the use of native events and behavior.
Optimizations
We also implemented advanced image optimization from upload through the CMS. This optimization is complemented by advanced management of responsive images, using the <picture> tag and the srcset attribute. This allows for automatically loading the most suitable image version based on the user’s screen size.
Additionally, our minimal use of JavaScript libraries enhances our control over the code and ensures that only the necessary JavaScript is loaded, thereby optimizing website performance without any superfluous elements.
Animations
To enrich the user experience on our website, we deployed sophisticated animations using GSAP coupled with the SplitText plugin, complemented by “stagger” for optimized management of appearance timings. The goal was to create visual coherence throughout the website while incorporating a random dimension to energize the text appearances letter by letter. This strategy not only ensures fluidity and visual uniformity but also delivers a dynamic and captivating impact for each visitor.
this.split = new SplitText(this.el, {type: "chars, words");
gsap.fromTo(this.split.chars,
{
alpha: 0
},
{
alpha: 1,
duration: 0.1,
ease: "power2.out",
stagger: {
amount: 0.1 + (Math.random() * 0.2),
from: "random"
}
}
);Blur effect
In the design of our website, we incorporated a blur filter, primarily in shades of black and gray, to add a sophisticated aesthetic dimension to many interface elements. This effect was implemented using CSS with the property backdrop-filter: blur(12px); enhanced by a background-color for a harmonious rendering. However, it is crucial to moderate the intensity of this blur. Excessive application can lead to visual anomalies, including glitches behind texts and increased system resource consumption, thus impacting site performance. This approach therefore requires careful attention to maintain a balance between aesthetics and optimal performance.
404
We decided to make it fun and creative, just like Google’s Chrome Dino game! Created in September 2014, the game was designed to entertain users without an Internet connection. But why did we turn our 404 into a game space?
Here, we think long meetings can be exhausting. So, to help you pass the time, we’ve locked away all the buzzwords in our 404. No more jargon that makes your head spin!
We employed JavaScript, harnessing the power of the Matter.js physics engine library. This technology allowed us to integrate realistic interactive elements that respond to user actions. We did it so you could take a 5-minute break. Got some time to kill? You know where to go.
Stack
- PostCSS and Vanilla JS using ModularJS
- Swup for page transitions
- GSAP for animations
- Lenis for scroll management, plugged with a custom JS module
- Timber as PHP Framework, and WordPress
