Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype

⭐ 22/10/2024 - 5/11/2024 (Week 8 - Week 10)

🎀 Yan Zhi Xuan | 0369425 

💜 Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media | Taylor's University

📚 Task 2: Interaction Design Planning and Prototype

---

TABLE OF CONTENTS

1. Lectures

2. Instructions 

3. Task 2: Interaction Design Planning and Prototype

4. Feedback

5. Reflection

---

1. LECTURES

Week 1:  No class

Week 2: Adobe Animate (Exercise 1)

In our Week 2 lesson, we learned how to draw with Adobe Animate. We were trained on how to utilize several tools, including the form tool, selection tool, and paint bucket tool. After the tutorial, Mr. Shamsul asked us to draw a boat for practice purposes.

Fig. 1.1 Screenshot of Work. (Week 2, 1/10/2024)

Week 3:  Adobe Animate (Exercise 2)

This week, we studied the fundamentals of using animation with Adobe Animate. During class activities, we worked on producing the shapes moving and using ease-out and ease-in effects at various keyframes. At the end of class, we had a half-hour consultation session with Mr. Shamsul to go over our Project 1 possible topic.

Week 4:  Adobe Animate (Exercise 3)

In class, we learned how to use shape tweening. In shape tweening, we studied how to draw a vector shape at one specific frame in the Timeline and then change that shape or draw another shape at another specific frame.

Fig. 1.2 A-D. (Week 4, 15/10/2024)

Fig. 1.3 Spider. (Week 4, 15/10/2024)

---

2. INSTRUCTION

Doc. 2.1 Module Information Booklet - Advanced Interactive Design.

Introduction:

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.

Requirements:

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.)

---

3. TASK 2: INTERACTIVE DESIGN PLANING & PROTOTYPE

My selected topic: Spider-Man: Across the Spider-Verse (Movie Promotion):

Fig. 3.1 Concept Development.

Fig. 3.2 Moodboard.

Fig. 3.3 Visual References.

Fig. 3.4 Visual References of Website.

Further Concept Development

Typography

I selected 3 font families: Bebas Neue, Montserrat, Roboto

Fig. 3.5 Selected Font Families.

Colour Scheme

Fig. 3.6 Colour Scheme.

Wireframes

Fig. 3.7 Wireframes Overview.

Fig. 3.8 Wireframes.

Links to More Visual References/ Information:

1. Spider-Man: Into the Spider-Verse - UX/UI Concept

2. Spider-Man: Across the Spider-Verse

3. Spider-Man: Across the Spider-Verse Movie Webpage

4. Wikipedia 

5. Spiderman: Across the Spider-Verse Movie Poster Design

User Flowchart

Fig. 3.9 Flowchart.

Fig. 3.10 Prepare the images and design elements.

Fig. 3.11 Work Progress #1.

Fig. 3.12 Work Progress #2.

Fig. 3.13 Work Progress #3.

Fig. 3.14 Work Progress #4.

Fig. 3.15 Work Progress #5.

Fig. 3.16 Work Progress #6.

Prototype Overview

Fig. 3.17 Prototype Overview.

Final Submission

1.Wireframes: https://www.canva.com/design/DAGUQHv5aVI/PxDFzZ10Hm7N0rxdGbhbNw/view?utm_content=DAGUQHv5aVI&utm_campaign=designshare&utm_medium=embeds&utm_source=link

2. Prototype on Figma: https://www.figma.com/design/1JaWMJHCACdl3djlrM0rWA/Spiderman-Interactive-Web?node-id=0-1&t=xUSjYINCmkCq8oMT-1

3. Planning and Prototype Slude: https://www.canva.com/design/DAGWuK6wgVE/D9Re8xfzsS6UVaUN0ZghPg/view?utm_content=DAGWuK6wgVE&utm_campaign=designshare&utm_medium=embeds&utm_source=link

4. Presentation Video: https://youtu.be/xxC9W9EdGTU

The following is my final planning and prototype on Figma:

Fig. 3.18 Interactive Web Planning & Prototype.

Presentation Video

Click HERE to watch the presentation video.

Fig. 3.19 Interactive Web Planning & Prototype Presentation Video.

---

4. FEEDBACK

Week 8

Mr. Shamsul said if my selected topic is movie promotion, if it is the new movie, then I can proceed with my proposal with wireframes, flowcharts, and UI/UX designs.

Week 4

Mr. Shamsul said we need to work on our visual design and start planning their website’s interactive design elements and features.

---

5. REFLECTION

Experience

Working on Task 2 was a creative challenge, as it pushed me to think beyond static visuals and focus on how users interact with the website. Planning animations and interactive elements made the process exciting and gave me a deeper appreciation for how movement can enhance user engagement.

Observation

I realized how crucial it is to design interactions that feel natural and purposeful. Small details, like smooth transitions or hover effects, can make a big difference in user experience. Referencing animations from other designs helped refine my ideas and set a quality standard. 

Findings

This task taught me the value of blending design and functionality to create engaging, user-friendly websites. It was a rewarding experience that sharpened both my creative and practical skills.