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.

Design Phase | Website Interface

I have gone back to the Design Phase and am researching the best way to exhibit the stories on the site.



Screen Shot 2015-01-28 at 16.27.37

I like how each different video is iconed by a scene in that video. I don’t like how close they are together. I do like the white text on top of the image.


People’s Stories


Screen Shot 2015-01-28 at 16.31.06


This layout caught my eye because they look like photo frames. I think this is a cool idea, each story could have a different frame and they could be on a wall. Something like this –



Each frame will have media in it portraying a story. When you scroll over each one it would maximise and white writing the the name of the story could appear.



Prototype | Written Story No.1

I got chatting to an American girl on experience project and she told me about her experiences having hirsutism(a condition that makes hair growth on the face). I asked her to send me a full story which she did:

I noticed something was wrong with me in fifth grade, when I started growing stomach and chest hair. I never told anyone because I was embarrassed. Around seventh grade, some kid came up to me, looked under my neck and said ” you have a beard”. I never noticed it until he said something. A few days later, a group of girls also looked under me and said ” oh my god, you DO have a beard”. It was devastating. I started shaving my face every day, which was very uncomfortable and irritated my skin so I would go to school everyday with a red, blotchy neck. I had horrible self esteem and was convinced I was a guy. For years I would spend hours shaving everything to try and feel normal. It stops me from having any relationships, because I can’t handle anymore rejection and judgment. I can go out to town without makeup sometimes because the opinions of strangers do not bother me. I am trying to come to terms with it and I hope I can one day. I have been told I look like a man by multiple people, including my brother. However, because of it, I am learning to be strong. I inform other girls, that despite what society or your peer say, as long as you love you, that’s all that matters. I honestly would not trade my imperfections for anything. Without them, I wouldn’t be who I am today.


I took this story and created my first written story illustration. I would like to do this by using parallax so when you open the story and scroll down the image moves with it or changes. I made up a prototype of this.  The first image is what you see when you open the story the second image is what you see when you scroll down. storyv1_p1 storyv1_p2

Prototype|Splash Page & Home Page

Here is 3 splash page ideas I have. I prefer the first one but I am open to suggestionssplash_page_V3



Here is the Home Page for the site. When you hover over a shape an info box will appear beside it detailing what media is in the shape. Each shapes holds media which when you click it expands and starts to play(see below).pi_home


When you click on a shape that hold thats the media it will expand and come to the centre, when the media begins it will go into full screen mode.







Design Phase |Site Layout

I put a lot of thought into the layout of this project. In a previous blog  I talked about what I thought the home page would look like. I like the idea of having a welcoming page like a splash page that disappears after 4 seconds.

I got thinking about who this project is for, people of all shapes and colors that come to this one place where they view like minded peoples stories and experiences. The idea of people of all shapes and colors got me thinking about having a layout made up of different shapes. IMG_4780 IMG_4785 IMG_4786


I thought the first sketch would be the best because it is made up of different shapes and also each shape could be used to categorise stories that are alike, skin flaw wise.