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 aims the technique and the creativity it takes to have that influence, by teaming up with a number of the finest 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 purpose was to generate visible influence, incorporate fascinating particulars, and spotlight our tradition.
Right now, our web site is far more than only a showcase. It has grow to be the cornerstone of our model technique and embodies all our initiatives. It’s about extra than simply following the pattern, it’s about taking the lead and offering immersive experiences that serve our long-term aims. 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 standard portfolio. The concept was to articulate a worth proposition centered round the advantages and options of our enterprise mannequin.
We additionally took this chance to remodel the branding of Vendredi Society whereas staying true to our DNA. Each aspect 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 carefully collectively to discover these totally different areas in synergy. We iterated extensively to reach on the last design, with every individual 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 purpose 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 fashion information to make sure consistency and facilitate the hand-off and growth part. Past the web site alone, this was a complete inventive route effort for our model all through this redesign.
Person Interface
We designed an internet site that’s each inventive and interactive, making certain that this didn’t come on the expense of the person expertise. The navigation is easy; we’re satisfied that animations shouldn’t hinder the person in any means. 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 ideas, making certain nice and enticing readability.
Our goal was to emphasise the “product” facet. To do that, we built-in visible codes borrowed from software program and iOS. The intuitive and modern video participant is impressed by video enhancing instruments and your favourite picture gallery.
The menu, designed for efficiency, makes all the pieces accessible with a single click on with out distracting from the primary 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 aims.
We additionally animated numerous parts to complement 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 points of the web site, together with typography, UI elements, transitions, and content material.
Typographic animation was a central aspect of our design issues. We developed delicate and constant textual content animations throughout all pages, reinforcing our visible identification. Most of those animations depend on a “scramble” method, 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 totally different pages of the web site. The outdated pages mix harmoniously into the brand new ones, making certain easy and seamless navigation by way of CSS animation.
Lastly, animated visible parts have been built-in to complement 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 determine and categorize the totally different blocks and their variants, ensuing within the creation of an in depth fashion information together with variables, colours, fonts, and so forth. The primary problem lies in creating this modular system, which offers the pliability to intuitively compose web page templates whereas permitting for excellent variety.
This technique strengthens the sturdiness of the web site by way of its excessive flexibility. It permits us to rapidly generate touchdown pages for our acquisition campaigns whereas making certain easy interactions and a excessive degree 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 a vital 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 resolution 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 after they grow to be seen or on mouse hover, relying on the context. Bigger movies, however, load on demand upon a click on, through a customized participant that permits for full immersion. This technique ensures optimum use of sources 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 using native occasions and conduct.
Optimizations
We additionally applied 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 routinely loading probably the most appropriate picture model primarily based on the person’s display dimension.
Moreover, our minimal use of JavaScript libraries enhances our management over the code and ensures that solely the required JavaScript is loaded, thereby optimizing web site efficiency with none superfluous parts.
Animations
To complement the person expertise on our web site, we deployed refined animations utilizing GSAP coupled with the SplitText plugin, complemented by “stagger” for optimized administration of look timings. The purpose 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 in addition delivers a dynamic and fascinating influence for every customer.
this.cut up = new SplitText(this.el, {kind: "chars, phrases");
gsap.fromTo(this.cut up.chars,
{
alpha: 0
},
{
alpha: 1,
length: 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 integrated a blur filter, primarily in shades of black and grey, so as to add a classy aesthetic dimension to many interface parts. This impact was applied utilizing CSS with the property backdrop-filter: blur(12px); enhanced by a background-color for a harmonious rendering. Nonetheless, it’s essential to reasonable 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 steadiness between aesthetics and optimum efficiency.
404
We determined to make it enjoyable and inventive, identical to Google’s Chrome Dino recreation! 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 recreation house?
Right here, we expect lengthy conferences might be exhausting. So, that can assist you go 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 real looking interactive parts that reply to person actions. We did it so you might take a 5-minute break. Acquired a while to kill? You recognize 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
