Landing Page Experiments

Screen Shot 2016-12-04 at 1.32.08 AM.pngAfter creating the previous animations for this page, I then created the rest of the letters needed for this page on Illustrator. Creating these new letters took significantly less time then it did with the letter H because I had already previously developed a method on how to create them and I also knew how to use all the tools. After this, I then added all of these letters into Photoshop and created the title. I added text to the letters and got the finished design of the page. I then individually saved each word as a png file and inputed that into the second animation on Adobe Edge.

screen-shot-2016-12-03-at-11-35-44-pm

screen-shot-2016-12-04-at-1-44-05-am

screen-shot-2016-12-04-at-1-46-39-am

I experimented with different ways of displaying the text on the page but I think the first one looks the best so I decided to use this as my final structure of the text on the landing page.

Additionally, I was also curious to see whether animating the letter D instead of the letter H could be better as the main emphasis of this quiz is on the word ‘Digital’. Thus I repeated the same process, which took faster this time!

Screen Shot 2016-12-04 at 12.28.22 AM.png

I animated the letter D in Adobe Edge and made it look like it assembles in front of the user. Animating this was successful however, when I combined that with the other text, I realized that it looked too distracting and it made the animation look as if its assembling from all over the place because I had the assembling D animation first and then the word ‘How’ appeared after with the rest of the text. This looked very confusing and hectic and I decided that it will be better to animate the latter H instead. I will thus proceed with implementing that into Muse.

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