Advanced Interactive Design: Final Project
22/10/2024 - 5/12/2024 (Week 8 - Week 13)
Lim Yu Xuen / 0359676
Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Task 3: Completed Thematic Interactive Website
TABLE OF CONTENTS
✿ Lectures
✿ Feedback
INSTRUCTIONS
Find out other information about this module below
Module Information
TASK 3: COMPLETED THEMATIC INTERACTIVE WEBSITE
Task Requirements
- students will synthesis the knowledge gained in tasks 1 and 2 for application in task 3
- students will create integrated visual assets and refine the prototype into a complete working and functional product experience.
Submission
- netlify link
- demonstration walkthrough video
My Selected topic: Animal Crossing (Seasons)
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
Planning & Prototype Slides
Figure 3.10 Planning & Prototype Slides
Presentation Video
Figure 3.11 Task 2 Presentation Video
Work Progress of Final Project
1. Images & Design Elements
Figure 3.10 Images & Design Elements
2. Figma Prototype
Figure 3.14 Navigation Video
Website Screenshots
Figure 3.15 Website Screenshots
FEEDBACK
Week 11
Organize files and folders and maintain a well-organised file structure
for our project. For instance, use separate folders for JS, and assets
like images or fonts. This keeps the project clean and manageable.
Besides that, rename all layers will help keep the project
organised.
Week 12
Before finalising my website, test on different devices to ensure it is
fully responsive and user-friendly.
Week 13
Include clear comments to explain the purpose of code sections. This
helps me understand better.
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.