Interactive Design: Project 1

1. LECTURES

Week 4

HTML & Web Basics

The web started in 1989 and became popular in Malaysia around 2000.
It was originally accessed using a keyboard, mouse, and monitor.
Some users now interact via audible interfaces.

Web Standards

Managed by World Wide Web Consortium (W3C).
Help ensure websites work across all devices and browsers.
Standard markup languages: HTML and CSS.

How the Web Works

You enter a domain (URL) in the browser.
It connects to a DNS server to find the site's IP address.
Then your browser contacts the web server and loads the site.

HTML Basics

HTML is used to structure content. Most elements use:

<element>Information</element>

Examples:

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

Headings

Six levels: <h1> to <h6>
<h1> is the main heading, <h2> is a subheading, etc.

HTML Page Structure

html
<html>
  <head>
    <title>Title</title>
  </head>
  <body>Content</body>
</html>

Lists

Ordered list (<ol>) – numbers
Unordered list (<ul>) – bullet points
Use <li> inside both
Nested lists: lists within lists
Do not put headings or paragraphs inside <li>

Links & Images

Link:
Image:

Week 5

ID & Class Attributes

ID: Uniquely identifies one element – only one per page.
Class: Groups elements – can reuse the same name on multiple items.
Used in CSS to apply styles.

Block vs Inline Elements

Block: Starts on a new line— <h1>, <p>, <ul>, <li>
Inline: Stays on the same line — <b>, <i>, <a>, <img>

Introduction to CSS

CSS controls how HTML content looks: layout, colors, fonts, etc.
A CSS rule has a selector and a declaration:

Applying CSS

External: Link a separate .css file

Internal: Inside a <style> tag in <head>
Inline: Within the element using style=""

CSS Categories

Color: text, background, borders
Background: images, repeat, attachment
Text: alignment, decoration, spacing, shadow
Fonts: Use web-safe fonts like Arial, Verdana, Georgia, Times New Roman

3. TASK

Task Instruction:

Develop a comprehensive proposal for the redesign of an existing website. Select an existing website that 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
Functionality
Redesign Goals
Target Audience
Design Proposal
UX Enhancements

Website Choosen : Pop Mie Website

Website Redesign Proposal

The current website is already quite sufficient but compared to many other more professional food promotion platforms, it has a lot to be refines, with the biggest noticeable flaw of the website is it's layout. This redesign will make sure that the Pop Mie website will have a more professional look and feel. Which will not only make it easier for the viewers but will also create a more memorable digital experience.

4. REFLECTION

Redesigning the Pop Mie website was a valuable exercise in critically assessing a promotional platform and applying user-centered design principles. Through evaluating its structure, usability, and visual style, I identified key areas for improvement, particularly in layout, visual consistency, and navigation. Exploring various layouts on other more professional platforms helped me think creatively about how design impacts user engagement. This process strengthened my understanding of how thoughtful UX and design choices can elevate a fast-food brand's digital presence, making it more memorable, dynamic, and appealing to its youthful target audience.

Search This Blog