stadium tour cover image

Heroes & Vilains Project

Sherlock Holmes

For this project we created a website that would host all of the interesting facts and information surrounding all things Sherlock Holmes, I started planning the project out and tried to find interesting ways to present the information and I found illustration to be a massive tool in the presenting data.

To see my research for this proect which includes designing data and analysing similar projects, click here

Skills used

logo design
Type design

Programmes used

Adobe Illustrator
Adobe colour
Adobe XD
Adobe fonts

stadium tour cover image stadium tour cover image

Idea generation

The brief was specific to sherlock holme and the information I needed to include but the way I presented the information was completley up to me so I was able to develop a design style.

I went to a library to look at some Sherlock Holmes books to see the style of the cover and how they were designed. This helped a lot when choosing the illustration style and colour choice.

stadium tour cover image


I also made a moodboard so that I could get a reference in terms of the time period that the books are set in. You can look at the moodboard here

stadium tour cover image stadium tour cover image

Colour palette

The colour palette was really fun to do because I was able to take colours from the research I did and then use Adobe colour to find the right tones and complimentary colours.

I knew that there was going to be a wide range of colours in this project so I wanted to make an extensive colour palette.

stadium tour cover image stadium tour cover image


When sketching the layouts for the pages I was aware of how the features would fit into that because the plan for the measuring Mr Holmes page was quite big and I knew it was going to hard to fit into the a single page, but the sketching process helped me plan this.

Take a look at my Tumblrfor more examples of the sketching process.

stadium tour cover image

Home screen

The Home screen was really fun to do, the illustration I chose fit really well and I think that the layout fills the screen really well but doesn't crowd the screen.

Designing the nav bar that goes down the right was interesting to think out and plan, I've always liked the idea of the vertical nav and because of the type of project this was, I thought that it would be a good fit because it added to the illustration feel of the project.

stadium tour cover image

Cast of Characters

Working out a good way to structure the cast of characters page was difficult because I was trying to figure out if I should show the characters right away and try and squeeze the information in, but i'm happy with the final result.

The illustration style was something that I researched a lot and tried to figure out which was the best way to do it and then learn how to make all the characters fit the same style.

stadium tour cover image stadium tour cover image

The heroes

I took inspiration from the sherlock tv series for the illustrations, one episode in particular where it is a period piece and I thought that the costumes they wore suited the project well.

I tried to use the colours from the colour palette as much as posible apart from the skin tones which I colour matched to the photos.

stadium tour cover image stadium tour cover image stadium tour cover image

On the Silver Screen

This was a feature that was on the brief but I had no idea what way to do it, I liked the way the nav had icons to represent a certain page so I used that to go from each of the films and I think that it works well and is easy to understand.

It is pretty simple in terms of layout, I went with a consistent layout and the information was able to fit perfectly.

stadium tour cover image stadium tour cover image

On the book shelf

This was the feature I was most excited about making but also nervous because I wasn't sure if it would work on one page and how the books would fit into the current design style. For the books I was able to sit and design the titles individualy by turning the text into shapes and manipulating them the way that you see here.

The main idea was to use the books as a way to present the information in a visually interesting way but also keep it in the context of the project.

Intro animation

When doing my research I seen that other projects used really good pacing so that the information was presented to them in a controlled way so that the user wasn't overwhelmed with the information presented to them.

The animation is meant to represent a kind of loading screen but I wanted to keep it interesting for the user.

Full prototype run through

This video shows me going through the and showing the regular users journey through the website.

I am really happy with the user flow of this website, from the user tests that I did showed the content wasn't hard to find and it was easy to understand which is what I wanted for the project

stadium tour cover image

Try the prototype!

Building this prototype was fun and I was doing it along side designing the pages so it was always evolving and I was able to make changes based on how the design changed

The planning process was really important for the prototype because I knew how many pages I was building and the user flow throughout the website so I was able to focus on the design of the specific elements on the page.