Website –

From doing some interface research I knew I wanted a very plain site, basically just a place to hold my animation. I did not want to just upload it to Vimeo and link people to it from there, it is more professional to have a site.
After looking and testing out many different themes I choose the invictus theme.  It had the option of autoplay video background which is what I wanted and it is also responsive. I then started editing the theme,  deleted some code from the header.php that i did not need any more – logo and the nav bar. I then downloaded a plugin called wp splash page that i used to make my splash page with the introduction video. I tried to edit it so that after the splash page the next page comes up but you have to press the next button.11256329_10205789250864215_1165282528_o11241293_10205789250464205_226263500_o11232416_10205789250704211_116790956_o
When I tried to upload my videos to my wordpress gallery it would not allow me as they were too big, the max they allow is 16mb which is nothing in relation to video. So I embedded my Vimeo videos. They however were not HD so I am using Youtube to embed the animation. Atleast I know it will load quickly and be in HD.

Website Template Ideas

I started looking at some templates for my website. I want the site to be very simple, I want it to hold the animation in full screen with a play button. I have researched some templates that hold videos in the home page. My site will basically be one page. When you go onto the site the background is a video(full screen) with moving graphics, over that to the left there will be a short description of the project (splash page). The user will then press play when it is all loaded. The animation will then play.

Some templates that I am taking inspiration from are: Shot 2015-05-06 at 20.15.40

Screen Shot 2015-05-06 at 20.18.35

Screen Shot 2015-05-06 at 20.19.34

Screen Shot 2015-05-06 at 20.20.46

Screen Shot 2015-05-06 at 20.34.15

Interface Design | Interactive Documentaries | Where I went Right



Technology Used: Javascript and Jquery

I found this interactive documentary on The Guardian’s website, they say –

Anyone can change everything, but to be successful you need to make the most of the time you have. From the battle for the open web to comet landings, via polar expeditions and a giant diplodocus, celebrated innovatorsTim Berners-Lee, Maggie Aderin-Pocock, Ranulph Fiennes and Alice Roberts provide unique insights into the formative moments that have shaped their remarkable careers.


The Interface is video as background with text on top. The Nav Bar is down the bottom and as you hover over each option it starts to gives you a snippet of the video almost like each option in the nav bar is a trailer for what is to come when you click into it. This is a really clever idea.

Screen Shot 2015-02-13 at 09.17.07Screen Shot 2015-02-13 at 09.17.15Screen Shot 2015-02-13 at 09.17.29

When you click to the person you want to listen to their video starts to play. You can easily skip the chapters if you just want to hear about a certain part of the interview. This was done in ‘The Next Day’ also. I don’t like this because why would you want to skip a part of the story? Surely you would get lost. Maybe for this site it is more of a design thing than a functional thing.Screen Shot 2015-02-13 at 09.16.35Screen Shot 2015-02-13 at 09.19.16 Screen Shot 2015-02-13 at 09.19.35 Screen Shot 2015-02-13 at 09.33.07Many of the shots for each interview are close up of the face and mid shots. The quality and lighting is amazing. I get a feel for each character by the light in the video. The space scientist being shot in a darkish room with a blue hue makes me think space which is what she is interested in. The explorer being shot in a classic English home with memorabilia of his explorations gives the viewer a sense of the person.


In the first chapter of each video they show a picture of themselves at a poignant moment in their life. I think this is a great way to show the subject when they are younger rather than using footage of them or old pictures being popped up on the screen. It also gives the subject a chance to explain what the picture is about. This would be useful is my subjects were to bring old pictures and talk about one that is the most important to them. The director must have printed of the pictures himself or got them to print them off because they all seem to have white borders.Screen Shot 2015-02-13 at 09.44.57



Interactive Documentaries | Interface Design | A Journal Insomnia


Technology used: Jquery and Javascript


Insomnia is a website about 4 peoples story with insomnia. I found it strange because you pick the persons story you want to listen to then you have to book an app to see it. I thought it was going to be live or something but it;s not. It’s the person talking about their insomnia and you can press a button which makes the picture all warped or multiply. I think they are supposed to make the viewer feel like an insomniac. It didn’t work.


I did like the beginning of this website when we are introduced to the four faces. The way they are laid out is really effective. 4 people with different faces but one common problem. I would love to incorporate this idea into my project. The theme is quite dark and black but it does work for this topic.


Screen Shot 2015-02-12 at 21.12.24 Screen Shot 2015-02-12 at 21.12.28Screen Shot 2015-02-12 at 20.56.00Screen Shot 2015-02-12 at 20.56.11Screen Shot 2015-02-12 at 20.57.13Screen Shot 2015-02-12 at 20.57.26 Screen Shot 2015-02-12 at 20.58.57Screen Shot 2015-02-12 at 20.59.22

Interface Design | Interactive Doc | The Next Day

Link :

technology used: Javascript and Jquery

This Interactive video is about 4 people who tried to commit suicide and why.

It is a really nice piece that uses their audio and animation of a house. From beginning to end a part of audio plays from each person then you choose what story you want to hear next. The illustrations change when the speaker talks. It is all revolved around a house. It starts off and its a calm day and it ends being stormy. It changes as the stories going on conveying how the people feel.

Screen Shot 2015-02-12 at 18.57.59 Screen Shot 2015-02-12 at 18.59.41 Screen Shot 2015-02-12 at 19.01.04 Screen Shot 2015-02-12 at 19.01.57 Screen Shot 2015-02-12 at 19.02.11 Screen Shot 2015-02-12 at 19.02.34 Screen Shot 2015-02-12 at 19.03.54 Screen Shot 2015-02-12 at 19.04.39 Screen Shot 2015-02-12 at 19.05.14

After each person speaks for 40-50 seconds you pick another topic to hear from the stories.
Screen Shot 2015-02-12 at 19.08.40

The Storm begins as the stories get deeper.

Screen Shot 2015-02-12 at 19.09.06

The storm calms down at the end.


There is a nice touch at the end when you can see an illustration of each person(if it is real or not). When you listen to their stories you imagine what you think they would look like then you see what they do look like.

Screen Shot 2015-02-12 at 19.09.41


There is also a graphic novel version of this which is really cool. I think this would have worked well to if it was a video. They could pan around to different scenes while the audio plays.Screen Shot 2015-02-12 at 19.10.51 Screen Shot 2015-02-12 at 19.13.47


It’s nice to listen to each story altogether as you don’t hear the full story on the site which is annoying.




Interface Design | My Provence


I wanted to look up websites that have unusual interfaces. I came across this french webiste called my provence. It’s basically for locals and tourists to explore the site and see what they can get up to in Marseilles.


The homepage struck me as very unique. The site activates your arrow buttons to navigate the site but you can also use your mouse. The Background changes as you move from north-west to west etc.

Screen Shot 2015-02-11 at 22.41.43

The whole white text over an image is very popular right now. I usually don’t like it but I like how they used it here because they didn’t put a line underneath the top words. This is something for the tourists to go and see so you can navigate left or right to view picture or videos.

Screen Shot 2015-02-11 at 22.41.54

This is how they have laid out the images and videos for this particular tourist spot. I like how simplistic it is but I would also get annoyed going over and over to see more pictures. I would rather have them in a grid with borders and pick the ones I want to see.
Screen Shot 2015-02-11 at 22.42.03 Screen Shot 2015-02-11 at 22.42.10 Screen Shot 2015-02-11 at 22.42.16

This is the navbar I guess you would say. When you hover over the circle the different parts gets bigger as you hover. It is a good way to separate the information and also give the viewer a view of the whole area. I like the actual animation here but I don’t like the design. It is too blue and feels very washed out. They could have used more dark blues even to contrast different sections?Screen Shot 2015-02-11 at 22.43.10 Screen Shot 2015-02-11 at 22.43.16 Screen Shot 2015-02-11 at 22.43.18 Screen Shot 2015-02-11 at 22.43.21

Interface Design | Interactive Doc | Pine Point

Technology Used: Javescript and Jquery


Pine point is an interactive documentary about a place called Pine Point. It was once a family mining town it is now nothing. The documentor goes back to revisit the town he once visited when he was younger to see it changed dramatically. It wasn’t the town he once loved. He documented it using old footage of the town and its inhabitants. He then used text and graphics to completed the story.


Screen Shot 2015-02-12 at 18.08.17

This was about the High School Year Book. I like the way he used different images to show the audience who Richard Clouteier is.

Screen Shot 2015-02-12 at 18.07.04

Screen Shot 2015-02-12 at 18.06.51


This is one of the ways he laid video into the site. The design on the video matching the rest of the design on the site. Screen Shot 2015-02-12 at 18.06.01


Using video in the background and graphics in the foreground is a good way to use old footage to fit your scene/story. Screen Shot 2015-02-12 at 17.56.39 Screen Shot 2015-02-12 at 18.10.32

Many of the stories he tells are in text like the above and you can flick through different pictures and video that are used as the background. I like this idea of having text and picture so the viewer can chose what picture they want to see and flick through it if they don’t like it. Screen Shot 2015-02-12 at 17.56.11 Screen Shot 2015-02-12 at 17.56.09 Screen Shot 2015-02-12 at 17.55.57 Screen Shot 2015-02-12 at 17.55.54
Screen Shot 2015-02-12 at 17.55.35