Labels

Advanced Interactive Design | Task 2: Interaction Design Planning & Prototype

22.10.2024 - 17.11.2024 / Week 5 - Week 8
Khu Ying Ying / 0357306
Advanced Interactive Design / DST60804 / Bachelor of Design (Honours) in Creative Media
Task 2: Interaction Design Planning & Prototype

TABLE OF CONTENTS





INSTRUCTIONS

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

TASK 2: INTERACTION DESIGN PLANNING & PROTOTYPE

Week 5 (22/10/2024)

Requirements:
  1. Students must focus on visual design and begin planning interactive website elements and features. Unlike static sites, plans for interactive design with animations should include layout visuals and sample animation references.
  2. Students can build their animation/user-reference animation to demonstrate the intended idea.

Submissions:
  1. A walkthrough video presenting the plan and showing the animation examples/references.
  2. Include online posts in your e-portfolio as part of your reflective studies, with links to any resources used in developing the plan.
    • Figma link. 
    • Miro link.

Progress:

Adjustments & Contents

After reviewing my Task 1, I made a few adjustments and changes, including adding navigation to the website, combining the 'Movie Plot Overview' (essentially the synopsis and trailer) with the Homepage, refining the color schemes, and updating the typography.

For navigation, the user can click on the 'Menu' button located in the top-right corner, they can access a menu with links to key pages:
  • Main Sections: Homepage, Character Profiles, Logan’s Life Journey, and Disclaimer.
  • Awards Logos: Featuring the awards and nominations of the movie.
  • Back Button: Allowing users to easily navigate back to the previous page.

For the color scheme, I focused on ensuring consistency throughout. After reviewing my Task 1, I selected colors that reflect a rough, modern, and straightforward aesthetic, aligning with the bold and minimalistic theme:
  • Background: Black Colour (#000000).
  • Text: White Colour (#FFFFFF).
  • Hover Effect: Muted Yellow (#C4A000).

For the typography, I decided to reselect the font for the body text. Instead of Helvetica, I switched to Roboto after a comparison, as it offered better readability and complemented the design more effectively.
  • Title: Bebas Neue.
  • Heading: Open Sans.
  • Body Text: Roboto.

Then, I began by listing the contents for the updated version in Task 2. 
Figure T2.1: Contents, Week 5 (22/10/2024)

I also made some changes to my flowchart and wireframes from Task 1 to make it clearer according to the contents I added, before proceeding with the prototype in Figma.
Figure T2.2: Flowchart (Updated), Week 5 (22/10/2024)

Figure T2.3: Wireframes (Updated), Week 5 (22/10/2024)
Figure T2.4: Wireframes (Updated), Week 5 (22/10/2024)

Week 8 (17/11/2024)

Final Submission of Task 2: Interaction Design Planning & Prototype

Figma Prototype: Link
Figure T2.5: Final Submission of Task 2 - Figma Embeded Link, Week 8 (17/11/2024)

Miro Flowchart: Link
Figure T2.6: Final Submission of Task 2 - Miro Embeded Link, Week 8 (17/11/2024)

Figure T2.7: Final Submission of Task 2 - Presentation Slides (PDF), Week 8 (17/11/2024)

Figure T2.8: Final Submission of Task 2 - Walkthrough Video (MP4), Week 8 (17/11/2024)

REFLECTIONS

Experience
Throughout this task, I learned the importance of keeping designs simple and clear. I improved my flowchart for clarity, planned the Figma prototype, and added navigation and the 'Movie Plot Overview' to enhance user experience. Overall, it taught me how to efficiently develop on concepts while balancing aesthetics and practicality.

Labels:

Comments

Post a Comment

Popular Posts