INTERACTIVE DESIGN - Project 2: Website Redesign Prototype

5.11.2025 - 27.11.2025（Week 7 - Week 10)

Lee Xiang Ling / 0384095

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

Project 2 / Website Redesign Prototype

LIST / JUMPLINK

LECTURES

Week 6 _ CSS Selectors

CSS selectors are used to target HTML elements that should receive styles such as colors, fonts, spacing, and layout. They are fundamental for controlling the presentation of web pages.

Universal Selector (* )
Selects all elements on the page.


Fig. 1.1 - Example of Univerdal Selector_JPEG, Week 07 (7/10/2025)

Element Selector (p )
Targets elements by their tag name.

Fig. 1.2 - Example of Element Selector_JPEG, Week 07 (7/11/2025)

ID Selector (#id )
Selects an element with a specific ID.

Fig. 1.3 - Example of ID Selector_JPEG, Week 07 (7/11/2025)

Class Selector (.class)
Selects all elements with a given class.

Fig. 1.4 - Example of Class Selector_JPEG, Week 07 (7/11/2025)

Descendant Selector
Selects B elements that are descendants of A.

Fig. 1.5 - Example of Descendant Selector _JPEG, Week 07 (7/11/2025)

Child Selector
Selects elements that are the direct children of A.

Fig. 1.6 - Example of Child Selector _JPEG, Week 07 (7/11/2025)

Pseudo-class Selector
Selects elements based on state or position.

:hover
:active
:visited
:link
:focus
:nth-child(n)

Fig. 1.7 - Example of Pseudo-class Selector _JPEG, Week 07 (7/11/2025)

Pseudo-element Selector
Selects specific parts of an element.

::before
::after

Fig. 1.8 - Example of Pseudo-element Selector _JPEG, Week 07 (7/11/2025)

Week 7 _ Box Model

The Box Model is a fundamental concept in CSS that describes how elements are rendered on a webpage as rectangular boxes, this model consists of content, padding, border, and margin.

Fig. 2.1 - Box Model _JPEG, Week 07 (7/11/2025)

Most HTML elements (body, p, h1, h2, div, ul, ol, li) are considered boxes/containers.

Fig. 2.2 - Example in class _JPEG, Week 07 (7/11/2025)

A <p> element inside <div class="col"> combined with CSS can form a visual box structure.

Block-level Elements

Start on a new line
Stretch from left to right as far as possible
Stack vertically (top to bottom)
Example: <div>

Inline Elements

Stay on the same line
Do not start a new line
Can wrap text inside a paragraph
Example: <span>

Note: You can override the default display values to create custom layouts with specific semantics.

Example: making <li> inline to create horizontal menus.

Week 8 _ Position

The position property controls how an element is positioned relative to its container or the page. Each value changes how the element behaves.

Static

Default normal document flow
Not affected by top/right/bottom/left
Most elements use this by default

Fig. 3.1 - Example of Static _JPEG, Week 08 (13/11/2025)

Relative

Positioned relative to its original position
Can be moved using top/right/bottom/left
Original space remains occupied

Fig. 3.2 - Example of Relative _JPEG, Week 08 (13/11/2025)

Absolute

Positioned relative to the nearest positioned ancestor
If none exists, relative to the viewport
Removed from normal document flow

Fig. 3.3 - Example of Absolute _JPEG, Week 08 (13/11/2025)

Fixed

Always positioned relative to the viewport
Does not move when scrolling
Removed from normal document flow

Fig. 3.4 - Example of Fixed _JPEG, Week 08 (13/11/2025)

Sticky

Behaves like normal flow initially
Becomes fixed when it hits a specified scroll position
Common for sticky headers/navbars

Fig. 3.5 - Example of Sticky _JPEG, Week 08 (13/11/2025)

-- Back To Top --

INSTRUCTIONS

EXERCISES

WEBSITE REDISIGN PROTOTYPE

Building on the work completed in Project 1, you are now required to transform your Website Redesign Proposal into a fully interactive and clickable website prototype. The prototype should clearly demonstrate the structure, visual design, and user experience strategies proposed earlier.

You may use Figma or Adobe Dreamweaver to create the prototype. The prototype must include functional interactive elements such as:

Clickable buttons
Working navigation links
Hover effects for interactive UI components
Form fields that visually appear fillable

Required Pages (Minimum of 3 Pages)

Homepage

Show the main layout, navigation structure, and key content highlights.

At Least One Core Page

Examples: About Us, Services, Products, Gallery, Activities, etc.

Demonstrates your content organization and information hierarchy.

Contact Page

Must include a visually functional contact form (e.g., name, email, message fields).
Form components should appear interactive and ready for user input.

Some brief introduction

For this assignment, after careful consideration, I chose to develop my website prototype using Figma. Figma offers a smooth interactive design workflow and is highly suitable for creating clickable and navigable web prototypes.

Fig. 1 & 2 - My wireframes _JPEG, Week 10 (24/11/2025)

The overall design follows the wireframes created in Project 1, with several refinements made to improve the user experience (UX). I also designed a simple logo to enhance the website’s visual identity and consistency.

Fig. 3 - Logo _JPEG, Week 10 (24/11/2025)

Navigation Bar Design

The navigation text includes hover effects, with color changes on mouse-over.
Some navigation items feature dropdown menus (mouse enter) to organize multiple subpages.
A language switch and search function were added for enhanced usability.
A Back to Top button is placed at the bottom-right corner for quick navigation.

Fig. 4 & 5 - My Navigation Bar Design _JPEG, Week 10 (24/11/2025)

Footer Design

All clickable text in the footer includes hover interactions.
Clicking Contact Us navigates to the contact page.
Clicking Related Sites links to external tourism-related websites.

Fig. 6 - My Footer Design _JPEG, Week 10 (24/11/2025)

Page Descriptions

Homepage

Access: Logo links back to the homepage.
Original wireframe structure is maintained.
Introduction Section:

Clicking Learn More navigates to the About page.

Top Destinations:

Several destinations were updated.
Images switch dynamically based on mouse hover over the names.
Both text and images include hover effects.
Clicking a destination image leads to a detailed page.

Fig. 7 - Top Desitinations Design _JPEG, Week 10 (26/11/2025)

Things You Can Do:

Highlights activities available in Cameron Highlands.
Explore Now includes hover feedback and navigates to a related page.

Visitor Review:

Displays visitor comments.
Left/right arrows switch between reviews.

Fig. 8 - Visitor Review Design _JPEG, Week 10 (26/11/2025)

About

Access:

Through the navigation bar (About)
Or via Learn More on the homepage

Basic information about Cameron Highlands.
Features a Table of Contents for quick navigation.
A View Map section is available; clicking the map opens Google Maps.

Fig. 9 - Map in About page _JPEG, Week 10 (26/11/2025)

Tea Plantations

Access: via Navigation → Attractions → Tea Plantations
Introduces major tea plantations in Cameron Highlands.
Top 4 Tea Plantations:

Images and text have hover interactions
Clicking leads to individual detail pages

Gallery:

Users can switch images by clicking the thumbnails

Fig. 10 - Gallery in Tea Plantation page _JPEG, Week 10 (26/11/2025)

Cameron Valley

Access:

From the homepage Top Destinations
From the Tea Plantations → Top 4 section

Introduces destination ---- Cameron Valley in Cameron Highlands.
Introductions Area:

Clicking the map or address opens Google Maps.
Clicking Learn More leads to the full Google Map Introductions page.

Fig. 11 - Introduction area in Cameron Valley page _JPEG, Week 10 (26/11/2025)

Things You Can Do Here:

Showcases available activities in Cameron Valley.

Gallery:

Users can switch images by clicking the thumbnails

Contact Us

Access:

via Contact Us in the footer.

Write To Us:

Clicking arrow of Enquiry Form or here opens a fillable form.

Call Us:

Provides a sample phone number (fictional for prototype purposes)
Includes information on unavailable contact hours

Fig. 12 - Contact Us Design _JPEG, Week 10 (26/11/2025)

Map:

Clicking the map redirects to Google Maps

Equiry Form

Access:

Clicking arrow of Enquiry Form or here opens a fillable form.

To clarify the limitations and scope of the prototype, the following notes apply:

The current prototype serves as a reference template only.
Except for the specific navigations mentioned earlier, other buttons, sections, and interactive elements do not contain functional links and therefore are not operable.
Some hover and click interactions may experience minor delays.
Due to Figma’s preview-rendering limitations, certain hover or click effects may show slight lag or delayed transitions, which is expected.
The prototype functions as a visual and structural template only, and does not support actual input.
Although form elements are visually designed, they do not allow real text input, submission, or validation, as this is not a fully coded website.

Fig. 13 - My process screenshot _PNG, Week 10 (27/11/2025)

In developing the prototype, I followed the visual and UX guidelines outlined in my proposal. I adopted a nature-inspired green theme, consistent typography, and a cleaner layout. I also selected higher-quality images from the original website to improve visual consistency. Functionally, I added a fixed navigation bar, hover states, dropdown menus, card-based layouts, and interactive elements such as image switching and review sliders. These decisions aimed to create a more modern, readable, and user-friendly browsing experience.

Besides, the prototype directly addresses the goals set in my redesign proposal. It modernizes the website’s visual identity, improves usability with clearer navigation and structure, and enhances interactivity through maps, reviews, and dynamic image elements. The consistent layout, clear call-to-action buttons, and organized page flow also help build professionalism and trust, aligning well with my intended redesign objectives.

I also improved the user experience by enhancing navigation clarity, visual hierarchy, and overall readability. The added hover effects, image switching, review sliders, and map links create a more engaging interaction. Consistent layouts and better spacing reduce visual clutter from the original site, resulting in a smoother, more intuitive, and professional browsing experience.

Click Here to Watch My Prototypo: Cameron Highlands

-- Back To Top --

REFLECTIONS

Through this assignment, I gained a much clearer understanding of the gap and challenges between creating a proposal and developing an actual prototype. Even though I had established a clear redesign direction in Project 1, I quickly realized during the prototyping stage that many UX decisions that seemed simple in theory required careful balancing between visual structure, interaction logic, and overall consistency. This helped me recognize that design is not just about placing elements onto a page—it is about ensuring every component functions meaningfully within the user’s experience.

Another major challenge was learning Figma for the first time. Translating the design ideas from my Project 1 proposal into an interactive prototype felt overwhelming at the beginning. I spent a significant amount of time watching tutorials, looking up techniques, and practicing through trial and error. Gradually, I learned how to work with components, prototype links, hover states, and interactive elements. Through image selection, hierarchy building, and enhancing interactivity, I also discovered how to transform cluttered information into a cleaner, more engaging layout. This experience made me understand that UI/UX design is not only about visual presentation, but also about adopting a user-centered mindset.

Overall, this assignment taught me a great deal and helped me grow as a designer. It showed me that good UX design comes from continuous experimentation, adjustment, and evaluation. Seeing the final prototype function smoothly gave me a strong sense of achievement and further motivated me to keep improving my design skills.

XiangLingLee (0384095)

Search This Blog