Advanced Interactive Design: Task 2
22/10/2024 - 5/11/2024 (Week 8 - Week 10)
Lim Yu Xuen / 0359676
Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Task 2: Interaction Design Planning and Prototype
TABLE OF CONTENTS
✿ Lectures
✿ Feedback
INSTRUCTIONS
Find out other information about this module below
Module Information
TASK 2: INTERACTIVE DESIGN PLANNING & PROTOTYPE
Task Requirements
Work on visual design and start planning website's interactive
design elements and features.
- unlike traditional static website, interactive design has animations
- 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
Submission
-
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.g Figma link, Miro link, etc.)
Figure 3.1 Concept Development
Figure 3.2 Moodboard
Figure 3.3 Visual References
Figure 3.4 Visual References of Websites
Further Concept Development
1. Typography
I selected the font family: Roboto
Figure 3.3 Selected Font Family
2. Colour Scheme
Figure 3.4 Colour Scheme
3. Lo-Fi Wireframes
Figure 3.5 Wireframes Overview
4. User Flowchart
Figure 3.6 User Flowchart
Prepare the images and design elements
For my High-Fi Wireframes, I decided to do it in the same
figma file but on a seperate page. This page consists of all
the pages that can be seen in the website.
1. Design Process
Figure 3.7 Design Process
Figure 3.8 Final Design of High-Fi Wireframes
When designing on Figma, I referred to the Nookipedia (Wikipedia
of Animal Crossing) for its' content and information about each
season. From here, I copy and pasted all the images of the
critters and imported them into my Figma file for each pages'
design.
Nookipedia:
link here
Figma file:
link here
2. Prototype Overview
Figure 3.9 Prototype Overview
3. Final Submission
- Final Proposal: link here
- UI Kit: link here
- Low-Fidelity Wireframes: link here
- High-Fidelity Wireframes (Prototype): link here
- Planning & Prototype Slides: link here
- Presentation Video: link here
Planning & Prototype Slides
Figure 3.10 Planning & Prototype Slides
Presentation Video
Figure 3.11 Task 2 Presentation Video
FEEDBACK
Week 3
Mr Shamsul mentioned that the Animal Crossing topic is good, he then
said that its better to be more detailed as my idea was very broad. It
took me a few trial and error and decided to go for the topic Seasons
as it is very specific and should be easy to have all the information
needed.
Week 4
Mr Shamsul said we need to work on our visual design and start
planning the website's interactive design elements and features.
REFLECTION
In this task, it was difficult at first to come up with a kit and
finalise my UI Kit for every detail and design to be the same style.
After getting the hang of it, I got used to designing on Figma since
I had to figure out a few new tools, this helped fasten the process
of designing as well. I tried importing the Figma file into Adobe
Illustrator, in hopes it will be easier for me to import from there
to Adobe Animate. But then, I figured that exporting each element
into PNGs from Figma is the easiest.
While editing on Figma, I tried to think of ways I could animate a
few elements which can help me with coming out with my animation
ideas for my final proposal. From here, it gets smoother and I can
finally start the process on Adobe Animate.