Interactive Design - Lecture Notes & Class Summary

-
03 Apr 2023 - 30 May 2023 (Week 1 - Week 9)
Vincent Lee // 0359386 
Interactive Design // Bachelor of Design (Hons) in Creative Media // Taylor's University 
Lecture Notes & Class Summary
Lectures


Week 1 | Surveying the Possibilities

Mr Shamsul briefed us on the module information booklet, which is a document that contains information about the course syllabus, learning outcomes, assessment criteria, and other important details. Moreover, he also gave us an overview of the various tools and software required for specific exercises and projects. These tools include Google Slide, Adobe Photoshop, Adobe Illustrator, Visual Studio Code, Adobe Dreamweaver, Adobe XD, and Figma. Additionally, he emphasised the importance of having skills in Bootstrap and Netlify, which are critical for web development and design.




Week 2 | Usability: Designing Products for User Satisfaction

We learned about designing products that are usable and able to increase user satisfaction. We gained an overview of the knowledge related to this topic. Although there are 10 principles of usability, Mr. Shamsul highlighted these 5 principles which he thinks specifically crucial when designing a website. These 5 principles are:

1. Consistency
 
Interface of BBC websites

Consistency is a key factor in web design for both visual elements and functionality. Consistency ensures that theses websites looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. Examples are Apple.com | SimeDarby.com.my | 153joombas.com 

2. Simplicity 
 
Netflix Subscription Gateway

Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.

3. Visibility 
 
Call-to-Action (CTA) buttons are in blue (visible) 

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

4. Feedback 
Feedback (rating columns turn blue) when users performing an actions 

Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.

5. Error Prevention 
 
Undo button to revert previous action

It involves alerting a user when they're making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. 

Common Usability Pitfalls and How to Avoid Them
  • Complex Interfaces 
  • Confusing Navigation
  • Poor Feedback 
  • Inadequate Error Handling


Week 3 | Colour Theory

We learned about the color theory and how it can help us make our websites more user-friendly. When we choose the right colors, it makes it easier for people to find what they're looking for and take action (CTA). Plus, using consistent colors can help people remember our brand better. Mr. Shamsul and Ms. Dini gave us guidance on our web replication tasks and even brief us on our upcoming Project 1: Prototype Design. 

- Color Relationship
 
Colour Wheel
  • Monochrome - consisting of various tints, shades, and saturation of the same color.
  • Complementary - Based on two colours from opposite sides of the color wheel.
  • Analogous - Featuring three colours that are next to each other on the color wheel.
  • Triadic - Using three colours that are at the points of a triangle drawn within the color wheel.

- Colour Temperature
 
Colour Temperature
  • Warm Colours
    • Hues that contain higher amounts of yellow and red are considered warm colours -
    • evoke a sense of passion, happiness, and heat,
    • can also seem aggressive and bring feelings of danger. That’s why they’re often used in alert messages
  • Cool Colours
    • Cool colors contain higher amounts of blue and purple
    • Reminisce of chilly climates, crystal clear waters, or the sky.
    • They are considered more soothing and relaxing than warm colours.
    • Can also carry connotations of formality and sadness.
- Color System [RGB, CMYK, and HEX]

 
Colour System
  • RGB
  • CMYK is used in print design. These are also the standard cartridges for most color printers. 
  • HEX color system uses a six-digit, such as #000000 (black) or #ffffff (white). Every two characters represent a colour value.

- Tints and Shades

 
The difference between Tint, Shade and Tone


- Hue, Saturation and Lightness

 
Hue, Saturation and Lightness
  • Hue describes the degree of similarity between colors. Point of reference is usually a color such as red, green, blue, or yellow.
  • Saturation refers to colour intensity. Increasing it will make the colour more vibrant and darker. Decreasing it will make the colour appear faded and pale.
  • Lightness defines how bright a color is compared to pure white. Changing only the lightness parameter in graphic editing software will produce different tints and shades.


Week 4
No classes conducted due to Hari Raya Aidilfitri. But we are require to work on the task given in Project 1: Prototype Design. 



Week 5 | Organising A Website

Although there were no classes conducted due to Public Holiday however, we are require to watch the pre-recorded lecture then continue working on the task given in Project 1: Prototype Design. 

1) Chunking 
  • dividing the site's content into manageable chunks of information, with all chunks related conceptually to one another. 
  • Content within each chunk can then be arranged hierarchically, so that the most important topics with a chunk will appear first in a navigational system. 

2) Site Structural Themes
Sequence (from one page to another) 
  • This is a common structure found in books, magazines, and other print materials.
  • Sequential ordering can be chronological or follow a logical series of topics, progressing from general to specific, or alphabetical, as seen in indexes, encyclopedias, and glossaries.
  • Straight sequences are especially appropriate for organizing training or educational websites.
  • These types of websites typically require users to progress through a predetermined set of material in a linear fashion, without additional links or distractions.
  • The only links provided are those that support the linear navigation path.
straight linear sequence, and linear sequence with supporting digression

Hierarchies 
  • static website, when the website does not require often updating 
  • It is the best way to organise most complex bodies of information. 
  • Website are usually organised around a single home page, which then links to subtopic menu pages, hierarchical architectures are particularly suited to web site organisation. 
hierarchical diagram in corporate and institutional life 
  • A hierarchical organisation also imposes a useful discipline on your own analytical approach to your content, because hierarchies are practical only with well-organised material. 

 
common types of hierarchical navigation structure 
  • Star, Hub-and-Spoke 
    • set of pages arrayed off a central home page. 
    • single-tier hierarchy
    • navigation tends to be a simple list of subpages, plus a link for the home page. 
  • Multitiered Hierarchical/ Tree Architecture
    • the arrangement of major categories and subcategories has a powerful advantage for complex site organisation
    • This hierarchy of content subdivisions should not become a navigational straitjacket for the users who wants to jump from one area of the site to another. 
  • Most site navigation interfaces provide global navigation links that allows users to jump from one major site area to another without being forced back up to a central home page or subpages.
Local (left column) and global (tabs below the header) navigation systems provide a flexible and easy to understand navigation system
  • In the figure above, tabs in the header allow the user to move from one major content area to another, the left navigation menu provides local topic categories, and a search box allows the user to jump out of categorical navigation and find pages based on a web search engine.

Webs
  • Weblike organizational structures are less restrictive in terms of how information is presented compared to other organizational structures.
  • The goal of weblike structures is to mimic the associative thought process, allowing users to freely explore their interests in a unique and idiosyncratic pattern.
  • Weblike structures work best for small sites that feature lists of links, and for sites targeted towards highly educated or experienced users seeking further education or enrichment.
 
A simple web of associated pages.


3) Site Files and Directory Structure
  • Best way to name a folder is to not use uppercase, use lowercase
  • if there are repetition of name, put underscore/ dash to separate it. 
  • landing page on the home page have to be named index, because whenever you upload your file to a server the URL will only find the index file to be displayed first 
Ideally the information architecture will be consistently reflected in the actual organisation of files and directories in the site structure.


4) Wire Frame
  • wireframes are the “rough map” that will eventually be used by graphic and interface designers to create preliminary and final page designs for the site. 
  • Wireframes are rough two-dimensional guides to where the major navigation and content elements of your site might appear on the page.
 
A typical page wireframe diagram.
  • Things that might appear as standard elements of a web page wireframe include:
    1. Organisational logo
    2. Site identity or titles
    3. Page title headlines
    4. Breadcrumb trail navigation
    5. Search form
    6. Links to a larger organization of which you are a part
    7. Global navigation links for the site
    8. Local content navigation
    9. Primary page content
    10. Mailing address and email information
    11. Copyright statements
    12. Contact information
Users have developed clear expectations about where common content and interface elements are likely to appear. Violate these expectations at your peril.
  • Human interface researchers have done studies on where users expect to find standard web page components and have found clear sets of expectations about where some items are located on web pages.


Week 6 | The Web

We consulted with Mr. Shamsul on our prototype design for Project 1. As the consultation sessions took up all the classes, thus the lecture session was recorded. We need to complete the recorded lecture and Exercise 3: HTML: Personal Profile Page, before next class as this topic are related to our upcoming exercises and projects. 

Web Standards
  • CSS allow motion and animation in the languages 
  • Domain Name: www.url.com
  • Internet Extension: .com, .gov, .bitz, .org
  • Internet Service Provides: Maxis, Celcom, Unifi
  • IP address could be refer to telephone number for the computer

Structure of a Web Page
In all kinds of documents, structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document. 

1. Understanding Structure 
  • spiting of stories/ articles into headline, body copy and images
  • The use of headings and subheadings in any document often reflect a hierarchy of information
  • Any document will start with a large heading, followed by an introduction or the most important information
  • Subheading to break monotonous, structure helps readers to understand the stories in the newspaper

2. Learning about Markup
  • Hyper Text Markup Languages (HMTL) 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
<element>Information</element>
 opening tag (without /)
closing tag (with /)

 
opening tag

 
closing tag
  • Attributes Tell Us More About The Elements 
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.

All HTML code or tag must be in lowercase only, except for the content attributes are placed one space after tag ( < >), to separate the attribute name and attribute value, we need to use equal sign (=)

 
attributes (additional information)
  • Body, Head & Title
mandatory elements in a web document 
    • <body>
      • You met the <body> element in the first example created. 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)
    • img 
      • is a single sided HTML element
      • include src"" means the link to the image
      • example: <img src="images">

3. Tags and Elements
  • Headings
    • HTML has six levels of headings:
    • <h1> main headings
    • <h2> subheadings
    • If there are further sections under the subheadings then the <h3> element is used and so on.
 
sample of different headings
  • Paragraph
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.

 
sample of formatting paragraph 
  • Bold & Italic (inline element)
  • <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.
 
sample of formatting bolded text
  • <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 <I>.
 
sample of formatting italic text 
  • Lists
  • Ordered list are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order 
    • <ol> The ordered list is created with the <ol> element
    • <li> Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
 
sample of ordered list (numbered)
  • Unordered list are list that begin with a bullet point. The pattern of bullet point can changed with using CSS code.
    • <ul> The unordered list is created with the <ul> element
    • <li> Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
 
sample of unordered list (bullet point) 
  • 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 that the parent list.
    • In nested unordered lists, the browser will usually change the style of the bullet too
 
sample of nested list
  • 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:
    1. Links from one website to another
    2. Links to one page to another on the same website
    3. Links from part of a web page to another part of the same page (internal links)
    4. Links that open in a new browser window (tab), to inform audience they are in a different website (external links)
  • Writing links
    • Links are created using the <a> element
    • User can click on anything between the opening<a> tag and the closing </a> tag
    • Specify which page to link using the hyperlink reference (href) attribute
 
sample of writing links
  • Linking to other sites
    • <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 user 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 <a>


Week 7 | HTML and CSS

Image Formats for Web

1) JPEG (Joint Photographic Expert Group)
  • The most common image format used on the Web
  • Highly compatible and small size and very little loss of quality
  • It is saved using lossy compression
  • JPEG format usually used for photos on the Web
2) GIF (Graphics Interchange Format)
  • Uses lossless compression
  • You save the image over and over again without lose any data
  • It uses 8-bit lossless format which support a maximum of 265 colors.
  • Unique feature of this formate is its ability to be animated
  • This format is an excellent choice for logo, limited colour images that need to be in small size
  • It is small in size but not suitable for photos
3) PNG (Portable Network Graphics)
  • It contained a bitmap of indexed colours and uses lossless compression
  • It also allows full range of colour and better compression
  • The most used format on the Web 
  • Support image with transparent

Extra Markup

 
examples of block-level and inline elements

1) Block Elements
  • Some elements will always appear to start on a new line in the browser window
  • It is know as block level elements 
  • Example: <h1>, <p>, <ul> and <li>
2) Inline Elements
  • Some elements will always appear to continue on the same line as their neighbouring elements
  • It is know as inline elements
  • Example: <b>, <i>, <em>, <a> and <img>

Cascading Style Sheet (CSS)
  • CSS allows you to create rules that specify how the content of an element should appear. 
  • For instance, you can set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level header should be in a blue, italic, Helvetica typeface
  • CSS style rules with HTML elements: 
    • A CSS rule contains two parts: a selector and a declaration
  • CSS properties affect how elements are displayed: 
    • CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.
    • You can specify several properties in one declarations each separated by a semi-colon
  • Method to Employ CSS
    • Using External CSS
      • <link>
      • It should use three attributes:
      • href; To specify the path to the CSS file
      • type: This attribute specifies the type of document being linked to. The value should be text/css
      • rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
    • Using Internal CSS
      • <style>
      • a <style> element, which usually sits inside the <head> element of the page
      • The value should be text/ css

Importance of using external CSS style sheet
  1. Allow all pages to use the same style rules (rather than repeating them in each page)
  2. Keeps the content separate from how the page looks
  3. Means you can change the styles used across all pages by altering just one file (rather than each individual page)


Week 8 | Display and Position

Online learning involves watching lecture videos that are split into three sections. The initial part focuses on explaining display properties and provides an overview of various properties related to displays. The second and third sections demonstrate the process of creating layouts using HTML and CSS, as well as utilising an external style sheet to apply CSS.

The Display Property

 
samples of block-level and inline elements

 
display of block-level and inline elements

Block-level Element 
  • <div> is the standard block-level element. A block element starts on a new line and stretches out to the left and right as far as it can. 
  • It is similar to an empty box, we can include several elements like header, paragraph, images and etc.
  • Other common block-level element are p and form, and new in HTML5 are header, footer, section, and more. 
Inline Element 
  • <span> does not just change anything in terms if characteristics. It is just a plain standard/ general inline element. 
  • An inline elements can wrap some text inside a paragraph <span> like this <span> without disrupting the flow of that paragraph. 
  • The a element is the most common inline element, since we using them for links. 
Other Display Properties
  • Inline-Block
  • Flex
  • Grid

Box Model in CSS
  • Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li. Each of these is a container, or box.
  • Each box has three layers that surround its content. The layers are, in order from inside to outside: 
    • Padding (individual space within the content)
    • Border (appear outside the content)
    • Margin (create individual space outside the box)
 
various layers in the box model
  • The reason is to have proper manipulation of where we want to locate the contents. Includes values into these properties (padding, border and margin)
  • the size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px). 
 
HTML relationship tree
  • reason to include an element in 'div' tag/ element is to create layout. Another method to create layout in CSS is using position property. 

CSS Position Property
It defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page. 

 
five position property
  • Static 
    • default, no effect
    • We need to include other properties (Top, Right,  Bottom, Left) to position our elements.
  • Relative
    • positioned according to the normal flow of the document and then offset relative to itself based on the values of top, right, bottom and left. 
    • Since the offset does not affect the position; thus, the space given for the element in the page layout is the same as if position were static. 
  • Absolute
    • z-index is the depth to our HTML document, stacking position from back to front
  • Fixed
    • This is used for navigation bars mostly, when you scroll down the page and the menu of the page also comes down with you.
  • Sticky
    • it functions as a combination of both "relative" and "fixed" positioning. 
    • the element behaves as a relatively positioned element until it reaches a specific point, and then it switches to behaving like a fixed element. 
    • the sticky element will move in relation to its normal position, based on the document flow.
    • However, once it reaches the designated point, it will become fixed in its position.



Week 9 
Briefing of Project 2: Working Web Page and Final Project: 5 Page Website. Then individually, face to face consult with Mr. Shamsul over our learning progression based on our Exercise 4: Web Layout Exercise and Project 1: Prototype Design. 



Week 11 | Bootstrap
I did not attend the class due to illness.



Week 12 - Week 13
No classes were conducted.



Week 14
Final Project Consultation.

Quick Links

Popular posts from this blog

Typography - Task 1: Exercise 1 & 2

-
Image
30 Aug 2022 - 26 Sept 2022 (Week 1 -Week 5) Vincent Lee // 0359386 Typography // Bachelor of Design (Hons) in Creative Media // Taylor's University (TDS) Task 1: Exercises (Text Expression and Text Formatting) Instructions Exercise 1: Type Expression Exercise 2: Type Formatting Feedback Reflection Further Reading LECTURES LECTURE LIST Lecture 1:  Typo_0_Introduction Lecture 2: Typo_1_Development Lecture 3: Typo_2_Basic Lecture 4: Typo_2_Text_P1 Lecture 5: Typo_3_Text_P2 Lecture 6: Typo_5_Understanding Lecture 7: Typo_6_Screen&Print Week 1 Class Summary 1 Mr. Vinod showed us how to use the Typography Facebook group and create an e-portfolio using a YouTube video. He also gave us advice on how to succeed in his class by explaining the dos and don'ts in the Module Information Booklet. Mr. Vinod suggested that we read not only our own feedback but also feedback given to others. This ...
Read more