Interactive Design - Task 2: Interactive Prototype Development
5.5.2026 - 15.7.2026 (Week 4 - Week 13)
Interactive Design / Bachelor of Design (Hons) Creative Media
Task 2: Interactive Prototype Development
Cheyenne Liew Khye Yean / 0378330
TABLE OF CONTENTS
1. Tutorials
2. Instructions
3. Process Work
3. Process Work
4. Feedback
5. Reflection
5. Reflection
1. TUTORIALS
Canva Template to Website
Figure 1.1 Canva Template and Prompt, Week 5 (12/5/2026)
Figure 1.2 Code Output, Week 5 (12/5/2026)
Figure 1.3 Website Outcome (No Hover and Hovering), Week 5 (12/5/2026)
CSS Grid
Figure 1.4 CSS Grid, Week 5 (25/5/2026)
ID Attribute
Figure 1.4 ID Attribute, Week 5 (25/5/2026)
Bookmark ID
Figure 1.5 Bookmark ID, Week 5 (25/5/2026)
Figure 1.6 Jump Bookmark, Week 5 (25/5/2026)
Javascript
Figure 1.7 Javascript, Week 5 (25/5/2026)
On/Off Light
Figure 1.8 Light On and Off, Week 5 (25/5/2026)
Figure 1.8 Code for Light, Week 5 (25/5/2026)
2. INSTRUCTIONS
Figure 2.1 Module Assignment Briefs
3. PROCESS WORK
Figure 3.1 Task 1 Proposal, Week 4 (5/5/2026)
For this task, we (as a group) had to develop our previous proposal into an actual website.
Figure 3.2 Looking for Templates, Week 8 (12/6/2026)
Figure 3.3 Chosen Template, Week 8 (12/6/2026)
To begin, my group and I started by looking for website templates that were similar to our layout. We ended up with the template shown above. Once that was settled, we mutually decided to work on 1 page per person (shop, listing, community, profile), and I ended up choosing the shop page since I had designed it previously. To help with our group arrangement, I set up a Live Share extension in visual studio code, which, when shared, allowed the others to join and edit at the same time. We mainly used this when combining our separate codes together.
Figure 3.3 Website Attempt (Slightly Zoomed Out), Week 10 (21/6/2026)
Figure 3.3 Product Details Prototype and Output, Week 10 (21/6/2026)
Figure 3.3 Process - Product Details Pop Up, Week 10 (21/6/2026)
I was having trouble editing the template to how I envisioned our website to look, especially because the products in the template were non-clickable with no product details like a regular shop would have. This made the job more time consuming as I had to design a product details pop up and generate the code or it using an AI. Even then, it looked more like an ad instead of product details, but I was running low on time so I kept it as is. Most of the other buttons didn't work either, which after receiving feedback, we were told to make almost everything functional.
Figure 3.4 Reworked Shop Page, Week 10 (26/6/2026)
I decided to restart the process by very slightly reworking the previous image of the shop page and put it into Gemini for the code.
Figure 3.5 Prompt and Outcome, Week 10 (27/6/2026)
This was the prompt and the outcome, I slowly had it add more features and change certain things (working search bar, filters, font etc.) until I was satisfied. Then, I continued with the same process for the product details page and the chat page.
Figure 3.7 Header, Week 11 (28/6/2026)
Figure 3.8 Header HTML, Week 11 (28/6/2026)
Besides that, I was tasked to make a header (navigation bar and banner) that could be copied and pasted into everyone else's pages.
Figure 3.9 Process - Product Details Page and Chat Page, Week 11 (29/6/2026)
After the shop page was done, many features had to be linked to certain parts of the other tabs, which became quite stressful and confusing since it was mainly JavaScript code. It was around this time also that many little things caused the code to break over and over.
Figure 3.10 Discussions and Process - Linking Listings to Self Profile, Week 11 (29/6/2026)
Once we were mostly done with our pages, we got on a call to combine our respective codes together, which proved to be a lot more frustrating as certain parts like the listings uploaded from the add listing page needed to appear in both the shop and personal profile pages after clicking upload listing. This went on for a few days, we would regularly get on calls and if anyone encountered any issues they can't fix, someone else would step in to help.
Final Outcome
Website Link: popxchange.xo.je
Figure 3.11 Final Task 2 Slides, Week 13 (15/7/2026)
Figure 3.12 Demo Video, Week 13 (15/7/2026)
4. FEEDBACK
Week 11
Change the name of the listing page to add listing for clarity, and make everything (possibly) clickable.
Change the name of the listing page to add listing for clarity, and make everything (possibly) clickable.
Week 12
Improved from last time, can put pencil icons in the profile page to show that the information can be edited. Add an about us page and also try to make some of the links in the footer clickable.
Improved from last time, can put pencil icons in the profile page to show that the information can be edited. Add an about us page and also try to make some of the links in the footer clickable.
5. REFLECTION
This task was one of the most stressful and frustrating tasks I have ever had to do, but it was quite rewarding to see the website come together piece by piece. A lot of the times, every little attempt at fixing a small issue made it turn into a big one, which meant I had to keep going back and forth trying to find out what was causing the issue. Sometimes I can't even solve it unless I ask another group member for help, which is also why I believe our teamwork played a big part in how our website turned out. I felt that creating the individual pages itself was fine, but linking the product listings to other pages was when the actual problems appeared. Despite that, though this was a tedious task, I believe that this assignment has taught me a lot about coding as someone with barely any experience in this field.
Comments
Post a Comment