Interactive Design - Lectures and Exercises

28.8.2023 - 16.10.2023 / Week 01 - Week 08
Tan Zhao Yi / 0363285
Interactive Design / Bachelor of Design (Honours) in Creative Media
Lectures and Exercises

LECTURES

Lecture 1: Usability

The effectivity, efficient, and successfulness a particular user can utilise a product or design in a certain situation
User are able to achieve objective easily without relying expert knowledge
Key principle of Usability: Consistency, Simplicity, Visibility, Feedback and Error Prevention

A. Consistency

Consistency in web design is crucial for creating a seamless and intuitive user experience by ensuring uniformity in all website elements, preventing user frustration and facilitating pattern recognition, such as consistent button appearances and familiar icon meanings like the backward arrow for the back button.

B. Simplicity

The principle of simplicity in user interfaces involves minimising steps, using clear symbols and terminology, and reducing the chance of errors to enhance user experience and help users achieve their goals efficiently.

C. Visibility

Users should know, just by looking at an interface, what their options are and how to access them.

D. Feedback

Feedback communicates the results of any interaction, rendering it both visible and comprehensible.

E. Error Prevention

We humans are prone to- and will always make mistakes.

Lecture 2: Understanding Website Structure

Website structure 3 key elements: Header, Body, Footer.

Header

Top section of webpage
Contains logo, navigation menu and contact information

Body

Main content area
Contains multimedia elements like links, text, images, videos, C2A buttons etc.
Proper organisation is important for readability

Footer

Bottom of a webpage
Contains copyright information, links to important page and contact details
Webpage closure / additional navigation options

Organising Content - Logical grouping and clear labelling
Navigation Menu - Clear and concise labels for menu items, considering dropdown menus for complex sites

Lecture 4: The Web and Language

Web structures with sequence, and different font sizes.

HTML

Elements:

1. Headings

Up to six levels

2. Paragraph

Bold

...

Italic

...

3. List

Ordered List

<ol>

</ol>

Unordered List

<ul>

</ul>

Nested List

<ul>

<li>...

<ul>

</ul>

</li>

</ul>

4. Links

Needs attribute: href
Attribute

ONLY added in open tags
property + "value"

Link to a new tab: <a href="link" target="_blank">text</a>

5. Images

Week 4 Tutorial: My 1st Web Page

We used Text Edit to create a html page. Mr. Shamsul teached us all the formula step-by-step. After creating a new document, we first have to set the format to make it a plain text to enable html page, then wrap to page.

HTML View

Web Page View

Lecture 5: HTML & CSS

ID and Class attribute

ID attribute (=student id)

Unique - no two element have same ID value

Class

All elements can have class attribute
Lowercase text only, no numbers

Block element (block level element)

Always appear in a new line
Each new element will take up the whole space in the webpage
Exp: <h1>

Inline element - opposite of block element

Appears continue on the same line
Exp: <img> <a>

CSS

Allows to create sets of rule to your html
Change background colour, typeface, font size etc.
A CSS rule contains 2 parts: selector + declaration
Type out: Use { } to type your style declaration - specify it’s CSS

Selector: Which element that rule applies to. (All the html element that u want to change )

Declaration: How the elements referred to in the selector should be styled.

Property: value;

Exp: font-family: Arial;

Color: yellow;

Lecture 6: CSS Selector

Target & style HTML elements
Define which elements should receive specific styles (colours, fonts, spacing etc.)
Enable to control the presentation and layout of a web page

Universal Selector

Select all elements on the page
Presented by an asterisk (*)

Element Selector

Simplest type of selector
Targets elements by their tag name

ID Selector

Targets with a specific id attribute
IDs must be unique within an HTML doc
Use # symbol followed by ID name

Class Selector

Targets with a specific class attribute
Use . Symbol followed by class name

Descendant Selector

Selects an element that is a descendant of another element
Specify a hierarchy of elements targeted

Child Selector

Selects element that are direct children of another element
Use >

Pseudo-class Selector

Selects elements based on their state / position in relation to other elements
Common pseudo-class: :hover, :active, :link, :focus, :nth-child(n)

Pseudo-element Selector

Selects parts of an element rather than the element itself
Common pseudo-element: ::before, ::after (used to add content before / after an element)

Reason of having selectors:

A. Structure

B. Attribute-based selection

C. Pseudo-classes and Pseudo-elements

D. Responsive Design

E. Stateful Interactions

F. Cross-browser compatibility

G. Ease of maintenance

H. Accessibility (readability & usability)

Lecture 7: Box Model

INSTRUCTION

PRACTICAL

Exercise 1 - Web Analysis

We were instructed to choose 2 websites from the link given: CSSWinner, observing its strengths and weakness and write a brief report in 500 words.

Submission

Fig 1.1.1. Web Analysis Submission

Exercise 2 - Web Replication

Objective: Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.

Website 1: Morgan Stanley

I took a screen grab of the website to begin the page replication.

Fig 2.1.1. Screengrab of Morgan Stanley website

My first step is to find a similar font with the website typeface. The original logo typeface has a sans serif characteristic, I changed a lot of font to make comparison and ended up with Sarabun, downloaded in Google Fonts.

Fig 2.1.2. Logo Typeface Comparison

*Top: Sarabun, Bottom: Original Typeface*

As the cover page is a short video, so I decided to download a tennis picture from Pexels to correspond the topic.

Fig 2.1.3. Original Website Cover Page

Fig 2.1.4. Replacing Image

There're few different typeface used in this website. In the navigation bar, I am using Mukta Mahee, and drew the search button with a pen tool.

Fig 2.1.5. Navigation Bar Typeface Comparison

*Top: Mukta Mahee, Bottom: Original Typeface*

Then I am using Montserrat (sub-title) and Geologica (title) for the cover button.

Fig 2.1.6. Cover Button Typeface Comparison

*Top: Montserrat & Geologica, Bottom: Original Typeface*

Also I used the pen tool to draw the graphic elements.

Fig 2.1.7. Graphic Elements

Finally, I adjusted all the kerning and spacing of the text.

Fig 2.1.8. Outline View #1

Fig 2.1.9. Outline View #2

Fig 2.1.10. Outline View #3

Final Website 1 Submission

Original Link: https://www.morganstanley.com/?authuser=0

Fig 2.1.11. Web Replication Submission - Morgan Stanley

Website 2: Ocean Health Index

Original Link: https://www.oceanhealthindex.org/?authuser=0

Fig 2.2. Web Replication Submission - Ocean Health Index

Exercise: Creating a Recipe Card

Objective: 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.

1. Create an HTML file named "index.html."
2. Create a section that displays the following information:

Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions

3. Create an external CSS file named "style.css."
4. Apply CSS rules to style your recipe card.
5. 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.

Process

1. Research

First I Google searched for some recipe website to look for good reference.

Fig 3.1.1. allrecipes website

Reference: https://www.allrecipes.com/sheet-pan-steak-and-shrimp-fajitas-recipe-8305215

One thing I didn't think about putting it in my website is the like and save button. It's a useful function and it did enhance user experience.

Fig 3.1.2. Simply Recipes website

Reference: https://www.simplyrecipes.com/3-ingredient-skillet-apple-crisp-recipe-7969839

In most of the recipe websites, the author includes a nutrition bar at the bottom of the recipe.

2. HTML & CSS

I decided to create a recipe of a Chinese cuisine, tomato egg stir fry.

Stage 1: HTML

Web Page View

Fig 3.2.1. Web Page View - JPG

HTML File View

Fig 3.2.2. Main heading HTML

Fig 3.2.3. Recipe Introduction HTML

Fig 3.2.4. Ingredient List HTML

Fig 3.2.5. Step-by-step Instruction and Image HTML

Fig 3.2.6. QNA Session HTML

Fig 3.2.7. Nutrition List HTML

Stage 2: CSS

Web Page View

Fig 3.3.1. Header

Fig 3.3.2. Recipe Introduction

Fig 3.3.3. Ingredients List

Fig 3.3.4. Step-by-step Instructions and Images

Fig 3.3.5. QNA Session

Fig 3.3.6. Nutritions Bar

CSS File View

Fig 3.3.7. CSS used in header

To be honest, I don't know what is the effect of the second CSS code. I was just trying everything and see what is working. This helps for me to learn faster rather than just following the lectures. I tend to figure out what I am doing.