Advanced Interactive Design | Task 2: Interaction Design Planning and Prototype
20/10/24 - 17/11/24 | Week 4 - 8
Iman Mikudim | 0338004 | Section 2
Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Planning and Prototype
SECTIONS
| Feedback
INSTRUCTIONS
1. Brief
Students are required to work
on their visual design and
start planning their website’s
interactive design elements
and features. Unlike
traditional static websites,
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:
-
Walkthrough Video
presenting the plan
and showing the animation
examples and/or
references.
-
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.)
2. Process
Fig 1.1 Logo & Icons Process | Week 7 (10/11/24)
Rather than relying on existing game images, I chose to create custom illustrations for the icons and logo. These designs were referenced from the iconic logos and symbols in The Witcher game.
Fig 1.2 Website Prototype Process (Figma) | Week 8 (15/11/24)
The Figma link above showcases the complete prototyping process, with comments beneath the frames highlighting the changes and progress made based on feedback from Mr. Shamsul, as well as personal adjustments I implemented.
3. Final
Rather than relying on existing game images, I chose to create custom illustrations for the icons and logo. These designs were referenced from the iconic logos and symbols in The Witcher game.
Fig 1.3 Final Website
Prototype (Figma) | Week 8
(15/11/24)
Fig 1.4
Walkthrough Video
Presentation Slides (Canva) | Week 8 (15/11/24)
Fig 1.5 Walkthrough Video
Presentation Video (YouTube) | Week 8 (16/11/24)
Fig 1.5 Walkthrough Video Presentation Video (YouTube) | Week 8 (16/11/24)
FEEDBACK
Week 6 (29/10/24)
General Feedback:
-
Finalize prototype.
-
Plan the animations you
want to include.
Specific Feedback:
-
Add the Witcher logo throughout the pages.
-
Add sticky copyright footer for all pages.
-
For monsters page, add a title “monsters”.
REFLECTIONS
After gaining more knowledge about Adobe Animate, I developed a clearer understanding of the types of illustrations and animations I could create based on my familiarity with the software. Although I found the software challenging to use, I focused on incorporating animations that I felt were achievable within the limited time frame, while keeping my expectations realistic. I dedicated considerable time to experimenting and refining my designs to ensure they not only looked appealing but also maintained simplicity for seamless user interactions.
