Interactive Design Project 2 | Website Redesign Prototype
31.05.2025 - 19.06.2025 ( Week 6 - Week 9)
WANG JINYI / 0374697
GCD 60904 / Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 | Website Redesign Prototype
Table of Content
Lectures
Instructions
Task
Feedback
Reflection
Lectures
1. Display Property
Every HTML element has a default display type, usually either:
block(e.g.,<div>,<p>,<h1>)inline(e.g.,<span>,<a>)
Block elements take up the full width and start on a new line.
Inline elements stay in the same line and don’t break the flow.
Example:
<div>= block (stretches full width)<span>= inline (sits inside a line of text)You can override default display using CSS:
display: inline-blockdisplay: flexdisplay: grid
2. Box Model Basics
In CSS, every element is a box made up of 4 parts (from inside to outside):
Content – the actual text or image
Padding – space inside the box, around the content
Border – the line around the padding
Margin – space outside the border
All these layers can be styled with CSS using px, %, or em.
3. Why Use <div>?
We use <div> to help group elements and create layout sections.
4. Flexbox Introduction
Flexbox helps us design responsive layouts without using floats or complicated positioning.
Key terms:
Flex Container: The parent with
display: flexFlex Items: The children inside the container
Important properties:
flex-direction: row or columnjustify-content: space items along main axisalign-items: align items along cross axis
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
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:
A fully functional prototype ACCESSIBLE via a SHAREABLE
link or as a DOWNLOADABLE file.
A brief writeup in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal
Prototype Link
Redesign Project – Department of Museums Malaysia Website
For this assignment, I created a clickable prototype based on my website redesign proposal. The main goal was to make the website more modern, clean, and easy to use, while still keeping the cultural and historical feeling of the museum.
My prototype has three main pages: Home, About, and Contact. Each page is connected with simple navigation at the top, and when users hover over the buttons, the color changes to make it more interactive.
On the Home page, I used a large image to catch attention and added short sections to introduce the museum’s services. The layout is clean, with lots of space and clear headings, so users won’t feel overwhelmed.
In the About page, I simplified the original text into four clear sections: Vision, Mission, Our Work, and a short introduction. I removed repeated or long sentences and kept only the important points, to make the page easier to read.
The Contact page is the final page. I included the basic contact information and added a big photo of Kuala Lumpur at night. Below the photo, there’s a strong message to show the museum’s mission. This makes the ending more emotional and memorable. I also added a footer with contact details and social media icons.
I chose earthy and soft colors like off-white, light beige, and deep brown to create a warm and elegant feel. I also used blue in the main images to create contrast and make the pages more visually interesting. For fonts, I used Glida Display for titles because it looks formal and matches the museum theme. For body text, I used Inter, which is modern and easy to read.
I added some basic interactive features:
Hover effects for buttons
Page links to switch between Home, About, and Contact
Smooth layout and readable content
The old website had too much text and looked outdated. I wanted to fix that by making a simpler and more user-friendly version. My prototype is easier to read, more attractive, and helps visitors find information quickly. It also makes the museum feel more welcoming and professional.
Feedback
Mr. Shamsul said my design is generally good and workable, but there are some things I can improve:
Navigation Bar
The current navigation looks a bit stiff. I should try to make the text blend better with the homepage image instead of using a solid header. This will make the website feel more elegant.Logo and Name
I should add the website logo and name at the top left corner for better branding.Simplify the Content
Some parts of the content are too much or not necessary. It’s better to clean it up so everything feels lighter and easier to read.Add a Footer
I forgot to include a footer. Adding one with contact info and social media links will make the site more complete.Font for Main Titles
The main titles use a font that feels a bit too bold. I should change it to something simpler and more elegant.Remove Extra Borders
Some sections have borders that are not needed. Removing them will make the layout look cleaner.Layout Adjustments
Just a few small layout changes (like spacing and alignment) can help the whole design look better.
Reflection
This project helped me apply what I’ve learned about design and user experience. I tried to balance looks and function, while still respecting the cultural value of the museum. I'm happy with the result and hope it clearly shows how the redesign improves the website.
Comments
Post a Comment