.png)
Design on the web is constantly shifting. From boxy, grey buttons to parallax scrolling, we’ve seen a number of different trends come and go - often leaving their best bits to inspire the next design movement.
One particular style which is beginning to gain traction on the web is VR (Virtual Reality).
In the web’s very recent history, VR websites have begun to take off. Initially, we had the WebVR APIs which allowed developers and designers to create seamless immersive realities in the browser. Even more recently the industry has shifted again - this time to WebXR. In a fairly fragmented context of web development, WebXR looks to buck the trend by actually including more functionality - AR (Augmented Reality) - into the framework, allowing more possibilities with a single tool.
While these innovations may seem fairly bland to the average person, this is the core, fundamental work which will allow entirely new, gripping experiences to be built for the web. These are the types of strides in the field that would allow virtual worlds to come into being. Akin to Wade Watts in Ready Player One, you might soon be jumping into your own virtual Oasis—or, at least, using a QR code and AR/VR to virtually try on products. (Read more about speculative design.)
To inspire you for your next project and map out what’s already being done in the field, we’ve scoured the internet to find the best VR websites online.
Best VR websites
Hubs by Mozilla
I promised the Oasis and so it’s only right I begin with a social, virtual world. Courtesy of Mozilla - who also make your friendly fox-based browser - comes ‘Hubs’.
If you pictured a dystopian reality where you could be indestructible, steal cars and drive to Mars, Hubs isn’t that. In truth, it feels like a proof-of-concept which exemplifies the possibilities of the technology very well. Imagine if Zoom and Minecraft had a baby. You can set up a floating robot avatar which you will control during the experience, and perform actions like speaking, moving around the virtual maps, painting in 3D or watching videos.
It is remarkable that something like this could be built for the browser, and also work seamlessly across VR products. Hubs is certainly a trailblazer, demonstrating that this type of product is possible right now on the web. We can only expect these types of virtual worlds to get better.
Showroom by Little Workshop
As well as transporting us to whole other digital habitats, VR is also being integrated for our physical world. Here’s one incredible example, courtesy of France-based creative agency Little Workshop.
The team has built a demonstration of how an interior design website could utilise VR technologies to help sell products for the home. This solves an interesting problem when shopping online: judging size and matching styles.
Purchasing the right furniture for your home is tricky, especially if you haven’t got much room or you’re trying to match a certain theme. A lot of intricate measuring is involved, and often the actual product will have some quirk you didn’t notice online which will be an issue when it gets to your doorstep.
However, Little Workshop’s idea might save us from some of those frustrations in the future. They allow you to pan around a virtual showroom, exploring the furniture on show. The UI for focusing on an item is nice and clear, and the product specifications are clearly presented - alongside an awesome material-picker that updates the 3D product live on screen, making this one of the best VR websites out there.
I can definitely see my future Ikea shop consisting of me zooming down their virtual aisles and mock-rooms, hovering over their 3D displays and dragging a chair into my digital bag.
Bear 71 by Jam3 and National Film Board of Canada
Bear 71 is the Planet Earth of the future. It’s a nature documentary blended with a VR experience that looks great in a headset or a browser. You follow along with the story while watching abstract shapes (representing different animals) traverse the 3D terrain. The documentary highlights how our world is under supervision, not only in nature but in our modern society too - as we listen to the main protagonist (Bear #71) explain how her landscape is changing.
Taking a step back and purely assessing the aesthetics of the experience, it really sets a standard for VR documentaries to come and is a solid benchmark for the future. Interactions are smooth, and there is a unique challenge in trying to catch faster-moving animals as they travel across the grid.
Dance Tonite by Google
On a more lighthearted note comes Dance Tonite, which is a VR website based on how we experience music.
You have two options: let the dot (your camera) move through the boxy rooms and enjoy dancing with 3D geometrical shapes that represent human dancers, or add your own dance to the mix.
When enjoying the experience, you can either watch from a corner-angle or hold down the dot in the middle of the screen to get a first-person point-of-view of the action as you glide through the rooms.
To create your own dance, you have to own a room-scale VR device and a WebVR enabled browser, making it not that accessible to the masses - yet.
It is a beautiful interface though - it blends the lines between something you’d expect from an abstract art agency and a Calvin Harris musical extravaganza. Not only are the transitions smooth, but the typography and use of colour are also expertly done.
Another of the best VR websites comes from creative agency, Zoo. Continuing on the topic of abstract, this is probably one of the most outlandish VR websites on the internet. Essentially, Zoo has created an art installation in digital form. You take the form of a visitor at their gallery observing their work - or their leftover ramen.
As for aesthetics, it’s as if you’re in a gallery inside a solid white cube. It’s immersive and fun to explore, while also giving you the opportunity to dive in and learn more about their work.
Zoo sets the bar pretty high on what creative agencies could be implementing for their marketing pages.
360 Image Gallery by A-Frame
You may be thinking ‘I like the VR look for displaying my work, but I have no idea how to create something like Zoo’. Don’t worry, I’m thinking the exact same thing.
However, you could try something like this 360 image gallery by A-Frame. In the preview, you can drag your view around to move the pointer, and then hover and click on an image to change your environment.
It provides a unique and alternative way to showcase media and could pave the way for the VR equivalent of Instagram in the future.
Interspace Studio is another creative agency for digital. However, instead of going all-in on VR like Zoo, they take certain visual aspects of it and blend that with current web design practices, resulting in a very modern and clean interface for their site.
From ultra-smooth scrolling, to your pointer looking like a VR target, Interspace Studio have knocked it out the park and made a very compelling case to hire them for your next adventure on the web.
One thing I really admired when looking at the site was how they have set up hover and focus states. There is a tilt effect when hovering over an item, which makes the experience feel much more dream-like than the standard colour change on most sites.
Konterball by Google
On top of landing pages and online portfolios, we can also see VR being used in video games. While this isn’t a new phenomenon, technology is constantly enabling more refined explorations into this field.
Konterball is a beautiful example of what VR-design games can look like on the web. The visuals are stunning, and the controls are intuitive. In the game, you play ping pong against either the back of the table or another player (that’s right, two-player virtual ping pong is already a thing).
VR seems like a great opportunity for game designers to create new immersive experiences and interactions for their games, and allow a more sociable and active multiplayer mode.
Another game that really took me by surprise is Moon Rider. Created by two people as a proof-of-concept for what’s possible with VR websites, Moon Rider is like Guitar Hero set on Mario Kart’s Rainbow Road.
The graphics are gorgeous, and the interface to find and select tracks are perfect for the genre. Honestly, I don’t think I’ve ever enjoyed Bohemian Rhapsody as much as when I tried it on here. It just felt right.
I should note that it’s best to try it out on an actual VR device so you can play along, but if you don’t have one you can still enjoy the trip in your browser.
OssoVR (Honourable mention)
On a more serious note, the potential impacts of VR are diverse and the use-cases for the technology seem to be endless. From games to creative agencies and interior design, there seems to always be a way in which VR can slot in to add value.
Medicine is, of course, another field that could benefit from VR innovation - and OssoVR appears to be taking the bull by the horns.
While their actual site isn’t groundbreaking in its design, the actual product they offer is. They allow surgeons to practice with realistic scenarios and tools on virtual patients - and even allow assessments of the surgery through the platform.
The ability to train for less common or more unique injuries and illnesses through the use of VR will only make for a better medical professional - and gaining all that experience from the comfort of your home or office is an incredible offering which truly shows the value that good VR design can have in the future of healthcare design and other important fields.
A note on accessibility in VR websites
While we have focused on beautiful aesthetics and dream-like experiences here, it is important to remember that different people have different abilities when operating a computer. Therefore, we need to make sure we are doing no harm to them with our designs.
A common problem for people with vestibular motion disorders is that they are disorientated by inverted scrolling patterns and full-screen, unexpected animations. Of course, both of these things are fairly common in VR design, so make sure to take these potential nasty side-effects into account when creating your innovative new marketing site.
One way to avoid such a thing occurring is to observe user preferences for settings like prefers-reduced-motion. This means that when a person lands on your site, they could be shown a static version rather than the animated one.
This is, of course, just one of the many considerations you should make when thinking about accessible VR website design. Colour contrast, text legibility and navigation should also be considered.
.jpg)
