Name: Liong Xenyi (0383125)
Module: Interactive Design GCD60904
Date: 23/10/2025 - 30/10/2025 (Week 5 - Week 6)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
Module: Interactive Design GCD60904
Date: 23/10/2025 - 30/10/2025 (Week 5 - Week 6)
Degree: Bachelor of Design (Honors) in Creative Media
University: Taylor's University
Instructions
Prototype Development:Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission
I made a prototype website of my previous proposal using Figma. I created a minimum of 5 main pages, including a home page, about page, a genre selection page, login page and a page about the TV series as an example.
This is the link to my Figma:
This is the link to view the prototype:
Fig 1.1
Brief Explanation:
There are five main pages for this website prototype - a home page, an about page, a login page, a genre page and a TV series example page. I mainly want the design to look something akin to a modern retro, due to the TV series website, which combines all TV series from the past and present. I used the colour scheme I picked in the design proposal, as it contrasts satisfyingly with one another while also carrying out the retro theme. I redesigned the logo to look better and more attractive compared to the previous website, using the same colour palette. As for the fonts I've used, I couldn't find the ones from the proposal, but found something similar instead; I used Climate Change (for the title and main headings), Baloo Bhai (sub-headings), Baloo Bhai 2 (paragraphs), Anton (headings), Antonio (buttons). I made all pages symmetrical at the center using the 12 columns grid, while adding enough margin space to allow the content to breathe and for the viewer to easily see it.
Some pages like the about page and login page has a block of grainy gray, to group the content together while showcasing it in a TV screen design. I added the main pages on the heading next to the search bar, so that it will always be easily accessible, while the highlighted words indicate the page the user is on. Some buttons will invert colour when hovered over, indicating that the user could click on them. Some, like the FAQ buttons, will open an overlay box to show information, others would go to a page that indicate that information.
I made two whole new pages, the TV series display page and the genre page, to showcase more information in a aesthetic way. Instead of having to go to the website IMDB for the show's information, I added the main important ones, such as the show's synopsis, overall rating, genre tags, creators, key stars, status of the show and where the user could watch. The poster is clickable, as it brings the user to the IMDB page of the show, that displays more information. Below that, are the rated episodes, with the information shown (title, aired date, number of voters, synopsis) after clicking on the episode. I added a season and episode label with a contrasting colours for easier reference and visibility. It showcases the episode colour due to the rating, with good being green (8.0 and above, average being yellow (7.0 to 7.9), not so good being red (5.0 to 6.9) and bad being maroon (4.9 and below). The buttons to review the episode, save to watchlist and download the chart is bigger and more visible, that also inverts colour when hovered over. Below that are the top 3 highest and lowest rated episodes, with reference to the season and episode, rating and its episode's name. At the bottom of the page, there are related shows, with the TV series posters aligning on the left, following the original website, but still maintaining the same amount of white space between.
As for the genre page, it has a search bar at the top where users can search a genre of their show. Alternatively, the genre tags provide a list of genres the user can shift through, arranged in alphabetical order for the user to easily find their TV series. Below, the genre tags are also arranged in alphabetical order, where the user can scroll down through it. Just like the main home page, the TV series are arranged symmetrically at the center. However, the difference lies where the main home page displays the popular or ongoing TV series currently, but still in alphabetical order.
The forms are mostly found in the about page and login page, where the buttons won't change when hovered, but a form will pop up when clicked on, such as the login or sign-up buttons. However, some other buttons will lead the person to another page instead, such as the Patreon or E-mail button. Overall, the website is simple and yet pleasing to the eye with its design, without overwhelming the user too much with its information or colour display, as the TV series posters would attract a lot of attention. There are simple user interactions and with some simple added animations for some, while there is a clear navigation main menu at the top of the website.
Comments
Post a Comment