Change in Animation on Landing Page

The animation that I had on the landing page consisted of two animation files that played right after each other. The first animation assembled into a letter H while the second one appeared seamlessly after the first one and made the letter smaller and moved it to the top of the page which was then followed by the rest if the words of the question. However, after showing my pilot website in class, I was recommended to remove the section where the letter H gets smaller and moved to the top corner. From the feedback, I learned that the assembling of the letter part looked professional while the movement of this letter that followed looked distracting and too abrupt. I completely agree with the comments as I myself have been struggling a little with making the two animations flow together. Thus, I decided to work on that particular aspect of the animation.

It is hard to see but the slideshow below was the initial animation that I used.

This slideshow requires JavaScript.

By experimenting with and tweaking the Adobe Edge file, I managed to change the animation. The animation on the landing page now assembles the letter H, disappears and then the whole ‘How’ word appears in the top corner, followed by the rest of the words in the question. Thus, I removed the transition and now made it more clear and I think it words much better visually as the space between the two animations allows the eyes to concentrate more and made the general effect of the animation on this page better.

The slideshow below shows that the word appears all together right away.

This slideshow requires JavaScript.

Additionally, I have also received feedback that the H looks more like a logo rather then an introduction to my quiz. I haven’t really looked at it that way before but now that it has been pointed out to me, I think it would interesting to experiment with the landing page next term and maybe make the beginning letter of each word assemble together? I have made a mock-up of how that would look (image below). I think that this could potentially make the page too busy so this might seem too distracting to the audience, however, I think that this could also work if done right. Thus, I think next term, I will try and experiment more with the animation on the landing page.

screen-shot-2016-12-08-at-15-28-17

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s