Interactive Design - Project 1

 INTERACTIVE DESIGN - Project 1

|| 15/10/2025 – 1/11/2025 (Week 4 – Week 6)
|| BAI ZHUO QING, 0370042
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Project 1

---

TABLE OF CONTENTS

1. Lectures
2. Instructions
3. Process Work
4. Reflection 

---

1. Lecture：

ID Attribute:

• Every HTML element can have an ID attribute.
• It uniquely identifies an element on a page (you can't have two identical IDs on a single page).
• Main uses:
• Set unique styles for specific elements (for example, making one paragraph stand out from the others).
• IDs can be used to precisely locate elements in CSS or JavaScript.
• Example:<p id="intro">Welcome!</p>

Class Attribute:

• Every HTML element can also have a class attribute.
• This attribute is used to identify a group of elements with the same characteristics.
• Multiple elements can share the same class name.
• This is often used to distinguish different types of content (e.g., important paragraphs, tooltips).
• Example:<p class="highlight">Important text</p>

Block and Inline Elements:

• Block elements (block-level elements)
• Occupy their own line.
• Examples: <h1>, <p>, <ul>, <li>.
• Inline elements (inline elements)
• Do not wrap to the next line and remain flush with adjacent elements.
• Examples: <b>, <i>, <em>, <a>, <img>

Cascading Style Sheets:

• Used to control the appearance and layout of web page elements.
• You can set backgrounds, colors, fonts, borders, layouts, etc.
• Separating HTML content from styles makes maintenance easier.

CSS syntax:

• Each style rule consists of two parts:
• Selector: Specifies the HTML element to be affected.
• Declaration: Defines the attributes and values ​​of the style.

Three ways to apply CSS:

External CSS:<link href="style.css" type="text/css" rel="stylesheet">

Internal CSS:

<style type="text/css">

p { color: blue; }

</style>

Inline CSS:<p style="color:red;">Hello</p>

CSS style application:

Color:

• Define the visual tone of an element by setting the text, background, or border color.
• Key properties: color, background-color, border-color.

Background:

• Controls the overall background appearance of an element, including color and image.
• Key properties: background, background-image.

text:

• Manages the presentation of written content, including alignment, decoration, spacing, and shadow effects.
• Key props are text-align, text-decoration, text-indent, and text-shadow.

Fonts:

• Specifies the font, size, and style of text displayed on a web page.
• Code: font-family, font-size, font-style, font-weight.

---

2. Instructions：

---

3. Process Work：

Project 1 - Website Redesign Proposal：

Objective:
The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal shoulddemonstrate your ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.
 
Assignment Description:
You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address the following key aspects:
     
Website Analysis:
 
Current Design Evaluation:
Provide a critique of the current design, focusing on layout, color scheme, typography, imagery, and overall aesthetics. User Experience (UX): Assess the site’s usability, navigation, accessibility, and responsiveness. Identify pain points or areas that could be improved.
 
Functionality:
Evaluate the website’s performance, including load times, interactivity, and compatibility across different devices and browsers.
   
Redesign Goals:
Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernized look, enhanced brand alignment).
 
Target Audience:
Describe the intended audience for the redesigned website and how the new design will better meet their needs.
       
Design Proposal:
Visual Design Concepts: Present your ideas for the new visual design, including visual references, mood board, and wireframes. Discuss the rationale behind your design choices.
 
UX Enhancements:
Propose changes to improve user experience, such as simplified navigation, better content organization, or enhanced interactivity.
Technical Considerations: Outline any technical updates or changes, such as optimizing for mobile devices, or improving load times

Submission:

Google Drive link:

https://drive.google.com/file/d/1_afiXvaCK3O2EYwvOHy8fW2u6tDyBYAf/view

Since the selected website was an e-commerce website, I switched to a new website for analysis.

Submission:

Google Drive link: HERE

---

4. Reflection：

Over the past few weeks, my understanding of web design has improved significantly. I now have the ability to critically evaluate existing websites—identifying outdated visual elements, usability issues, and structural flaws—and propose practical improvements. This learning process has deepened my understanding of design principles such as visual hierarchy, responsive design, user-centered navigation, and accessibility.