Interactive Design: Lectures
4/9/2023 - 27/11/2023 (Week 1 - Week 14)
Seh Zi Qi/ 0355872/ Bachelor of Design(Honours) in Creative Media
Module Name: 202308/ Interactive Design
Exercises
LIST
Week 8: Independent Learning Week (No Lecture)
Week 10: Consultation (No Lecture)
Week 11: Consultation (No Lecture)
Week 12: Consultation (No Lecture)
Week 13: Consultation (No Lecture)
Week 14: Consultation (No Lecture)
WEEK 1
_______________
Lecture Recap
Since this was the first day of school, we didn't do much besides the lecturer, Mr Sham, introducing us to the module and briefed us about the first exercise that was due next week.
WEEK 2
Additional Files:
_______________
Lecture Recap
Usability:
- A particular user can utilise the a product or design effectively, efficiently and successfully.
- Design's usability depends on how well features accommodate user's needs and contexts.
- Should be able to go about easily enough to achieve objective without relying on expert knowledge.
- Interface with high usability guides users through its easiest route to achieve their goals.
Principle of Usability:
Consistency:
- A key factor for recognition in web design, both visual elements and functionality.
- It will look more coherent and feels harmonious when interacting with different elements, such as headers, sidebars or navigation bars.
- Consistent = Intuitive
- Another key factor for making patterns that's recognisable for users' experiences.
- If similar-looking things don't produce similar outcomes, it will be frustrating. Such as buttons with protruding boxes, all buttons should look similar.
Example Web-Designs with Consistency:
- Apple.com
- Sime Darby.com.my
- 153joombas.com
Simplicity:
- User interface should be "simple" to use
- Loosely referred to its need to minimise the number of steps involved in a process, using symbols and terminology to make it as obvious as possible.
- Incorporating simplify helps design better interface with more efficiency while still enjoying a great user experience.
Visibility:
- The basic principle is that the more visible it is, the more people will interact with it and figure out how to use it; similarly, if it's out of sight, it's difficult to use and know about.
- Users should know how to use the interface just by looking at it.
Feedback:
- Shows the results of interactions, making it visible and understandable.
- Signals the users if their interactions were successful or not.
Error Prevention:
- Alerts the users when they're making an error, with the intention of making it easier to use or preventing the same mistake from happening.
- Basic principle is to remove what humans are prone to, making mistakes.
Common Usability Pitfalls and How to Avoid them:
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
Reference:
_______________
Lecture Recap
Why Does It Matter?
- It's the foundation for a user-friendly and accessible website.
- If not worked on correctly, it can affect the user experience, search engine optimisation(SEO) and overall website performance.
- A well-structured website can easily help users find information and stay engaged.
The 3 Key Elements
Header:
- Top section of the webpage.
- Usually contains the logo, navigation menu and contact information.
- Mostly used to help users to quickly access essential information and navigation.
Body:
- Main content area of the webpage.
- Usually contains text, images, video and other multimedia elements.
- Proper organisation is crucial for readability.
Footer:
- Bottom of the webpage.
- Usually contains copyright information, links to important pages and contact details.
- Provides closure and additional navigation options to the webpage.
Organising Content:
- An organised webpage is key to being a well-structured website.
- Use headings(e.g. H1, H2, H3) to create a hierarchical structure.
- Logical grouping of content and clear labelling of sections improves the user experience.
Navigation Menus:
- Helps users move around the website.
- Use clear and concise labs for menu items.
- Consider using dropdown menus for complex websites.
WEEK 4
Additional Files:
_______________
Lecture Recap
Web Standards:
- Early days of the web, everyone accessed it with keyboards, mice and monitors; Nowadays, more devices can be accessible to the web.
- Some people do so on their pocket mobile devices and some people do so on their tablets with touch screens.
- Some people use audible interfaces, both talk and listen to computers, to access the web; This is more prominent towards people with disabilities who may be blind or amputees who can't access via touch.
Hardware VS Software Issues:
- Variety of Browsers: Firefox, Google Chrome, Opera & more.
- Variety of Operating Engines: Mac OS, Windows & Linux
- Variety of Screen Resolutions: 640 x 480px, 1680 x 1050px, 1920 x 1080px & more.
Content Difference:
- High probability that the website will look different towards everyone; To avoid this problem, we need web standards throughout the different devices.
- Despite the differences, the content should still be accessible towards everyone.
- It's possible to make a website that doesn't follow web standards, and if so, these websites are unlikely accessible towards people.
World Wide Web Consortium(W3C):
- The central organisation whose responsible of creating and maintaining web standards.
- W3C has defined dozens of standards, including the standard markup languages; The ones we'll use are HTML & CSS.
Why Web Standards?:
- To make the internet better, for both developers and visitors.
- Easier the code, easier for other codes to understand.
- Ensure that all browsers will display correctly
Structure of a Web Page:
- Understanding structure.
- Learning about markup.
- Tags and elements.
How Pages use Structure:
- Helps readers to understand the stories.
- Each story has a headline, body copy and images.
- The use of headings and subheadings in any document often reflect a hierarchy of information.
- Each topic might have a new paragraph, and each section can have a heading to describe what it covers
HTML Describes the Structure of Pages:
- To describe the structure of a web page, we add code to the words we want to appear on the page.
- The HTML code is made up of characters that live inside angled brackets <>
- Each element tells the browser something about the information that sits between its opening and closing tags.
Headings:
 |
| Fig 1.1, Headings, 18/9/2023 |
Paragraph:
 |
| Fig 1.2, Paragraph, 18/9/2023 |
Bold:
 |
| Fig 1.3, Bold paragraphs, 18/9/2023 |
Italic:
 |
| Fig 1.4, Italic paragraphs, 18/9/2023 |
Ordered List:
 |
| Fig 1.5, Ordered list, 18/9/2023 |
Unordered List:
 |
| Fig 1.6, Unordered list, 18/9/2023 |
Nested List:
 |
| Fig 1.7, Nested list, 18/9/2023 |
Links:
- Defining features of the web because they allow you to move from one web page to another.
 |
| Fig 1.8, Link, 18/9/2023 |
Adding Image:
 |
| Fig 1.8, Adding Images ink, 18/9/2023 |
In-class Exercise: https://ziqi-classexercise.netlify.app
WEEK 5
Additional Files:
_______________
Lecture Recap
ID Attributes:
- Every HTML element can carry the ID attributes.
- Used to uniquely identify elements from other elements.
- Important to remember not to have the same elements with same values or it isn't unique anymore.
Extra Markup:
- ID Attribute:
- Element with a unique identity allows us to style it
Class Attribute:
- Every HTML can have a class attribute
Block Elements:
- Called block level
- Some elements will appear to start on a new line in the browser window.
- Examples: <h1>, <p>, <ul> and <li>
Inline Elements:
- Known as inline elements
- Some elements will always appear to continue on the same line as their neighbouring elements.
- Examples: <b>, <i>, <em>, <a> and <img>
Introducing CSS:
- CSS allows you to create rules that specify how the content of an element should appear.
CSS Style Rules with HTML Elements:
- Works by associating rules with HTML elements.
- A CSS rule contains two parts: Selector and Declaration.
 |
| Fig 2.1, CSS style rules with HTML elements, 25/9/2023 |
CSS Properties Affect how Elements are Displayed:
- Sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.
 |
| Fig 2.2, CSS properties affect how elements are displayed, 25/9/2023 |
Methods to Employ CSS:
Using External Links - <link>:
- Used in an HTML document to tell the browser where to find the CSS file used to style the page.
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 Links - <style>:
- Include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page.
Building a site with more than one page, you should use an external CSS style sheet. This:
- Allow all pages to use the same style rules (rather than
- repeating them in each page)
- Keeps the content separate from how the page looks
- Means you can change the styles used across all
- pages by altering just one file (rather than each
- individual page)
CSS Colour:
- Background colour on text
- Colour on text
- Border colour
- Background colour
- Background image
- Background repeat
- Background attachment
- Background shorthand
CSS Background:
- Background colour
- Background image
- Background repeat
- Background attachment
- Background shorthand
CSS Formatting Text:
- Text Colour
- Text Alignment
- Text Decoration
- Text Transformation
- Text Spacing: Text-indent, Letter-spacing, Word-spacing
- Text Shadow
CSS Fonts:
- Best Web Safe Fonts for HTML and CSS
- Google Fonts
The following list are the best web safe fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
WEEK 6
_______________
Lecture Recap
CSS Selectors:
- CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allow you to target and style HTML elements on a web page.
- Used to define which elements should receive specific styles, such as colours, fonts, spacing, and more.
Universal Selector:
- Selects all elements on the page.
 |
| Fig 3.1, Universal Selector, 3/10/2023 |
Element Selector:
- Targets HTML elements by name.
 |
| Fig 3.2, Element Selector, 3/10/2023 |
ID Selector:
- Targets an element with a specific id attribute.
 |
| Fig 3.3, ID Selector, 3/10/2023 |
Class Selector:
- Targets elements with a specific class attribute.
- Multiple elements can share the same class.
 |
| Fig 3.4, Class Selector, 3/10/2023 |
Descendant Selector:
- Selects an element that is a descendant of another element.
 |
| Fig 3.5, Descendant Selector, 3/10/2023 |
Child Selector:
Pseudo-class selector:
- Selects elements that are direct children of another element.
 |
| Fig 3.6, Child Selector, 3/10/2023 |
Pseudo-class selector:
- Selects elements based on their state or position in relation to other elements.
 |
| Fig 3.7, Pseudo-class Selector, 3/10/2023 |
Pseudo-element Selector:
- Parts of an element rather than the element itself.
 |
| Fig 3.8, Pseudo-element Selector, 3/10/2023 |
Why There Are So Many:
- CSS provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling.
- Give web developers the ability to precisely target and style specific elements or groups of elements.
Specificity:
- Different situations may require different levels of specificity.
Structure:
- Enable you to target elements within specific structural contexts.
Attribute-Based Selection:
- Want to style elements based on their attributes or attribute values.
Pseudo-Classes and Pseudo-Elements:
- Help you style elements based on their state or position within the document.
Responsive Design:
- Enable you to apply different styles to elements based on the user's device characteristics.
Stateful Interactions:
- Allow you to style elements based on user interactions.
Cross-Browser Compatibility:
- Allows developers to use techniques that work consistently across different browsers.
Ease of Maintenance:
- Certain selectors may make CSS easier to maintain.
Accessibility:
- To improve accessibility by providing styles that enhance readability and usability for individuals with disabilities.
WEEK 7
Before we started class, he explained that these exercises needed to be in the same e-portfolio:
- Exercise 1: Web analysis
- Exercise 2: Web Replication
- Exercise 3: Recipe Card
Display Property:
- The most important CSS property for controlling layout
- Every elements has a default display value depending on the type.
- Most elements like blocks or inline are usually the default.
Block-level Element:
- <div> = The standard block element.
- Starts a new line and stretches out to left and right, as far as it can.
- It can be fixed by setting a certain width.
 |
| Fig 7.1, Block-level element |
Inline Element:
- <span> = The standard incline element.
- It wraps text, <span> like this </span>, without disturbing the flow of the paragraph.
 |
| Fig 7.2, Inline element |
- Can always override this function.
- If we want to customise our display with particular semantics, we can use inline div, though it would be weird.
- Common ones would be inline li for horizontal menus.
Other Display Properties:
- Inline-Block
- Flex
- Grid
Box Model:
- !!HAS TO BE IN THE BODY SECTION!!
- Most HTML elements are containers.
- body, p, h1, h2, div, ul, ol, li = Each of these are containers or boxes.
- Layers that surround the content: Padding, Border & margin
 |
| Fig 7.3, Layers surrounding content |
- Size of each layer can be specified by using CSS units of measure(em, %, and px).
- Reason to include an element in ‘div’ tag/element is to create layout.
- Another method to create layout in CSS is using position property.
Example:
- Consider the following <p>, which is wrapped inside a <div>:
<p>This is a paragraph. It is a very short paragraph.</p>
</div>
WEEK 9
_______________
Lecture Recap
Box Position Types in CSS:
- Use [z-index] to adjust what is front and back of the screen.
- [vh] is used universally across all view ports.
- [100 vh] = max vertical height, no matter the device size
- [height] = will cause proportions to overgrow screen size if it doesn't fit
- [min-height] = will grow if it doesn't fit the container.
Static:
- Default position, unaffected by top, bottom, left and right properties.
- Unaffected by z-index.
Relative:
- Can be moved by position properties, but only affects the box.
- Good for drop-down menus.
Absolute:
- Position is removed from flow.
- Considered alone and apart from other elements.
- Good for background videos.
Fixed:
- Similar to absolute but remain in place/ on screen even when scrolling.
- Good for back-to-top buttons.
Sticky:
- Sticks to the top of the page even when scrolling.
- Returns to position when scrolling above it
- Needs parent element, position = relative.
- Good for navigation.
ADDITIONAL FILES
Comments
Post a Comment