INTERACTIVE DESIGN

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C). The standard markup language use are HTML and CSS.

HTML Code

The HTML code is made up of characters that live inside angled brackets < >. Elements are usually made up of two tags: an opening tag and a closing tag. Each element tells the browser something about the information that sits between its opening and closing tags

Example:

<element>Information</element>

not all elements comes in pair, there are:

<img/>
<br/>
<hr/>

Attributes

Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

Example:

<p lang=“eng-us”>Paragraph in English</p>

note:

lang = attribute name

eng-us = attribute value

Body, Head, Title

<body>

Everything inside this element is shown inside the main browser window.

<head>

Before the <body> element you will often see a <head> element. This contain information about the page.

You will usually find a <title> element inside the <head> element.

<title>

The contents of the <title> element are either shown in the top of the browser (tab bar)

Headings

Elements like <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, with heading six the last important heading.

Paragraph

<p>content inside the element</p>

Bold & Italic

<b> and <i>, it can be included inside the paragraph elements.

List

Ordered list <Ol>

comes with the lis <li>

Unordered list <Ul>

comes with the lis <li>

Nested list

the list in the list

Links

note:

IMBD : this is the text the user clicks on

2. Instruction

Document 2.1: Module Information Booklet of Interactive Design.

3. Process Work

3.1 Exercise

We were given an exercise to gain our understanding for HTML and CSS. We have to make a simple website about our biodata. We use TextEdit for Mac book users, and change it to plain text. After that we save it into one folder and start coding.

Fig 3.1.1: HTML Code (in Dreamweaver), Week 5 (19/05/2025).

Final Outcome

Fig 3.1.1: Final Website Outcome, Week 5 (19/05/2025).

3.2 Website Redesign Proposal

The objective of this project is to propose a redesign of an existing website that requires improvement. The goal is to enhance the website’s overall usability in order to provide a better and more effective user experience.

We need to do some website analysis to know what things to improve and the overall usability of the website. After I did some website analysis, now I know what things to improve and I can set my redesign goals and the target audience.

After all the analysis and goals, I then set up my design concept and create some mood board along with the wire frames.

Website Redesign Proposal

4. Feedback

For my first website, the navigation was confusing, which made it difficult to redesign. After consulting with Mr. Shamsul, he advised me to change the website so it will be easier for me to redesign. He also suggested that I choose one main menu item to focus on for the website.

5. Reflection

The overall experience of working on this proposal was fun. I learned a lot, from analysis to the design concept. I gained an understanding of how website works and what its basic structure is. By completing this task, I can now more easily identify issues on a website, know how to fix them, and be more aware them.

Search This Blog

Madeline Ordelia Tjahjadi (0376920)