We choose five of our favourite degree show websites from this year’s graduating class

While it’s always been tradition for a website to support a degree show exhibition, this year, the stakes were somewhat higher. Usually, we’d be making our way around many a crowded university or exhibition space to peek at a new batch of talent right about now, but this year, we’ve been forced to take that experience online. In turn, 2020’s degree show sites needed to not only support the shows, they needed to actually replace them.

This has added a lot of pressure and responsibility to this year’s graduating class but it’s safe to say they’ve stepped up to the plate. For this month’s Double Click, we’ve pulled together five of our favourites – but we could have chosen many, many more. Congrats to this year’s grads!

Central Saint Martins, BA Graphic Communication Design: gcd2020.nearlyapublishinghouse.com

Finding themselves dissatisfied with UAL’s online degree show, Central Saint Martins students Lili Phillips and Abbie Lilley took matters into their own hands. Having previously created @nearlypublish, a platform built to showcase the thinking and process works from their year, it felt natural to collect and share the final outcomes of those processes. They assembled a team of six located across the globe and, in one week, built a website and supporting publication.

Key to the site is its non-hierarchal design. “After calling for content, our team were slightly overwhelmed by the influx of submissions,” they recall. “Dealing with the content meant being trusted, extremely organised and more importantly, sensitive to the work.” From the outset, the ethos of the project was clear – it needed to be fair, supportive and showcase the breadth of practices on the course. Each time the page is refreshed, the curation of the work shuffles, creating a fluid, ever-changing archive.

What’s more, the site features a “positive” and “negative” layout which facilitates an alternate exploration of work. The team explains the differences and impact of this decision: “The positive [is] a teaser of each practice. The negative housing additional content, including much larger, written explorations. Not only does this feature enable the site to stay consistent, but our curation of work is inclusive to all practices. It was a real worry that the vast amount of data/content would become overwhelming to web visitors, so this design decision makes browsing the work manageable.”

To mirror the experience of physically visiting their degree show, which hasn’t been possible this year, they created a digital footprint archive which tracks how users navigate the site. This footprint can then be downloaded. Ultimately, the combination of elements on the site creates an “honest representation of the class of 2020,” as well as giving “exclusive insight to the conceptual rigour that is the driving force behind our year group’s wide-ranging practices.”

Languages used:

“JavaScript, HTML & CSS, with the final outcome being uploaded to firebase for the database and hosting.”

Full credits:

Identity and supporting publication design – Abbie Lilley, Lili Phillips, Ruth Pickering, and Olivia Alexander.

Coding – Amanda Gayle and Jann Choy.

Middlesex University, BA Fashion Design, Fashion Textiles and Fashion Communication: 2020vision.fashioncommunication.co.uk

When tasked with creating a virtual version of Middlesex University’s BA Fashion Design, Fashion Textiles and Fashion Communication degree show, William Richardson was acutely aware of the pressure as “rather than supporting a physical degree show, it was replacing it,” he says. “It's so difficult graduating this year, with so much uncertainty, so we felt a lot of pressure to deliver something truly exciting for the students in the absence of a physical show.” With than in mind, what William has designed, alongside Camille Lapham-Flores, is “an innovative and collaborative platform on which all the fashion students could showcase their work.”

The course is a varied one and they didn’t want work with a “cookie-cutter approach to each student or course” and so they basically ended up designing four websites in one, replicating how each course would have presented its work in a physical degree show. For fashion, that meant a catwalk “with the garments moving towards the user as though they scroll.” There’s an extra layer of interactivity with the “try it on” features. Fashion Communication, on the other hand, functions like a printed magazine where you can “create your favourite layout using the split-screen, and then draw, type, download, and share it with the world.” And then finally, Fashion Textiles is represented as a mixed-media approach. “The layout heroes what would have been the student's 'final garment' (although COVID-19 put a stop to garment making!) along with the inspiration and mood boards that inspired each outfit,” William explains.

The result is a website which feels much more permanent than the usual degree show site, achieving their goals of not only supporting, but replacing the physical exhibition. “We wanted it to be a destination where the work could live, and not just become a dumping ground of portfolio site links,” William finally adds.

Languages used:

“HTML, SCSS and Javascript plus Three.js, Interact.js, html2canvas, dom2image, and some WebRTC APIs.”

Full credits:

Design – William Richardson and Camille Lapham-Flores.

Coding – Rafa Cobiella.

3D models – Stefano Moretti.

Oslo National Academy of the Arts, BA and MA design department: 2020.designavgang.no

The graduation site for the Oslo National Academy of the Arts’ design department, which offers both master’s and bachelor’s programmes in graphic design, illustration, fashion design, costume design, interior architecture and furniture design, was designed by Mandang Studio. AKA Saralinn Hembre Singstad and Thomas Karlsen, the pair were originally brought in to design the physical exhibition, before it became apparent that wasn’t going to happen, and they had to switch their approach.

“One possible problem we talked about in creating a virtual exhibition space is for us as designers to take up too much of it,” they remark. “In a sense a virtual space like this could be thought of as the architecture of a physical space, so we had to find ways to communicate the students work in the clearest way possible, while still allowing ourselves to have fun with the identity elements.”

What they have created is a website which generates visual elements based on the graduate projects it houses. Based on a circle and auto generating technology, small details of the students' images create visual marks for their projects. “Together they form a visual foreshadowing, but also a cohesive overview of this years graduating classes,” the studio explains.

Once again, we hear about the importance of giving everyone a fair platform: “We didn’t want to feature some projects over any other, but rather try to have a equilibrium by using autogenerated identity elements and overviews based on MA/BA and different classes.” Part of this involved creating a bespoke CMS so the students have a certain level of control over how their work would be viewed. Overall, even though Mandang “had to compromise” on their original exhibition, signage and catalogue design, they remark that “many ideas from our first discussions came through in some ways, and it ended up being a really interesting project.”

Langues used:

Python, postgresql, JavaScipt, django, and quill.js.

Full credits:

Design – Saralinn Hembre Singstad and Thomas Karlsen at Mandang Studio.

Coding – Thor Merlin Lervik.

BHSAD, Graphic Design: classof2020.online

Interestingly, at the British Higher School of Art and Design in Russia, there is never usually a website to support the students’ graduation show. “This year even before the lockdown (which happen mid March for us) we decided that we want to take more initiative and create a website for our show,” explains one of the site’s designers Nat Kukina. Initially, it was meant to function as an archive for the show but, as with universities around the world, the “website is the show itself.”

The main challenge this presented concerned the sheer volume of content the students needed to incorporate onto the site. “Every student has a project and process book accompanying it, on top of that we decided to document the process of making the exhibition itself in a separate section of the website,” Nat tells us. “We also had to take all of the events (like performances, public talks, lectures etc) that were supposed to happen during the exhibition online, which changed the concept of quite a few of them.”

From the offset, they focussed on treating the work equally, something which was eased by the fact that there are 16 students in the year, “which is a very nice number in terms of maths and, consequentially, design.” It follows therefore that the design of the site and the events page is derived from that number, resisting a traditional top to bottom scroll and instead creating a grid structure where all of the projects are always visible. It’s the notion of equality and egalitarianism which forms the basis of the site’s look and concept, and from which everything stems. Nat adds: “In the process of making the website we consulted (over Zoom ofc) with the rest of our group (who were at the same time dealing with different tasks that have also contributed to the show like collecting all the imagery and texts, working on the online events or doing PR work). So even though the website was designed by the four of us, another 12 students actually also took part in the process.”

Languages used:

“The website is created using only HTML, CSS and vanilla JavaScript. All written from scratch.”

Full credits:

Design – Nat Kukina, Sonia Sol, Wassily Dyakonov, and Liza Falyugina.

Camberwell College of Arts, BA Graphic Design: www.wishyouwereherecamberwell.com

The lockdown changed many things about the lives of Camberwell’s graphic design course’s students. But one thing it didn’t change, was the ongoing conversation about their degree show. With a core team of four leading this conversation (over WhatsApp), they wanted to ensure that, no matter what the outcome, the focus would be on the work completed during their final year. The aim was to replicate “a traditional degree show but with a concept that highlighted the emotions and changes we went through whilst completing a degree through lockdown,” the team explains.

In order to do so, they landed on the idea of postcards. “If we refer to previous means of communication, we used to send postcards to our friends and relatives to let them know what we were up to, and where we were. Suddenly scattered around the world because of the pandemic, stuck in our own spaces of confinement, we thought that the postcard was symbolic of our desire to all stay in touch,” the team outlines. They had their invitations printed on postcards to further this concept, as well as creating a digital version.

Their priority was to create something simple, which was easy to navigate and which displayed all of the students’ work in one place. “The transforming postcard rack mimics that of a real rack while allowing for a visually engaging view of all the students' work simultaneously,” the explain. “We understood that our audience may have a preference when it came to the work they were viewing, so adding a filter system allowed for a more refined result of projects completely dependent on the viewer’s selection.”

Tiger Yang, one member of the team, was keen to ensure they retained a sense of the dimensionality of a degree show, something they achieved through the use of AR and a Instagram filter. “People can participate by using the filter to show us where they are, what they are up to. The idea was to create a shareable experience by creating a collection of Instagram ‘postcards’,” they remark. Finally, they created a playlist for attendees to “boogie to” while celebrating the launch of the show, coming together to create a “playful and enjoyable experience”.

Languages used:

“The site was built using a static site generator called Eleventy, using Liquid as a templating engine and Sass for styling. Interactive elements like the lightbox are written in plain Javascript. We initially used a shared Google spreadsheet as a headless CMS (totally valid option) but when the site became more complex we moved all the information into Sanity.IO and plugged that into our build process instead. Everything is hosted on a CDN, so it should feel pretty speedy.”

Full credits:

Art direction – Chloe Tabarie, Matty Palmer and Justina Ciacyte.

AR – Chuiqing Tiger Yang.

Coding – Max Kohler.

Social media – Aimee Merola.

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.