INTERACTIVE DESIGN / PROJECT 1: PROTOTYPE DESIGN

13/05/2025 - 27/05/2025 (Week 01 - Week 06)

Aveline Kristie / 0372310 

Interactive Design / Bachelor of Design (Honours) in Creative Media / School of Design

Project 1: Prototype Design

---

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Tasks

---

1. LECTURES

Week 4

Web Basics & HTML

• Web Standards: Ensure websites work on all devices. Use HTML & CSS. Set by W3C.

• How Web Works: URL > DNS > IP > Web server > Browser gets page.

• Page Structure: HTML uses tags like <p>, <h1>, <ul> to organize content.

• Heading <h1>, subheading <h2>, paragraph <p> </p>, force line break <br>

• Text Formatting: Use <b> for bold, <i> for italic.

• Lists: <ol> = ordered list (for numbers or a b c), <ul> = unordered list (bullet points). 

• Links: <a href="URL">text</a> to link pages. 

• Images: <img src="..." alt="..."> to add pictures. 

• <...> is for HTML; {...} is for CSS

• HTML Attributes add extra information to HTML elements. 

• They appear in the opening tag and have two parts: name="value"
• Example: <p lang="en-us">Paragraph in English</p>
• Name tells what kind of info (lang), and Value sets the info ("en-us" for US English)

Week 5

HTML & CSS

HTML Basics

• ID: Unique identifier for one element (id="header").

• Class: Shared style for multiple elements (class="highlight").

• Block elements: Start on new lines (<p>, <h1>).

• Inline elements: Stay in line (<a>, <img>).

CSS Basics

Used to style HTML (colours, fonts, layout).

Ways to Add CSS

• External: Linked with <link>

• Internal: Inside <style> tag

• Inline: Inside style="" attribute (not recommended).

Common CSS Styles

• Text: colour, font-family, text-align.

• Background: background-colour, background-image.

• Font examples: Arial, Times New Roman, Verdana.

Week 6

CSS Selectors

• Used to target & style HTML elements.

• Control layout, colour, spacing, interaction.

Types of Selectors

• * Universal: selects all elements.

• p, h1 Element: by tag name.

• #id ID: unique element.

• .class Class: multiple elements.

• .parent a Descendant: inside another element.

• ul > li Child: direct child only.

• :hover, :focus Pseudo-class: state-based (hover, focus, etc.).

• : :before, : :after Pseudo-element: part of an element.

Why Many Selectors?

• Specificity: more control

• Structure: target nested elements

• Attributes: [type="text"] for input, etc.

• States: focus, active, checked

• Responsive: media queries

• Maintenance: clean & reusable code

• Accessibility: better UI for all users

---

2. INSTRUCTIONS

---

3. TASKS

Fig 3.1 Design Proposal