Holmes and Watson

Immersive Prototype

Project Completed
November 2020

Large display image of the title screen for the project

Task and Planning

The task was to create a fully visual illustrative prototype on previously produced content. The content was focused on Sherlock Holmes regarding story, characters, books, television, movies etc. Our task was to take this content and design an immersive site through visual storytelling.  

Ideation and Research

As the task and content was already written and planned for us; my main topic of research was focused on building a visual theme on how I wanted my immersive prototype to look. After researching some of the novels, I took inspiration on the illustration work provided by one Holmes book set. This gave me the idea to create this look all the way through the prototype and give the user a unique and visually stimulating journey as they read the content.  

Storyboard sketches

Sketching

The sketching process I found exciting as it was less about structure now and more on creative ways to draw Holmes iconography in a visually interesting way. I decided to make the villains sections dark and shadowy with chiaroscuro lighting while the heroes' sections would be brighter with colour and traditionally elegant in style. I created multiple different concepts of storyboards and refined them down until I was satisfied with a desired look that stayed consistent the whole way through.  

Wireframe sketches of the layout and structure

Digital Design

The digital design process was carried out on Adobe XD, and each element of the prototype was crafted using Adobe Illustrator. This meant each building, window, background, character etc was built entirely from the ground up and transported over to Adobe XD. The content was then placed around the visuals afterwards and mended to the visuals. The illustrations were always designed with content surrounding it in mind. This meant I could save huge amounts of time not trying to figure out how to shape the content around the illustrations but rather place the content in like a piece of a puzzle. Each section although consistent in theme, had their own story visually and let the user know exactly what emotions to be feeling at that very moment. I was very pleased how the prototype turned out and this project improved my confidence tremendously in tackling digital illustration.  

Illustrative screen displaying the intro page designed in adobe illustrator and adobe xd
Illustrative screen displaying the villains screen designed in adobe illustrator and adobe xd
Illustrative screen displaying the heroes screen designed in adobe illustrator and adobe xd

Challenges Faced

The biggest challenge I faced was simply the process of creating each visual sprite for the prototype. Although placing the content in afterwards was quick and simple, crafting the illustrations in the first place took a lot of time and effort. Some buildings or objects wouldn’t look quite right so I would go back and slowly refine over time. More details in the background would be added to heighten the panache of the prototype and small colour, and lighting details were added to each object to make them more striking and professional. Although it was stressful, the final design looked fantastic, and I was very happy with the results.  

Final Design

Final Design displaying 8 different refined screens on tablet
Previous Project