As we are designing our prototypes and websites around Ethan Marcotte heroes and villains I decided to go and look at his website where he uses this content. This website was built by Marcotte to show the best ways on how to create responsive websites.

Colour

On the site Ethan sticks to a black, white and grey. But he uses red to differentiate the different links to the left and the different links under each of the character. This allows the user to know that it is different from the rest and that it is clickable, this is also shown in the hover states for the links. I also noticed that he has put each of the character images in a darker tone so that they stand out to the user when they see the page.

Typography

Throughout Ethan uses a serif typeface in the whole page bar on the branding on the top left corner. The typeface ties in with the old style mood he is going with here with the illustrations and is very similar to the type that would off been used in victorian times in posters and many newspapers. He also uses hierarchy well in the page as he has a big block quote at the top which you see first and read first then you have a paragraph underneath.

Illustrations

Ethan has included different illustrations in the website that show the different characters. There is a lot of detail to these as you can see the different pencil strokes and the shading within the different characters and cause they are in black and white they match the feel of the site and how Sherlock was originally written.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/42ca9ebb-608f-4e49-b1cd-60eadf29d5ea/Screenshot_2021-05-04_at_18.03.35.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c442fdf2-f880-480e-9ac8-fde20554eb16/Screenshot_2021-05-04_at_18.06.35.png