Interactive Desig Project 2 Website Redesign Prototype
ZHOU XINYI / 0378623
Interactive Design
Bachelor of Design (Hons) in Creative Media
1.Instructions
2.Project 2 Website Redesign Prototype
2.1Prototype Overview
The goal of this assignment was to transform my website redesign proposal into a functional, interactive prototype that demonstrates the new visual direction, improved usability, and refined user experience strategy. Using Figma, I created a clickable prototype consisting of three core pages: Home, About, and Contact. These pages illustrate how the redesigned interface improves clarity, visual appeal, and overall user friendliness while staying aligned with the project’s objectives.
2.1.1. Main Features of the Prototype
(1) Homepage
EN:
The homepage serves as the main entry point of the website, and therefore its design prioritizes clear visual hierarchy and intuitive navigation. A consistent top navigation bar provides direct access to all major sections. The hero section features strong Halloween-themed visuals and bold typography, setting the tone for the entire website.
Below the hero section, the homepage highlights the “Best Selling Products” area. Products are displayed as neat cards, each containing an image, price, name, and button. This card layout allows users to browse quickly and understand the content at a glance.
(2) About Page
EN:
The About page presents brand information in a clean and organized layout. Instead of long paragraphs, the content is divided into readable blocks with clear headings and spacing. A themed banner ensures consistency with the homepage visuals.
The “Our Honors” section introduces credibility elements using short descriptions and visual icons. This approach makes the page more engaging and easier for users to read compared to text-heavy layouts.
(3) Contact Page
EN:
The Contact page demonstrates how users can interact with the redesigned interface. A real-world map section is placed at the top to simulate the company’s location, and relevant details such as address and business hours are displayed beside it.
The form below includes clear input fields for Name, Email, Phone Number, and Comments. Interactive highlights and a visible “Send Message” button help guide users through the form submission process.
2.1.2 Key Design Decisions
Visual Style
EN:
The prototype uses a Halloween-themed visual style with dark backgrounds and vibrant colors. This creates a strong identity while maintaining readability and contrast.
Typography & Layout
EN:
Sans-serif fonts were chosen for readability, and text hierarchy is clearly defined using size, weight, and spacing. A grid layout keeps all pages visually consistent.
Navigation Structure
EN:
A fixed top navigation bar ensures users can move between pages easily. This improves usability and reduces cognitive load.
Interactive Elements
EN:
Buttons, hover effects, and input field highlights were added to simulate real interactions and make the prototype feel more dynamic.
2.1.3How the Prototype Achieves the Redesign Goals
EN:
·The final prototype enhances usability, visual structure, and interactivity:
·Improved usability: clear navigation and readable layouts.
·Stronger visual identity: consistent Halloween theme.
·Better content organization: structured sections and balanced spacing.
·Enhanced interactivity: clickable components and form fields.
The prototype successfully translates the redesign proposal into a functional interactive model, meeting the assignment requirements.
2.2Development Process
The development of this prototype followed a structured process, starting from reviewing my previous redesign proposal to building the final interactive pages in Figma. The goal throughout the process was to ensure that the design remained consistent with the original concept while improving clarity, visual appeal, and usability.
2.2.1 Development Process in Figma
I moved on to designing the visual style. For this project, I applied a Halloween-themed design using dark backgrounds and vibrant colors to match the example website while creating my own version. I selected readable fonts, added illustrations, and refined the color palette to create a cohesive look.
2.2.2 Comparison
3.Feedback
week9：In class, the professor reviewed our Project 1 PPTs to make sure everyone’s chosen topic and content were correct. Students who had no issues were allowed to continue working on their Project 2 assignment.
week10：In this class, the professor introduced us to the website https://getbootstrap.com/ and taught us how to use it. The remaining time was used for consultation, where we could ask the professor questions related to any difficulties we encountered in Project 2.
Comments
Post a Comment