Advanced Interactive Design/Task 2

21/10/25-16/11/25 | Week 5-9

Myra Elida Binti Abd Azis (0358516)

Advanced Interactive Design | Bachelors of Design (Hons) in Creative Media

Task 2: Interaction Design Planning and Prototype

Module Infomation Booklet

Task 2:

We are required to work on our visual design and start planning on the website’s interactive design elements and features. 

Requirements:
  • Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
  • 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.)
I then started to look on Pinterest for images to use for the overall prototype.


Fig 1.1 Pinterest


Fig 1.2 Downloaded Images

After finding all the images needed, I then began working on designing in Figma.


Fig 1.3 Loading Page


Fig 1.4 Landing Page with Component Used


Fig 1.5 Landing Page

Here is an overview of the wireframes.



Fig 1.6 Wireframes 1


Fig 1.7 Wireframes 2


Final Figma Prototype:

Wireframe Version:




Video Presentation:



Comments

Post a Comment

Popular posts from this blog

Information Design / Final Project

Image
Week 1 - Week 7 Myra Elida Binti Abd Azis / 0358516 Information Design Final Project INSTRUCTIONS INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and software using photography, vector imagery. Design Considerations: ● Organization Principles – LATCH and Content Organization ● Aesthetic Principles – Animation principles ● Cognitive Principles – Principles of visualization Output Expectation: The presentation must be deliberated on, consider each assessment rubric of sorts to your final outcome: ● Show causality ● Multivariate graphics and visua...
Read more

Publishing Design

Image
Week 1 - Week 14 Myra Elida Binti Abd Azis / 0358516 GCD61404 / Publishing Design Module Information Booklet Lectures Publishing Design : Formats (1) Typography Software Recommendation Adobe InDesign is the preferred software for book design; Adobe Illustrator is not suitable due to file size and workflow inefficiencies. Historical Timeframes Reference BC (Before Christ) dates count backward from year 0, CE (Common Era) counts forward; examples include Mesopotamian tablets (~7000 BC), paper invention (179–241 BC), and Quranic parchments dated close to Prophet Muhammad’s time. Mesopotamian Record-Keeping Clay tokens and tablets served as the earliest forms of written records related to accounting and a...
Read more

Major Project 1 (Proposal Development)

Image
 3/2/25 - 19/3/25 / Week 1 - Week 14 Myra Elida Binti Abd Azis 0358516 Bachelors of Design (Hons) in Creative Media INSTRUCTIONS For the first week, my groupmates and I (Maisarah, Sheren, and Nadhrah) made a groupchat on WhatsApp so we easily contact each other and discuss about our project. We had to come up with an innovative concept based on our chosen field of specialization. After a few discussion, we voted on doing a topic about fashion. We then brainstormed a few ideas and decided on doing an interactive fashion zine that shows the Gen Z's fashion trends. We chosen 4 of the current biggest trends : - Y2K - Clean Girl - Vintage/Thrifted - Alternative/Grunge As the zine had to be relatable to our target audience, we decided to gather a few models to be in zine, using their own clothing pieces so that it show what Gen Z's actually wear. We searched for inspiration on Pinterest for references/moodboards. We made a research document to compile our research material as we had ...
Read more