We use cookies to ensure that we give you the best experience on our website. Click here for more information.
manage cookies
12
January 2022
, by
Ben Lattimore

How much did this website cost: Gucci Flora

Welcome to the fifth instalment of our How Much a Website Costs series (and the first of 2022), where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs and/or stand out to us.

We love a good microsite here at Lattimore and Friends – especially one as creative as this one for Gucci and their new fragrance line.

The primary goal of this microsite is immersion – bringing the visitor into the world Gucci is creating. Through 3 distinct “settings,” it uses contemporary JS approaches to tell the brand story – filling each setting with different content.

Also, like the Apple website we covered last year, and just to make very very clear, we didn’t build this website for Gucci (indeed, as awesome as that would have been).

Background Audio

A regular request we receive from designers and clients is how to incorporate background audio, either as part of a video or to create an “ambience” like with this Gucci example.

Now, 99.999% of websites should never use background audio, lol. It is usually distracting and comes across as old-fashioned.

That said, in this Gucci example, I think it does do a great job of creating genuine immersion and telling the Flora story. Also it makes the cats extra cute…

For the 0.001% of websites where it is appropriate to use background audio, how do you make it work?

Chrome by default blocks auto-play audio (praise be oh Holy Google) – you must have a user interaction that “enables” the audio to start playing. In this case, the “Start Exploring” button on the landing page acts as the kick-off for the whole site experience, including the background audio.

Animation

Oooooh boy – where do we even start with this microsite! There are so many subtle (and less subtle) animations across the website, from the cat movements, to the “parallax” style effect between the foreground and background, to the page transitions, and much more.

Truthfully I don’t have an exact answer for how this is all achieved. It is apparent that the website is built using Vue.js, a powerful JavaScript framework that is ideal for challenging front-end experiences such as this.

[Internally we have focused on Next.js as our JavaScript framework of choice – I’m always happy to have a nerdy chat as to why…]

In addition, my exploration of the front-end code found some mentions of WebGL. What even is WebGL?

WebGL is a JavaScript layer, built on OpenGL, that allows for interactive 3D graphics on the web (without additional plug-ins or services). It is being used more and more often – from this very creepy 3D face https://alteredqualia.com/xg/examples/deferred_skin.html to this much more peaceful aquarium: https://webglsamples.org/aquarium/aquarium.html

WebGL is very well-supported, working om all major web and mobile browsers, even as far back as IE11. It marries very high performance (using things like hardware acceleration – literally using your own device’s hardware to enhance its performance) with immense flexibility and complexity.

Awesome as it sounds, we haven’t worked with it at all – and we haven’t had a project with the almost unlimited budget required for this to make sense.

AR Integration

One of the awesome parts of this microsite is that, if you access it via your mobile device, there is an augmented reality (AR) integration.

This is a fun feature here but for more and more e-commerce websites, AR is a game changer. We are working with a furniture retailer currently and they are exploring AR so customers can see a 1:1 scale view of the product in their room. They can even move it around the space and see where it might work best before purchase.

So, WebGL, very expensive – AR integration, even more expensive? Actually, no (at least on our side).

All iPhones, and I’m pretty sure all Androids, use a format of WebAR. This is where browsers like Safari and Chrome can handle simple AR experiences themselves, rather than requiring a user to download a specific app.

For most purposes today, including this experience on the Gucci website, WebAR is more than sufficient. The primary cost is in getting the AR model created in the first place – whether that’s a 360 degree scan of a product, or the creation of a full 3D model – and then published in a format that we add to the website (many like in this Gucci example use QR codes to take the user to a specific URL.

Cost

Unsurprisingly a website like this would be incredibly expensive to build. If this cost £50k-100k, and took the best part of a year to create, I would not be surprised.

Beyond the design and animation challenges, and the technical considerations, there is also the nature of creation in large, bureaucratic organisations such as Gucci. Oftentimes the sheer number of meetings, calls and demands for revisions can easily balloon a budget beyond what would be expected from a pure build perspective.

LATEST INSIGHTS

Related INSIGHTS

Working with Klawe Rzeczy

Working with Klawe Rzeczy

We worked with Klawe Rzeczy - a Lodz-based design studio - on a digital collage around the idea of "collaboration" for our new website. Find out more here.
Read more
Building WordPress Websites in a Sustainable Way

Building WordPress Websites in a Sustainable Way

Here is a deep dive into ways to make your next WordPress build more sustainable, written by Kuba Jawor, one of the developers here at L+F who brings a passion and interest in sustainability on the web.
Read more
How much did this website cost: Gucci Flora

How much did this website cost: Gucci Flora

Welcome to the fifth instalment of our How Much a Website Costs series (and the first of 2022), where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs and/or stand out to us. Today we focus on the Gucci Flora microsite.
Read more

How much did this website cost: Gucci Flora

Welcome to the fifth instalment of our How Much a Website Costs series (and the first of 2022), where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs and/or stand out to us. Today we focus on the Gucci Flora microsite.
Read more

How much did this website cost: Apple AirPods Max

Welcome to the fourth instalment of our “How much did this website cost?” series where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs. This time we focus on the Apple Airpods Max microsite.
Read more

How much did this website cost: PLUS

Welcome to the third installment of our “How much did this website cost?” series! Today we look at PLUS, a sustainable personal care brand and e-commerce website.
Read more