June's Double Click features real-time user interaction, infinite scrolls and lo-fi aesthetics

Double Click, a series bringing you the best of web and digital design is supported by Wix. Wix is a world-class website building platform with 150+ million users in 190 countries, enabling you to create a professional website and manage your business online. 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.

Double Click is back for its second instalment and it’s a stellar line-up featuring everything from floating T-shirts to aesthetics inspired by archaic reading machines. If you missed last month’s article and are a little confused about what you’re reading, here’s a quick catch up: Double Click is a new series, launched last month which, each month, 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’re experimental, satisfyingly simple or just beautiful to look at, we’ll catch up with the designers and developers behind the websites to find out the thoughts and the tools that turned a concept into a URL. Below, we chat to Becca Abe, Off Office, Studio Feixen, Jake Dow-Smith Studio and Bureau Cool about some of their top-notch work.

Don’t forget, if you’ve recently worked on a site, we want to hear from you! You can send your Double Click submissions here.

Becca Abbe: www.lucy-ives.com

Lucy Ives is a writer whose particularly unique website was designed by New York-based web designer Becca Abbe. Featuring a lo-fi aesthetic, the site is comprised of six horizontally-scrollable panels which display the different facets of Lucy’s work (news, books, prose, interviews, poems, information). Within these panels, individual articles, when clicked, expand to fill the whole page; the design in its entirety feels like a piece of software itself. “Lucy’s site comes from a series of discussions we had about research-based work and the amorphous nature of writing,” Becca tells us. Becca often references physical objects, or uses them as guiding models when designing websites and in this case, it was archaic reading machines and early graphical user interfaces.

“The index draws from the Renaissance-era concept of the bookwheel and the interior projects pages are based on a Victorian furniture piece called the Holloway Reading Stand,” Becca further explains. “Lucy’s own work relies heavily on Scrivener which is a writing software that also manages all the ephemeral data: research, citations, images, etc. that go into a written piece. Its split-screen design was a big influence on the final site.” When it comes to how viewers digest Lucy’s work, several options are available including the raw text, a link to an online publication, a downloadable PDF, or simply rendered as the file size in bytes.

For those who do a little digging, Becca’s embedded several Easter eggs within the design. Readers can enter “kindle mode” for a distraction-free view. Once fullscreen, a reading tool (AKA pixel line) tracks your cursor and helps keep your place in the text. An option to output the texts with print-only CSS styles is also available via the printer button. Even without these features, what Becca has succeeded in doing, is creating a site which is memorable, and that keeps users exploring. While she designed and built the site herself, she does give a special shoutout to her “genius father Eli Abbe for workshopping the horizontal scroll animation script on the index page with me. Without him, it would not stop at each end.”

Off Office: benjamin-werner.com

Benjamin Werner is a photographer based in London whose portfolio largely consists of portraiture and fashion photography. And his website, which was designed and built (with help from Robin Scholz) by Off Office AKA Johannes von Gross and Markus Lingemann, is a clever nod to this consistent and considered body of work. After landing on a full screen video of an eye, users can click through a slideshow of images whose captions only appear on click, wherever you click. As these captions are often the name of the model or subject, it’s a simple yet gratifying way of focussing attention on the people and faces that make up Benjamin’s portfolio, while instigating interaction from a user and leaving an element of the design open to serendipity.

Benjamin first got in contact with Johannes and Markus as he was struggling to code the website how he wanted it himself. “Their work appeared to me as really strong and clean, but always with a little twist to make it special,” he tells us. In terms of the visual language of the site, Markus describes it as “pure, with an editorial feel.” On the decision to keep the site free from the usual features of a photographer’s website such as a system of navigation, categories or specific stories, he continues: “It was important to keep everything as simple as possible while radically focused on the pictures.”

An additional feature occurs when you click Benjamin’s name in the top left corner. Depending on where you are in the slideshow, that image will be blown up to fill the screen, out of focus. While practically, this design decision creates a background on which to display Benjamin’s bio and contact information, it also allows his work to be viewed in a different setting. Somewhat mimicking how Benjamin himself would adjust the focus of the image, it’s yet another subtle nod to his practice, revealing how even a clean, simple design such as this can hide playful and interactive elements.

Languages used:
Javascript, HTML, CSS built on top of Kirby CMS

Studio Feixen: zwanzig.kulturbuero.ch

The Kulturbüro Zürich recently celebrated its 20th birthday and to celebrate it threw a festival. The communication for this festival, as well as a poster (double sided flyer), an animated poster and social media tools, included a website designed by Studio Feixen. Colourful and bold yet still clean-cut in its design, the homepage features a grid of titles, each title housing an animated icon. The site features a colour palette of red, purple, white and black which not only aids in visual impact but acts a categorisation system for the event information it displays. This becomes even clearer through a filter system in which users can toggle “workshops” and “events” to customise their view.

It was early on in the design process that Studio Feixen decided to utilise a rigid (and exposed) grid system. “This fixes mostly all problems when it comes to social media. At the same time it was important to us that it does not look stiff. So we decided to have some playful elements and also moments where we break the grid in order to get a design that is on one hand functional and on the other hand has a playful feeling,” the studio tells us. Interestingly, the studio made use of both code and a linear top layer of animation: “Everything, the animated gifs, pictures and code are working together in harmony and react to each other.” The result is a dynamic site which embodies the sensibilities of print and elevates it.

Tools used:
Wordpress

Jake Dow-Smith: dow-smith.com

Based in London, Jake Dow-Smith Studio creates websites for clients including Fred Perry, Mother Design and Adam Andrascik. At first a seemingly unembellished design – a white background is home to a serif font, projects are displayed in a straightforward top-to-bottom view and three spot colours of red, green and blue pop up across the site – the studio’s site is satisfyingly slick in its execution. The videos for each project play seamlessly and when you reach the bottom of the site and continue scrolling, you find you’ve been taken on a loop and are back at the beginning. Upon click, a simple yellow circle remains as a mark of your interaction and a nod to Jake Dow-Smith Studio’s identity.

“As a website design studio, it was important to provide a neutral environment for our work to be viewed – every project is unique and we don’t have a house-style, so it was vital to consider the context of the work being presented,” Jake, the studio’s founder explains. In turn, the design is minimal and functional and “everything serves a purpose”. He continues: “We use one typeface, one type size, primary colours, one column, and the page scales proportionally to your browser so everybody gets the same experience. We’re firm believers in the K.I.S.S principle and that’s visible in the design of our website.”

On the infinite scroll feature, Jake says: “Whilst most of our work consists of designing memorable and engaging ways of interacting with the internet, the aim here was the opposite – embrace a passive form of user interaction, respect the attention span of visitors, and allow them to scroll infinitely with the key features highlighted for each project in an auto-playing video.” This also means users are only required to scroll when visiting the studio’s website, and no other form of interaction is prompted.

Languages used:
HTML, PHP, SCSS, Javascript

Bureau Cool: jai-paul.com

Bureau Cool is a studio not afraid to try something experimental and its latest site for recording artist Jai Paul is no exception. An entirely immersive world, the site features Jai Paul’s various outputs as floating 3D objects, navigable by clicking and dragging (to change your view) or clicking (to move into a new space). The real fun happens if you agree to sign in, however, as the site assigns you a username with which you can chat and interact with other users also browsing the site.

“The idea behind the site was to create Jai Paul’s world,” says Ben Wegscheider, the studio’s founder. That world, he continues, is a “retro-futuristic place in which all his different output can live and that can grow throughout time. We decided to make the space endless (it repeats when you reach the edge) which strengthens Jai’s mysterious image and encourages the visitor to keep moving and discovering, as there are hidden tiles as well.” It’s an air of mystery only furthered by the hanging fog, reminiscent of old computer games like Tomb Raider.

In regards to the online chat function, Ben says: “This brings an interesting aspect to the website, as it’s not a singular experience anymore but you see what other people are doing and interact with them.” By signing in, users also unlock the possibility of finding hidden content. “We started with two hidden items for which the codes were hidden in the two new tracks Jai released. Surprisingly people figured out the codes really quickly and the hidden items were sold out very fast,” he adds. It’s these features that make the site so unique, transforming the usual online shopping experience but also the typical portfolio. The 3D objects invite interaction, replicating the experience of browsing, while real-time user interaction promotes staying on the site for longer.

Languages used:
“The website was developed with a custom backend, as we needed a sign-up system, an access-code feature, a possibility to manage 3d items in the backend and a way to connect items to Shopify to enable e-commerce. The frontend was build using ‘old school’ Backbone and ThreeJS, a great wrapper around WebGL.”