Interactive Design - Task 2: Interactive Prototype Development
.jpg)
18/5/26 - 4/7/26 / Week 5 - Week 11
Janice Cheah Pei Ern / 0376497
Interactive Design / BDCM / Taylor's University
Task 2: Interactive Prototype Development
LIST / JUMP LINK
INSTRUCTIONS
TASK
Interactive Prototype Development
Team members:
Khalif Mikail Bin Mohd Ihwan 0377378 (Team Leader)
Janice Cheah Pei Ern 0376497
Joyce Wong Siew Wei 0378201
Before we start, we distributed our work amongst ourselves. I was mainly in
charge of the programming for our prototype website. Khalif and Joyce were in
charge of the designs and visuals of our website.
While waiting for them to progress with their work, I looked up on how to
program the spinning wheel for our website. I managed to find a link that
provides HTML, CSS and Javascript programming for the basis of the
wheel.
Figure 1. Spin Wheel Program Reference
I also tried to edit the wheel first in terms of the colour and the
values inside of the wheel. As I haven't look up on books during this
stage so I tested out with animals as values.
Figure 2. Early Version of Spin Wheel
After Khalif and Joyce have came up with a rough interface of the
website for some of the pages, I get into the programming in Visual
Studio Code. I had to get some help from Gemini AI as I was not that
advanced and familiar with CSS and Javascript programming.
Figure 3. Early Version of Home page
Figure 4. Home page programming
Figure 5. Early Version of Book Details page
Figure 6. Book Details page programming
Figure 7. Early Version of Book Searching page
Figure 8. Book Searching page programming
As our website is an online bookstore, we needed a checkout
page. I was having issues with the book database at first so I
decided to focus on the programming of layout before going back
to fix the problem.
Figure 10. Early Version of Payment
Figure 11. Early Version of Review
Figure 9. Fixed Book Database JS
Figure 10. Getting help from Gemini
Joyce also suggested that I changed the items inside the wheel to
book covers instead of text. After presentation, our tutor also
mentioned on visibility of the books which I decided to go with grey
instead of black like our roulette wheel reference back in Task 1.
Our tutor also mentioned on how we can improved by adding more things
into our website. Joyce focused on drawing out more illustrations as
she only managed to do sketch. So I recommended on adding wood
background to some of our pages to give it a bookshelf feel. I also
brought up the idea to have a mascot for our website which we all
decided it to be a Bookworm as it fits the theme.
Figure 12. Home page with background
In the end, we had quite a number of programming files as we have
quite a number of pages.
Figure 14. Programming progress and files
Final Website - Bookcase
Website Link: https://bookcase.great-site.net/
Showcase Video of Website:
FEEDBACKS
Week 9 (Presentation)
Specific Feedback: The colour for the spinning wheel affects the
visibility of the book images. Can add more hand-drawn illustrations
into our website.
Week 10 (Improvement)
Specific Feedback: Try to create more extra tabs programming so all
buttons actually work/link to something. Can also add more books.
REFLECTIONS
This task was definitely harder as we have to build our website
totally from scratch. I personally faced a lot of problems and errors
when programming, from things such as images not loading or the wheel
not functioning properly. I managed to overcome them after checking
through the programming with the knowledge I have from class while
asking Gemini to check my programming. Overall, I still had fun doing
this task especially with the spinning wheel function. I believe we
still have room for improvement but I am glad with being able to
finish our website.
Comments
Post a Comment