INTERACTIVE DESIGN[ EXERCISES ]

 

INTERACTIVE DESIGN [ EXERCISES ]April 22, 2024

 

24.04.24 - XX.XX.24 / Week 1 - Week X

GU QIANKUAN 0369385
Bachelor of Design (Hons) in Creative Media / INTERACTIVE DESIGN / Taylor's University
Exercises

---

OUTLINE

LECTURE

Instruction

• Exercise 1

Feedback

Reflection

Quick Links

---

LECTURE

A summary of the first week of classes is as follows:

Mr. Shamsul emphasized the importance of usability in design during this week’s session. Usability refers to how users can use a product effectively and efficiently, and it is a key component of user experience design (UX).

Week 1 Slides:

During the lecture, Mr. Shamsul introduced several key usability principles：

1） Consistency:

• Consistency is a key factor in visual elements and functionality in web design, ensuring that the website looks coherent and that individual elements work harmoniously.
• Consistency includes aspects such as navigation system, page layout, menu structure, fonts and typography.
• Consistent design enables users to recognize and learn patterns, and users will become frustrated if similar elements do not produce similar output.

2）Simple:

• The interface should be as simple as possible, minimizing the number of steps and using obvious symbols and terminology.
• Simple design helps users achieve their goals faster and more efficiently and provides a good user experience.

3） Visibility:

• Visibility means that the more visible an element is, the more likely users are to understand and use them.
• Users should know what their options are and how to access them just by looking at the interface.

4） Feedback:

• Feedback communicates the results of any interaction, making it both visible and easy to understand.
• Feedback indicates to the user whether a task was completed successfully, such as navigation items changing color or loading a submenu when the mouse is hovered over them.

5） Error prevention:

• Error prevention is about making it easy for users to do what they are doing without making mistakes.
• Avoid common usability pitfalls like complex interfaces, confusing navigation, poor feedback, and insufficient error handling.
• By following these principles, designers can create websites with a great user experience and avoid common usability issues.

WEEK 2 | Group Activity: Prototyping

During week 2 class, we learned about website usability. We were given four scenarios for designing website interfaces by prototyping to solve a particular problem or meet the user's needs. Then, each group is tested on the usability of the website by another group.

The scenario assigned to our group:

                        Group activity: Prototyping for restaurant website design, Week 2 (1/5/2024)
Slides are made by Vincent Lee

Week 3 Lecture Slides:

Understanding Website Structure: Website structure is the foundation of a user-friendly and accessible website. A well-structured website helps users find information easily and keeps them engaged.

Websites are typically divided into three key elements:

• Header
• Body
• Footer

Header: The header is the top section of a webpage. It usually contains the website's logo, navigation menu, and contact information. The header provides users with quick access to essential information and navigation.

Body: The body is the main content area of a webpage. It contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.

Footer: The footer is located at the bottom of a webpage. It typically includes copyright information, links to important pages, and contact details. The footer provides closure to the webpage and additional navigation options.

Organizing Content

• Content organization is key to a well-structured website.
• Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
• Logical grouping of content and clear labeling of sections improve user experience.

Navigation Menus

• Navigation menus help users move around the website.
• Use clear and concise labels for menu items.
• Consider using dropdown menus for complex sites.

WEEK 4 - LECTURE 4

The Web and Language

Interactive Design Web Standards

The Web has evolved from a keyboard, mouse, and monitor to various devices like phones, tablets, audible interfaces, and speech output for blind and unable-to-use individuals, including those who rely on speech output or speech input.

Hardware and Software Issue:

• Wide variety of browsers like Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari.
• Use of operating systems like Windows, Mac OS, and Linux.
• Wide screen resolutions from 640 x 480 to 1680 x 1050 pixels.

Diversity in web access means your website may appear different to many visitors. However, content is crucial for all users. To ensure compatibility across devices and configurations, websites must adhere to web standards. Non-compliance increases the likelihood of unauthorized access.

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C). The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The standard markup languages we'll be using in this course are:

• HTML

• CSS

Why Web Standards?

Web standards are crucial for a better internet experience for developers and visitors, simplifying development and ensuring proper display of websites without time-consuming rewrites for all browsers.

How The Web Works?

When visiting a website, the web server hosting that site can be located anywhere globally, and to locate the server, your browser connects to a Domain Name System (DNS) server.

Structure of A Web Page

• Structure Understanding
• Markup Learning
• Tags and Elements

Structure is important for readers to understand the message we try to convey and to navigate around the document.

How Pages Use Structure 

The structure of a newspaper article, similar to an insurance form, includes headings for different sections and questions with checkboxes for readers to fill in details, similar to how it is structured in online documents. Documents often use headings and subheadings to indicate a hierarchy of information, starting with a large heading followed by an introduction or the most important information. The text is organized into subheadings and paragraphs using a word processor, providing structure and allowing each topic to have a unique heading.

HTML Describe The Structure of Pages 

HTML Code Overview
• Composed of characters inside <> brackets.
• Usually consists of two tags: opening and closing. <element>Information</element>
• Each element provides information between opening and closing tags.

The HTML <h1> to <h6> tag is used to define headings in an HTML document. <h1> defines largest heading and <h6> defines smallest heading.

Attributes Tell Us More About The Elements

Attributes, found on the element's opening tag, offer additional information by containing a name and value, separated by an equals sign.

Body, Head & Title

<body>

<head>

<title>

Other Elements

Markup is a type of HTML tag used to add additional meaning and structure to a web page, allowing users to navigate and interact with it.

Headings

HTML has six levels of headings: 

• main headings: <h1>

• subheadings: <h2>

• further sections under subheadings. The element <h3> is used for further sections and so on...

Paragraph

To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.

Bold and Italic

<b>

By enclosing words in the tags <b> and </b> we can make characters appear bold.

The <b> element also represents a section of text that would be presented in a visually different way (for example key word in a paragraph) although the use of <b> element does not imply any additional meaning.

<i>

By enclosing words in the tags <i> and </i> we can make characters appear italic.

The <i> element also represents a section of text that would be said in a different way from surrounding content- such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicised.

List

There are lots of occasions when we need to use lists. HTML provides us with two different types:

• Ordered list: each item in the list is numbered. The list is for set of steps for a recipe that must be performed in order.

• Unordered list: begin with a bullet point.

Ordered List

<ol> 

The ordered list is created with the <ol> element. 

<li>

Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)

Browser indent list by default.

Unordered List

<ul>

The unordered list is created with the <ul> element.

<li>

Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)

Nested List

You can put a second list inside an <li> element to create a sub-list or nested list.

Browsers display nested lists indented further than the parent list.

In nested unordered lists, the browser will usually change the style of the bullet too.

Links

Links are the defining features of the web because they allow you to move from one web page to another.

Commonly type of links:

• Links from one website to another

• Links to one page to another on the same website

• Links from part of a web page to another part of the same page

• Links that open in a new browser window (tab)

Writing Links

Links are created using the <a> element. Users can click on anything between the opening<a> tag and the closing </a> tag. Specify which page to link using the href attribute.

Linking to Other Sites -Writing Links

<a> 

• Links are created using the <a> element which has an attribute called href.

• The value of the href attributes is the page that you want users to go to when they click on the link.

• When you link to a different website, the value of the href attribute will be the full web address for the site, also know as an absolute URL.

• Browsers show links in blue with an underline by default.

Linking to Other Sites - Adding Image

<img>

• The <img> HTML tag serves the purpose of incorporating images into a web page.

• In the context of web design, it's important to note that images are not physically inserted within a

web page; instead, they are linked to it. The <img> tag essentially establishes a designated space

for displaying the referenced image.

• It's worth mentioning that the <img> tag itself is void of content and is solely comprised of

attributes, eliminating the need for a closing tag.

When using the <img> tag, two essential attributes must be included:

• src - This attribute specifies the path to the image.

• alt - This attribute provides alternative text for the image, which is essential for accessibility

• Title - This attribute provides tool tip of the image in the browser

---

INSTRUCTION

                                       Module Information Booklet (MIB) of Interactive Design

<iframe src="https://drive.google.com/file/d/1xs_1Oul1eI2COsIo2W3eILWqBWQTsykD/preview" width="640" height="480" allow="autoplay"></iframe>

Exercise 1 - Web Analysis

Requirements:

Choose TWO websites from the given link. Review the selected website carefully and take note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.

What To Analyze:

- The purpose and goals of the website, and the effectiveness of its communication.

- Visual design and layout: using colour, typography, and imagery

- Website functionality and usability: navigation, forms and interactive elements

- Quality and relevance of website content: accuracy, clarity and organisation

- Website performance: loading time, responsiveness and compatibility across devices

Exercise 2 - Web Relication

We were tasked with replicating the landing page of two websites from the three provided by the lecturer. This exercise allows us to learn how the grid system is applied in website interface design.

Website Replication 1- Ocean Health Index

Here is the screengrab of Ocean Health Index website with fully loaded pictures and text.

Below are the comparison of final outcome of website replication with the original screengrab image.

Final Ourcome for Website Replication 2- Ocean Health Index

Website Replication 2-banditrunning

Below are the comparison of final outcome of website replication with the original screengrab image.

Final Ourcome for Website Replication 2- 

banditrunning

HTML practice  

WEEK 4
This week, we have learned HTML in physical class. We started to type the HTML code step by step by using Notepad and created a simple website.

The preview of the created website. 

Coding Notes learned from class:

WEEK 5
Continue our previous coding, this week we have learned how to create a timetable. We were no longer coding in Notepad, this time we switched to Adobe Dreamweaver.

 This is what the timetable I created looks like:

After the class, Mr. Shamsul let us explore how to create a contact form by ourselves as our homework and we have to complete it before the next class.

Preview of the contact form:

Coding Notes learned from class:

Link to view for the website:https://qiankuan.netlify.app/

Exercise 3 - Creating a Recipe Card

In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe from the link below

Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions

Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Use your creativity to make the page look appealing and interesting

HTML:

CSS:

I made another change to the page to make it more attractive

        Netlify Link :https://qiankuandashuaibi.netlify.app

---

FEEDBACK

WEEK X

Specific Feedback: ..

General Feedback: