Interactive Design : PROJECT 1 - Website Redesign Proposal

Mei 27, 2025

Interactive Design : PROJECT 1 - Website Redesign Proposal

Week 1- Week 6 (23/04/2025 - 21/05/2025)
Katherine Alexandra Sutanto / 0373585
Interactive Design / Creative Media / School of Design
Project 1 / Website Redesign Proposal

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task

4. Reflection

LECTURES

Week 4: HTML & Web Basics

The Web – A Quick History
The World Wide Web was invented in 1989, and it became more commonly used in Malaysia around the year 2000.
At first, people used the web through basic devices like a keyboard, mouse, and monitor.
Today, some users also access the web using voice commands or screen readers.

Web Standards

Web standards are managed by the W3C (World Wide Web Consortium).
These standards make sure websites work properly across all browsers and devices.
The main languages used are HTML (for structure) and CSS (for design and layout).

How the Web Works (Simple Steps):

You type a web address (URL) into your browser.
The browser contacts a DNS server to get the site’s IP address.
It then connects to the web server to load the website.

HTML Basics

What is HTML?
HTML (HyperText Markup Language) structures the content on a web page. It uses tags to tell the browser what to display.

Examples of Common Tags:

<p> – Paragraph
<b> – Bold text
<i> – Italic text
<br/> – Line break
<hr/> – Horizontal line

Headings:

There are six heading levels: <h1> to <h6>
<h1> is the main title, <h2> is a subheading, and so on.

Basic Page Structure:

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    Page content goes here.
  </body>
</html>

Lists in HTML

Ordered list (<ol>) – numbered items
Unordered list (<ul>) – bullet points
Use <li> to add each list item
You can nest lists (put a list inside a list), but avoid placing headings or paragraphs directly inside <li> tags.

Links & Images

<a href="https://example.com">Visit Example</a>

Image Example:

<img src="image.jpg" alt="Description">

Week 5: CSS, IDs, and Classes

ID and Class Attributes in HTML:

ID – A unique name for one specific element (only used once per page).
Class – A label you can apply to multiple elements that share a similar style.
Both are used in CSS to apply styles.

Block vs Inline Elements

Block elements take up the full width and start on a new line (e.g. <h1>, <p>, <ul>, <li>)
Inline elements appear next to each other and don’t break the line (e.g. <b>, <i>, <a>, <img>)

CSS Basics

What is CSS?
CSS (Cascading Style Sheets) controls the appearance of HTML content, including layout, colors, fonts, and spacing.

CSS Rule Format:

selector {
  property: value;
}

Ways to Use CSS:

External – Link to a separate .css file
Internal – Add styles inside a <style> tag in the <head> section
Inline – Add style directly in the HTML tag with style=""

CSS Styling Categories

Color – text color, background color, borders
Background – background images, repeat patterns, scroll or fixed background
Text – alignment, decoration (like underlining), spacing, shadows
Fonts – Use standard fonts like Arial, Verdana, Georgia, Times New Roman

INSTRUCTIONS

TASK

Recap

In order to accomplish this assignment, the objective of this assignment is to create a proposal for the redesign of an existing website. The proposal should showcase our ability to critically assess the site's design and functionality, and to recommend improvements that enhance user experience, visual appeal, and overall performance.

We are assigned by Mr Shamsul to find an existing website. Then, make a proposal of regarding our analysis on the chosen website.

Required contents for the proposal are as following:

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

Proposal

REFLECTION

Redesigning The Room website was a valuable experience that allowed me to critically evaluate a promotional site while applying user-focused design strategies. By analyzing its layout, ease of use, and overall visual style, I was able to pinpoint areas that needed improvement especially in terms of navigation, consistency, and structure. Looking at layout examples from more polished, professional websites gave me fresh ideas on how design can directly affect user interaction and engagement. This project helped deepen my understanding of how smart UX and design decisions can transform a brand’s online presence making it more engaging, memorable, and attractive to a younger audience.

Cari Blog Ini

Katherine Alexandra Sutanto [0373585]