From 3D in-browser games to cinematic portfolios: it's November’s Double Click

Double Click, a series bringing you the best of web and digital design, is supported by Wix.

Somehow, we’re in mid-November and rapidly on our way to Christmas. While the speed at which 2019 is disappearing is slightly terrifying, it does also mean it’s time to deliver our eighth Double Click of the year. If you haven’t been keeping up with the series so far, Double Click is our monthly round-up of some of the best digital designs we’ve stumbled upon over the previous four weeks.

November’s edition keeps to this theme, featuring a mix of sites with varying aesthetics and techniques applied to each. We’ve got manipulation of text, 3D in-browser games, conceptual arrangements of content and everything in between. Check out November’s Double Click below…

Dorian Chouteau, Klara Graah and Aleksandra Kwiatkowska: takeawalkonthewildside.rietveldacademie.nl

Every year, the Gerrit Reitveld Academie hosts a lecture series titled Studium Generale, which revolves around the theme of fabulation and the idea of non-linear narratives. To accompany 2019’s edition, called Take a Walk on the Wild Side, Dorian Chouteau, Klara Graah and Aleksandra Kwiatkowska have produced a website which is jarring at first, but which rewards curious users.

The site essentially translates the topics of the lecture series into an “interchangeable landscape system that functions as a digital and physical set design for the campaign.” Images of fields, motorways, blue skies and mountains appear to parallax on top of each other as you interact with the site, and using the links along the top of the page causes the page to jump horizontally and reveal more content. This idea came from “a desire to translate non-linearity into something visual, and we saw the landscape as a kind of stage where a narrative could take place,” the trio explains. “What we created on the website is a landscape that doesn’t obey to any geographical or physical rules, and where it’s hard to pinpoint exactly where in the world the landscape would be situated. The mixed images of nature shifts between being underwater, a forest or an icy landscape without it ever being anywhere in particular, but more of a generic place – which is also the reason we chose to work with pictures with a stock-image quality.”

The content of the site was prescribed, and so the trio treated each “block” of information as an element of the landscape, displaying the content on the horizontal axis. “The website evolved throughout the three months Studium Generale took place. Every week, new content was added, generating new elements and challenging the design of the website in order to welcome the variety of media and information that the event required.” In turn, this furthered the need for exploration from users who have to use their initiative to discover the content which is navigable both vertically and horizontally. The more content was added to the site, the more complex this navigation became.

Languages used:
“The website was developed with Vue.js for the front-end, built on top of Kirby CMS. We did not use any major library as we were trying to keep the website as rough as possible, using what CSS and JS could offer.”

Simon Rogers: simonrogers.info

When making his portfolio site, London-based designer and developer Simon Rogers had a simple idea: “I wanted to see if I could make film credits do a corkscrew.” Increasingly prevalent WebGL libraries like Three.js abstract huge amounts of code behind a simple set of functions, he continues, allowing developers to create 3D models in the browser with relative ease. With this as his starting point, he began to experiment and the result is a visually simple but intriguing site that sees his CV spiralling up and off the screen.

As a developer, Simon is clearly fascinated by the mechanics of code, and his portfolio site is an exercise in this as much as it is in aesthetics. “I’ve always enjoyed the surprising complexities afforded by CSS alone, and with a little hacking it quickly became apparent that this idea could be achieved without any JavaScript at all,” he tells us. “The execution is straightforward: each line of text had to be created as an item in a list, and then animated with CSS transforms one after another along the same trajectory. Using some maths and a few SASS variables, this could be achieved in roughly 15 lines of code.”

Design-wise, this led to several issues, as resizing the browser dramatically affected the text, particularly its leading. To remedy this, “some 20+ breakpoints had to be used in order to cover the leading for every conceivable aspect ratio – as opposed to the more popular four used by many developers as approximations for phones, tablets, laptops and desktops.” What’s great about the final result, is the way it both functions perfectly as a portfolio site but is also a little annoying, which is exactly what Simon was going for. “The result is willfully unhelpful and un-reactive – a prospect I find appealing as a subversion of common expectation,” he concludes.

Languages used:
“I made this website two years ago while waiting on some content for my final issue of Dazed, and it’s actually the most simple website I’ve ever made – HTML and CSS only. It is rendered with Vue.js (but this is entirely unnecessary) and is hosted on GitHub pages as I had not yet become a religious convert to Zeit and Netlify.”

Bruno Simon: bruno-simon.com

Not content with just showing his work, creative developer Bruno Simon wanted to use his site to prove his skills. As a huge gamer, and someone who has used WebGL for a long time now, creating a 3D game in-browser was the obvious choice. “I wanted to make something original, entertaining, playable and understandable,” Bruno adds. “I tested shapes and colours directly in a 3D software until I was satisfied then proceeded to put it in a playable website.”

You navigate Bruno’s site by driving a car, controlled by the arrows and, as you discover more ground, his projects can be delved into, or you can follow the signs to find more information about him. It’s a fully immersive experience, which is largely due to the fact there is no interface on the screen. “Everything is part of the 3D universe,” Bruno remarks. “This is why I had to use classic game tricks to guide the user like the tiles on the floor which help the user understand that there is more to see in that direction or the walls that work as boundaries.”

What Bruno has created is an altogether engaging portfolio site, which you want to spend time on, simply because it is fun. Designing and developing the site by himself, it was this idea – of fun – that motivated Bruno throughout the project. “Since I knew that this project was going to take time, I also made sure that I could have fun myself,” he adds. “As I often say: The best game you can build, is the one you spend too much time playing on.”

Languages and tools used:
“The website is mostly built using JavaScript. For the 3D rendering, I used Three.js. It’s so much simpler than native WebGL. I obviously developed my own shaders (it’s like materials) to have full control of the aspect. For the collisions I used Cannon.js. It’s a good 3D physics library with pre-built classes like vehicles. For the sounds I used Howler.js. This library is very efficient, simple to use and allow play speed control.”

Josep Basora: www.dvein.com

Dvein is a directing duo comprised of Teo and Carlos whose website seems to provide a glimpse into their minds, acting as a cosmos of ideas, finished pieces and doodles. As a duo, their process always begins with a mess of ideas, and it was this process that designer Josep Basora and developer Edu Prats wanted to channel into Dvein’s site when designing it, creating a “big mural in which they share their thoughts between each other, or a wall in a bar’s toilet where people just share thoughts, random drawings and stickers.” In turn, the site acts like a giant pin-up where visitors can leave their mark, while also browsing through Dvein’s work.

“We wanted people to participate and share with us,” Josep explains. “It is all about that, people interacting with Dvein’s stuff and adding their own in an open whiteboard. The site remains playful and experimental while showcasing Dvein’s work.” In terms of the UI, the site remains as minimal as possible, featuring a large menu at the bottom of the screen with four options. This remains largely hidden, only appearing on hover. The cursor, however, constantly animates, acting as a prompt for interaction, hinting that you should click, drag, play, pause, close etc. This is achieved through Canvas 2D using pure code and without any images or SVG animations, Josep explains.

A nice surprise – and one that wholly embodies the site’s explorative nature – comes in the form of the “Black Dot”. “There was also a requirement by Dvein to be able to showcase weird footage and personal experimentation and hence the ‘Black Dot’ was born. It is that flat black hole in the canvas. If you click it, you will dive into it. The Black Dot is a conglomerate of footage living on a microscopic level somehow. Once in there, you can just drag pictures and videos around,” Josep tells us.

Languages used:
“We used Kirby for the back-end. We render the CMS contents as JSON and as HTML for mobile fallbacks: the site is designed for a fairly big screen so we keep mobile as HTML fallback even if powerful enough to run the full site. The front-end is built entirely with Javascript, WebGL/GLSL & CSS on top of ThreeJS and we also used the GSAP library for certain animations.

In this site, anyone can leave a message while drawing/writing with a virtual pen or by uploading a mugshot stop-motion (kind of gif) animation. All these elements are treated as custom binary files that later inject geometry and texture buffers in WebGL/ThreeJS. Although we want it to remain as that metaphoric toilet wall where anyone can leave a message, we have a back-end system for checking user creations. Everything gets automatically published but in case there is something that could be too offensive we can decide to remove it. At the same time, we can also save cool creations and feature them anytime.”

Wkshps: www.wkshps.com

Based in New York, Wkshps is a design studio focussing on graphic identities and its website reflects the bold nature of its work. Centred around a full-screen slideshow on the landing page, it borrows from the world of Swiss graphic design, while hiding some contemporary twists within its UI and design. The main concept of the site is to “visualise a multiplicity of voices and a plurality of approaches,” the studio tells us. This is reflected in its wordmark which continuously animates through several typefaces.

“We used several strategies to create a novel and compelling sense of interaction,” they continue. Firstly, the site juxtaposes the classic clean portfolio site with something much more immersive and cinematic. The most unusual element, however, is the combination of the full-screen slideshow and the project thumbnails. “We transformed the typical “project thumbnail” into a blurry, floating preview – as a way to stay true to the larger universe of projects out of which all of our work emerges. We also use the slideshow as a way to provide documentation and a top-level idea of the project without being overwhelming,” Wkshps outlines. On its “about” page, the studio’s mission appears in teletype, “which is a nod to the act of writing, but also to reading over time.”

The site was developed entirely in-house, “iteratively and very quickly,” with team member Eric Price playing a major role. While this allows Wkshps to design and develop at the same time, the main benefit of creating the whole thing in-house is that it “allowed us to have it evolve organically, with the addition of new and tweaked functions when we need to,” the studio concludes.

Languages used:
“When we’re working with clients, we often use various code libraries specific to the project, but for our own site, it was basic and low-fi: Javascript and Wordpress. In German they have a saying, ‘The shoemaker always has the plainest shoes,’ which might be apt here. In working for ourselves, we’re mining the basic tools at hand but making the most of them.”

With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick” at checkout.