Featuring 3D garments and ambient generative soundtracks, here are five of our fave fashion sites

If we’re being totally honest with ourselves, a lot of our time online is spent shopping, or at least window shopping. Wasting your time (and potentially your money) scrolling through pages of products is a huge part of living in the internet age, and if recent times are anything to go by, it’s a sector which is only going to grow.

On the whole, though, the sites which house these products are fairly run of the mill; you know what to expect. So when something comes along which disrupts that expectation, it can be pretty fun. Below, we chat to the creators of five fashion sites which do exactly that.

Super Bureau: www.virtualfashionarchive.com

Based in New York City, Super Bureau is a design studio led by Belinda Chen and Andrew Kupresanin. It works across branding, art direction and design but also takes on digital and UX design projects, one of which was for the Virtual Fashion Archive – which is essentially exactly what it sounds like. The goal with the project, Super Bureau explains, was to “break down museum walls and democratise access to the physical garments we’ve virtualised regardless of their geographic location.” In turn, the design of the website takes cues from museum wall signage and is designed to be “minimal and informative, allowing for an undistracted engagement with the pieces on view,” the studio continues.

The framework is designed to grow as more garments are digitised, using a simple tagging system which allows users to navigate the collection intuitively, growing by designer, year, type of garment, colours, and construction techniques. On the real star of this project, which is the 3D interactive versions of the garments, all digitised by the studio's sister company Superficial, Super Bureau explains: “beyond the graphics, we wanted the interaction with the garments to be intuitive, playful and allow you to experience the garments in motion, up close and in ways impossible within a physical context.” It was important that, no matter where a user is based (and no matter how poor their internet connection is), they could experience the same rich engagement. The interactive garment viewer therefore adapts depending on a myriad variables.

Languages and tools used:

“The site is built with Javascript, HTML and CSS. ThreeJS was used for the interactive garment viewer.”

Random Studio: www.fredperry.com/rafsimons-20

Random Studio is a long-time collaborator of Fred Perry x Raf Simons, and we’ve covered the incredible work this collaboration has facilitated several times before. It’s a gift that just keeps on giving, and so when we decided to focus this month’s Double Click on fashion, we knew we needed to include the latest iteration of this project. A lookbook for the latest collection, this time Random Studio explores “the notion of gaze”, with “the movement of the site literally possible by jumping from one person's perspective to the next.” As you navigate the site, which uses interaction akin to Google Street View, you’re prompted nowhere to travel next by following each model’s periphery vision, learning what their role “on the set” is – photographer, talent, cleaner or stylist.

“The language used is a continuation of the narrative explored during the first and second campaigns, making this the third episode in the series, and we wanted to push this style of narration further,” Random Studio explains. “We are unlocking perspectives from this regard – arriving at a party, experiencing the party, being shown that the party was actually a set and now being in the photo studio set. To continue the idea, we pushed the navigation technique further and seeing what would come was something we were fascinated by.”

Languages and tools used:

“We have used React and AFrame (which uses Three.js) and detect-gpu to recognise the users GPU to set the default experience configuration and provide an adaptive experience.”

HTTB: visualsociety.ch

HTTB is the collaborative practice of Hervé Thomas and Tristan Bagot (fantastic studio name, by the way), a duo based in Paris. Earlier this year, the pair worked on the website for innovative Swiss fashion company Visual Society, which utilises thumbnails and an archive tree to produce a wholly unique e-commerce experience.

When given the initial brief, Visual Society mentioned wanting something “contents-oriented”, and it's safe to say that HTTB ran with that idea. Typographically led, the site features a clever filtering system and satisfying photography to open up the current products and archive of Visual Society. Getting here was no mean feat either, as half way through the project the company had to change its name due to legal reasons, switching from Archive Archive to what it is now. “At the time, we were already working though a concept and tickled the first design proposals, around the idea of an immersive Archive,” HTTB recalls. “We explored the visual reference of folders and tried to tweak dynamic sorting, in order to simulate the straightforwardness of data processing, to give the content some dynamism. Relying on a strict, yet elementary typographic approach, where simplicity is not the main objective but the by-product of modest design.”

Languages and tools used:

“Javascript, CSS and PHP, Kirby CMS with a Shopify integration for the back-end. Gia components, a modular minimalistic JavaScript framework.”

Hawraf: theentireworld.com

Although the members of Hawraf – the much-admired digital design studio – have now gone their separate ways, we couldn’t resist squeezing the studio’s project for Entireworld into the article, as it remains one of our fave e-commerce sites out there. Entireworld is a “quality basics” and exclusively online brand founded by Scott Sternberg, and Hawraf were brought on to create the brand’s vision of a “direct-to-consumer” operation. “By foregoing the brick-and-mortar shops, the goal was for the site to create a memorable atmosphere analogous to what you might get at a high end retail store,” Nicky Tesla, who worked on the project at the time alongside his studio mates Andrew Herzog and Pedro Sanches, explains. “In line with the company’s mantra that they riff-on “The Entireworld is...[insert quip]”, we aimed to create a sense of ‘being-there’, with respect to cultivating the user’s singular experience of immersion in the site, as well as their collective presence in The Entireworld’s online shopping community.”

To do this, Hawraf strove to create a seamless shopping experience, investing heavily into the brand’s “iconic box logo as a dynamic navigational and informational element,” a commitment which also removes reloads between pages. During the production, Scott brought up Brian Eno when walking the studio through the brand touchpoints, mentioning he wanted music to be an element of the site. Hawraf therefore created a generative music composition that creates an ambient contextual soundscape. “Everything is meant to be somewhat light and airy, almost ethereal, so there’s a lot of white space on the site – space to breathe, let the product photography breathe, etc…” Nicky tells us. “The last interesting thing is the notification ticker that’s meant to create a sense of inclusion, and which anonymously broadcasts your interactions and presence to other users on the site, which is a play on “The Entireworld” theme.”

Languages and tools used:

“On the backend the site uses Shopify, Contentful and Firebase and the frontend is built with React.”

DVTK: Fiorucci archive

Closing things off this month is a site by Paris and London-based studio DVTK, a duo comprising of David Broner and Kim Boutin. Bright, explorative and highly interactive, it’s the perfect high note to finish this month’s Double Click on. The website was created when the brand was relaunching and DVTK designed the site as “a bridge between their heritage and their will to move forward with the brand and make it relevant today, staying away from being a vintage brand,” the pair tells us. The development for the project was by William Mapan.

In order to do so, Kim and David tapped into the brand’s incredible collection of Panino stickers and integrated them into an endless 3D world. Users can therefore navigate through the website and, in turn, the brand’s archive to witness its history “but with a fresh twist and a first person POV that made the whole experience immersive,” kind of “like in a museum,” the duo adds. Visually, the site takes clear inspiration from the stickers, which have a “80s retro-Memphis vibe”. DVTK tells us that the checkered floor, for example, “went naturally in our mind as it’s such an iconic 80s archetype but also in the early-CGI world.” Additionally, the spinning animation for the stickers was “directly inspired by Mario 64 spinning coins, which are deeply rooted in our collective memory as a sign of playfulness, abundance and positiveness.” The result is an amalgamation of the “innocence of the 80s and today's search for interaction and immersiveness.”

Languages and tools used:

“WebGL, three.js.”

Wix Playground is proud to support Double Click, a monthly round-up of some of the most interesting and innovative websites and digital designs out there right now. We’ll discuss minimalistic, sophisticated, and experimental websites with creatives who regularly push the limits of web design, and learn about the process that shapes their work.