Simple, experimental and sophisticated websites all feature in Double Click July

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

We’re back once again with a line-up of the best websites we’ve seen over the past month. The thing that keeps us here at It’s Nice That so excited about web design is the incredible variety and diversity that exists within the medium and July’s Double Click is certainly no exception.

Hailing from four different countries, this month’s cohort is proof of exactly that breadth and variety. Sasha Ng exhibits simplicity and a sense of play, Libermann Kiepe uses interaction to problem solve, Yes Studio demonstrates experimental image presentation, Johanna Lundberg and Nate van der Ende work on how to reduce the number of clicks required to navigate a site, and ARPA handles high levels of content with sophistication.

Sasha Ng: sasha-ng.com

Sometimes the simplest design features are the best, and that’s certainly the case with web and graphic designer and front-end developer Sasha Ng’s site. Currently based in France but originally from Hong Kong, she has made her portfolio site a playful and clever take on a CV.

On the functionality of the site, Sasha explains: “This is a personal website of mine, which contains a rather small amount of information. There’s a series of interactive text information, which is completely controlled by simply clicking. Each piece of information appears wherever you click. So I combined the mouse pointer and the indicator of the text information, hinting at the relationship between them. Also, the length of each text adjusts itself depending on where you click, making it easier to use.”

There’s a sense of wit within the design, which perfectly blends playful ideas associated with web design with the more austere and slick personality of graphic design, reflecting, in turn, Sasha’s dual practice. “I wanted to keep it very simple and direct – all essential information, who I am and how to reach me, can be seen at first glance, while further information is left for users to explore interactively in the rest of the screen space, adding a modern and playful twist to this elegant-looking site,” she tells us. “Ultimately, the aim is to build harmony between being classy and modern, and between being simple and playful.”

Langauges used:
HTML, SCSS, Javascript

Liebermann Kiepe: fraukeschnoor.de

Liebermann Kiepe is a duo based in Hamburg comprised of David Liebermann and Maximilian Kiepe. We’ve featured their work before, but couldn’t help reaching out when we saw their most recent project, a portfolio site for picture editor Frauke Schnoor. A largely text-based design, Frauke’s website presents users with large text introducing her and her work. As you scroll down and hover over the words (which represent topics she has worked on), images which correspond to that topic appear and the word is highlighted by a gradient of two colours, a gradient which changes upon every refresh.

“We always develop our visual and interaction-design concept out of the content that is given by the project,” David explains, adding that “the difficulty here was to showcase her profession of researching and assigning photography and illustrations for publications”. As a result, they needed a design which felt different from that of a photographer’s portfolio, making it clear what her role is in producing photographic work. The process of hovering over themes and ideas to reveal the imagery connected with it, therefore, mimics Frauke’s practice, replicating it through interaction.

On how the gradients add to this concept, David explains: “On every hover, the tag cloud appears in a newly generated gradient. In combination with the underlying image, endless combinations of colour, form and content can be displayed and therefore resembles her profession of collecting, reviewing and choosing suitable material.”

Languages used:
HTML, CSS, Javascript with Jquery as a framework and Kirby CMS

Yes Studio: www.danielsannwald.com

Daniel Sannwald is a German photographer and director best known for his work in the music industry, having shot M.I.A’s cover for Matangi, for example, but also for his wide-ranging portfolio of slick, colourful fashion and portraiture work. His portfolio site reflects the aesthetic of his work with its black background and a futuristic slideshow of images that seem to fly from within your screen towards you as you scroll. The site is the most recent iteration of an ongoing collaboration between Daniel and London-based multidisciplinary design studio Yes.

Having produced several experimental sites for the photographer so far, Yes explains: “The brief this time around was to present a wider range of work in a way that reflected Daniel’s practice in both edit and unexpected presentation.” The studio tried out several prototypes and at one point pitched an idea that presented the work as if moving within a physical space. “Daniel suggested we could build the entire site around this mechanic and thought the experience should be as though ‘on a spaceship making a journey through the work itself’,” Yes continues. “The final product references early computer games, Windows screen savers and classic sci-fi.”

While unexpected and quite maximalist in terms of aesthetics, the functionality of the site is actually very simple: Scroll infinitely and you will continue to see Daniel’s work flying towards you. Despite its simplicity, there’s an Easter egg for those who hang around on the site, the studio tells us: “We included a Millennium Falcon-style ‘light-speed’ mode that kicks in after a short time if there’s no user interaction.”

Languages used:
Three.js, Nuxt and YES CMS

Johanna Lundberg and Nate van der Ende: garret.fi

Garret Publications is a small independent book publisher with a handful of titles released every year. Based in Helsinki, its particular interests include post-war Europe, Finland and Scandinavia, and in terms of aesthetics, every release has a strong focus on typography and minimal, clean designs; a factor that Johanna Lundberg and Nate van der Ende took into consideration when creating Garret’s site.

The Stockholm and London-based duo explains the design of the website to us: “Their growing catalogue is immediately presented in a sparse typographic layout mimicking the aesthetic of the publications themselves. Satisfying animations and transitions make the site feel current without falling prey to any trends which may go out of style. The list can be added to for several years without feeling overpowering or dated.”

In terms of the navigation of the site, an initial loading screen transitions up out of the screen before presenting users with a chronological list which, when hovered over, provides a preview of that specific project via an image. “We wanted the navigation of the site to be intuitive and fluid,” the duo tells us. Once you click on a project, the text shifts up to reveal information and an image gallery for that title. Once you have scrolled through a book, the detailed info collapses and you are automatically taken back to the index. “We tried to reduce the number of times a user needs to click or think about what they want to do on the site,” Johanna and Nate say. “By predicting certain interactions like going back to the index, we hopefully create a more effortless browsing experience.”

Languages used:
A custom CMS built with Ruby on Rails, while the front-end is a React app using MobX for state-management

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.

ARPA: n-o-o-n.co.uk

Readers of It’s Nice That will surely be no stranger to magazine Noon. Until very recently, the publication only existed in the printed format, a fact which recently changed when ARPA, who has been doing the magazine’s creative direction since launch, decided it was time to step into the digital world. “After our tenth issue – 360 contributors in, thousands of images and words later – it felt like the right time to take stock,” explains Jasmine Raznahan, founder of ARPA, the London-based creative agency.

Appearing simple at first, Noon’s website, which was brought to life by ARPA’s creative developer Adrien Picard is, in fact, a wealth of information, navigated via several interactions which keep you clicking, scrolling and exploring. “The new site is first and foremost a detailed archive of the magazine,” Jasmine says. “I wanted the site to be fluid, to have no dead-ends at all – so the idea was for you to be able to continue moving from images to words and back again whilst browsing an issue, but also give the freedom to then sidestep if you got absorbed in a certain contributor mid-flow.” As a result, the content of the site can be explored through several lenses, by issue or by contributor. There will also be a Collaborations page launching soon to outline Noon’s work with brands such as Sunspel, Mulberry and Issey Miyake.

While the navigation of the site perhaps takes a minute to get used to, what it succeeds in doing is highlighting how consistent and cohesive Noon’s visual language and content is. With no need to categorise work thematically or by issue, users are free to drift and wander throughout the site as they see fit. Finally, Jasmine adds: “The design is intentionally stripped back to allow people space to engage with the navigation – as this was quite ambitious!”

Languages (and tools) used:
Craft, VueJS, Shopify API, Service Worker, HTML, JS, CSS