Task 2 : Interactive Prototype development

 

May 10, 2026

12/5/2026 - 23/6/2026 (Week 1-Week 10)

Wang Xinyi 0388464

Interactive Design / GCD 60904

Task 2 : Interactive Prototype development

Table of Content :

I. Lecture

2. Instructions

3. Process Work

4. Final Outcome

5. Feedback

6. Reflection
1.Lecture

This task mainly requires us to develop and implement the fully functional website we have conceptualised in our earlier design stages. During our class, Ms Mia walked us through tutorials on W3 Schools, where we learned core knowledge of HTML and CSS coding fundamentals, as well as basic JavaScript syntax and layout techniques. These practical coding lessons helped us understand webpage structure and styling rules, which was incredibly helpful for us to build up the core framework and interactive features of our website.

In terms of accurately realising our original design and improving the user experience, Ms Mia gave us a lot of detailed, constructive feedback and practical suggestions. These included enriching the overall visual styling and consistent CSS design system, simplifying and optimising the checkout and payment process to make it more intuitive and user-friendly, and developing a new function that allows regular users to create and manage their own artist portfolios. This new feature transforms the platform into a dual-role system, enabling visitors to switch between general customers and independent creators, forming a two-way interactive community.

2. Instructions

Assignment Brief

Module Information

3. Process Work

Website Concept vs. Final Website Build:

Homepage-before

Homepage-after

Artists-before

Artists-after

 

Projects-before

Projects-after

Today's picks-before

Today's picks-after

Artist Profile-before

Artist Profile-after

Contact artist-before

Contact artist-after

Create order-before

Create order-after

Go for pay-before

Go for pay-after

Payment Successful-before

Payment Successful-after

Creation Process-before

Creation Process-after

ArtworkCompleted-before

ArtworkCompleted-after

Support-before

Support-after

My account-before

My account-after

New Features

A personal artist profile has been added to the My Account page.

Users can edit their personal artist profiles.

The profile can be displayed normally alongside other artists on the Artists page.

Users can also click the profile to preview it and check how it is displayed.

A restriction has been added to prevent users from placing orders with themselves.

Projects on the Projects page can now be clicked to view more details.

Users can also publish their own projects.

More artists and projects have been added, providing a wider variety of styles.

Division of Work
Zhao Jie: Webpage development, material provision, website testing

Wang Zihan: UI design, material provision, website testing

Wang Xinyi: Visual design, material provision, website testing

4. Final Outcome

Final Presentation Recroding :

ArtPicks Presentation Slide:

5.Feedback

Week 4 :

Ms. Mia advised us to plan the overall website structure, sitemap, and page flow before starting the development process. Based on her feedback, we organized the main sections of the website and clarified how users would move between the homepage, artwork categories, artist profiles, project pages, and account pages.

Week 5 :

Ms. Mia suggested that we add more complete content to the website and make sure that all pages, buttons, and navigation links were properly connected. She also reminded us to test the website regularly so that we could identify broken links, incomplete pages, and other functional issues during the development process.

Week 6 :

We began building the basic framework of the website using Visual Studio Code (VS Code). During this stage, we created the main pages and started arranging the basic layout, navigation bar, artwork sections, artist profiles, project section, and account section.

Week 7 :

We continued improving the website framework and adjusted the layout and structure of each page. We also added more website content, refined the visual design, and worked on connecting the main pages and functions to make the website easier to navigate.

Week 9 :

After presenting our website prototype, Ms. Mia pointed out that several important functions were still incomplete. At that time, users could not search for content, and only one artist profile could be opened. She suggested adding a search function so users could search by keywords, artist names, and types of artwork.

Ms. Mia also asked us to make the filter function usable instead of using it only as a visual element. She suggested adding more detailed art and artwork categories, such as Illustration, Character Art, Anime, Fantasy, Cover Design, Badge Design, Merch Design, 3D Modeling, Oil Painting, and Abstract Art, so users could find suitable artists and artworks more easily.

Week 10 :

Based on Ms. Mia’s feedback, we continued improving the Project and Account sections. For the Project section, Ms. Mia explained that a project should only be created after the client and artist had communicated and confirmed the commission details. Both sides needed to reach an agreement before entering the project stage. The Project page could then be used to manage the project information, progress, communication, and final delivery.

For the Account section, we improved the profile editing function and allowed users to upload or change their profile pictures. Before the final submission, we continued testing the website, fixing functional issues, improving the page connections, and refining the overall content and user experience.

6.Reflection

Experience :During this project, I was mainly responsible for providing visual content and supporting the design of the website. I contributed many of my own artworks, handmade products, and 3D model images to be displayed on the platform. These works were used as examples of artist portfolios, artwork categories, and project content, which helped make the website look more complete and realistic.

I also participated in designing the page layouts and organizing the visual content. I worked with my group members to decide how the artworks, artist information, project details, and other elements should be arranged on each page. I also contributed to the colour scheme of the website to make sure that the pages looked consistent and suitable for an art commission platform.

Besides the visual design, I worked with my group members to plan the website flow and improve the connections between different pages. We discussed how users would browse artworks, view artist profiles, communicate with artists, create projects, make payments, and track their commissions. We continued improving the website based on feedback and testing.

Observations : During the design process, I observed that the quality and variety of visual content had a strong influence on the overall appearance of the website. When more artworks, handmade products, and 3D model images were added, the platform looked more active and professional. Different types of artwork also helped users understand that the website could support artists with different styles and skills.

I also noticed that page layout was important for presenting artworks clearly. If too many images or text elements were placed close together, the page became crowded and difficult to read. Therefore, the size, spacing, alignment, and arrangement of each element needed to be carefully considered.

Another observation was that colour consistency helped connect the different pages. Since the website included many sections and different artwork styles, a consistent colour scheme was needed to maintain a clear visual identity. The colours also needed to support the artworks instead of distracting attention from them.

I also observed that the website flow needed to be simple and logical. Even when each page looked attractive, users could still feel confused if the buttons and page connections were unclear. Working with my group members helped us improve the sequence of the commission process and make the platform easier to understand.

Findings :From this project, I found that visual content plays an important role in building the identity and credibility of an art platform. Original artworks and product images can make the website feel more authentic and help users understand what kinds of creative services are available.

I also found that good website design requires a balance between visual creativity and functionality. The layout, colours, images, buttons, and information all need to work together. A visually attractive page is not enough if users cannot easily find information or complete the commission process.

This project also helped me understand the importance of teamwork. Different members contributed to different parts of the website, and we needed to communicate regularly to make sure that the visual design, website functions, and user flow were consistent.

Through feedback and repeated improvements, I learned to pay more attention to the user’s perspective. I became more aware of how users might view the artworks, navigate the pages, and understand the commission process. This experience improved my skills in visual design, page layout, colour selection, teamwork, and user experience design.