Google Sheets, virtual playgrounds and floating clouds of books: it’s December’s Double Click

Closing 2019's Double Click is a line-up of incredibly varied websites from a host of talented designers and developers. We've got a virtual playground, a programme instead of a website, a recreation of Instagram Stories, a floating cloud of books, and an editable Google Sheet. Each demonstrates the possibilities of web design and the surprising results the medium often leads to.

But enough from us, here's An Yen, Arthur Haegeman and Jonas Temmerman, Elodie Fabbri, Christoph Knoth and Konrad Renner and Nicky Tesla to tell you all about their work.

An Yen: anguschiang.online

Angus Chiang is a menswear brand established in 2015 which takes inspiration from Taiwanese culture and which has a “very playful, childlike, fun and whimsical image,” according to An Yen who designed the brand’s website in conjunction with developer David Peñuela. It’s a bold and colourful website which employs an OTT graphic language, including an oversized cursor and several primary colours. “Angus, the creative director of the fashion brand, imagines the brand is like a park/playground, where we can always discover lots of fun outside of an ordinary view of daily life,” An tells us. “Based on the ‘park’ idea, we thought it'd be nice to translate the concept to the website, and bring physical space to a virtual territory.”

In turn, the site references attributes of a park from a “physical angle, functional angle to emotional angle.” Users are invited to “have fun” on the site, exploring in a playful manner. “You can be a sophisticated user and play with it in a good manner, or you can be a badass, messing around with it with no hesitation or fear that someone is watching behind your shoulder,” An adds.

All of this was achieved through interactivity, which is used to guide users and tell the story of the brand. “The interactive functions are not all intuitive and obvious. Some of them might take some time to find out,” An explains. “For example, you are able to drag an object to a different colour zone, mixing up all elements. To me, in a way, it completes a very personal narrative.”

Languages used:

“The site is built on top of Shopify, so we used fluid to load dynamic content from the shop. Custom settings and options were created in Shopify for the client to be able to activate and deactivate different part of the site, which allows the visuals to adapt to different needs. Since the concept of the design was to mimic a playground, we created different visuals to trigger when the user clicks on the different parts of the landing. This part was developed using a library called Matter to have the physics system and we have different options for mobile and desktop.”

Arthur Haegeman and Jonas Temmerman: haegeman-temmerman.be

Together, Arthur Haegeman and Jonas Temmerman make atelier Haegeman Temmerman, and have been producing work under the moniker since 2019. Working across analogue and digital media, everything the duo does is held together by their systematic approach. “We love it when there are decisions made by the system instead of us,” they tell us. In turn, their website pulls from the visual language and navigation of operating systems, and allows for their style to change depending on which device users visit haegeman-temmerman.be on.

“For example,” they explain, “the select option menus are styled by the operating system. They will look different on older operating systems, windows computers, different browsers etc. On mobile devices, these things style themselves to a usable interface — that even vibrates if you define this in the phone settings.” Because of this, they describe the portfolio as more of a programme than a website and, as many decisions are out of their hands, it mimics their working style.

Languages used:

“The website is built as a custom template in Wordpress. No special libraries, just some jQuery and PHP scripting.”

Elodie Fabbri: tomgould.com

Tom Gould is a New Zealand-born, New York-based photographer and director who, when he needed an identity and portfolio refresh, enlisted the help of Elodie Fabbri, a digital art director based in Paris. “The idea behind the design of the site was to highlight his films in the best possible way, without too much fuss going on with the interface,” she tells us. This led her to the decision to re-appropriate one of the best-known and most-used interfaces in the world: the Instagram Story. “Basically you navigate through the site and after a few seconds the interface fades away, you can just let the site plays the content for you, a bit like a fast-paced TV,” she adds.

In terms of interaction, Elodie kept things minimal and so on initially landing on the page, users are presented with a list of Tom’s prestigious clients and they can instantly jump into any film they want to. But, again, if you don’t interact, the site starts playing the first video automatically. These videos transition smoothly between one another via a sliding effect and users can keep track of their progress through Tom’s portfolio by using the bar at the bottom of the screen. Another small user interface detail which Elodie tells us about is what occurs “if you go to the "_Bury Me With The Low On_":https://tomgould.com/bury-me-with-the-lo-on project on the slider Tom created images as well as videos. So we created a transitional state where the bar at the bottom would extend to become a play-bar itself. That’s the kind of detail I like to think of, making the browsing experience as smooth and consistent as possible.” Details such as these were brought to life with the help of Theo Tillberg, a developer Elodie met while working at Hi-Res! in London.

Languages used:

Theo explains: “The site was made with ReactJS and was my first take on Hooks. There’s a headless Wordpress+ACF install to manage the content and to build the ‘stories’. The site is also relying heavily on Vimeo’s API and service to deliver snappy playback. While the site was pretty straightforward to develop, the key challenge was ironically the autoplay feature. As stated above this plays a central role in the experience and some recent browser restrictions prevent video with sound to play automatically. We solved this by kicking off a muted video in the background and wait for the first user interaction. The click, or touch event would be captured and used to unmute the video element which in its turn would be recycled for every video slide throughout the website.”

Christoph Knoth and Konrad Renner: Sternberg Press

This is a site we noticed floating around all over the internet and so we had to reach out to its designers, Christoph Knoth and Konrad Renner AKA Knoth & Renner to find out about their overhaul of Sternberg Press’ website. They explain how, for the publisher, they wanted to create a “meaningful and individual display for each of their brilliant publications.” This meant, they essentially needed to think of “a single website for each of their 769 books, or a template that somehow reacts on specific parameters, that can carry the individual topic, book design and voice, inside a coherent and strong platform.”

The result sees a different coloured background used for each book, for which the colour is programmatically taken from the book cover and then converted into the opposite colour. “It’s a simple idea but generates a design that surprised ourselves the first time we saw it. On the one hand it creates a colourful grid, on the other hand, it gives every book a unique stage. After a few test runs it worked so well, that it became one of the key ideas for this project,” they tell us.

One element which can’t go unmentioned is the landing page which presents users with a cloud of floating books – the selection of which is made by the publishing house and will change from time to time. “It’s a playful and unusual entry point into their immense portfolio that allows users to explore the books as 3D objects and quotes the former website with its iconic sparkling sound,” the duo explains. “Another interaction one will encounter when scrolling through the all books section or a book category are the books sliding in from the bottom as almost life size objects that after some more scrolling scale down to the size they usually occupy in the grid.”

The project was realised alongside New York-based design studio "Wkshps":https://www.wkshps.com/ for strategical questions and the German studio "Systemantics":https://www.systemantics.net/ who worked on the backend.

Languages used:

“We did not use any unusual frameworks or libraries. It is just good old jQuery with three.js and some standard Wordpress with WooCommerce.”

Nicky Tesla: nickytes.la

The final site closing off 2019’s Double Click is a particularly unusual one in the form of Nicky Tesla’s portfolio. Presented as an editable Google Sheet, the aim of the site, Nicky tells us was to create a quick new portfolio to coincide with the closing of his studio, HAWRAF. “I think in my field portfolios, beyond just containing past work, should always contain the essence of the creator themselves, so I took this fairly seriously,” he explains. “Since so much of my time is spent developing websites lately I've begun to feel a bit of website fatigue. I feel that most websites are boring— they’re either the same CMS templates, or they too often fall into the trap of being the same in their 'differentness', e.g. over-tried 'brutalism', an over-reliance on GSAP micro-interactions, or slow, transitional WebGL Rococo.”

To counteract this, Nicky decided to build something relatively minimal. “We had been working with a client who had organised the content of their site in a Google Sheet, and I thought— what if the google sheet WAS the site. Things just took off from there,” he continues. “I built a really simple column system to organise the content, then thought it needed an element of surprise or joy. Since I was working with a cell-based grid, pixel art was an immediate next-leap for me. I tried incorporating some generative pixel art in the background, but it wasn’t really compelling. I realised it might be more compelling if I invited users to contribute to the design (the desire to leave a mark, human nature etc.), so I went down the route of making it an interactive drawing tool. “

The sheet itself is an I-frame of a sheet that’s hosted on Nicky’s Google Drive and has a button at the top right-hand corner which, when clicked, opens up a 1-1 map of the sheet and allows users to fill a cell with a colour. This updates in real-time and so, if multiple users are on the site at the same time, you’ll see their changes reflected on your screen right away.

Languages used:

“It’s built with React, uses MobX for state management and is hosted on Netlify. The drawing tool is hooked up to a Firebase backend. The spreadsheet is hosted on Google Drive and runs a macro every minute that pulls from the database and colours the cells accordingly.”