Labels

Advanced Interactive Design - Task 2 / Interaction Design Planning & Prototype



24.4.2024 - (Week 1 - Week )
Chong Hui Yi / 0363195
Advanced Interactive Design / BDCM
Task 2 / Interaction Design Planning & Prototype


Table of Contents


2. Task 2
3. Feedback


INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1MyQGWgV08rAY3uC0H5FnUs6N7kXAeZc1/preview" width="640" height="480" allow="autoplay"></iframe>

Task 2: Interaction Design Planning & Prototype


Requirement


Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

  1. Walkthrough Video presenting the plan and showing the animation examples and/or references.
  2. Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

Progression 

My website theme is about Scottish Folds, and Fig. 1.0 is my mood board. My design concept is flat illustration, with the website featuring some cute and simple illustrations. It will use warm colours such as yellow, orange, and brown.

Fig 1.0 Mood Board

In Task 1, I created wireframes (Fig. 1.1). However, I made some design changes to the Characteristics page and Health Problem page to make the later animations more feasible in Adobe Animate.

Fig. 1.1 Wireframes

For the flow chart (Fig. 1.2), when you enter the website, you'll start on the Home page. Clicking on the heading takes you to the History page. From there, a 'Next' button leads you to the Characteristics page and there are four buttons to access to Details, Temperament, Colour, and Sizes pages. If you want to return to the Characteristics page, you can clicking the cross button. In Characteristics page, clicking 'Next' takes you to the Health Problem page. If you scroll down here, you'll reach the Ending page and  there's a 'Back to Top' button to return to the Home page.

    Fig. 1.2 Flow Chart 
I first drew the background image for the Home Page, featuring a group of Scottish Folds. Their colours and patterns are based on the website https://www.catster.com/cat-breeds/scottish-fold-cat-colors/. After several revisions, I decided to use an oval shape as the background for the heading, as the heading was not visible against the cat background. The oval shape can also serve as a transitional element between pages, with animation reference in Fig. 1.4.

Fig. 1.3 Design process of home page

Fig. 1.4 Animation reference for home page

The History Page was perhaps the most frustrating one for me. As seen in Fig. 1.5, I repeatedly redrew its background because the illustration was too saturated and its style differed from the other pages, which felt odd. 

Besides the illustration, the layout also caused me headaches. At first, I included the word "HISTORY," but later I felt that removing it made the page cleaner. Finally, in Fig. 1.6, I drew a background that I believe matches the overall illustration style better. For the animation, it will resemble Fig. 1.7, which is an animation I created in Figma.

Fig. 1.5 Design process of history page (1) #1

Fig. 1.6 Final history page (1) #2

Fig. 1.7 Rough animation for history page

Next, Susie (a white Scottish Fold) will appear. I'm concerned that the bottom right corner of Fig. 1.8 might look cluttered, and I need a yellow & orange background for a smooth colour transition, as the following pages will use this colour scheme.

For the animation, the background orange rectangle (bottom) will fill the page upwards, go to the Characteristics page.

Fig. 1.8 Design process of history page (2)

On the Characteristics Page, I initially had only three buttons, but later I added the button for the Sizes page as well. The animation on this page primarily involves clicking those four buttons, and the animation reference can be seen in Fig. 2.0.

Fig. 1.9 Design process of characteristics page

Fig. 2.0 Rough animation for characteristics page

I feel that if I‘m going to illustrate the physical characteristics of a Scottish cat, I should use more realistic images rather than highly simplified illustrations. Therefore, I've changed the illustrations on the Sizes page to match the style of the Details page (Fig. 2.1).

Fig. 2.1 Illustration reference #1

Fig. 2.2 Details page


Fig. 2.3 Illustration reference #2

Fig. 2.4 Design process of  sizes page

Among all the pages, Temperament page is my favourite and the most enjoyable one. The inspiration came from the website https://popcat.click/. In Fig. 2.5, you can see that I've transformed the original cat into a Scottish Fold to fit the theme, but the overall colour scheme remains similar to the original cat.

The animation on this page is that when you hover over any pop cat, its mouth will open, popping up text along with the sound of the pop cat. The animation reference can be seen in Fig. 2.6, and then Fig. 2.7 shows my attempt to recreate this animation effect in Figma.

Fig. 2.5 Temperament page

Fig. 2.6 Animation & sound effects reference for temperament page

Fig. 2.7 Rough animation for temperament page

The information regarding Scottish Fold colours and patterns was referenced from https://www.catster.com/cat-breeds/scottish-fold-cat-colors/. Then, I depicted them in individual circles, with a total of 19 different colours.

Fig. 2.8 Colour page

Fig. 2.9 represents one of my design ideas for the Health Problem page, but I'm concerned it might be challenging to implement in Adobe Animate. So, I revised it to look like Fig. 3.0, where the heading animation resembles Fig. 3.1. When you scroll down, you'll directly reach the ending page, with a "back to top" button allowing you to return to the homepage.

Fig. 2.9 Health Problem page first attempt

Fig. 3.0 Health Problem page second attempt + ending page

Fig. 3.1 Animation reference

I have a lot of backups because I'm afraid I might lose my previous designs, and I also fear that I might need them for reference later. This has made my Figma workspace very cluttered. However, for the Final Interaction Design Planning & Prototype, I provided a Figma link that is well-organized.

Fig. 3.2 Design process in Figma

Besides that, since I'm not very familiar with Figma's animation features, I only added some basic transitions and animations, you can refer in Fig. 3.3. 

Fig. 3.3 Animated prototype in Figma


Final Interaction Design Planning & Prototype

Figma Link Prototype: 

YouTube Presentation Link: https://youtu.be/FP8QvWeCeJ0 

Fig. 3.4 Presentation Slide

Fig. 3.5 Presentation Video


FEEDBACK

-


REFLECTION

I think Task 2 is very interesting. Although the design was constantly changing during the process, I still enjoyed the process of designing. I'm not very proficient in using Figma, but Task 2 gave me the opportunity to learn how to use Figma's animation features, which was really fun! Besides that, It makes a prototype look like a real website, and I find that fascinating.

The biggest challenge I faced was time. My prototype required a lot of illustrations, and I encountered issues with inconsistent illustration styles, which led to a lot of redrawing and consumed a significant amount of time, making my schedule very tight. Additionally, while designing the prototype, I also had to consider whether I would be able to implement these animations using Adobe Animate later on, so I tried to use the animations I had learned in class. Finally, I hope to be able to implement the prototype design in Task 3. If that's not possible, I'll make adjustments as needed at that time.
Labels:

Comments

Post a Comment

Popular Posts