Interface Research – Seven Deadly Sins

I started my research by looking at the interactive websites on the National Film Board Canada website. The first website I looked at was the Seven Deadly Sins which I had blogged about before you can find what I thought about it here – SDS It was definitely my main inspiration behind this project.


Technology Used: Javascript and Jquery 1.7.2

I loved their interface the first time I saw it.Screen Shot 2015-02-08 at 19.51.42The first page we see is a loading page. This is unusual for website now a days because usually the wifi is fast enough to load the website quick enough. I feel like it is used here to tell the audience what the project is rather than the loading.


Screen Shot 2015-02-08 at 19.51.48The Interface is also unusual. We can see some sort of order here of different boxes. Each box has some media in it and they are categorized by the sin. They have done this very cleverly by not having all the same ones in one place but spreading them out. I like how we are introduced to seven characters straight away. I want to know what they have to say even more when I see what sin is written on them. I do think the man with glasses for pride looks quite creepy and they should have used a different screen shot for that one.

Screen Shot 2015-02-08 at 19.52.43
Another clever thing is the way they are categorised so you hover over one box for example sloth and all the other sloth related videos will light up so show themselves to the user. This would be an interesting way for me to categorise my stories to have them highlight in some way so they don’t have to be beside each otherScreen Shot 2015-02-08 at 19.52.50

When you click into the box you want the boxes in relevance are brought together in a way that is very pleasing to the eye and you can see written stories and some polls regarding the subject. I like how you can also see the other boxes in the background. This is where I got my inspiration for my original prototype. I think I would like to keep that idea with me for my finished interface and it gives the interface dimension. Screen Shot 2015-02-08 at 19.55.34
Screen Shot 2015-02-08 at 19.55.12


I love the movement with the interface so when you hover to the left or right the interface moves with you so there is no pesky scrolling involved. Again you can see the dimension, it makes the project look bigger and it’s also very artsy looking. Every piece of work is laid out like it would be in a gallery or some sort. Even the small icons are very clear which is important for viewers with site issues.


Screen Shot 2015-02-08 at 19.56.39

The one thing that strikes me when I see this interface is the navbar. It is one if the first things we learn in website design. As a CDM student I should have been able to find it easily but I couldn’t. I didn’t think it had one until I pressed the button by accident. It should definitely be more clear but I suppose it works with this interface as the layout pretty much says press a box and then look at all these other boxes you can see which are related to the same thing so I suppose maybe they wanted a neat nav bar that pulls from the side.


What I am taking from this interface is everything really. It is my favourite site to go back to when I want inspiration. Also the sound plays a major factor in this website. I should start thinking about incorporating that to my site.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s