top of page
Untitled_Artwork 7.jpg

Website Design - Online Studio

Can a virtual form of a physical studio better display the ideas behind individual pieces?


During the final year of my degree, Covid-19 made me rethink how to show and share ideas around the content of my degree . This led me to create a virtual version (through the form of a website) of my Studio / Practice, as a way to continue to share and document my progress.


Website Designer / Illustrator


Sept 2020 – Nov 2021


User Research

Interaction Design
Interactive Prototype



Solo Project

Project Overview

The aim for site is to have a fresh, new and interesting way of showing the physical element of a creative practice/process. I want it to be more than an online platform, but more turn into a form of work and virtual environment in itself.

I am creating it to be as interactive and engaging as possible. By bringing in my own background illustrations, (digital versions of) sketchbooks, virtual exhibitions of work to understand scale, process time-lapses and my struggles and successes in studio. This will bring a honest reflection of my practice and shows the context behind works by the I way document my progress.

Screenshot 2021-05-18 at 15.33.38.png

My 'Menu Navigation' designed for the site.

Background Research

Initially, when I started getting into ideas around the making of my online studio, I researched into other artists or designers who had created virtual spaces in different and unique ways and then sketched out some ideas around showcasing.

Screenshot 2021-05-18 at 15.38.30.png

Olafur Eliasson - Your Uncertain Archive

Screenshot 2021-05-18 at 15.40.13.png

Sketching out a 'studio wall'

Design Layout 

The site is broken into two key sections, Artwork and the Studio. Within each of these, there are sub categories which connect to different areas of my creative work.

Artwork is broken up into the different mediums I work in creatively, Painting, Digital Art, Animation and Virtual Reality.

The Studio is a place of sketching, research, ideas progression, learning and showcasing. That being said, Studio is broken into: Sketchbook (ideas documentation), Research, Ideas Development (challenges and growing ideas), Recent Work (acts like the studio wall / Exhibition space).

Screenshot 2021-05-18 at 15.56.40.png

Artwork Landing Page 

Screenshot 2021-05-18 at 15.57.08.png

Online Studio Landing Pages

Defining the Problems

The initial challenge I faced was how I made the Studio page reflect what it was representing, a physical space. 

I imagine this page to be like looking inside my mind when in the physical space. This subsequently took time to visualise


The time it takes to get an idea to work digitally often is very gradual and sometimes it works and sometimes it doesn't. This is a gradual progression in an ideas process and importantly gives the concept space develop into something really interesting.


Below shows the first attempt, next the final.

Screenshot 2021-05-18 at 16.10.23.png




First version of 'Studio' page.

Screenshot 2021-05-18 at 16.10.59.png


Final Version of 'Studio' page.



1).  First Design. 'Blog' design is hardly visible and not obvious to the user to where it leads.

2). First Design. Idea and around a Mind-map directing to different areas had potential but felt jarring with the comparison of physical image and hand-drawn arrows. 

3). First Design. Originally 'Recent Work' was presented as 'Online Exhibition'. But this was too similar to that of the page Artwork.

4). Final Design. Page background designed by hand-drawing my studio space (alining with the feel and design of site). 

5). Final Design. Menu added in by drawing it into the pages design, making it feel like the user is in the studio space and more obvious / readable to the user. 

6). Final Design. Recent Work subtly reference by highlighting the literal recent work on the drawn studio wall. 


To show the physical studio space in its best light, I worked on creating hand drawn visuals to make the viewer feel they were within a real space.

This also enabled me to have more creative freedom with regards to the design layout and style.

Below shows examples of the illustrations designs and used on the site. 

'Home' Page (updated every 2 weeks with new works).

Illustration of  3D Wall, layered with work for the page 'Artwork'

Fist version of the 'Home' page wall layout 

Phone version of 'Menu Navigation' 

Orignial 'Studio' Page Illustration

Desktop version of 'Menu Navigation' 

Interactive Engagement

Websites predominantly are two dimensional virtual platforms. This is what we are used too and what we expect to see. However, this can lessen the amount of engagement we get, as we are so used to the standard flow of online platforms.


To change and test this, I created different ways to engage with the viewer. Whether this was virtual galleries imbedded into the site, virtual sketchbooks or sketched 3D rooms to show context, all aimed to provide less typical content and instead build on the visual communication.

Three-dimensional Landing Page Showcasing the Final Series

Three-dimensional interactive exhibition shown on page 'Recent Work' 

Final UI

Though beneficial in creating and documenting my practice, my Online Studio left me with more questions than answers about the potential of virtual settings.


The project created an opportunity to push my understand of what a traditional online site could deliver, but made me realise the potential and possible progression that could be taken forward in future websites.

Untitled_Artwork 11.jpg
Screenshot 2021-05-18 at 15.56.40.png
Screenshot 2021-05-18 at 17.53.47.png
Screenshot 2021-05-18 at 17.22.06.png
Screenshot 2021-05-18 at 16.10.59.png
Screenshot 2021-05-18 at 17.20.48.png
bottom of page