Interactive Design --Project 1 / Website Redesign Proposal

LONG BOJIANG / 0375362
21/4/2025 --- 26/5/2025 (Week1 - Week6)
Interactive Design / Bachelor of Design in Creative Media / Taylors University
Project 1 / Website Redesign Proposal

TABLE OF CONTENTS
1.INSTRUCTIONS
2.LECTURES
3.PROJECT 1
4.FEEDBACK
5.REFLECTIONS

INSTRUCTIONS

LECTURES

week4

1.Importance of Web Standards:

Ensure consistency across platforms and devices.
Make development and maintenance easier.
Improve accessibility for all users, including those with disabilities.

These standards are defined by the W3C (World Wide Web Consortium). The core languages include HTML and CSS.

2. Understanding Web Page Structure

A webpage is like a digital document—similar to a newspaper or form. Its structure helps users understand the content and navigate it effectively.

Common structure includes:

Headings (e.g., main title, subtitles)
Paragraphs (to convey textual information)
Sections (to group related content)

Good structure improves readability, SEO, and screen reader compatibility.

3. HTML Basics

HTML (HyperText Markup Language) is the foundational language used to create webpages.

Tags and Elements

HTML is made up of elements, typically written like this:

html

<tagname>Content</tagname>

Examples:

<p>: paragraph
<h1>: main heading
<ul>: unordered list
<a>: hyperlink
<img>: image

Attributes

Tags can include attributes that provide additional information:

html

<p lang="en-us">This is an English paragraph.</p>

Here, lang="en-us" specifies the paragraph is in American English.

4. Basic HTML Page Structure

Every HTML page follows a basic skeleton:

html

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>

<html>: root of the HTML document
<head>: contains metadata like the title and CSS links
<body>: contains all visible content displayed in the browser

5. Text Structure Elements

HTML supports six levels of headings, from <h1> (most important) to <h6> (least important). For example:

html

<h1>Main Title</h1>
<h2>Subtitle</h2>

Paragraphs are defined with the <p> tag.

Text emphasis:

<b>: bold text (for visual emphasis)
<i>: italic text (used for semantic or stylistic emphasis, such as names or ideas)

6. Lists

HTML supports two main types of lists:

Ordered Lists <ol>: numbered items
Unordered Lists <ul>: bullet points

You can also create nested lists to show hierarchy:

html

<ol>
  <li>First Item</li>
  <li>Second Item
    <ul>
      <li>Subitem A</li>
    </ul>
  </li>
</ol>

7. Hyperlinks

Create links with the <a> tag:

html

<a href="https://www.imdb.com">Visit IMDB</a>

Link types include:

External websites
Other pages on the same site
Different sections of the same page
Links that open in a new tab/window (target="_blank")

8. Images

Use the <img> tag to embed images in a webpage. It is self-closing and requires the following attributes:

src: path to the image file
alt: alternative text for accessibility
title: tooltip that appears when hovering over the image (optional)

Example:

html

<img src="logo.png" alt="Company Logo" title="Click to return to homepage">


week5
HTML Extensions and Structural Markup (Concise Version)
"id attribute (Unique Identifier)

1.Each element can only have one unique id.

Used for positioning, style control or script operations. 
 2. class attribute (Style Grouping)
Multiple elements can share the same class.

Used for unified style Settings. 
 3. Block-level element
Form a separate line, such as <h1>, <p>, <ul>, <div>. 
 4. Inline Elements
Without line breaks, it is in the same row as other elements, such as <a>, <b>, <i>, <img>. 

 CSS Basics 
1. CSS definition
Used to control the appearance of HTML elements.

Grammatical structure: selector + attribute + value.

css
Copy
Editor
h1 {
color: blue;
font-size: 20px;
} 
2. Application Method
External CSS: Use <link> to import.css files (recommended).

Internal CSS: Use <style> to write in <head>. 

1.Common CSS properties
Color control
color: 
Font color

Background-color: background color

Border-color: border color 
 2. Background Settings
background-image

background-repeat

background-attachment
 3. Text style
text-align: Align

text-decoration: Decoration (as underlined below)

text-transform: Case conversion 
 4. Font Settings
Common fonts: Arial, Georgia, Courier New, etc

It is recommended to use system Fonts or Google Fonts


week5





week6



PROJECT 1

Web Redesign Proposal
Objective:

This assignment aims to create a well-rounded proposal for the redesign of an existing website. Your proposal should reflect your ability to critically assess both the visual design and user experience of the site, and suggest thoughtful improvements that enhance usability, visual appeal, and overall performance.

Assignment Overview:

Choose an existing website that you believe has noticeable design or UX shortcomings. You will then develop a detailed redesign proposal that addresses these issues through clear design strategies and user-centered solutions.
The original website URLhttps://www.tartanregister.gov.uk/tartanDetails?ref=1

Final wireframe:

FEEDBACK

Week 4
This session introduced us to the basics of HTML. It was our first time working directly with code, and the focus was on creating a simple personal webpage. Mr. Shamsul guided us through the process of writing fundamental HTML tags, helping us understand how content is structured on the web. We practiced building a layout that included basic personal information, which served as a hands-on starting point for our coding journey.

Week 5
During Week 5, we moved deeper into the design side of coding by starting CSS. This class was more exploratory—we experimented with changing background colors, font styles, and text formatting to personalize our webpages. Mr. Shamsul also introduced the guidelines for Project 1 and gave feedback on the websites we planned to redesign. It was a good blend of technical practice and project planning.

Week 6
This week was packed with new techniques and coding tools. We focused on more detailed CSS styling—like applying highlight effects to text, aligning content within sections, and adding tables, trademarks, and interactive buttons. Each element involved multiple properties, so the session was dense but rewarding. Continued review and experimentation will be necessary to fully understand how these features contribute to professional-looking web layouts.

REFLECTIONS

Learning HTML and CSS over the past few weeks has given me a solid introduction to front-end development. These skills are proving useful as I work on the website redesign project, where both structure and user experience are key. Writing code from scratch helped me understand how web elements are built and styled, and how design decisions impact usability.

At first, I found certain CSS techniques a bit confusing—especially when it came to layout and text styling—but consistent hands-on practice made a big difference. More importantly, working with code has shifted how I approach design: I now think more carefully about layout consistency, navigation flow, and how users interact with content.

This learning phase has bridged the gap between design thinking and technical execution. With this foundation, I feel more confident moving ahead in the redesign process, equipped to make design choices that are not only visually effective but also functionally sound.

Search This Blog

longbojiang(0375362)