Double Click August is full of playful designs that prompt user interaction

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

We’re back again with our round-up of the websites and projects that have caught our eye this month in the digital world. Maybe it’s the summer, but the line-up this month is full of playful designs that prompt user interaction for no reason other than a bit of fun. Creating a website that people actually want to spend time on can be tricky, so giving them something to do while they browse your work can be a clever tactic to keep them there longer.

From a 3D galaxy to a meme generator and fake Adobe artboards, this month’s Double Click is a testament to that fact, with each featured site offering some kind of incentive to explore, discover or simply muck about.

Daniel Baragwanath: digi.gal

Digi-Gal is a collective of womxn, trans and non-binary creatives from around the world who work in 3D, and who support each other with technical skills and work opportunities. The collective’s newly-launched website was designed and developed by London-based designer Daniel Baragwanath and features a galaxy representing each member and their location in relation to each other. While fairly simple aesthetically, the site is complex is in its functionality with a filtering system that allows you to see members based on their location and skills, viewing them as part of the galaxy, or in a simple list.

“I wanted to perpetuate [Digi-Gal’s] ethos with a site that reflects how the collective work, whilst also (hopefully!) providing opportunities for members and potential clients alike to discover each other,” Daniel tells us. “The navigational elements are based around a 3D galaxy, whereby every member from around the world is represented as an orb, each containing a data-set that pertains to their respective location, portfolio links, skill set and contact details.”

Daniel’s site for Digital-Gal is so successful because of his consideration of the collective’s ethos and aesthetic, and how this is filtered throughout the entire site. There is a futuristic facade to everything thanks to the white on black, and minimal drop-down menus which represents the kind of work members of Digi-Gal often produce. But the 3D galaxy is the real draw, perfectly embodying how this group of people, despite being located in different places, functions as one.

Languages used:
PHP, SCSS, Javascript, Three.js, built on Wordpress.

Stink Studios: abcdestragon.xyz

Estragon is a new typeface by Swiss type foundry Dinamo and, with its release, also came abcdestragon.xyz, a website developed in conjunction with Stink Studios which acts as a type specimen and meme generator. Users can input their own phrases and, after some particularly nice transitions which involve a change in colour and several wiggling shapes, will be presented with downloadable memes, each featuring the words they typed out, set in Estragon. On top of this, the site features a centre handle which allows users to shift focus between the input and output panels.

“As the site is a meme generator and type specimen, its visual language aims to reflect the eccentric character and spirit of the showcased typeface, Estragon, while providing tools for generating, exploring and sharing dynamic type samples,” Stink Studios explains. Stink developed the idea for the site alongside Dinamo and the project was a “group effort” across Stink’s Los Angeles and London offices. The development team included creative developer Will Kent-Daggett, senior creative developer Mick Coelho, global director of technology Arpad Ray, and creative developer Ben Dixon.

What makes abcdestragon.xyz so pleasing is its attention to detail; it’s entirely seamless. When scrolling in the bottom left-hand section of the site which shows the typeface in a more traditional type specimen format, there’s a grid featuring each character of Estragon. On hover, each character enlarges – it’s a small detail, but one that elevates the overall experience of browsing the site.

Languages used:
React styled with CSS Modules and RITA (Stink Studios’ proprietary automation platform which generates customised videos in real-time by injecting content into readymade templates).

William Richardson: williamrichardson.co.uk

As we’re sure many of you reading this will understand, being a creative – especially one that’s freelance – can sometimes feel like screaming into the void. That’s why a portfolio site that catches someone’s attention is so important, and it was this that remained front and centre in London-base designer William Richardson’s mind when he was designing his. “As a freelance designer working in London, I’m always looking for ways to make my work more memorable, so I designed a website which was interactive and playful, both for designers and non-designers alike,” he explains.

Inspired by Adobe Illustrator and inDesign artboards, William’s website, which was developed by Rafa Cobiella, reveals images on click which can be dragged, dropped, resized, layered and deleted. What’s more, once you’ve found an arrangement of images to your liking, these can be downloaded, turning the site into “a unique tool for conversations with my own clients,” William explains, “which makes a great snapshot for follow-up emails.” The website’s one-page layout also lends itself to ease of communication as everything a visitor should need to know is there in front of them.

While William’s design is fun – and useful – it also goes some of the way to revealing some of the process behind his work. “I spend a lot of my working life laying out information and I love that the user is getting an insight into that when they visit my website,” he explains. “No two artboards are the same, as each user engages with the work differently – some are neat, some are messy and some try to break it.”

Languages used:
HMTL, SCSS, Javascript, jQuery/jQuery UI for the interactions, and html2canvas to download the artboard.

TwoMuch: twomuch.studio

No stranger to It’s Nice That, TwoMuch studio is one we’ve been eagerly keeping an eye on since its founders Ben Chan and Malone Chen graduated from Central Saint Martins a year or so ago. After leaving university, the pair officially launched TwoMuch and they used the opportunity of building their website to establish their visual identity. The result is a simple, bold and playful website which features an interactive 3D space full of objects relating to each of Ben and Malone’s projects. These objects gravitate towards your mouse but will scatter on click.

This section of the website, the duo explains, is the main attraction: “It’s the first thing you see on the site and the sets the tone for the rest of the page. Each shape represents a project that we have done. Users can move their mouse or click to interact with the space. On the phone, users can tilt and shake to play with the space.” If you scroll down, each project then has its own automated gallery which requires time to view all of the images and video. “We wanted to create a slower environment for people to browse our work, to really take it in,” they add on this decision.

A technically impressive and visually bold website for a studio still in its infancy, two much.studio helps set a tone for what the duo hopes to achieve. It is both an indication of what they are capable of doing, what they are interested in, and the style with which they will execute projects.

Languages used:
HTML, CSS, Javascript with Jquery and Kirby CMS and Three.js and Ammo.js for the 3D space.

Ian and Erin Besler: erinbesler.com

Erin Besler is an assistant professor of architecture at Princeton University School of Architecture and a principle at Besler & Sons, an architecture and design practice based in New Jersey and New York that she co-founded with Ian Besler in 2014. Her website was designed by the duo and features large text and images, customisable via a series of buttons in the top right-hand of the screen. These allow you to change the background colour, the colour of the text, the font, switch the text to emojis or simply delete elements.

“The visual language of website is centred around the idea of software with a personality crisis; it sort of wishes that it was an operating system or maybe a Google Doc, but it just doesn’t have chops. So it has some of the pieces – parts of system functionality and customisation that you might see in those contexts, but it’s not quite clear what those features are accomplishing.” Erin and Ian explain. “We were also interested in this customisation extending into ‘modes’ – lots of apps today have things like ‘day’ mode and ‘night’ mode, which made us think of other sorts of settings or preferences. So the ‘Emoji Mode’ button lets you toggle on-and-off various words through the site and replace them with emoji symbols instead.”

What we love about Erin’s website is the element of play involved in the design. The addition of the customisation tools serves no purpose in terms of communicating her work, but it hints at an ethos of experimentation and fun. The reasons behind the design, however, show an engagement with ideas around modern tools of communication and how these are impacting the world of design.

Languages used:
HTML, CSS and jQuery.

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.