Sherlock Holmes

University Project
Project Overview
This is a university project exploring the life and times of Sherlock Holmes. I created a brand, style guide, and immersive prototype, which I then transformed into a responsive one-page website. This project showcases my skills in branding, UI design, animation and storytelling, bringing the mysteries of Sherlock Holmes to a modern audience.
Sherlock Holmes Title Image
Project Overview
Sherlock Holmes
Jan 2021 - May 2021
This project remains one of my favorites to date. It was a challenging but rewarding experience that tested and helped me grow as a designer. I am thrilled with the final outcome of my website, which centered around the theme of Sherlock Holmes. Initially, I felt restricted by the brief, but I soon discovered that limitations can lead to new opportunities. Instead of following the classic 1887 art direction commonly used by designers, I took inspiration from Andy Clarke's "Art direction for the Web." Clarke emphasized the importance of storytelling in web design and how it drives success. I decided to approach the project from a unique perspective, focusing on the character traits of Sherlock Holmes - quirky, sharp, and direct - and channeling those qualities into the design.

Check out my design journey below, where you'll see my process unfold from initial sketches to digital wireframes and user flows.
Wireframes in Figma

Typography was a key aspect of the project, and I dedicated a significant amount of time to perfecting it in both the titles and body copy. After numerous attempts, I ultimately settled on Pacifico as the final typeface. Experimenting with layering and color added the finishing touch to the design.

To bring the storytelling aspect to life, I chose to create a single-page website that would feel like a journey through different sections, like chapters in a book. I used colour blocking and titles to guide the viewer through the story, and I am pleased with the immersive effect it created.

To see more of my research process click the link below to see my blog kept during this project.

Further Research

In hindsight, I would have liked to add some advanced animations, such as making Sherlock Holmes walk across the street and enter the house in the 221b Baker Street section. I also would have liked to make my "short stories" graph interactive, but I was unable to find online resources to help me with that aspect. These are skills I hope to develop in the future. Overall, this project was a joy to work on during after a difficult year at university.

Have a look at my final website!

Sherlock Holmes Website