Double Click October is all about the humble portfolio site

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

We’ve got portfolio sites galore for you in this month’s Double Click. Ranging from the more traditional to the down-right unexpected, each is a showcase of creativity from their respective designers and developers. One, for example, hones in on isolating the work, creating a distraction-free viewing experience, while another employs a complex overlaying grid system.

Starting with a site that translates design for the stage into something digital and ending with a particularly unique website for a French gallery, here is Double Click October…

Laurens Bauer and David Benski: www.leaburkhalter.com

Lea Burkhalter is a Swiss stage designer and so, naturally, translating her work – which by its very nature is all about the use of multiple dimensions – onto the screen was always going to take some thought. The task of figuring this out was given to designers Laurens Bauer and David Benski, based in Hamburg. Appearing initially to consist of large, red type set on a white background, full-screen imagery of each project appears when you hover on their names. When the white background is visible, however, a grid becomes clear.

On the project pages, text explaining the project is anchored to your mouse and, as you hover over numbered, orange dots, imagery appears in its place. The coding for the project was done by Tilman Junghans, and the project as a whole was inspired by Liebermann Kiepe Reddemann who they share a studio with, Laurens and David note.

“Since grids, spatial plans and working on a model scale are important components of Lea’s work, it was her wish to have these aspects reflected in the website,” the pair explains. “Accordingly our concept (structure, interaction and design) is based on the following elements: grids, layers, zoom.” In turn, the visual language of the site is prosaic and technical.

They further explain how the site functions: “The main idea behind the interaction is to have two layers that are moved over each other. When certain points of the two layers meet, the content is shown. One layer is a grid, containing the project title and information is attached to the mouse and controlled by the user. The second layer is a mesh of dots, containing imagery, that is randomly rearranged for every project and with every refreshing. So, we wanted the user to hit the points to activate content and get a visual impression of the works and create thereby a unique combination of the content layers.”

Languages used:
“Built with HTML, CSS, JS. jQuery is the only JS-Library used for the project. Built on Kirby CMS.”

Ole Jenssen: www.thilojenssen.de

Another portfolio site, this time for Vienna-based artist Thilo Jenssen, was designed by his brother Ole Jenssen, who’s based in Berlin. Loosely modelled on the aesthetics of Google search as it appears on mobile, the site features blocks of content which can be interacted with in different ways. Some expand to reveal more information, others animate on hover or can be closed with a click of an “x”.

This internet-inspired look was chosen, Ole explains, because Thilo’s work is also inspired by the web. “In this way, the artist’s practice is incorporated in the design of the website,” he explains. “Colourful highlights of navigation elements (e.g. scrollbars) additionally refer to the vividness in the artistic works.” Despite this, Ole has also worked to juxtapose the concepts and aesthetics of Thilo’s work by introducing round edges and a “smooth formal language”. This combination of harmonious and contrasting elements creates what Ole describes as “a dubious arrangement of foreign but corresponding content.” He continues: “Thus the works are continually broken by unconventional images and the user, in addition to the completed works, is also confronted with the artist’s intellectual cosmos. The presence of foreign authors’ texts, in an artist’s portfolio, may be unusual, whereby it indicates a collaborative practice and contrasts the colourful presentations with a formal objectivity.”

Languages used:
“The website was built with HTML, CSS, Javascript with jQuery. It’s a static website, without a CMS backend.”

Bizzarri-Rodriguez: nadimasfar.com

It’s not often you see a site which completely flips how you think photography can be presented online, but this is exactly what happened when we came across Bizzarri-Rodriguez’ design for artist Nadim Asfar. As someone who works solely with the photographic medium, and largely in series, Bizzarri-Rodriguez have developed a system which allows you to “understand and look at his work with different points of view, with different layers of sense”. The site is categorised into several sections – foreword, images, news, curriculum and contact – and which all enable a different reading of Nadim’s work.

In terms of design, the studio references conventions of the web. For example, within the text, hyperlinks can be expanded, as if getting lost in Wikipedia. “For this, we chose to use a very dry design, one font, one size, and used the codes you can find on the web: blue for the hyperlinks, with purple to complete them. The image overview also looks like an image search,” the team explains. “Our work was focussed on organising an editorial object with this language. We thought of the site as a kind of encyclopaedia: all these works are connected, all these works are part of some kind of gigantic library of images. Nadim’s photographs are always made with a method according to each project, so we wanted to organise them in a rational way.” The result is a site which also allows users to understand the interconnected nature of Nadim’s portfolio, following threads across projects. The project was developed by Salim Hbeiliny.

Langauges used:
“The site is built with Ruby based in Middleman. This is basically the CMS. I’ve used foundation for the site’s CSS framework with jQuery for some basic interaction. Development was done using Github and Heroku for continuous delivery. However, the production website uses static files generated one time to avoid server-side workload,” Salim explains.

International Magic: www.mamagstudios.com

We’ve long been fans of International Magic here at It’s Nice That – they were even included in our Ones to Watch 2017, so when we found out that the new Mamag website was designed by the studio, we instantly got in touch. Simple and colourful, the site largely consists of one page which, as you scroll and encounter new projects, changes colour. As you reach each project, widgets appear in the top right-hand corner, showing links to press around each project.

“We used a balance of serif and sans-serif typography with contrasting colour moods from each film to bring a sense of harmony and cohesion to the body of work,” the studio explains. “This contrast creates a quiet and sophisticated feel to the platform.” In terms of navigation, it chose to remove the traditional navigation altogether, “allowing users the freedom to navigate content first.” A key aspect of the site’s design is that it encourages users to view each film in isolation. “This was a move away from the content grid style of the platform, which often makes it harder for each piece of content to stand alone and breathe,” International Magic adds.

The site as a whole is a nod to consumer behaviour and device operating systems but also cleverly considers the browsing experience. International Magic lists some of the features which demonstrate this: “Non-intrusive notifications for linking out to news articles or other supplementary information; a custom video player, with stripped back functionality to simplify the experience and give users control over the essential settings; towards the end of a film, the next film is previewed to encourage users to click and explore.”

Languages used:
“It’s a serverless Wordpress backend, running on Zeit Now and backed by AWS S3 for assets and AWS RDS for the database. We use wp-graphql (and acf) for queries. We also engineered a Wordpress plugin for seamless Vimeo Pro integration. The front-end is a universal app using Nuxt/Vue. There’s a custom video player component and notifications are hooked up with cookies.”

Erin Knutson and Tim Ripper: linconnue.biz

Our final contribution to October’s Double Click comes from an altogether unique website designed by Erin Knutson and Tim Ripper for L’inconnue gallery. Upon landing on the site, you’re presented with a rotating drawing of women’s head and a “move” cursor lets you know it can be interacted with. As you move the drawing, the lines at some point align perfectly to reveal the word “L’inconnue”. It’s a logo and wordmark in one, which appears two dimensional from certain angles but is actually three dimensional.

“L’inconnue gallery’s founder, Leila Greiche, came to us with the story of L’Inconnue de la Seine – she was an unidentified young woman found drowned in the river whose putative death mask became a popular fixture on the walls of artists’ homes and a muse for countless literary, musical, film and artworks since the early 1900s,” Erin and Tim tell us. “She eventually became the face of the first CPR doll (still used today) and for that reason has become known as “the most kissed face in history”. We wanted to resuscitate her by using her likeness as the mark for the identity of the gallery, to have her become a sort of contemporary muse for the gallery’s ethos and simultaneously to play with the concept of drawing/sketching/doodling as it’s the essential tool to artists and visual language.”

The visual language of the site, and the gallery’s identity as a whole, centres around the line. It’s this which gives the drawing of L’Inconnue de la Seine its wiry aesthetic, but which also leads the way you navigate the site. “Working from a desire to bring hand-drawn elements and eccentricity into the interaction, we developed a novel hover state which literally draws a loop or blob around selected elements,” the duo adds. “The column-based navigation on each page visualises the site’s structure and allows the animated effect to respond to different patterns of information. Lines as a visual concept also drove the design of the initial splash screen, where a drawing can be rotated in three dimensions to reveal both the logo and the name of the gallery.”

Languages used:
“The 3D model on the splash screen was implemented using Three.js. The rest of the interactions were written in plain JS and jQuery, with Kirby CMS for the back end.”

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.