Five websites that master the black and white aesthetic

Designers everywhere love a bit of black and white. It’s bold, always looks crisp and means – let’s be honest – you’ve got one fewer decisions to make. So you can see why many designers fall back on it when producing work. Despite its simplicity though, it’s by no means a foolproof formula and creating black and white work that makes sense and holds its own in a saturated world is no straightforward task.

As a follow-up to last month’s Double Click, in which we highlighted five of our favourite minimalistic websites, this month we’re looking at sites which use black and white only, mastering this unadorned aesthetic. These sites are far from shallow though – keep reading to find out about the concept of “strollology”, generative music, digital decay and objectivity online.

Gianluca Monaco and Alessia Scuderi: physicsofbeauty.art

Physics of Beauty is a music album published as a digital art project by Clemens Wenger, with a website designed and developed by Gianluca Monaco and Alessia Scuderi. Initially, the site offers users a choice of tracks which, when clicked, take you to a page visualising the song in a Windows Media Player style, which is also interactive. The idea for the site, Gianluca tells us, began with Clemens’ “fascination with physics and, more broadly, research in unfamiliar fields,” with the concept of “strollology” forming a guiding principle as “the tracks are meant to guide the listener during a walk, empowering the observation and the perception of the environment.”

It was these ideas that gave a clear direction for the design and development of the site. “The set of graphical elements is extremely basic: we decided to use only black lines and circles on a light background,” Gianluca explains, going on to say that the real backbone of the project is the system they designed – “how those elements are related to each other and what principle animates them”. Each system is “a world unto itself, with a distinctive visual narrative that reflects the rhythm and the mood of the track,” with the ultimate goal to “replicate the idea of strolling within a digital environment”.

Finally, the site utilises quantum mechanics, meaning that the user becomes part of that system and “alters it in the act of observation, making each experience unique and non-replicable”. So, while Physics of Beauty is visually simplistic, it goes to show that a black and white facade can be hiding some pretty smart stuff.

Languages and tools used:

“We used Kirby CMS for managing the content and controlling the many animation parameters. The interactive visualisations were realised with paperJS, a powerful JavaScript framework for vector graphics scripting.”

Bakken & Baeck: bakkenbaeck.com/ddd

Bakken & Baeck is a creative powerhouse of a studio, with offices in Oslo, London, Amsterdam and Bonn. It designs and develops projects across the digital sphere and part of this practice sees it running an event series called DDD. The third edition of said event was focused on the theme of digital decay where Bakken & Baeck asked itself “What does ‘to forget’ mean in the digital age?” and it’s the poster for this event which caught our eye.

“The birth of the internet promised us a Great Library of Alexandria for the digital age,” Iris Cuppen, who developed the concept for the event alongside Anita Silva, explains. “The content of this library, however, turns out to be more ephemeral than we hoped it would be. Hyperlinks lead us to places that no longer seem to exist. The iconic 404 error marks the presence of absence – the website as a wasteland. It reminds us that digital content is never static; every “refresh” might show a new layer of information concealing the digital archaeology underneath.”

It was with all this in mind that the studio decided to design a poster for the event in the form of a mini-website, which was designed and coded by Luuk Janssens, featuring typography from Henrik Kongsvoll. “The website consists of four layers that alternately are being peeled off to reveal the underlying layer,” Iris further explains. “We based this effect on the ever-changing compositions of wheatpaste posters we find on the streets, that slowly deteriorate into a layered mix of graphic forms – symbolising the passage of time.” The only interactive element on the whole site is the “tickets” button which is only accessible once the whole poster has “decayed”.

Languages and tools used:

“The website is a one-page HTML document using Three.js to render a fullscreen plane, and using WebGL to create the decay effect.”

Ezekiel Aquino: ezekielaquino.com

Next, we move on to a portfolio site by Amsterdam-based designer and developer Ezekiel Aquino, a site which acts as a sketchbook of sorts for his works in progress. “My website revolves mostly around my output of generative compositions and experiments which are all of different themes based on my obsessions of the moment,” he tells us, adding that the website itself is merely a frame to hold these experiments, and so it’s constantly changing. The latest composition which is currently visible is titled Generative impromptu, Undulations in C.

“It’s really an ode to musical notation (and the purity of it),” Ezekiel says. “I’ve always found sheet music so beautiful, so the visual language is really just drawing out its inherently beautiful graphical qualities – turning it into shapes, sometimes kind of ‘destroying’ it, with some references to contemporary composers creating experimental music and the works of musical impressionists.” When delving into this topic, Ezekiel realised he was already generating “fantasy” music notation and so he might as well take it a step further. “What happens if I actually attempted to not only produce interesting visuals, but also music that made sense and could be heard?” he questioned. “This led me to the first of the series (new generative pieces are in the works): Undulations in C.”

Languages and tools used:

“The languages used are JavaScript/Typescript, Next.js as a framework to build the frontend. For undulations, credit goes to abcjs as the ‘scaffold’ for the musical notation and Tone.js for handling and producing the audio.”

José Meza: josemeza.info

José Meza is an art director based in San Francisco currently working on visual and brand design with Google Brand Studio, and we chose his portfolio site for this month’s Double Click for its ability to inject a bit of fun. It’s a simple site where large-scale typography is the hero and sound effects also play a major role.

There are three sections which can be expanded – About, Selected work and Contact – and each makes a different sound when expanded or collapsed. A simple but sweet cursor interaction also furthers the playful personality of the site, as the enlarged cursor flips and rotates on hover. “The intent behind the site’s design was to create a straightforward index of work with few (though very specific) elements and behaviours. The site’s pared-back aesthetic is combined with quirky sound design and cursor play to reflect a personal interest in a high-low mix,” José tells us of the site, which was developed in collaboration with Gabe Ferreira.

Languages and tools used:

“The site was built using Vanilla JS and uses Sheet2News, a library that facilitates the implementation of Google Sheets as a Content Management System.”

Spassky Fischer: fp01.eu

Rounding off this month is a site from long-time INT faves Spassky Fischer, which is part of an entire rebrand of FP01, an architecture studio. “FP01 focuses on architecture issues. Its tools are method, logic and reason. Its approach is systemic and tries to solve questions raised by a complex contemporary era,” Spassky Fischer tells us of the studio, hinting to the foundation from which it had to create the identity and ensuing website.

Logic, rigour and precision are all interests of Spassky Fisher too and so it was this the studio (including its two interns Frédéric Jaman and Corentin Corneau) decided to focus on for the website, which was developed by Tristan Bagot. In turn, “only numbers and information are given for each project,” creating an objective site. “Our wish was to produce an object without any intrusion of emotion, except, on a very precise point,” Spassky Fischer explains. This can be changed, however, through a “switch mode” where only images are displayed. It’s an extreme decision to make on the portfolio site of an architectural office, but the results are fascinating, somehow drawing you in further and prodding you to explore the site.

Languages and tools used:

“Kirby CMS, Webpack for JavaScript and CSS compilation. Libraries: Swup for fast transition and page prefetch on hover and Gia components, a modular minimalistic JavaScript framework.”

Wix Playground is proud to support Double Click, a monthly round-up of some of the most interesting and innovative websites and digital designs out there right now. We’ll discuss minimalistic, sophisticated, and experimental websites with creatives who regularly push the limits of web design, and learn about the process that shapes their work.