With the hyper-growth part our studio has undergone, it was essential that our web site mirrored our values and our distinctive mannequin.
“We ship manufacturers with excessive targets the technique and the creativity it takes to have that influence, by teaming up with among the greatest abilities on the market. With out ever compromising on preserving your groups comfortable and sane.”
We aspired to create an expertise that matched our ambitions. The objective was to generate visible influence, incorporate charming particulars, and spotlight our tradition.
Immediately, our web site is rather more than only a showcase. It has turn into the cornerstone of our model technique and embodies all our initiatives. It’s about extra than simply following the development, it’s about taking the lead and offering immersive experiences that serve our long-term targets. To attain this, we adopted a technique impressed by product advertising and marketing and SaaS startups, an unconventional strategy for a design studio, but extra participating than a conventional portfolio. The concept was to articulate a price proposition centered round the advantages and options of our enterprise mannequin.
We additionally took this chance to rework the branding of Vendredi Society whereas staying true to our DNA. Each factor of the web site contributes to speaking our imaginative and prescient and strives to convey the tradition of Vendredi Society.
Course of
From the beginning, we collected quite a few visible references, creating a number of temper boards that built-in 3D, UI, movement design, images, and even copywriting.
All creatives labored intently collectively to discover these completely different areas in synergy. We iterated extensively to reach on the last design, with every particular person bringing their perspective and aiming to push the boundaries of creativity. This led to epic weekly design classes, the place everybody constructed upon one another’s concepts.
We proceeded step-by-step, with the objective of defining a brand new design language. Alongside UI manufacturing, a studio shoot and the creation of a showreel with 3D parts have been carried out. These elements enrich the web site’s content material, making a visually wealthy and harmonious universe that extends throughout all of the pages.
We additionally created a digital type information to make sure consistency and facilitate the hand-off and growth part. Past the web site alone, this was a complete inventive path effort for our model all through this redesign.
Consumer Interface
We designed a web site that’s each artistic and interactive, making certain that this didn’t come on the expense of the person expertise. The navigation is clean; we’re satisfied that animations shouldn’t hinder the person in any manner. The clear interface goals to be a real showcase of the content material, the place each element issues. Subtlety and readability have been our guiding rules, making certain nice and enticing readability.
Our goal was to emphasise the “product” side. To do that, we built-in visible codes borrowed from software program and iOS. The intuitive and revolutionary video participant is impressed by video enhancing instruments and your favourite picture gallery.
The menu, designed for efficiency, makes all the things accessible with a single click on with out distracting from the principle content material. Impressed by Apple’s working system.
Not like conventional portfolio web sites with intrusive menus, we opted for an alternate menu that adopts a product-oriented design strategy, facilitating quick and environment friendly navigation aligned with our conversion targets.
We additionally animated numerous parts to counterpoint the interface with micro-interactions, utilizing Lottie, specifically, so as to add dynamism to the entire. These animations allowed us to condense data whereas enhancing the visible attraction of the designs.
Movement Design
We invested vital time in movement design to convey a dynamic dimension to the web site. This strategy touched a number of elements of the web site, together with typography, UI elements, transitions, and content material.
Typographic animation was a central factor of our design issues. We developed delicate and constant textual content animations throughout all pages, reinforcing our visible id. Most of those animations depend on a “scramble” approach, including rhythm whereas sustaining a quick execution pace (to keep away from hindering navigation), with a slight random delay between characters. A few of these animations have been meticulously synchronized with the scrolling of the web page, creating moments of shock all through the navigation.
In parallel, we built-in transitions between completely different pages of the web site. The previous pages mix harmoniously into the brand new ones, making certain clean and seamless navigation by way of CSS animation.
Lastly, animated visible parts have been built-in to counterpoint every web page, notably in case research the place we recreated quite a few contents.
Growth
The web site was designed with every block functioning autonomously. A preliminary UX evaluation allowed us to establish and categorize the completely different blocks and their variants, ensuing within the creation of an in depth type information together with variables, colours, fonts, and so on. The primary problem lies in creating this modular system, which supplies the pliability to intuitively compose web page templates whereas permitting for nice variety.
This technique strengthens the sturdiness of the web site by way of its excessive flexibility. It permits us to shortly generate touchdown pages for our acquisition campaigns whereas making certain clean interactions and a excessive stage of design high quality.
The event of our web site was orchestrated on the WordPress platform. We built-in the PHP Timber framework, which performed an important position by providing tailor-made adaptability to our particular necessities. To make sure thorough customization and environment friendly modularity of every part, we chosen Superior Customized Fields. This answer completely addressed our particular wants, permitting seamless and intuitive content material block administration.
Video Administration
We optimized the loading of movies by integrating quick and light-weight clips that solely load once they turn into seen or on mouse hover, relying on the context. Bigger movies, however, load on demand upon a click on, by way of a customized participant that enables for full immersion. This technique ensures optimum use of assets and considerably improves the web site’s responsiveness.
The video participant was developed in JavaScript with the native video API. The progress bar is a styled <enter kind="vary"/>, permitting the usage of native occasions and conduct.
Optimizations
We additionally carried out superior picture optimization from add by way of the CMS. This optimization is complemented by superior administration of responsive pictures, utilizing the <image> tag and the srcset attribute. This permits for mechanically loading probably the most appropriate picture model primarily based on the person’s display measurement.
Moreover, our minimal use of JavaScript libraries enhances our management over the code and ensures that solely the mandatory JavaScript is loaded, thereby optimizing web site efficiency with none superfluous parts.
Animations
To counterpoint the person expertise on our web site, we deployed subtle animations utilizing GSAP coupled with the SplitText plugin, complemented by “stagger” for optimized administration of look timings. The objective was to create visible coherence all through the web site whereas incorporating a random dimension to energise the textual content appearances letter by letter. This technique not solely ensures fluidity and visible uniformity but additionally delivers a dynamic and charming influence for every customer.
this.break up = new SplitText(this.el, {kind: "chars, phrases");
gsap.fromTo(this.break up.chars,
{
alpha: 0
},
{
alpha: 1,
period: 0.1,
ease: "power2.out",
stagger: {
quantity: 0.1 + (Math.random() * 0.2),
from: "random"
}
}
);Blur impact
Within the design of our web site, we included a blur filter, primarily in shades of black and grey, so as to add a complicated aesthetic dimension to many interface parts. This impact was carried out utilizing CSS with the property backdrop-filter: blur(12px); enhanced by a background-color for a harmonious rendering. Nevertheless, it’s essential to average the depth of this blur. Extreme utility can result in visible anomalies, together with glitches behind texts and elevated system useful resource consumption, thus impacting web site efficiency. This strategy due to this fact requires cautious consideration to keep up a stability between aesthetics and optimum efficiency.
404
We determined to make it enjoyable and artistic, identical to Google’s Chrome Dino sport! Created in September 2014, the sport was designed to entertain customers with out an Web connection. However why did we flip our 404 right into a sport house?
Right here, we expect lengthy conferences could be exhausting. So, that will help you move the time, we’ve locked away all of the buzzwords in our 404. No extra jargon that makes your head spin!
We employed JavaScript, harnessing the facility of the Matter.js physics engine library. This expertise allowed us to combine reasonable interactive parts that reply to person actions. We did it so you would take a 5-minute break. Received a while to kill? You understand the place to go.
Stack
- PostCSS and Vanilla JS utilizing ModularJS
- Swup for web page transitions
- GSAP for animations
- Lenis for scroll administration, plugged with a customized JS module
- Timber as PHP Framework, and WordPress
