Adobe XD , Webflow

During my final year studying Fine Art at the University of Oxford the annual Art degree show had to adapt to the circumstances of a digital 'stay at home' world. Normally our art studios would be transformed into an exhibition space where friends family students and alumni would see work exhibited by the finalists.

My role was to create, test and develop the UI designs for the website. I worked on the visual design, wireframes and development. I led the design and development of the BFA online degree show website.

Studio space to Exhbition Space

The brand was influenced by the Ruskin 150th anniversary which coincided with our degree show. The typographical serif and sans serif combination was inspired by the Ruskins mix of old and new highlighted by its architecture in the two buildings, one constructed in 1886 and the other in 2015. The interior and exterior hues of the two buildings also were interpreted into a neutral colour palette. 
The final logo is a reworked icon inspired by the founder John Ruskin's signature.
John Ruskin
John Ruskin
Final Logo
Final Logo
Ruskin School of Art Buildings - 128 Bullingdon Road [left]  & 74 High Street [ right ]
Ruskin School of Art Buildings - 128 Bullingdon Road [left] & 74 High Street [ right ]
Font & Colour
Font & Colour
Our Challenge: How can we make the degree show experience digital?
 To look for inspiration we researched how many art Institutions had adapted to new digital norms. 

Instead of attempting to render the physical exhibition space, we decided to take a deeper look into the exhibition experience. 
This storyboard exercise was created to generate ideas on how we could reflect upon the exhibition experience
These experiential moments were used to influence the sites information architecture, and how users could navigate through the pages in the sitemap.

Key insights from our storyboarding, brainstorming and wireframing sessions

Collaboration between artists with Gallery group pages
Instead of separating individual artists work we wanted to display curated gallery pages where artists work could be seen in dialogue with other works as it would be in a physical exhibition.

Draw inspiration from the 'Exit' of an exhibition by creating areas to explore after looking at the gallery. Spaces to show written work, artist statements and more.
Gathering of the community with a Live event launch

Website Build Requirements
24 artists  showing 
1 art piece  with
 5 thumbnail perspectives

4 artists per Gallery Page
CONTENT FIRST - A minimalist approach that lets the artists work take centre stage
 Prototype exploration
Gallery Page
Mobile and desktop wireframes for the gallery page listing all artist names
Gallery Group Page
Experimenting with the grid  configurations to hold 5 lightbox thumbnail images
Endnote Page
Animated prototype for the acknowledgements page loading interactions. 
Prototype made in After Effects and developed in Webflow
Final Wireframes
The homepage hero content is "the window" a video carousel that shows a snapshot from each artists work. This was inspired by the buildings architectural feature, a smart glass pane that allows students to project artwork on the side building.
Gallery Page
Each artist has a link to their artist statement page as well as the 5 thumbnail image lightbox grid.
This page links to the 4 areas that visitors can explore after looking through various group pages in the gallery. 
Artist Statements

Mobile and desktop wireframes for the artist statements page

Landing Page 
A  new requirement came in to build the landing page for both degree shows near the end of the websites development. I quickly created this low fidelity sketch, showed it to a couple of team members and the built the design and interaction in webflow.
low-fi sketches
low-fi sketches
landing page link interaction
landing page link interaction
Website walk-through
Take a look ...

Other Projects

Back to Top