Landing Page Experiments

When I first started working on the landing page I knew that I wanted to use the same color palette as the one that I have experimented with and have already chosen for the Home Page. This was done in order to keep the website visually consistent and by using the same colors, I could support the flow of the narrative of the website.

Earlier in the term I discussed a website that incorporated lines in it’s visual design. This website inspired me to create a similar effect and I wanted to use this concept of lines and animate them in a way that would make the letters look like they are assembling in front of the user. I think this will go well with my aim of making the user aware of the medium which will then also pave the way for slowly making them aware of sharing data online.  This aesthetics thus simulates an almost raw/ behind-the-scenes type effect which makes it look like you’re getting a glimpse into how websites are usually created before they are shown to the public as already assembled with hight quality graphics that attract the attention of users.  Also, I think that this method will allow me to create interesting graphics that will appeal to my target users as they are a group that likes ‘‘cool graphics,’’ balks at reading large blocks of text, and is impatient and easily bored’ (Djamasbi, Siegel and Tullis, 2010, p.310). Therefore, I want to create interesting graphics while at the same time make the landing page very clear and simplistic in its use.

The most challenging part was actually starting working on this as I had to determine what program would be the best to use to accomplish this task. I started thinking about this and I thought that my options were to use Photoshop to draw out the letter and then create the animation by using photoshop again to create a gif. Another option was to create the letter in Adobe Illustrator and then animate it in Adobe Edge Animate. I started experimenting with using Photoshop for this task mainly because I wasn’t very comfortable with using Illustrator, I had used it before but I knew that I wasn’t as proficient with it as I am with Photoshop. Thus I started making the letter on Photoshop but I soon realized that it was a very difficult task to achieve as it was very hard to draw these diagonal lines and make them evenly spaced and straight. Therefore, I wasn’t happy with how the letter looked visually.

Then, I became curious and wondered if I could achieve this faster and make the process more efficient by creating the letter in Illustrator.

I knew that Illustrator is based on vector graphics which are more associated with digital visuals then Photoshop because it is based on pixels. Additionally, I knew that Illustrator is usually used in game-based illustration graphics. It also works better with animation and programs like Edge Animate. This then seemed like the most appropriate choice of program for this specific aspect of my website. I was dreading using it but decided that it was worth experimenting with. I watched a couple of youtube videos to remind myself of all the buttons and the navigations and began creating my letter. I soon realized that drawing shapes on Illustrator was way easier and actually produced better results. It took me a while to get used to using this program but after a while I actually started liking working with it. I discovered a feature that allowed me to layer a rectangle over the diagonal lines that I created and increase its lines which then created a perfectly even shape with the lines being completely accurate. The below images show the process of creating the letter H. I experimented with having the middle line in this letter as filled in or lined like the right side of the letter. I eventually decided that it looked better with the lines.

After creating the letter I then had to animate it in Adobe Edge. Since I wanted each line of the letter to move into the frame, I had to copy and paste every single line within the letter from Illustrator to Edge. This was very time consuming and had to be extremely precise as it was easy to get confused with all the lines. I think this ended up to be the most challenging part. Additionally, I initially made the lines in the pink section of the letter H quite thick and when I finished copying all the elements and then animating them, the finished result did not look and feel right. Images of working with the thick lines on Adobe Edge are below.

Because I didn’t like how the above lines looked, I had to go back into Illustrator and create new thin lines. I then had to once again copy and paste every single new line into Adobe Edge. Animating this was also quite difficult as I had to make sure that each line was coming from an opposite direction and because all the lines are so similar, I kept messing it up. However, after hours of dedication I finally managed to successfully finish animating this letter. This is what the finished part looked like:

screen-shot-2016-12-01-at-21-09-28

After completing this part of the animation, I then needed to make this letter zoom out, once it completed assembling and then move to the right in order for the rest of the ‘How Digital are you?’ title to appear. This was once again challenging because I had so many individual parts within the file that I couldn’t then change the scale of the general letter by selecting all the parts. However, I decided that the best way to approach this problem was to create a second animation file that would begin playing right after the letter assembles in the first animation. Thus, I used the illustrator file of the general letter and inputed it into Edge. Then, I made sure that the letter was in the same position on the page as the first animation, changed the scale of the letter and animated it so it moved to the right. And voila! After many many hours spent working on this animation I finally managed to finish it and I also now feel comfortable with using Adobe Illustrator so it was overall a very good experience that I learned a lot from.

I now need to create the rest of the title and input that into Adobe Muse.

Bibliography:

Djamasbi, S., Siegel, M. and Tullis, T. (2010). Generation Y, web design, and eye tracking. International Journal of Human-Computer Studies, 68(5), pp.307-323.

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