IXD 302
Narrative & Storytelling.
Heroes & Villans project.

The Heroes & Villans project for Narrative & Storytelling consists of web markup, as well as design and development of a one-page website

Main Design Elements

My inital ideas came from the text itself, explaining the history of the characters and the overall Sherlock Holmes story.

Originally published during the end of the 19th century, my design ideas came from both the original publication itself, as well as old newspaper layouts and design from the era.

This gave me a good layout framework to work from, along with different design elements I would be able to include within the site. This included the two column layout of the content, as well as the type and style of typography that could be used.


For the typography, I decided to choose two serif typefaces to be used, one for the headings and another of body text. The headings on the site used the 'Cinzel' typeface, which is a really nice bold serif type, while for the body text I chose 'Mate SC', another serif type which I think look similar to old-school newspaper typography. Both typefaces are available from Google Fonts

The Navigation

Keeping with the old newspaper theme of the website, I decided to create a header section to house the main navigation links, similar to the date/time areas of the old papers.

I then added smoothscroll.js to each link in order for the scroll action to be smooth as the user navigates down the page. Along with this, I applied a hover.css class to the navigation links in order to produce the slide underline when the link is hovered.

Main Content

The main body of the website is built using Flexbox Grid, as I really liked the functionality of re-ordering sections through media queries.

I felt that the flexbox layout allowed me to re-create the column effect, while at the same time being able to re-order the section, particularly to re-order the placement of images in relation to the relative text sections.

Along with this, I used the 'column-count' CSS property, which allowed me to overflow text into two columns, while changing back to one based on media queries.

I also decided to add in a digital publication of the original Sherlock Holmes stories, from The Strand magazine. I embedded the content, wrapping it inside responsive CSS, allowing the user to experience the publication if they wished, while staying on the website.