Design for Screen: Animating Website

Originally Adobe XD was going to be used to produce this website as this would of allowed for an accurate representation of how the website would work due to the ability to link all aspects of the site together and produce a working prototype so users could interact with the prototype. However upon researching this software I discovered you can't link sections within on the same art-board resulting in the inability to show the navigational aspects of the site due to the use of an infinite scroll as the whole site needs to be on one art board for an infinite scroll to be possible (see figure 1-2). Additionally I discovered that you can't import a video or After Effects file into XD meaning if I were to use XD I wouldn't be able to incorporate the use of animation which is a main feature within the website. Consequently this lead to the website being produced in Illustrator and After Effects. Illustrator was used to develop wire frames and the final design flats with After Effects being used to create the animations within the site and the animation of the site itself.

Figure 1

Figure 2

Animating the website in After Effects allows for a simple representation of how the site will work if it was to be coded. The only limitations of this software is the difficulty in showing the navigation of the site accuratly as users can't click on sections and experiences the site itself. Furthermore it is difficult to regulate the speed of movement whilst showing the website, as each section that moves has to be imported separately making it difficult to match the speed of each frame. In addition it was also hard to show smooth transitions due to lack of experience using After Effects making it difficult to show the link between clicking a specialism (see figures 3-5) and the disappearing of adjectives as well as the 'mix it up' option (see figures 6-7). This would of been possible if Adobe XD could of been used or more time was available to refine my skills using After Effects.  Furthermore it was hard to show the link between clicking the students self portrait which would lead users to their LinkedIn profile resulting in a primitive representation of this link through fading the portrait to show its been clicked on and placing the profile quickly within the animation (see figures 8-10). Despite the limitations of the software I feel a good representation of the website has been created as each aspect is clearly shown (see figure 11).

Figure 3

Figure 4

Figure 5

Figure 6 

Figure 7

Figure 8

Figure 9 

Figure 10