Explore five websites displaying photography in luxurious, experimental, and unique ways
For this month’s Double Click, we look at sites which have accomplished showing photography in aesthetically pleasing or technically apt ways.
Share
Imagery is an integral part of the web and you’d be hard-pressed to find a site which is totally image-free in today’s visually-led culture. That’s not to say that every site which does feature imagery gets it right however, and when you find yourself on something that does it well, or that does it differently, it makes the bad attempts glaringly obvious.
For this month’s Double Click, we’re focussing in on just that, looking at sites with some of the best uses of photography, whether that’s based on aesthetics or some amazing technical feat. Enjoy!
New Now: eidos.digital
A project we have long been a fan of here at It’s Nice That and so instantly sprang to mind when we landed on this month’s theme is Tobias Faisst’s personal project Eidos, with its site designed by Berlin-based studio, New Now. “[Eidos] captures the blurring lines between photography and computer-generated images in current advertising and media landscapes, while ultimately questioning our perception of reality,” New Now explains.
The website the studio has designed elevates this concept by adding another digital layer of abstraction to the project. “A displacement map morphs the images' brightness information into a topographic map, revealing a third dimension that breaks all familiar context,” the studio outlines. “The browsing experience manifests itself as a digital space that overcomes the given limitations and linearity of the published book.” It’s an incredibly absorbing project and a website you’ll no doubt find yourself wasting away many an hour on so don’t visit it if you’ve got a long to-do list. With design and creative direction by New Now, the project, of course, features Tobias’ photography, was developed by Eduardo Maluf, with development support by undev.
Languages used:
“We used cables.gl to code it in WebGL, as well as Javascript and HTML5.”
Studio 24/24: jasminedeporta.com
Upon landing on Italian photographer Jasmine Deporta’s website, you may find yourself a little confused. The screen is split in two, which in of itself is not extraordinary, but the inclusion of a second cursor which not just visually but literally splits your screen into two throws you for a second. Once you get your bearings though, it’s clear it’s a clever nod to the work that Jasmine creates. As Studio 24/24, which designed and developed the site explains: “We thought it was very important to create a dialogue between her different photoshoots and establish an atmosphere of her work. At the same time, the number 11 is her fetish number, and it was important for her that this was reflected and present on the website.”
In turn, the site is structured around the number 11, “which for us,” Studio 24/24 continues, “is a duplication of the number 1:1 and one.” Splitting the website in half embodies this, “creating a translational symmetry between images & texts, pushing it so that even the cursors would be 1:1.” As you click, the images on the site cycle through, appearing once on each side, once as a background image and once in a smaller size at their true ratio. To view each image full-size, or in isolation, you can simply hover over the small square at the bottom of the screen. Technically, to achieve this effect, Studio 24/24 created a slider in which each slide of the website is an inverted version of the other and “three pointers are used so that at all times two pointers are visible, and fake zones are used so that interaction works with either of the fake pointers.”
Bureau Antoine Roux: arnaudlajeunie.com
Antoine Roux, a creative director for art and fashion in London and Paris, is the designer of a slick and beautifully simple site for photographer Arnaud Lajeunie. Through small details, it allows you to navigate Arnaud’s work in several ways. “One of the recurring dilemmas when designing a photographer’s website is whether it’s more of an archive or more of a sample,” Antione tells us. “For Arnaud, we decided to do both: the MORE/LESS switch allows the user to be either passive or active, view either image or text, in the discovery of the work.”
When viewing the site in the “less” format, the slideshow on the homepage is generated randomly, while the “more” format displays a grid with an “unusual hover behaviour”. Each page, therefore, retains a sense of surprise and playfulness which contrasts the rather cold and default layout, Antoine continues. “In terms of design I wanted (and so did Arnaud) something minimalistic,” with typography, typesetting, grid spacing and the use of colour helping to inject some personality into the site, which was developed by Tristan Bagot, a longtime collaborator of Antoine’s. The pair has been “working on many digital projects over the past six or so years (more are on the way!),” he tells us. Overall, it’s a website which is a joy to navigate; clean in both its user journey and aesthetics.
Languages used:
“Javascript, CSS and PHP, Kirby CMS. Libraries: Swup for fast transition and page prefetch on hover. Gia components, a modular minimalistic JavaScript framework.”
Timothée Roussilhe and Ben Mingo: www.davidwilliambaum.com
David William Baum is a fashion, still life and landscape photographer and creative director based in New York, LA and San Fransisco. Considering this, it's the very fact that his practice is so multifaceted which forms the basis of his website, designed by Ben Mingo, and developed by Timothée Roussilhe. When you land on his portfolio, images form a stack in front of you, before scattering across the page, grouped by style or content, enlarged on hover. When you click into a theme, be it still life, for example, that stack becomes navigable by clicking through in a slideshow style interaction.
On this unique format, Ben tells us: “David’s visual identity provides a simple canvas that highlights the quality of his work. His new website explores contrasts of scale as its primary theme. All the imagery is mixed up, small and unorganised, but as you head deeper into the site, content becomes larger and more structured. Commercial Type’s Styrene, an intentionally awkward sans serif family with wider ‘A’ and narrower ‘B’ versions, adds a clean, geometric quality and provides an anchor for the kinetic imagery.” The result is a website which draws you in through an opulent use of imagery and interactive, prompting a thorough interrogation of David’s work.
Languages used:
“This site is using my own Framework called Plato.js. It is a simple and modern Javascript framework coupled with a static site generator. We used prismic.io for the CMS and Netlify for the deployment. For animations, the homepage is custom-built using HTML5 canvas API. For the rest of the site, we are using GSAP.”
TwoMuch: nextimage.xyz
While the above sites perhaps display photography in aesthetically unusual or pleasing ways, this next site is included for its technical and investigatory approach to displaying photography on the web. Designed and developed by TwoMuch Studio, Next Image is an experimental project which reimagines the way we browse images on the web. “Instead of scrolling down a feed, users must move to advance, causing people to slow down and consider their rate of digital consumption,” the studio explains of the site which sees users scrolling through images by using their arrow keys.
The sequence of the images, the studio continues, is curated from Flickr using the Google Vision API: “The user picks their start point, then each subsequent image is found by reading the contents of the one that came before. The result is an endless and unique sequence of images which gradually flows from one subject to another.” In its design, Next Image is fairly stripped back, instead, pulling focus to the interaction of scrolling through the images. In turn, it poses interesting questions about how the web may continue to take shape as users become increasingly savvy and aware of the detrimental effects of our current levels of consumption.
Languages used:
“The site was built using A-Frame for 3D elements, and the usual HTML, CSS, Javascript for the rest.”
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 “DoubleClick20” at checkout.
Supported by
Wix Playground
Wix Playground is dedicated to celebrating design culture and freedom, giving creatives the tools they need to grow, connect, and experiment. Promoting fresh and bright voices, Wix Playground provides our community of multidisciplinary designers insights to shape their online presence using Wix’s professional design capabilities.
Share Article
Further Info
Double Click is our monthly round-up of some of our favourite websites and digital designs floating around out there on the world wide web.
About the Author
—
Ruby joined the It’s Nice That team as an editorial assistant in September 2017 after graduating from the Graphic Communication Design course at Central Saint Martins. In April 2018, she became a staff writer and in August 2019, she was made associate editor.