INTERACTIVE DESIGN - PROJECT 1: WEBSITE REDESIGN PROPOSAL

16.10.25 - 30.10.25 (Week 4 - Week 6)
Michelle (0373843)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 1: Website Redesign Proposal

---

TABLE OF CONTENTS

1. Lectures

2. Process Work

3. Feedbacks

4. Reflection

---

Lectures

Week 4 

Dreamweaver Tutorial

Table

tr (table row) > td (table data)

colspan & rowspan

Table

CSS allows website design using layout

Initially layout is created using table.

There are defaults - want to change, overwrite.

issue: aesthetic, UX, performance

Week 5

HTML (Hypertext Markup Language)

Attribute

• = A modifier that provides additional information about an HTML element or adjusts its behavior and display.
• Always included in opening tag.
• One element can have multiple attributes, separated with space.
• E.g. src for img element, href for a element, etc.

ID & Class Attribute

• ID - unique, can't have more than 1 of the same name.
• To refer, use hash (#)
• Class - multiple elements
• To refer, use dot (.)

Block & Inline Elements

• Block - appears in new line (by browser default)
• E.g. <h1>, <p>, <ul>, <li>, <div> : empty block, <tr>, etc.
• Inline - appears to continue in the same line as neighboring element.
• E.g. <b>, <i>, <a>, <em>, <img>, <span>: empty container, <th>, <td> etc.

CSS (Cascading Style Sheet)

Function: change default rules by the browser on how elements appear.

Selector & declaration

• Selector - which element the rule applies to.
• Declaration - how it's styled.
• Single format: Selector {properties: value;}
• Group format: Selector, selector2, ... {property: value; property2: value2; ...}

Employing CSS Method

• Internal
• Include CSS code in HTML
• External
• Link - one page with CSS codes to control multiple pages

Brackets

• HTML <> - angle brackets
• CSS {} - curly brackets
• Javascript () - parentheses

top right bottom right

top-bottom left-right

top left-right bottom

Week 6

CSS Selector - target & style HTML element

CSS Selector 

HTML, CSS, Javascript is open source = free for anyone

meta viewport - adjust scale based on device.

<div>

<nav> navigation

label: input

text area

CSS Designer panel

Attach existing file

margin: auto - center

---

Process Work

1. Live Code Session

Week 4

Starts using Website Design Software: Dreamweaver/Visual Studio Code

HTML

• Image <img src = "picture.jpg">, 
• Table <table></table>
• table row <tr></tr>
• table head <th></th>
• table data <td></td>
• Attribute: colspan & rowspan - to merge cells

Inline CSS

CSS code (style attribute) places inside the opening tag.

Figure 1.1 Page Appearance

Figure 1.2 Background & Image Code

Figure 1.3 Table Code

Week 5
Text Formatting - Google Fonts
ID

Class

embeded css

Week 6

My Secret Recipe 

<div>

<nav>

class id

location map

form

external css

child selector

pseudo-class selector

2. Website Redesign Proposal 

!

3 sets of wireframe > 3 attempt

Project 1,2,3 connected

1 - proposal

2 - prototype

3 - working website

already use css - traditional method

---

Feedbacks

Week 4

wireframe - black & white, boxes & lines - no color, no texts

lecture ends in week 10. until week 14 project consultation

misses class, will fall behind

try not to use chatgpt to produce codes. Use it to ask questions. build from scratch, so later know what to edit/change if updates needed.

Week 5

!

Week 6

Don't use 

---

Reflection

Experience

!

Observation

!

Findings

!