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).
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.
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.
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.
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.
.webp)
