Labels

Advance Interactive Design/Task 2: Interaction Design Planning and Prototype

20/10/2024 - 6/11/2024 / Week 5 - Week 7
Janice Marie Eng Chia Hui /0361521
Advance Interactive Design/Bachelor of Design in Creative Media / Taylor's University 
Advance Interactive Design/Task 2: Interaction Design Planning and Prototype

Table of Contents:

Instructions


Task

To-Do list:
  • Plan out and design your entire prototype 
  • Add in animations or find animation reference
  • Record a presentation of your animation plan

Flow Chart

I had updated my flow chart based on what features or information I wanted to include in the webpage.

Figure 1.1 Updated Flow chart (5/11/24)

Assets

I started making the assets in Illustrator. I first imported all my wireframes into Illustrator and then made the assets. 

Some assets were shared within all the pages so I could reuse them. These assets were mainly the cloud assets that I downloaded from Freepik. Additionally, there was also the logo and menu button.

Initially the original logo design was just yellow, but that had low contrast with the white background. So I decided to add in a blue outline to help contrast it better

Figure 1.3 Cloud assets + menu button

Figure 1.2 Logo before (left) vs after (right)

Landing Page

For the landing page, I based it on AG (the band's) latest album cover as well as their promotional pictures for their international tour. I took inspo from the meaning of their latest album where they said they wish to tell the world that AG has landed (link to article source). So for the landing page, I wanted to show they are soaring and about to land.

I initially designed it with solid colours instead of a real image of the sky. However, after getting feedback from my friends and lecturer, I decided to use an image of the real sky as the background. 

Additionally, I also made a button that says 'Take Flight?' appear when users hover over the girls. This button allows them to head to the next page, About Them.

Figure 1.4 Inspiration pic for the sky as a background for the webpage

Figure 1.5 Before (left) vs After (right) of the landing page design (5/10/24)

Figure 1.6 Animation on the home page (5/11/24)

About Them Page

In the About Them page, I wanted it to look like a billboard, where if you click on the girls, the billboard screen will change to the girls. For this page, I was inspired by how they always put famous people's faces on billboards so I decided it would be a cool concept to do for the webpage.

Initially, the design of the billboard page where you can read more information about them was just a blank colour bg. However, I took reference from this website and how they designed their elements and decided to implement those designs into mine.

Figure 1.7 Inspiration behind the background design. The background has text that can barely be seen(5/11/24)

Additionally, the original picture I had used for the screen where you can read more info about the girls did not fit what I had in mind. I tried out some animations with the image, but I did not like it. So I switched the image to another picture, while still maintaining some animations. 

Finally, for the animations in these pages, I planned on making a circle with the girls name appear behind them when you hover over them. In the Read More section about the girls, I planned on making their names switch from their English name to their Japanese name. Finally, I made it so that the buttons on the screen would animate a bit when you hover over them.

Figure 1.8 Evolution of the read More about them screens, with the one highlighted in yellow being the final design (5/11/24)

Figure 1.9 Animation in the About Them Page (5/11/24)

Tour Locations Page

The concept for the tour location page was basically AG flying to their tour locations on a map. Initially, I had wanted to include past tour locations that AG did, but after some feedback from the lecturer, I changed it to their future tour locations. I also inserted in a link to the official ticketing website. 

Figure 1.10 Drafting out the tour locations from the band's tour list. I decided to go with 4 locations and tried to make these locations as far from each other as I could (8/11/24)

Additionally, the background of the map was originally going to be a solid block of yellow. However, to make it consistent with the other background design, I decided to add in text that said 'NIPPON CALLING TOUR 2024' as well. 

Figure 1.12 Final background used  for the map bg to make the design consistent with the other screen (8/11/24)

For this page, I initially planned on using a vector image of the map of Japan I found online. But after putting it in, the picture did not really suit my theme. So I decided to trace the image in Photoshop. Additionally, I wanted to add in some Japanese motifs to the page, so I traced out the waves from the painting 'The Great Wave off Kanagawa' by Hokusai. 

I don't usually like tracing, but I'm on a time crunch so just know that some stuff here are traced. 

Figure 1.13 Original map asset (image traced)(black) vs traced map asset (blue) and traced image of the wave pattern from the drawing The Great Wave off Kanagawa (8/11/24)

I also had a pop-up designed. It was initially a square, but I felt like it did not fit my theme well as it was too rigid. So my friend, Joey, gave me some helpful advice such as 'Why not try making the image a circle'. This got me thinking as I had used a lot of circles in my webpage so I started experimenting and landed on something I preferred. 

Figure 1.14 Inital Pop-up design (left) vs final pop-up design (right) (8/11/24)

Finally, I decided to make the waves move back and forth to show some movement. I also had planned on making the 4 band members in a small plane and making it fly to the location that the users click on, but upon consideration, I felt too lazy to make the asset and to animate it later on. So I took it out. 

Figure 1.15 Final animation of the 'Tour Location' page (8/11/24)

Latest Album Page

For this page, I based it of the band GORILAZ webpage. Or their old webpage as their new one now doesn't have this feature. Their old webpage had a TV where the channel could be switched and you could listen to their music and watch the music video at the same time.

There weren't many changes made to this page as I knew how I wanted it to look already. 

Figure 1.16 Final Animation of the 'Latest Album' Page (8/11/24)

Menu Screen

For the menu screen, I wanted to use the marquee text animation that I have used all over my website. So I made the jump links animate when hovered over. 

Figure 1.17 Final Animation of the Menu screen(8/11/24)

Transition screen

I was given feedback to make a transition screen between screen as the change was very abrupt. I already had a plan to made a loading screen of sorts (not really loading but like an animation that players when you first load onto the webpage), so I just used that animation as my transition screen as well.

The transition screen was based on AG's music video. 

Figure 1.18 Final transition screen animation (8/11/24)

Final Work

Figma Link

Fima Prototype

Presentation Slides

Interaction Design Planning and Prototype by Janice Eng

Presentation Video


Feedback

Week 6
  • For the billboard, the lights you can take it out as it seems unnecessary.
  • It seems like a lot of things right now, but since your concept is maximalism you can keep it maximum
  • Make sure your animation is consistent throughout the design (if you use a bouncy animation, you must use a bouncy animation throughout).
  • You can go with the real sky background one.
  • You can make the landing page elements move a bit, and you can consider adding additional elements, but not too much
  • For the about the page, you can make it a circle text hover behind them when the mouse hovers over them since your concept has some circle 
Week 7 
  • When the webpage switches screens, it changes very abruptly, you can try adding in a transition screen. 
  • You can leave it at 3 pages cause right now you seem to have enough content.
  • For the blinking transition, you can add multiple frames and edit them one by one. Doesn't has to be too complicated. 

Reflection

I learned a lot about how to use Figma to animate during this task. I also learned that Figma shares some similar features with Adobe Animate such as the masking and symbol function. 

Other than that, being able to plan out your animations beforehand really helped me organize my thoughts and process. 

Throughout the entire task, I was trying to keep thing simple, down to basic animations that can be don't in Adobe Animate to make life easier for me later on. Of course, I still wanted it to look 'unique'. I did that by making my own assets. 

For the future task, I would need to start planning our how I would want to organize the layers in Adobe Animate.  

Comments

Post a Comment