How do you coherently present a lot of content online? Five designers of archive sites explain

Archives and online exhibitions require thinking beyond simply how a site looks. Often involving collating content from various sources, they present problems when it comes to data management and designers need to figure out how users navigate that data, rather than how they view it. To talk us through some of the challenges and solutions, we reached out to Clara Bahlsen, Random Studio, Design and Code, Patrick Mason and DVTK to get their top tips and to hear about one project from each of them that showcases the creative potentials of the archive.

Clara Bahlsen: yousaypotatoisayfuckyou.com

“From the very beginning, it was clear that the site had to be thought of as a tool. That means: a strong and raw functional focus,” says artist Clara Bahlsen in relation to, somewhat amusingly, her project collating images of anthropomorphic objects. Designed and coded by State and Rasso Hilber, the site has been around since 2006 and has amassed over 2,500 submissions in that time, from people all over the world. Clara continues that another key design decision was to give the site a timeless feel: “Just like a hammer – its overall appearance has not changed much since its invention (I assume – not into hammers really, but you get the idea …).” In turn, yspisfy features a somewhat simple but altogether intuitive visual language; a homepage filled with imagery and a filtering system. Then, adding some personality is a potato cursor, nodding to the name of the project. This element is Clara’s favourite of the whole site, in fact, “because it's so handy and intuitive,” alongside “the keyboard navigation for power users.”

Designing a site before you have the majority of the content is always going to be tricky, but due to the submissions set up by yspisfy, it was a challenge that needed confronting. And while it didn’t make things easier, Clara suggests that if you find yourself in the same situation, you should “find a design solution that will keep you happy and excited along the way. You will spend a lot of time building it, it should stay fun until the end.”

Clara’s top tip:

1. Keep the main layout and structure simple and clear. Add little irritating/fun/odd/nonsense/bleeding-edge features to the mix. Voilà.

Random Studio: archive.cpcompany.com

Creating an archive for a brand with as much clout as C.P. Company is no mean feat. But Random Studio has produced a site that tackles the challenge with ease. From a simple loading page that flicks through archival imagery to a handy filtration system and myriad easter eggs thrown in too, it’s a joy to dig into. The key reference when it came to creating the site, Random Studio tells us, was a “video from 1995 in which Massimo Osti walks the viewer through [C.P. Company’s] internal archive which documents the garments and its many experiments.” Inspired by this BTS glimpse into the archive and how Osti himself uses it, the studio wanted to “open up this experience to the public. Drawing from the video, our focus for the visual language of the site was to make it look and feel as though users are browsing around an internal database.”

Design-wise, Random kept things simple so that the focus is on the garments: “their details, materiality, data and relation to the other artefacts.” When you transition from one page to another is when the site breaks that minimalism somewhat, featuring a sort of splash screen that Random explains was an attempt to “visualise the analogue process of documenting garments and focusing on the textiles by drawing attention to their materiality and making it tactile.” While aiming for a site that looked great was important, ultimately it needed to function and be a “powerful, tactile tool” so users can “browse, filter, arrange and preview the content in multiple ways – for example being able to navigate based on colour or look at a specific garment on a white or black background.”

A mammoth project (it also included creating a physical exhibition mirroring the online experience), Random says that it would advise others undertaking similar tasks to focus on the curation and documentation of the archive. “C.P. Company has such an incredible amount of garments, experiments, visual content etc. More than we could have ever planned for,” the studio explains. So you have to think about the future: “an archive is ever-changing and can exist in many different forms. It’s a living organism that will continue to grow as C.P. will use the site as its personal and public archive, adding items in the future.”

Random Studio’s top tip:

1. Understand what story there is to tell and how you want to tell it. The design is always second to the story and the content. In this case, the artefacts are the main focus and everything else follows.

Design and Code: www.glazespectrum.com

Glaze Spectrum is a project by Helen Love, and is “a library of natural glazes created as a reference and learning resource for ceramicists, artists and students.” Design and Code was brought on board to turn the physical archive (available to see in person as part of Aberdeen Art Gallery’s permanent collection) into an online resource. “It was all about giving the glazes centre-stage,” the studio tells us of its brief. That’s why, from the moment you land on the site, the clay swatches fill the screen, showcasing their array of colours and textures. “The design takes a minimal approach putting an emphasis on Helen's amazing collection. We kept the UI simple, neutral and free from colour so that the viewer's focus is solely on the glazes.” The library is searchable and you can navigate through the collection by filtering oxides, colours, firings, clays and base glazes – for anyone working in the ceramics field, it’s a truly useful and beautiful tool.

This method of navigation is something Design and Code is particularly proud of: “We love how responsive the site is when filtering through the glazes. The site uses CSS for its filtering which isn't very common. With testing we found that this performed much quicker than JavaScript and means the site feels super responsive and fast.” However, looking back on the process, it says things would have been simpler if the team considered and organised the data from the offset as “a lot of time was spent organising the data so we could then use CSS to filter the glazes on the site.” Another feature the studio points out is how, if you click on a tile, you can zoom in to the individual glaze to see its texture in more detail. You can then move through the library using the arrows on the keyboard. Helen Love adds: “I love that you can use the filter to look at only iron oxide glazes (for example) and see all colours that iron can give you. It helps you recognise that each oxide has its own characteristic palette.”

Design and Code’s top tips:

1. Good research, good planning and a thoroughly good understanding of the client.
2. Be accessible. There are a lot of considerations to make a website accessible to everyone which a lot of websites, unfortunately, fail at. Some of which are colour contrast, alternative text, focus order and skip links.
3. Don’t put the logo top left! ;-)

Patrick Mason: globalstudio2020.utsphotography.com

The Global Studio is a programme run by the University of Technology Sydney’s photography department, in which students are able to study abroad. Designer Patrick Mason was tasked with creating a site that would act as an online exhibition and archive for the work created during the 2020 edition. “The visual language of the site is a playful nod to the programme’s focus on international travel,” he explains. “Building from a type lock-up of ‘The Global Studio: California, U.S.A. 2020’ which felt a bit like an address on a letter, I extended this metaphor until the whole site functioned as a virtual picture postcard.” Then, as users navigate through the site, selecting first a student and then a project, this information gets added to the “address” along with a “stamp” preview image of the student’s work, “until finally, the whole page flips around to reveal the images for the selected project in a full-screen slider with minimal navigation interface elements to distract from the work. It’s fairly playful and perhaps even a little kitschy but I hope ultimately functional and engaging. Hopefully, it puts the fun in functional.”

When it comes to designing a site collating content with multiple sources, Patrick reflects that it would have made his life easier if he’d got as much of the content as possible before designing – although this obviously isn’t always doable. For others wanting to undergo a similar task, he suggests thinking “about how it will function on mobile and what features won’t translate from desktop,” before adding “you don’t always have to reinvent the wheel. Take advantage of third-party libraries,” and “make accessibility a priority.” Patrick is currently working on 2021’s edition of the Global Studio’s site, so hopefully, we’ll be seeing much of this advice in practice soon.

Patrick’s top tips:

1. Details before decoration.
2. Start with sketches — be that pencil and paper wireframes, a list of words, or code experiments. This will help prevent the design from being overly determined by certain industry-standard design tools.
3. Look at things other than websites for inspiration.
4. When in doubt, go for a walk.

DVTK: swissdesignawardsblog.ch

While not strictly an archive (yet), we couldn’t help but reach out to Paris-based studio DVTK about its site for this year’s Swiss Design Awards, for the way it ingeniously displays and houses a whole load of related content. Usually, the Awards are held in Basel as a physical exhibition but for obvious reasons, this year needed a different approach. What’s more, this year saw a new identity by Dualroom and Maximage, so DVTK worked hand in hand with both to “translate that branding online, and make it alive digitally.” The outcome is brilliant and innovative; “an interactive narrative that takes users from discovering the 2D branding to browsing a 3D world.” The studio’s aim, it explains, was to create something that exploited the benefits of a digital showcase, rather than trying to replicate the IRL exhibition experience having “seen these popping out a lot recently with all those physical events being cancelled and transferred to the digital realm.”

DVTK explains: “We’re always looking at creating interfaces that are different than what we usually expect from websites standards, and to do so we like to use metaphors from other fields. For this project, we played with a ‘map VS territory’ allegory by turning the homepage into an abstract collection of top-view maps from every participant’s corner. We also used a grid to refer to the most iconic Swiss design feature, and the graphics evoke constructivist children books.” With so many references and features, the studio’s favourite part of the website is the tilt animation on the homepage, from 2D illustration to 3D corner. “We find it quite satisfying and playful, there's kind of an advent calendar or a dollhouse vibe which connects with some kind of nostalgic feeling,” it adds. However, it also loves that the site was born from a true collaboration; between, Dualroom and Maximage but also with all the SDA finalists who designed their “virtual corners” using Google Slides. “The whole thing has been created with some kind of collectiveness.”

DVTK’s top tip:

1. Designing a website without thinking about designing a website and checkout loadmo.re :-)