Task 2: Interaction Design Planning and Prototype [Advance Interactive Design]
Task 2: Interaction Design Planning and Prototype
01.10.2024 - /Week 6- Week- 8
Rafa Maritza Hertrian [0364958]
Bachelor of Design (Honours) Creative Media/ Taylor's
University
DST 60804/ ADVANCED INTERACTIVE DESIGN
INSTRUCTIONS
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:
-
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.)
Bachelor of Design (Honours) Creative Media/ Taylor's University
DST 60804/ ADVANCED INTERACTIVE DESIGN
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.
-
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.)
RESEARCH
Concept Idea References: Japanese ads
PROCESS
Prototype Part 1
In the first attempt at making the prototype in Figma, I tried to follow the wireframe I had created for the proposal, but it turns out that I had changed the layout a lot so that it would look simpler and more readable.
Loading Page
Homepage
"Get to Know Garfield" Page
"The Creator" Page
Garfield's Family page
Garfield evolution page
Overlay evolution pages
Homepage
After discussing the model with Mr. Shamsul, I realized that the pages do not look consistent because there is no fixed model of the heading of each page. Mr. Shamsul suggested coming up with one style for the header and applying it to every page.
Prototype Part 2
In the second prototype, the pages "The Rise of Garfield", "The creator", "Garfield's Family", "Evolution", and "New Movie" all have the same header. I also try to make most of the pages have similar layouts which is the grid system.
After discussing the model with Mr. Shamsul, I realized that the pages do not look consistent because there is no fixed model of the heading of each page. Mr. Shamsul suggested coming up with one style for the header and applying it to every page.
Prototype Part 2
In the second prototype, the pages "The Rise of Garfield", "The creator", "Garfield's Family", "Evolution", and "New Movie" all have the same header. I also try to make most of the pages have similar layouts which is the grid system.
FEEDBACK
Week 6Make sure to have a concept for the website.
Week 7Make the design more consistent. For the heading, use the same typography, color, and design so it looks more unified.
Week 8-
SUBMISSION
Prototype Process in Figma
Prototype flow
Figma Link: https://www.figma.com/proto/EXJk9RgQ1kwYKBoARTxg7L/Garfield-Prototype?t=rGz0qeLnAtwKokXL-0&scaling=contain&content-scaling=fixed&page-id=0%3A1&node-id=78-88&starting-point-node-id=54%3A5
Video Presentation
REFLECTION
Experience
Observation
Findings
Comments
Post a Comment