Double Click's back-to-school edition provides inspiration for anyone prepping a degree show

Double Click, a series bringing you the best of web and digital design, is supported by Wix.

Across the UK in October, students make their way back to their desks and studios to undertake another year at university. For some, this month will have seen them starting their final year of studies, and for anyone enrolled in a creative course, that only means one thing: degree shows. So, for all of you around the world who this applies to, we’ve pulled together a little inspiration in the form of some of our favourite degree show and exhibition sites, all created by students (at the time).

Each is a testament to how you can make sure your year is a memorable one, and create a hub that will exist long after you’ve all graduated. They’re packed full of personality and show what an exciting opportunity producing a degree show site can be. University is a time for uninhibited creative expression, and these sites are just a small sample of the many different directions you can take.

Frederik Mahler-Andersen: www.augmented-photography.ch

Ecal is a university whose degree shows we always keep an eye out for, lying in wait for a fresh batch of hyperreal, slick photographers and precise type designers (among the myriad of other grads the school produces). Alongside one such show, titled Augmented Photography which showcased the work of MA photography students, designer and developer Frederik Mahler-Andersen created a site to harbour the in-depth research that went into the exhibition. Feeling like something much bigger than a student project, the site adeptly embodies the concepts associated with Augmented Photography, demonstrating technical prowess to do so.

A creative research project, Augmented Photography examined recent changes in photography and aimed to explore creative approaches which have emerged with the digitisation of photographic procedures. On hover, or as you scroll, images on the project’s site invert or respond in unexpected ways; a visual language “based on the notion of augmentation,” Frederik explains. “As a research project on new modes within photography, it was interesting to allow the user to interact with the photographs and influence their outcome. The objective was to have something which breaks the code of traditionally static photographs, as well as having a very digital texture both in the effects that it provokes, the use of typeface [made in collaboration with Simon Mager], or other applications related to the project (publication, poster, flyer, exhibition design).”

While the navigation of the site is fairly standard, featuring a top-to-bottom scroll, and a menu which animates in the from the left-hand side of the screen, something which Frederik experimented with was the use of blend modes. As you scroll, the site translates everything below with a blend mode, similar to that used in Photoshop but by using CSS, something which was fairly new at the time. “In many ways,” Frederik remarks, “it was a technical exploration of what these blend modes could produce.” This is employed on the homepage and within the “documents” where images can be shown or hidden, and dragged around to create a sort of collage. Finally, Frederik tells us: “There is also a little interactive footnote system, that nobody probably noticed.” Despite Frederik’s modesty, we love that it’s a website worth spending time on, so load it up and start exploring.

Languages used:
“It is built with the usual suspects of HTML, CSS, Javascript (jQuery) and Kirby CMS for the backend.”

Luke Hoban: exposure2017.massey.ac.nz

Massey University is a college of creative arts based in Wellington, New Zealand and every year, as is tradition for art schools, it holds an exhibition to showcase the work of those finishing their undergraduate degrees. While previous iterations of the exhibition had been designed in isolation, in 2017, when he was given the job, Luke Hoban wanted to establish a visual language or system that could be used again and again moving forward. “We wanted to begin to create an evolution, year-by-year, rather than totally overhauling the identity,” he explains.

What Luke, Jeremy Hooper and Raph Roake who he worked with on the identity with have created, is a bold, graphic website which uses the building’s architecture as a means of way finding but also as a visual motif. The black lines from the interactive floor map of the building are carried throughout the site’s design. While the majority of the site features a solid orange background creating optimum impact, they opted to pare this down on the individual students’ portfolio pages, “thus letting the students work become the hero.”

The most impressive part of the site for Exposure – the name of the exhibition in that year – is its use of SVG animations, trigged by CSS hover states. Upon first landing on the page, you’re presented with an arrangement of black squares which, on hover, form letters. “The same technique was used for the wayfinding page with the isometric buildings – these aesthetic flourishes complimented the overall visual and contextual narrative that we were trying to convey within the visual identity,” Luke adds. Once Luke had developed the front-end code for the site, IT Effect translated it into the university’s CMS. While obviously a technically adept piece of work, what we love most about this site is its distinction from other degree show sites. It feels slick and sophisticated thanks to its Swiss aesthetic and use of multiple pages. In turn, it embeds each student’s work with gravity.

Languages used:
“HTML, CSS, Jquery. CMS was Umbraco.”

Cora Kehren, Marco Wesche, Benedikt Rottstegge and Jens Schnitzler: casting-screens.hfbk.net

Video is never an easy thing to design a website around, especially if you have a lot to show. So when designing the site for Casting Screens, a digital exhibition space of artistic screencasts – “the form of video documentation for our digital lives” – this was a problem Cora Kehren, Marco Wesche, Benedikt Rottstegge and Jens Schnitzler had to tackle. The platform investigates several questions: “How do artists process and explore digital culture through screen recordings? What is the role and relevance of screencasts as an artistic medium for the depiction of digital culture? In which ways is this relatively young medium being used artistically?” Therefore, the site acts as a digital exhibition of artworks reflecting on these ideas presented as a layered “tabs” or “apps” which come to the forefront on hover, and can be made to fit the screen in order to view properly.

Aesthetically, the group tells us, the site “imitates a mixture of unspecified operating system interfaces, drawing from all sorts of digital devices that we are surrounded with.” It’s a “rather anonymous, kind of office-like vessel for the art works” which can be shown as a stack, a list or or jumbled up depending on the user’s chosen view. This decision was made because of the wealth of work on show. “To defy forms of hierarchy in the presentation of the artists’ works as far as possible and to promote a sense of discovery on the users’ side, the website offers three ways of looking at the content,” they explain. The Stack Mode arranges content as a “stack of small windows, separated into video works and textual contributions.” The Explore Mode is an “unleashed chaotic collage of overlapping, randomly moving and resizing windows, in which video previews and article titles compete for attention.” And finally, The List Mode mimics the “cherished tabular neatness of your familiar file manager, alphabetically ordered by the author’s name.” While offering a unique navigation for users, it also nods to the variety of styles and methods with which the contributing artists approach, capture and process the digital realm.

Despite the fact that having so much content would mean a much harder task for the group of four, it was important that the project represent a “broad range of impressions, treatments and approaches.” They explain: “What we associate with our topics of the exploration of the internet and of the digital in general is a sense of vastness, wilderness, weirdness and exploration, like Jorge Day, who is literally roaming through Google Street View as a postmodern digital tourist.” Ultimately, Cora, Marco, Benedikt and Jens have created an intriguing presentation of information which prompts interaction. It easily handles the problems concerning exhibiting this much video content while its glimpses of animation and subtle references to the digital media of our world are pleasingly self-referential.

Languages used:
“The site runs on Kirby CMS, topped with ordinary SCSS and jQuery. For a ‘desktopy’ atmosphere of proximity and ‘clutteryness’ we excessively use window-like elements to present all kinds of content, which is loaded with AJAX. To allow for smooth transitions between different viewing modes, all the elements positions are being calculated programmatically using some custom made logic.”

Charlie Jeffries: kingtsongraphicsweekend.com

While being confronted with a wealth of content all at once can sometimes be the answer, at other times, a simplistic site free of imagery can serve just as well. When producing the website for the Kingston Graphics Weekend in 2018, designer Charlie Jeffries took one element of the show’s identity for that year and cleverly translated it to the web. Clean-cut and well-executed, it’s a testament to stripping things back in order to communicate more efficiently.

The main identity played off the notion of four days in a calendar, as the event took place over a weekend. “We decided to make these four days into an axis around which we could centre our content, this digital application of the branding injected some playfulness into the identity, and the manipulation of the squares reflects the rapidly changing space the degree show took place in,” Charlie tells us. That manipulation he’s referring to sees the four coloured blocks of the homepage grow and shrink in size accordingly as your mouse travels around the page.

Design-wise, the site is minimal in both colour and its typography with an absence of any imagery at the top-level of the site. It’s a bold choice in terms of visual communication as nearly every student will be producing imagery-led work. In turn, it allows the sheer variety of work that the students of that year produced to take precedence, removing any distractions or anything that would up-stage this work. The visual language of the calendar was developed by team at Kingston with Charlie taking these concepts and expanding them on the mini-site. The backend CMS that was used for the index quarter of the site was coded by Charlie’s dad Barney Jeffries. “We often collaborate on bigger digital projects and his PHP and Wordpress knowledge is unrivalled (plus you can’t deny any opportunity to draft your parents into something),” Charlies concludes.

Languages used:
“The site was super simple in terms of languages, the interactions and basic front end was just the usual HTML, CSS and Javascript combination, with a custom WordPress theme created for the backend with PHP.”

Max Köhler, Hope Roalfe, Edy Bridges, Iso Attrill and India Warden (and the rest of their team): camberwellfestival.com

To finish off this back-to-school edition of Double Click we’ve got a site which, when it was first released last year, we couldn’t stop smiling at. The end of a degree and the exhibition that comes along with it is certainly cause for celebration and the site developed by Max Köhler, Hope Roalfe, Edy Bridges, Iso Attrill and India Warden for their year’s graphic design course is the perfect embodiment of that.

With a simple grey background, the site features raining confetti, an over-sized mouse and affable typography (the typeface in use is Caslon Rounded, which was on pre-release at the time). “The show was called ‘Festival’ so we wanted to convey the kind of excitement and fun you experience when you go to your favourite music festival,” the team tells us, while also celebrating their time at Camberwell College of Arts. “So that’s what we were trying to do with the bright colours, animated confetti, comically huge mouse cursor and so on. We weren’t trying to take ourselves too seriously.”

While, originally, they had planned to give everyone their own sub-section of the site, it quickly became clear that collecting all the information from everyone was going to be impractical. “So instead we simplified and asked each person for a single image to convey their work and a link to their portfolio website,” they explain. The alphabetised list allows for the typeface to feature heavily on the one-page site contributing a strong tone of voice across the site. The cherry on top of this celebratory page comes when you interact with the confetti: using your mouse, you can push it around (or by using your finger on a phone). You can also add to the confetti by holding down your mouse button. All-in-all it’s a fun, silly but still completely practical solution to the degree show website, and one we won’t forget in a hurry. Job done!

Languages used:
“Since the site is pretty simple (it’s mostly a long list of links in a single HTML file), running a full-blown CMS seemed like overkill. Instead we used a static-site generator called Jekyll that takes in Markdown, Sass, and Liquid files and compiles them into static HTML and CSS. The confetti effect is done with a big canvas element and about a hundred lines of vanilla Javascript. We decided to keep the data (people’s names, portfolio URLs and such) in a Google spreadsheet so everyone on the team could update it as the information came in. We could then export the data as a CSV file and run it through Jekyll to generate the list of graduates. The site is hosted on Github pages.”

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 “DoubleClick” at checkout.