Advanced Interactive Design - Final Project & E-portfolio

⭐ 22/10/2024 - 5/11/2024 (Week 8 - Week 10)

🎀 Yan Zhi Xuan | 0369425 

💜 Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media | Taylor's University

📚 Final Project 

---

TABLE OF CONTENTS

1. Instructions

2. Final Project

3. Feedback

4. Reflection

---

1. INSTRUCTION

Doc. 1.1 Module Information Booklet - Advanced Interactive Design.

Introduction:

Students will synthesise 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.

---

2. FINAL PROJECT: INTERACTIVE WEBSITE

My selected topic: Spider-Man: Across the Spider-Verse (Movie Promotion):

Fig. 2.1 Concept Development.

Fig. 2.2 Moodboard.

Fig. 2.3 Visual References.

Fig. 2.4 Visual References of Website.

Further Concept Development

Typography

I selected 3 font families: Bebas Neue, Montserrat, Roboto

Fig. 2.5 Selected Font Families.

Colour Scheme

Fig. 2.6 Colour Scheme.

Wireframes (Task 1)

Fig. 2.7 Wireframes Overview.

User Flowchart (Task 1)

Fig. 2.8 Flowchart.

Prototype Overview (Task 2)

Fig. 2.9 Prototype Overview.

Interactive Web Planning & Prototype Presentation Video (Task 2)

Click HERE to watch the presentation video.

Fig. 2.10 Interactive Web Planning & Prototype Presentation Video.

Work Progress of Final Project

Fig. 2.11 Prepare the images and design elements.

Fig. 2.12 Import the images into Figma to do the prototype and do the interactive button as examples.

Fig. 2.13 Work Progress #1 on Figma.

Fig. 2.13 Work Progress #2 on Figma.

Fig. 2.13 Work Progress #3 on Figma.

Fig. 2.14 Work Progress #4 on Figma.

Fig. 2.15 Import the images into Ai for ease of importing into Adobe Animate.

Fig. 2.16 Work Progress #1 in Adobe Animate.

Fig. 2.17 Work Progress #2 in Adobe Animate.

Fig. 2.18 Work Progress #3 in Adobe Animate.

Fig. 2.19 Work Progress #4 in Adobe Animate.

Fig. 2.20 Work Progress #5 in Adobe Animate.

Fig. 2.21 Work Progress #6 in Adobe Animate.

Final Submission

1. Netlify Folder: https://drive.google.com/drive/folders/1vidcFZf3Ptl-MKF_QRIQoRM7fhwYF8fM?usp=sharing

2. Publish Website: https://spidermanbeyondtheuniverse.netlify.app/

3. Demo Navigation Youtube Link https://youtu.be/bFt4C4ftXuo

Click HERE to watch the final outcome demo navigation video.

Fig. 2.22 Demo NavigationVideo.

Fig. 2.23 Published on Netlify.

---

3. FEEDBACK

Week 11

We needed to organize files and folders and maintain a well-organized file structure for your project. For example, use separate folders for js, and assets like images or fonts. This keeps your project clean and manageable.

Week 12

Test for Responsiveness: Before finalizing, check your site on various devices (mobile, tablet, desktop) to ensure it's fully responsive and user-friendly.

Week 13

Add Comments in Code: Include clear comments to explain the purpose of your code sections. This will help others (and future you) understand your work better.

---

4. REFLECTION

Experience

Working on Task 3 using Adobe Animate was a highly creative challenge, as it required me to think beyond static visuals and focus on dynamic, interactive elements. Planning and implementing animations like transitions, hover effects, and motion paths pushed me to explore the tools in depth, making the process both exciting and rewarding. It gave me a deeper appreciation for how movement and interactivity can elevate user engagement and storytelling on a website.

Observation

I observed how important it is to design animations that feel seamless and intuitive to the user. Small details, such as easing effects or timing adjustments, can significantly impact the overall experience. Exploring Adobe Animate's features, like keyframing and motion presets, allowed me to experiment with different styles and refine my ideas. Additionally, referencing animations from established designs provided inspiration and helped me maintain a high standard of quality throughout the project.

Findings

This task underscored the importance of merging creative design with functional interactivity to create engaging, user-friendly websites. Adobe Animate proved to be an excellent tool for bringing concepts to life, allowing for precise control over every aspect of movement and timing. It was a rewarding experience that not only sharpened my technical skills but also enhanced my ability to think critically about user interaction and engagement.