Advanced Interactive design- Final Project/ Completed Thematic Interactive Website

26.6.2024 - 1.8.2024 / Week 09 - Week 14

Zhao GuanMei/ 0363166
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project: Completed Thematic Interactive Website 

---

Index

Final Project: Completed Thematic Interactive Website

Final Completed Thematic Interactive Website

Feedback

Reflections

Further Reading

---

INSTRUCTIONS

---

Final Project : Completed Thematic Interactive Website

 
In last task , I already completed initial design and layout in Figma to define the overall look and feel of the website. Included navigation structure and page layout.

Adobe Illustrator

 I’ve designed all the necessary buttons and graphical elements in Adobe Illustrator, ensuring they are visually appealing and match the website's theme.

outline view in Adobe Illustrator

Adobe  Animate

I’ve imported the Illustrator assets into Adobe Animate for further development. I’m organizing layers and grouping elements to prepare for animation.

Timelines in Adobe Animate

I’m working on creating an animation for the “loading” text effect to enhance user engagement while the page is loading.

I' m developing interactive button animations and linking them to navigate to the next page. I want to make sure the button animations draw attention.

buttons timeline

I’ll review and organize the animation timelines in Adobe Animate to ensure all animations are synchronized and transition smoothly between pages.

button animations

Final Completed Thematic Interactive Website

Netlify link :https://advfinal-guanmei.netlify.app/

Adobe animate fla file: Google Drive_Advanced Interactive Design

---

Feedback

Week 11 

The fonts could be more interesting. Try using ones that have a playful or soft design to make the overall look more friendly and visually appealing.

Add some background music that fits the theme. Make sure the volume is good and it loops nicely so it doesn’t interfere with the user experience.

Week 12 

Add simple animations to the buttons, like enlarging, changing colors, or bouncing. This will make it easier for users to see and click on them.

Week 13

Make sure all pages and interactive elements are consistent in style and function. Too many changes can make it confusing for users.

---

Reflections

Overall Experience

Working with Illustrator to draw all the patterns was an intensive and rewarding experience. I invested a lot of effort into creating detailed and visually appealing designs, ensuring each pattern contributed to the overall aesthetic of the project. Mr. Shamsul’s guidance was invaluable throughout this process, providing me with the essential skills and knowledge needed to apply effective design principles to the webpage.

Findings

Using Adobe Animate to create complex animations presented significant challenges. The intricate process required careful attention to detail and a deep understanding of the software, pushing me to enhance my animation skills and problem-solving abilities.

Observations

Designing the entire webpage was a time-consuming task that demanded a high level of dedication. Balancing the visual elements and ensuring a cohesive look throughout the site took considerable effort, but the final result was worth it.

---

Further Reading

https://www.atakinteractive.com/blog/what-is-web-design-the-ultimate-guide-to-website-design

source :Smashing Magazine

Overview: This article covers the main aspects of interactive web design, including design principles, technical applications, and real-life examples. It uses many images and examples to help you understand how to make your website more interactive and better meet user needs.

Notes:

1. Basics of Interactive Design:

   •  Interactive design (IxD) aims to make the user's experience smooth and enjoyable when using a website. It focuses on how users interact with the site.
   • Key Elements: Includes webpage responsiveness, user feedback, ease of use, and design consistency.

2. Design Principles:

   • Consistency: Design elements should be consistent throughout the site to help users build expectations.
   • Usability: The design should be simple and easy to use, avoiding user confusion.
   • Feedback: Users need clear feedback after performing actions, such as visual changes or sound prompts.

3. Dynamic Effects and Animations:

   • Enhancing Interaction: Use animations and dynamic effects to capture users' attention and provide feedback. Animations can make the website more engaging and interactive.
   • Technical Implementation: Use CSS animations and JavaScript for creating animations. Ensure animations don’t affect webpage performance and maintain a consistent design style.

4. Responsive Design:

   • Adapting to Devices: Design should work well on various screen sizes, including desktops, tablets, and phones.
   • Flexible Layouts: Use flexible layouts and media queries to adjust page elements based on different device screen sizes.

5. Real-Life Examples:

   • Case Studies: The article presents several successful interactive design cases, explaining how these designs improve user experience. Each case includes design images, user feedback, and design analysis.
   • Design Insights: Learn from these cases how to apply similar interactive design techniques and strategies to your projects.

Application Suggestions:

• Experiment and Implement: Try using different dynamic effects and animations in your designs to see their impact on user experience.
• Analyze and Improve: Use user feedback and data analysis to understand the effects of interactive design and continually improve it.
• Refer to Examples: Study and draw inspiration from successful design cases, integrating effective design elements into your own work.

---