COP Practical: Website Animation

In order to visualise the final website designer more effectively I've animated basic aspects of the website to show how the design would work within the website (see figure 1). Throughout this process I used After Effects to show the movements and button clicks, which are shown then words/section turn bold (see figures 2-3). The only issue when producing this video was the inability to add an accurate curser to move effectively show the movement, if more time was available to become more familiar with the software this could be added. The lack of curser creates some confusion when looking at the Predator section of the website as it was difficult to show the idea that if you hover over the images a description emerges but if you click and focus on either boot you can shop men and women (see figures 4-5). Whilst producing this animation the main aspects that have been manipulated have been position and opacity as this allowed to show the infinite scroll within the website allowing access to the get involved section at all times (see figure 6). Despite these issue the overall animation shows the design of the website effectively, allowing the concept to be shown by animating on small section as this allowed all the features of the design to be showed. Furthermore if more time was available to become more familiar with the software an additional curser could of been added in order to more effectively show certain aspects of the website. 

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6