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:
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.
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. Many 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.
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.
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.
The Storm begins as the stories get deeper.
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.
It’s nice to listen to each story altogether as you don’t hear the full story on the site which is annoying.
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.
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.
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.
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?
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.
This was about the High School Year Book. I like the way he used different images to show the audience who Richard Clouteier is.
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.