Investigate the uses of web animation

Banner ads: banner ads are located on most websites on the web to advertise a certain thing like a product or company selling a product. Banner ads are used to try and get your attention to the certain thing they are trying to sell. Sometimes, when you place the mouse onto the banner ad, the ad will rollover and sometimes could take over the entire page. They do this to open the image bigger so you can see the ad more clearly. All of the banner ads are put onto a website to hopefully sell the product, but it costs money to put an advertisement on any website. It’s one of those times where you have to spend money to make money. The banner ads are all to grab your attention for the main reason but, the website they add it to, is given money so that the company can add a promotion to their site.

For example, I found this screen shot from the popular shopping site eBay. If you look to the right of the page, it shows a banner ad for a VIP showing to see famous band Linkin Park. The banner ad opens a new page, but doesn’t replace the home page for eBay. This is a perfect example of a banner ad because it shows everything that it is advertising which is a live VIP showing of the band, which you can purchase. Once the mouse touches the banner, it turns into an animated banner too. I wasn’t expecting this but it was even better than just a normal banner ad. The banner pulled out and spread across the page to show more information about the concert.

Animated Interface Elements: an animated interface element is something which is found on a website which doesn’t stay as a still image, it moves, but obviously it’s much more than that. When a website contains a piece of animated material it makes the site look more professional, but it’s also more fun for the user to go on. The animated part attracts a more diverse audience as well as being something which looks attractive.

For example, I went onto the Converse All Stars website. The website is a fully animated interface which is just full of content of a user can play about with. One of the main things which caught my eye was the home page a few days ago when the home page had this on its page.

These are print screens of the home page. They were all animated and changed slide every few seconds or so, or the user could even choose to click to the next page if they wanted to. It just demonstrated how the user was in control of the website rather than it being the other way around.

Another element of the website was the ‘design your own’ page. This was a page where the user could create a pair of their own Converse and buy them if they wanted to. The whole page though is completely interactive for the user. There isn’t one piece on their which the user can’t control or click on. But what surprises me is the actual amount of animated content on the page. The whole shoe designing process is completely animated and is completely quick to load up.

Linear and interactive animations: on a website with animated elements or just animation, it can depend on two things; one, the website is completely linear or two; the website is completely interactive and it’s up to the user to do what they want.

With a linear website, it means the website runs on a straight path to what it wants you to see, because linear means ‘from start to the finish’. But an interactive website is one that doesn’t run on a path, it just lets the user do whatever they want.

Looking back at the Converse website again, this is an example of a completely interactive website that doesn’t take you on a straight path. It starts with a home page which you just choose which path you want. As you can see from the image, each of the squares is separate places of the website in which you can visit to view. Even the top and bottom texts are interactive to use.

Now, an example of a linear website is one that runs on a straight path and doesn’t let you control the website fully. The image to the left is the starting screen of The Simpsons official website. The starting image is of the iconic doughnuts that main character Homer eats. The doughnut spins till the website is ready to load up. The reason the website takes so long to load up is due to the fact the website is fully made from Adobe Flash. There is a lot of content to load up. The next part is a video that you watch before it takes you to the menu. You can skip the video if you want but it wouldn’t explain how the main menu came together. This part is linear because there was no choice of how to start to the website, the website just took you to the main menu so you could play around with the various parts of site. The image to the left is the menu which appears once the video has finished. To explain very shortly, the website is linear because it takes you from the loading menu which is the beginning, to the main menu, which is the end.

Promotion: promotions on websites are like attractions that are supposed to catch your eye, just like banner ads too. Promotions work in a slightly different way. Promotions are for things that are on an offer like for example ‘two for the price of one’ would be a promotion on a website. The image to the side is perfect for what I’m trying to explain. You see these kinds of things in supermarkets all the time, but on websites they are just jumping out for you to click.

Now promotions can just be laid on a page doing nothing whatsoever but that usually doesn’t work or grab your attention. An animated promotion though grabs your attention straight away when the page loads, especially if it’s the only thing that’s moving on the page.

Sometimes a website doesn’t even need to advertise anything, it advertises itself. For example the BMW website does what it intends to do, which is advertising BMW. The website as you can see by the image has self-promoted the types of models they are selling but also advertises London Olympics 2012. The way BMW has presented the website is quite clever. The home page is laid out in an animated slideshow so the user is able to see each of the cars which are for sale. Basically, BMW doesn’t need to advertise in anyway, the website does it for them and just the name itself sells cars.

Instruction: When a website contains instructions on its website, it’s to help the user on the website get around the site. Instructions are in fact everywhere we go in life, they always follow us. With websites, it’s no different. I researched many different animated websites with instructions on how the site works and I found one that presents this perfectly.

This website is called Duplos, which is a website created by Richardo Mestre. The website has many different instructions on what the site is about when you load the page up. Info bars, work, Facebook, twitter and so on. The website is dedicated to this man and everything that goes on in his life. The website is fully instructional for what you are looking for. Although, which is interesting, the website is in a different language. But it is translated into English with a word that is similar to the English word. For example, the image to the left shows a word called ‘Quodis’. The word at first seemed unexplainable to me, but because of the speech marks sticking out of them, they are explained as what they are. This one is the place the famous man works at and it even tells the user what the place works with, which is web design and front end development.  These are instructions also on the website to how to get around to what you want to look at. The whole website is completely instructional when you think about it because it’s all just instructions to what you are looking for, and then leading to another instruction to where to go.

Information: Information on an animated website is everywhere. A website has information everywhere on a page, there’s no escaping it. Going back to the Simpsons website, this specific website contains thousands of pieces of information to run with the show. There are even specific pages to get the information from.

First of all there is this. This is the ‘About’ section on the website which tells the user all about the history of the Simpsons, from the beginning of the shows history to the present day, which is all the information a user could want from a website. The website just pushes information onto straight away as you enter the website, with text and iconography. The spinning doughnut at the starting page is always remembered as Homer’s iconography.  The text is just filled with information about everything you would need to know about the Simpsons.

There is even another page which fills the user’s brain with information about each of the characters that is in the show. Literally each page just contains vast amounts of information to do with the 20 year old show. The information is all interactive as well; every single piece on the website is just asking to be clicked too. The website is quite amazing for information. It’s everywhere.

Entertainment: for entertainment purposes, web animations are what they were built for. What I mean by this is web animations for entertainment is a very simple concept, it doesn’t take much whatsoever. Again, referring back to the Simpsons website. Everything about the website is interactive and standing out for the user to press. The website contains games, videos, downloads and even a shop where you can buy items to do with the show.  It is the perfect entertainment website. Just look at the image to the right. Each of the pages contains more and more interactive stuff to keep anyone entertained for hours.