Case Study: Vendredi Society | Codrops

As our studio continues to grow rapidly, it was important for us to have a website that reflects our values ​​and unique model.

“We team with the best talent to provide ambitious brands with the strategy and creativity they need to make an impact. We never compromise on keeping our teams happy and healthy.”

We aimed to create an experience that matched our ambitions: the goal was to create visual impact, incorporate captivating details and highlight our culture.

Today, our website is more than just a showcase. It’s the linchpin of our brand strategy and embodies everything we do. It’s not just about following trends, it’s about leading them and providing an immersive experience that serves our long-term goals. To achieve this, we adopted a strategy inspired by product marketing and SaaS startups. It’s an unconventional approach for a design studio, but it’s more appealing than a traditional portfolio. The idea was to clearly articulate our value proposition, centered around the benefits and features of our business model.

We also took the 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

We accumulated a lot of visual references from the beginning and created several mood boards that integrated 3D, UI, motion design, photography and even copywriting.

All creatives worked closely together, exploring different disciplines where they could create synergy. Each person brought their own perspective and aimed to push the boundaries of creativity, working exhaustively and iteratively until arriving at the final design. This resulted in epic design sessions every week, where everyone built on each other’s ideas.

We moved forward step by step with the goal of defining a new design language. In parallel with the UI creation, we also created a showreel with studio shots and 3D elements. These components would enrich the website’s content and create a visually rich and harmonious world that would span every page.

To ensure consistency and facilitate a smooth handover and development phase, we also created a digital style guide, an effort that represented the overall artistic direction of our brand, not just for the website, but throughout this entire redesign.

User interface

We designed creative and interactive websites without sacrificing user experience. We believe that navigation should be smooth and animations should never get in the way of the user. A clean interface aims to be a true showcase for your carefully crafted content. Subtlety and clarity are our guiding principles, making for a comfortable and engaging readability.

Our goal was to highlight the “product” aspect. To achieve this, we integrated software with visual code borrowed from iOS. An intuitive and innovative video player is inspired by video editing tools and your favorite photo gallery.

Designed for performance, the menus put everything within one click without distracting from the main content. Inspired by Apple’s operating systems.

Unlike traditional portfolio websites with cluttered menus, we opted for an alternative menu with a product-oriented design approach that allows for fast and efficient navigation aligned with conversion goals.

We also animated different elements to enrich the interface with micro-interactions, especially using Lottie to add dynamism throughout. These animations helped us to condense information while increasing the visual appeal of the design.

Motion Design

We spent a lot of time working on motion design to bring a dynamic element to the website. This approach influenced many aspects of the website, including typography, UI components, transitions, and content.

Typography animation was a central element of the design discussion. We developed subtle, consistent text animations across all pages to reinforce the visual identity. Most of these animations rely on a “scramble” technique, with slight random delays between letters, to add rhythm while keeping the execution speed fast (so as not to disrupt navigation). Some of these animations are tightly synchronized with the page scroll, creating wow moments throughout the navigation.

In parallel, we integrated the transitions between the different pages of the website: the old pages blend harmoniously with the new ones, and CSS animations ensure smooth and seamless navigation.

Finally, animated visual elements were integrated to enrich each page, with a large amount of content recreated around case studies.

development

The website was designed in such a way that each block could function autonomously. A preliminary UX analysis allowed us to identify and categorize the different blocks and their variations, and a detailed style guide was created with variables, colors, fonts, etc. The main challenge was to create this modular system, which allows flexibility and allows variety in intuitive configuration of page templates.

The system’s extreme flexibility enhances the durability of your website, allowing you to quickly generate landing pages for your acquisition campaigns while ensuring smooth interaction and a high level of design quality.

Our website development was tailored on the WordPress platform. The integration of the PHP Timber framework played a key role by offering adaptability to our specific requirements. To ensure thorough customization and efficient modularity of each component, we chose Advanced Custom Fields. This solution perfectly addressed our specific needs and allowed for seamless and intuitive content block management.

Video Management

We optimized video loading by integrating short, lightweight clips that are loaded only when they are displayed or on mouse hover depending on the context, while larger videos are loaded on demand when clicked via a custom player that allows for a full immersive experience. This strategy makes optimal use of resources and significantly improves the responsiveness of the website.

The video player was developed in JavaScript using the native video API. The progress bar is <input type="range"/>Allows you to use native events and behaviors.

optimization

We also implemented advanced image optimization from uploading via the CMS. This optimization is complemented by advanced management of responsive images, <picture> Tags and srcset Attributes, which allow you to automatically load the most appropriate image version based on the user’s screen size.

Additionally, minimizing the use of JavaScript libraries gives you more control over your code and ensures that only the JavaScript you need is loaded, eliminating clutter and optimizing website performance.

animation

To enrich the website’s user experience, we introduced sophisticated animations combining GSAP and SplitText plugins, complementing “stagger” for optimal management of display timing. The goal was to create visual consistency across the website while incorporating random dimensions to enliven the display of text letter by letter. This strategy not only ensures fluidity and visual uniformity, but also creates a dynamic and engaging 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 our website design, we incorporated a blur filter, mainly in black and gray shades, to add a refined aesthetic dimension to many interface elements. This effect was implemented using the CSS property backdrop-filter: blur(12px); and is accentuated by the background color for a harmonious rendering. However, it is important to moderate the intensity of this blur. If applied excessively, it can cause visual anomalies, such as glitches behind text and increased system resource consumption, which can affect the performance of the site. Therefore, this approach requires great care to maintain a balance between aesthetics and optimal performance.

404

They decided to make it fun and creative, like Google’s Chrome Dino game. Created in September 2014, the game was designed to entertain users who don’t have an internet connection. But why turn a 404 into a gaming space?

We understand that long meetings can be exhausting, so to kill time we’ve hidden all the jargon in a 404. No more confusing jargon.

We’ve adopted JavaScript, powered by the Matter.js physics engine library. This technology allows us to integrate realistic interactive elements that react to user actions. We’ve made it easy to take a 5-minute break. Got some free time? You know where to go!

stack

• PostCSS and Vanilla JS with ModularJS
• Swup for page transitions
• GSAP for Animation
• Lenis for scroll management, plug in custom JS module
• Timber vs WordPress as PHP Frameworks