Interactive Design Final Compilation and Reflection

2024.04.22-2024.08.03

Rachel Yeo Rong Qing / 0368901

Interactive Design / Bachelor of Design (HONS) in Creative Media

Final Compilation and Reflection


CONTENT

Exercise

Project 1

Project 2

Final Project

REFLECTIONS



BLOG LINK

1. Interactive Design Exercise

2. Interactive Design Project 1

3. Interactive Design Project 2

4. Interactive Design Final Project



Exercise

Click here to Interactive Design Exercise.


Task 1 : Exercise 1 - Web Analysis (Week 1)

Website 1

The first website that I choose is CANVAS.

    1. Purpose and Goals

Fig 1.1 Homepage of CANVAS

The purpose of this website is a studio that offering design, branding, marketing and content creation services to clients. The goals of the website is showcasing the agency work and capabilities, providing information about their services and encouraging potential clients to contact them for business opportunities.

    2. Design and Layout

Fig 1.2 Introduction of CANVAS

Fig 1.3 Introduction of CANVAS

The website has use a clean, modern design with a focus on visual content and minimal text. As shown as picture above, the layout is straightforward with clear sections that separate content, guide the user's navigation and only using black and white colors and minimal text. This has let viewers can directly focus on the main point and understand the information easily. 

Besides of that, the website also got a simple navigation bar at the top of the page and it allows user to easily access different sections of the site.

    3. Functionality and Usability

Fig 1.4 Showcase of contact section

Fig 1.5 Showcase of Project compilation

The picture above has shown the pages after I click on the contact and work. The website has includes interactive elements such as clickable sections and buttons to guide users to specific pages. It has prove tat the website is easy to navigate and the contact forms and CTAs are also accessible, it making user easy to get in touch with the studio.


Fig 1.6 Showcase of portfolio (before transition)

Fig 1.7 Showcase of portfolio (after transition)

The picture above has shown the portfolio of this studio and the transition after we point to one of the works. This has make viewers can clearly appreciate the works they done before.

    4. Quality and Relevance of Content

Fig 1.8 Showcase of Project highlights

Fig 1.9 Showcase of reviews

The content of the website is visually appealing with high-quality images that showcasing the studio work. It also relevant to the target audience, providing examples of their work in various industries and highlighting their creative capabilities. They also have a reviews sections to let clients can trust them more.

    5. Performance

The loading time of this website is short and efficiently, this has retaining user interest and preventing bounce rates. The transitions of the interactive section are smooth and attracted to audience especially the play reels button at the home page. Besides that, the website also process well on the mobile devices include the interactive section.

(337 words)

Website 2 

The second website that I choose is Don't Board Me.

    1. Purpose and Goals

Fig 1.10 Home page of Don't Board Me

The purpose of this website is a platform that offer pet care products and services, specifically providing a solution for keeping pets safe and comfortable during owner travel or boarding. It aims to provide information on products and services to keep pets safe and happy during trip.

    2. Design and Layout

Fig 1.11 Design of website

Fig 1.12 Showcase of service that provided

Fig 1.13 Showcase of price list

The website design is simple and using a consistent color scheme which is light color to makes the websites conveys a soft feeling to audiences. The image in this websites all aims to showcase pet care products and services. There is a navigation bar at the top that leads to various sections of the websites. The navigations has state on the top of center and it is clear and easy but the navigation bar will coincide with other image sometimes, this will lead to a decrease in the user experience of using the website.

    3. Functionality and Usability

Fig 1.14 Navigation of booking (before transition)

Fig 1.15 Navigation of booking (after transition)

Fig 1.16 Showcase of reviews (before transition)

Fig 1.17 Showcase of reviews (after transition)

The transition of the website was interested such as Fig 1.14 and Fig 1.15, when we try to scroll the page the information notes will jump up one by one. In this way, the users can be more easy to understand the step to booking their services. The usability of this website are quite strong due to the clear navigation, straightforward layout and the simple process of booking sections.

    4. Quality and Relevance of Content

Fig 1.18 Showcase of service list 

Fig 1.19 Showcase of blogpost

The content of this website are in a good quality due to it clear descriptions and professional images of the products and the services offered. It also relevant to pet owners who wants to explore alternative options to traditional pet boarding, especially whose interested inn keeping their pets with them during trips. 

However, some of the typography might need to be improve a little bit such as the explanation inn Fig 1.18,  the text are too small and don't have any paragraph. This has let the explanations looks like squizz to each others and decrease the readability of viewers.

    5. Performance

The loading time of this website is a little bit long, need to spend some time for loading the image. The transition and the navigation are smooth and it appears to be responsive and works well also on mobile devices.
(349 words)

(686 total words)

Task 1 : Exercise 3 - Web Replication  (Week 3)


Final Outcome



Task 1 : Exercise 5 - Recipe Cards (Week 7)


Final Outcome

Link for viewing the website: https://rachel-recipe-cards.netlify.app/




Project 1 : Prototype Design - Digital resume / CV

Click here to Interactive Design Project 1.

Final Outcome






Project 2: Working Web Page
Click here to Interactive Design Project 2.

Final Outcome

Below are the links to view the website : 

https://rachel0368901-id-project2.netlify.app/



Final Project : Creating A Single Page-Website

Click here to Interactive Design Final Project.

Final Outcome

Below are the links to view the website : 





REFLECTIONS

    Looking back to my journey on this module, I have gained valuable insights into the details of creating engaging and user-friendly digital experiences. Initial tasks, such as redesigning school e-learning systems has emphasized the importance of usability principles such as consistency, simplicity, visibility, and feedback. This project has taught me we need to prioritize user needs and ensure that the platform is accessible and easy for students to navigate and use effectively.

    Moving on to more advanced projects, I have explored the complexities of interactive web design. I learned to incorporate elements like smooth transitions, clear navigation, and high-quality visuals to enhance user engagement. These projects has emphasize the importance of visual appeal and performance, demonstrating how efficient load times and responsive design can significantly improve user experience. By evaluating an existing website and replicating its structure, I have gained a deeper understanding of effective layout, typography, and color schemes, which are critical to maintaining user interest and reducing bounce rates. 

    The final project is particularly illuminating because it has involves comprehensive analysis and practical application. Creating prototypes and fully functional websites has emphasizes the importance of combining aesthetic elements with functionality. This holistic approach not only makes websites visually appealing but also ensures that they meet the actual needs of users. Through these experiences, I have developed strong skills in interaction design, it has equipping me with the knowledge to create compelling and user-centered digital solutions.

            












Comments