Satellite photography, drawing tools and interactive logotypes feature in Double Click September

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

We’re back again with an instalment of Double Click, your favourite monthly round-up of the best websites and digital designs out there on the World Wide Web. Yes, it’s September. And, yes, it’s already starting to get dark in the morning and chilly in the evening. But, the great thing about every single one of the websites featured in this month’s Double Click is that they can be viewed without ever leaving the comfort of your home. Browse them on the sofa, in bed, or even while you’re sat on the toilet – no judgement here.

Without further ado, here’s Ben West, Design Systems International, Steven Thorne, Haha.Services and Leszek Juraszczyk to tell us all about their projects.

Bong International: trippin.world

Trippin is a website that houses a community “bonded by a love of travel.” With guides, features and merchandise, everything the website does aims to inspire people to travel more. It’s a content-heavy site and the task of designing all of that information into something coherent went to Bong International, made up of Ben West and Simon Sweeney. “It’s a pretty information-dense website (maps, lists, locations) but it’s also about having a good time and it’s called Trippin. So mixing psychedelic and utilitarian references were our thing here,” Ben explains of the reasons behind Trippin’s visual language.

In turn, Trippin takes cues from maps, tickets and signage “referencing modernist design which presents information clearly and makes the site useful, and supports some ‘woo woo druggy far-out’ visuals where we could get away with it.” After all, “Travel broadens the mind, dude.” Content is arranged cleanly but, as Ben calls them, “woo woo druggy far-out” elements disrupt this cleanliness just enough to keep users guessing and engaged. A particularly pleasing part of Trippin’s design is how much space imagery has been given. As a website which celebrates the excitement of travel, it allows the actual locations – and the people that live within them – to take centre stage.

Each “guide” on the site comprises several locations on a map, which Ben then used to make an abstract scattering of dots – combined with a photo – to produce a cover artwork for that guide. These guides come from individuals or groups based within certain cities and users can navigate to a certain city to see all the guides which have been published from there. For the cover artwork that groups these guides, “we saw some trippy potential in satellite photography early on. It’s always very textural and often abstract,” Ben explains. “So for each city represented on the site, we pull a satellite image from Google and WebGL-tiedye it to make a cover for that set of guides. So each guide and city comes with a unique graphic which is generated just by inputting the content. We like that.”

Languages and tools used:
“We used Craft CMS for this one, with mostly vanilla JS on top. Google Maps plays a main part of course. stack.gl softens the pain of WebGL.”

Design Systems International: designsystems.international

Landing on the website of Design Systems International – a studio based across Copenhagen, New York and Santiago de Chile – is intense, to say the least. What you’re presented with is a constantly-moving stack of bricks featuring the studio’s name in a variety of colours. One click anywhere on the screen isolates those few bricks and their type changes from “Design Systems International” to “Please Scroll Down” (this also determines the colour scheme for the site). Upon scrolling, information about the studio appears as if shooting out the end of the bricks.

“Our company name – Design Systems International – is a play on the generic, multinational corporation, and this idea informs all of our visual language,” the studio explains. “Since our name consists of only top-level domain names, we have our website hosted on all variations of our name that can be created when rotating the words from left to right: designsystems.international, internationaldesign.systems, and systemsinternational.design.” This idea extends to the studio’s logo and its colour scheme is based on randomly selected country flags. “This makes for an ever-changing dynamic identity that functions both as a pun on the idea of branding itself, but also speaks to the dynamic aspects of code and how we tend to work on projects that are deeply ingrained in the digital medium.”

A studio that clearly likes to approach things differently, it also wanted a website that broke free of the traditional portfolio set-up. The nature of the scroll, which is somewhat confusing at first, disarms users and challenges them to digest information in a slower way to usual. There are no short cuts or jump-tos on the site and, instead, users must scroll through everything to find what they need. “It takes some time to find the things you are looking for, but we liked the idea of turning a simple action such as subscribing to our newsletter into a small challenge,” the studio concludes.

Languages and tools used:
“The site itself is a static website built with React and hosted on AWS with S3 and Cloudfront. The most interesting technical feature is the special font aligning we use throughout the site. It is a full-width justification algorithm that performs all text justification client-side in JavaScript, and we used Fontkit.js to generate a small file with font info so we don’t need to load and parse the Webfont every time. Doing text justification in JavaScript might seem like a horrible idea, but it allows us to build a visual language that cannot be done purely in CSS.”

Steven Thorne: museumatlarge.com

In 2020, Museum at Large – a museum that takes an experimental approach to the curatorial process – will be launching. A visit to its website in the meantime presents you with a holding page. After loading it simply reads “museum at large” but click and you discover that by holding down you can advance the page on, access more information and leave a trail of black rectangles in your wake. “The MAL website acts as a holding page to tell the story until the full project is launched,” explains graphic designer Steven Thorne. “It is just one part of a branding project that T.R. Bennett, Andy Hills and I put together earlier this year.”

Steven came up with the concept for the site and developed it, “taking influence from the behaviours we created for the identity.” He explains: “These were designed to reflect the bigger role that the public will have in organising exhibitions. The simple navigational element features horizontal scrolling as the user draws on the screen and in doing so blacks out chunks of text. This visual motif is an extension of our strategy and is the core of the museum’s identity. For example, the main lockup features expressive, user-generated letterforms pasted over a serif logotype. This suggests that MAL aims to playfully disrupt the way museums traditionally operate. As you get to the end of the story, the page resets and repeats with a new colour from the brand palette.”

What Museum at Large’s website proves is how, sometimes, by changing one element which disrupts how we expect to interact with a website, you can have a massive impact. In this case, the horizontal scroll takes you by surprise and the fact that it can only be controlled by drawing on the screen creates a playful site which wholly embodies the concept of the museum.

Languages and tools used:
“Built with HTML, CSS, Javascript and canvas API.”

Haha.Services: arc-production.com

Arc Production is a creative production studio for photography, film and events based in New York and LA. When visiting its site, users are presented with a blurred-out background (which changes every time) and, on it, a logotype that responds to mouse movement. After entering the site, content is presented top-down, with projects flowing across the screen horizontally. An instant overview of the studio’s work, these images can be enlarged and clicked through as a gallery where each image and its caption remain anchored to the top left-hand corner. When in this mode, the interactive logotype returns; an upfront reminder of who this work belongs to.

When it came to designing a website for the studio, Haha.Services – a development studio based in New York – fully embraced the “arc” in Arc Productions. “The main concept was to approach the meaning of ‘arc’ in many different ways: ‘arcing’ in motion, with colour, form and sequence. Along with that, it was important to approach the meaning of ‘arc’ in relation to the context of the studio’s work in photography and fashion.”

This manifests as a site which allows users to flip between different modes for viewing work – an index and a full-pager. Creating something entirely custom was also a priority for Haha.Services, however. “The grid size for the index is generated by the width of each image to match the length of each description. The full-page back button is coloured by the current photo being viewed. Along with the interactive logo, these contextual parameters allow the content to generate the experience and design of the site,” Haha.Services explains. It’s a unique design which instantly allows users to gauge the “personality” of the studio and get an understanding of the kind of work it produces.

Languages and tools used:
“This is a static website: no backend, made with limited dependencies: HTML,CSS, JS (w/JQuery) and native gyroscope data.”

Leszek Juraszczyk: adasokol.com

Ada Sokol is a creative we’ve written about more than once here on It’s Nice That as big fans of her innovative and sleek work. When designing her portfolio site, it was the “unique playfulness and a spirit of experimentation” that art director and designer Leszek Juraszczyk, based in Warsaw, picked up on, however. “I believe that for the website to be a good vehicle for her work it should function as a natural extension of her style, while at the same time, complement her projects in a way that would emphasise their unique features,” he explains. In turn, Ada’s website features a future-facing aesthetic where images – which appear when you hover over a project – mimic becoming 3D as you move your mouse, and they follow it.

Leszek explains how he got to this concept: “At some point, I noticed two things that steered the creative process in the right direction. Ada’s illustrations are full of amazing detail and it’s really striking how much reacher is the experience of consuming and interacting with them when viewing them at a really huge scale. I also noticed how important it is to add an element of playfulness, interactivity and maybe even frivolousness to the user experience.”

As to what this interaction could be, he knew that “incorporating any real-time 3D would not work as WebGL and other libraries would not enable us to offer anything close to Ada’s work in terms of fidelity and detail.” In fact, adding any kind of 3D feature would stand in conflict with the content of the website and take away from the consistent style of the illustrations.” After a long process of trial and error (and the help and development of Owls Department), Leszek came up with the idea of “masking parts of the renderings, making them move on interaction while at the same time adding pixel-tracing to every change in position.” It’s an effect which perfectly, and cleverly, mirrors Ada’s aesthetic while, importantly, not actually obscuring the work in any way.

Languages and tools used:
“To create the visually appealing interactive tracing effects, the dev team used a mix of raw HTML5 Canvas drawing and PixiJS rendering capabilities. They’ve put a lot of effort in making the site work smoothly by fine-tuning its performance, animation staging and adding customised transitions between subpages. For the cherry on top, they created interesting yet simple negative-effect over text using CSS-only technique by utilising blending modes.”

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.