ADVANCED INTERACTIVE DESIGN/TASK 2: DESIGN PLANNING & PROTOTYPE
20/05/2025 - 10/06/2025 / Week 5 - Week 8
Marsya Arisa Binti Mahmud / 0359684
Advanced Interactive Design/ Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Interaction Design Planning and Prototype
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/15RtAXVV0YGqVkjX9JhpHtlbuEgrzH9Fi/preview" width="640" height="480" allow="autoplay"></iframe>
EXERCISES
Week 6 - 27/05/2025
In Week 6, I learned how to animate buttons and add a hover effect. I was introduced to the button effect page that allows you to choose its state and a way to add lines of code to give its action. This lesson felt highly important because I can apply this to my website later on.
Figure 1.1: Exercise Week 6
Week 7 - 03/06/2025
Mr. Shahmsul taught us how to create an animated introduction page for a website that leads to the main page. I learned new tools like masking and how to have sequence of texts appear naturally.
Figure 1.2: Exercise Week 7
TASK 2: INTERACTION DESIGN PLANNING AND PROTOTYPE
Revised Flow Chart
In regards to my previous flow chart, I noticed that the 'Music' page, where the band's released music would be displayed is already within the 'Journey' page. I find that the page needed to be removed as it felt unnecessary. The concept of this website meddles with simplicity, therefore removing the page reduces the amount of information audiences would have to digest.
Figure 2.1: Revised Flow Chart
Icons & Elements
For the icons, I used https://www.svgrepo.com to export existing ones such as social media icons and navigation icons, then imported it to Adobe Illustrator to further customize. The complete icons and buttons are developed using Figma.
Figure 2.2: Icons
The band has an existing logo that utilizes these stars to establish their branding, I recreated them on Adobe Illustrator to give the website a sense of personality.
Figure 2.3: Additional Elements
I finalized my buttons and elements on Figma, ultimately this is how it would look like on my website. I incorporated colors within my palette that fits the overall aesthetic I am going for.
Figure 2.4: Buttons on Figma
Figma Prototype Process
Designing my prototype on Figma, I had to analyze a way to put my wireframe to good use now that I can see how my website would look like. There were some placements I felt would better suit compared to my wireframe, I ended up slightly changing my layout to make it more visually appealing. After I got the gist of the main layout, I continued with the rest of my prototype.
Figure 2.5: Prototype of Main Pages
FINAL SUBMISSION
Website Elements on Google Drive: https://drive.google.com/drive/folders/1VZO3-0S_UzlCcWFr5Pvpuahuw2KEKQWz?usp=sharing
Prototype on Figma: https://www.figma.com/design/l910Wd4y45Vp97EYOtVqeP/Advanced-Interactive-Design-Wireframe?node-id=0-1&m=dev&t=ZWobOVWpGNwtIbXI-1
<iframe src="https://drive.google.com/file/d/1FNbbXJoPpOwDsqxgH15iZa_w5_GiINt4/preview" width="640" height="480" allow="autoplay"></iframe>
VIDEO PRESENTATION
FEEDBACK
Week 7 - 03/06/2025
Does not have to be too complex. Refer to example website to utilize interactivity with usability in a way that does not make it too complicated and easy to navigate.
REFLECTION
Observation
While working on the prototype, I realized how important it is to keep things simple. At first, I included a separate ‘Music’ page, but then I noticed that the same content already existed in the ‘Journey’ page. Since the overall concept of the website focuses on minimalism, I decided to remove the extra page. This made the flow feel more natural and less overwhelming for users, which I think fits the vibe I was going for.
Findings
One thing I found interesting was how much of a difference small details make. Adding hover effects and animations to buttons made the site feel more interactive and fun to use. Curating my idea on Figma helped me see how design choices affect user experience. I also ended up changing a few layout placements from my wireframe, just because they looked better once I saw everything come together.
Experience
Overall, this task was a really good experience for me. I got to explore different tools, like customizing icons in Illustrator and building out my prototype in Figma. It was fun seeing my ideas come to life and being able to adjust things as I went. Getting feedback reminded me not to overcomplicate the site, and to keep usability in mind. This process definitely helped me grow more confident in designing interactive websites.
