Heroes & Villains

Building an interactive website to tell the famous and adventurous story of Sherlock Holmes.

View Website

A Trip to the famous
Sherlock Holmes Museum

With a trip to London at the start of the year, it would have been a wasted opportunity not to visit the museum at 221b Baker’s Street. The experience involved a tour of Sherlock Holmes’ House which was set out to as it is described in the books written by Arthur Conan Doyle. A very cluttered busy house layout that held numerous recognisable elements from the books such as smoking pipes, magnifying glasses, deerstalker hats and so on. I was able to pick up a range of visual inspiration from the rooms even to the souvenir gifts.
Old or New Sherlock

I began by collecting lots of different visual inspirations from the likes of books, movies, tv series and more. Spilting up the different styles into what I called ‘Old Sherlock’ meaning the traditional, original Sherlock set back in the 1880s and ‘New Sherlock’ the more modernised version seen on the likes of the BBC series. This way I was able to identify the style I wanted to persue. Finalising on a more traditional look and feel representing 'Old Sherlock' with a modern influence as we are working digitally to tell his story.
Exploring Typography

With a direction in mind, it made my font pairing struggle much more straight forward. Olicana was chosen for the headings, a hand written style font that looks as though it was written in a foundation pen similar to what was used in the letters found at the Sherlock Holmes Museum. Edita, chosen for the body copy, is a serif font with a slightly more interesting feel than your usual serif font. I particularly like their swoosh styling of the letter ‘k’, similar to Olicana's, and therefore I believed fitted perfectly.
Chosing a Colour Palette

From my findings, a less commonly used colour is dark green. Picked up from the likes of books, the signage at the museum and the wallpaper inside sherlock’s house. I believe a dark royal green suits the Sherlock Holmes character as the colour represents ambition and greed which I believe fits his character. More frequently used is the colour range from red to brown, again found from books and décor at the Sherlock Museum, which I used as a contrasting secondary colour palette. I liked the bright orange colour most that is used in the book cover and perhaps it varies away slightly from the obvious colour choices.
Sketching Wireframe and My Finalised Idea

After extensive visual inspiration and exploring other storytelling websites I concluded to a very illustrative style of website as I believe a image can tell a story much better than words. I sketched out the plans of each page, starting with the home page that uses an illustration of 221b Baker Street just liked I photographed of the museum and similar to the painting I found in the souvenir shop. This illustration will act as navigation, clicking on the windows to enter different pages. There are 4 main pages which can be viewed by a horizontal scroll, to give the viewer the illusion they are looking around the 4 walls of Sherlock's room. These 4 main pages include an illustration each of the characters on a detective pin board, a map of London city, a bookshelf of the Sherlock Holmes' novels and short stories as well as a photo frame wall of the famous movies.


Building a Prototype

With my research complete and wireframes drawn up, it was time to build a prototype to properly visualise my idea of how my final website would like look as well as considering how the user would interact with it to tell the Sherlock Holmes story in the most effective way. This is where I was able to bring together all my visual elements such as typography, colour and illustration style.


View the prototype
Final Outcome & Reflections

I loved this project because there was no specific brief. We were provided with the content and given the creative freedom to design the website how we feel would best tell the story of Sherlock Holmes. My visual inspiration was very much based on my trip to the 221b Baker Street museum at the beginning of the year, being able to collect first hand research and gain a feel for the Sherlock Holmes story in real life was exactly what I needed to spark my direction for this project. With the use of detailed illustrations and fun animations the user is navigated through Holmes’ room. I’ve believe I’ve built a fun experience, almost as if the user is taking a virtual tour of 221b Baker Street, which is definitely what tells the story.

Visit the Website

Research Notes