Introducing Double Click – our new series rounding up the best of the digital design world

Welcome to the first in a new series we’re launching here at It’s Nice That. Called Double Click, each month it will bring you a round-up of some of our favourite websites and digital designs floating around out there on the world wide web. Whether they employ lateral thinking to show us a new way of navigating a site, use animation to enhance the reading experience, or feature some downright bonkers interactions, we’ll be chatting to the creators of each site to find out more about the thinking that went into the design.

To kick us off, we’ve selected fives sites which demonstrate just how exciting this world can be. From utilising sound, colour, various axes, slick transitions, and 3D elements, each example proves how a good site can encapsulate and bolster creative work like no other medium.

If you’ve recently worked on a site and want us to check it out, please don’t hesitate to get in touch, we’re always super keen to see what you’ve been up to!

DVTK: differentrecordings.com

To kick us off, here’s the site made for record label Different by London-based DVTK, coded by Will Urmston, an intern at the time, and now a regular collaborator of the studio. Opening with a slideshow of images that jumps around the page as it loads, differentrecordings.com features a moving gallery of images which disappears into a vanishing point. Using the mouse, users can somewhat track the camera’s movement. The artist’s name is revealed as the cursor hovers over an image and each portrait stands out against the stark black background of the site.

“What actually influenced our work on this website was the heterogeneous nature of the content, since all the images we had were basically what we could find when searching on Google and socials for each artist’s imagery,” DVTK tells us. As a result, the duo developed the idea of a billboard in order to deal with the myriad styles, colour tones and textures they had within the imagery. Looking into reference images of Shibuya and Times Square, “we started realising that the hypnotising nature of billboards – their shimmering lights and vivid colours – make the dark buildings that support them disappear in the background and eventually, completely vanish. What was a street eventually turns into a constellation of images hung in the air.”

A simple and minimal solution, DVTK still kept some surprises within the design. “Because we wanted users to see this website as kind of a cinematographic (which is passive) although interactive (active) experience, it was crucial for us not to give the user the full control of the camera and instead restraining it to a constant speed and direction,” the studio explains. “But the great thing about setting rules is that you can easily surprise the user by slightly changing one parameter of the game – which is what happens when the camera starts spinning as you move your cursor over a category.”

Languages used:
Javascript, HMTL, and CSS with Preact, built on top of Kirby CMS using PHP.

Aimee Sy: emlysmms.com

A site for designer and photo illustrator Emily Simms, designed by New York-based Aimee Sy is up next. As Emily is a creative whose portfolio is all about colour, Aimee worked with her to establish a framework that shows this off. Landing on a page with a grey background with several bars of colour to the right, users can expand each of these bars to see Emily’s work categorised by the colour of the background which then extends out. Along with a series of collapsible sections, it’s a unique format of presentation which fully embodies what it is that makes Emily’s work distinctive.

What’s interesting about Aimee’s solution to presenting Emily’s work is that the underpinning concept of the designer’s portfolio directly influences the navigation and skeleton of the site. “The transition as you click on another colour section feels like you’ve entered another curated colour chapter without feeling like you’ve left the page,” Aimee explains. “Omitting categorisation of imagery based on projects was a strategic decision to showcase her work in a way in which the user can focus on the concept behind each image. And chaptering it into sections gives her a colour story narrative which is unique to her, as a multifaceted designer.” As a finishing touch, Aimee also includes a “resumé-esque ‘About’ section [using] a CSS flexbox grid to display her info as a Jenga-like colour block.”

Languages used:
Javascript, HTML and CSS.

Tristan Bagot: remybriere.fr

Rémy Briere is an artist living and working in Paris whose minimal and smart site was designed and coded (with a little help from then-intern Guillaume Baeriswyl) by Tristan Bagot, a digital designer also based in the French capital. Upon landing on Rémy’s site, users are presented with a clean, white background featuring one black-and-white image with Rémy’s name anchored in the top lefthand corner. It’s a simple decision which, in turn, invites interaction, prompting users to click to discover more.

One click anywhere on the page reveals a navigation bar which, as projects are clicked on, proceeds to collapse and expand in a satisfyingly slick animated transition. This deceptively simple navigation system functions as a page title, site title and back button all at once. “Rémy had an Indexhibit before and really liked the simplicity,” Tristan explains. “He wanted to go straight to the point with a touch of mystery (so you have to click many times to discover the workpieces by pieces).”

Starting his design with Times New Roman – a system font standard – Tristan later changed it to Genath, a typeface by Optimo, in order to add some more personality and fun to the site. On the whole, the concept of Rémy’s portfolio site Tristan explains is “efficiency and clarity” with “a minimum number of calls to action and buttons”. Ultimately, what Tristan has created is a site which hides what makes it so good in plain sight. It’s simple but perfectly reflects the artist’s pared-back aesthetic.

Languages used:
Javascript, CSS and PHP.

Lars Høie: ideology.press

“The visual language of the site is an attempt at reflecting the multi-faceted and highly ideological nature of publishing – of making public,” says Lars Høie, who runs Ideology Press and who also designed its site. Ideology Press is a propositional publishing project that aims to create discourse around the post-digital publishing landscape. Despite being a two-page site, ideology.press’ design reflects its complex concept. It relies heavily on the large type appearing on its homepage. A typeface designed by Lars titled Ideology, it is a “response to the myth that Helvetica has very few idiosyncrasies and is therefore somehow thought to be neutral”. He continues, “With the understanding that nothing is really neutral, or outside the realm of ideology, the aim for the typeface was to heighten the contradictions and idiosyncrasies of Helvetica, within the historical context of modernism, and the consumer-capitalist condition it has come to represent.”

When users interact with the site, a hovering 3D book appears on the page, tumbling along its axis and cycling through a host of potential books. “These books represent ideas I want to pursue – half-finished books, books I think should be here but are not, and so on,” Lars explains. In turn, this seemingly farcical element serves to elevate the concept of the project. Inspired by a conversation he had with his tutor Joshua Trees about the phenomenon of “fake books” – those books that only ever exist on Instagram or Tumblr, and never as a physical object – the interaction “poses the question of whether or not book works can exist solely in virtual space”. In turn, Lars’ design shows how adding one unexpected element of interaction or movement can communicate on a completely different level.

Languages used:
Javascript, HTML, CSS and THREE.js.

Sean Purdy and Anil Aykan: juxtapress.it

Juxta Press is an independent publishing house based in Milan, with a website designed by Sean Purdy and Anil Aykan (both at Barnbrook), with development by Chris Corby. Juxta Press’ site features a slick browsing experience utilising several expandable boxes of content which can be opened or closed. Every time one is opened or closed, the whole website rejigs itself in a dynamic transition.

“The website design is inspired by Yves Klein’s four-page artist’s book Dimanche, which is designed like a newspaper. It is constructed to present a lot of information simultaneously but with an underlying structure that leads the eye,” Sean and Anil explain. Juxta Press, however, differs from the static nature of a newspaper thanks to its boxes of information that open out to reveal more. “The structure is as thought out as a newspaper but is very much based on the dynamic principles of the web,” they continue. “This juxtaposition creates a lively, energetic site that initially looks quite complex but has an intuitive structure.”

“We like how with the interactive side of web design, you gain an additional method of communicating the concept behind an identity: with this in mind, we try and design websites around the idea of them being ‘easy’ to use but also ‘interesting’ to use,” Sean and Anil add. Juxta Press is a perfect example of this as a project which is inherently artistic but which also needs to function as a commercial website where users can buy books. “We wanted a clear, intuitive path that could be followed to purchase books, but that would be complemented by the possibility of exploration,” they conclude.

Languages used:
Javascript, HTML, CSS and PHP.