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.
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.
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
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
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.
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.
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.
Take a look ...