Interactive design: Lectures + Exercises

28/8/23- // Week 1-Week 14
Mercy Chong HuiZiun // 0360929

Interactive Design // BDCM
Lectures + Exercises

Lists

Lectures

Ex 1: Web Analysis
Ex 2: Web Replication
Ex 3: Recipe Card

Reflections

Instructions


Fig 1.0 Module Information Booklet

Lectures

W2: Usability: Designing products for user satisfaction 

Q: What is usability?
A: Usability refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation. It is a part of User Experience (UX) Design.

> An interface with high usability guides users through its easiest route to achieve its goal.
Principles of usability
  • Consistency
    > Ensures that your web looks coherent and works harmoniously across all different elements.
    > Eg: Same color palette/typeface etc: Tells users that they're on the same page/website 

  • Simplicity
    > The need to minimize the number of steps involved in a process -> used symbols/terminology that makes the interface as obvious as possible.
     
  • Visibility
  • Feedback
  • Error prevention
Common usability pitfalls + How to avoid them
  • Complex interfaces
  • Confusing navigation
  • Poor Feedback
  • Inadequate error handling
W3:  Understanding website structure 
Q:Why does website structure matter?
- A well-structured website helps users to find information easily and keeps them engaged.
- It affects user experience, SEO, and overall website performance.

Key elements of a website
  • Header
  • Body
  • Footer
Header
: The top section of a webpage;
containing the website's logo, navigation menu, and contact information.

Body
: Main content area of a webpage;
contains text, images, videos, and other multimedia elements.

Footer
: Located at the bottom of a webpage;
includes copyright information, links to important pages, and contact details.

W4: Web Standards 
> There's a variety of ways that people do to access the web.
Example: using touch screen on a tablet, having audible interfaces etc

Most hardware/software should have a good understanding of the web.
Hardware & Software issue:
  • Growing a variety of browsers (Firefox,Safari, Microsoft Edge..)
  • People use a variety of operating systems (Windows, MacOS..)
  • Wide variety of screen resolutions (640* 480px to 1680*1050px)
> With the diversity in how people access the web, there's a high probability that your website will look different to other visitors.
> Most important part in a website is its content.

Web standards are the core set of rules for developing websites. The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C)

Standard markup languages in W3C to be used in this course:
  • HTML
  • CSS
How the web works
Structure of a Web Page
  • Understanding structure 
  • Learning about markup
  • Tags and elements
> Structures is important in helping readers understand the messages + navigate around the document.

How pages use Structure

Create a heading in MS Word
Home > Styles panel > Heading
(x increase the size/bold etc)

Create heading in Adobe InDesign
New character formats > Style name: Heading 

HTML describes the structure of pages
> The HTML code is made up of characters that live inside angled brackets <> -> HTML elements

Opening tag and a closing tag
(<element>Information</element>

Attribute name indicates what kind of extra info abt the element's content. It should be written in lowercase.

Body, Head, & Title (element)
<body>
: Everything inside this element is shown inside the main browser window

<title>
: Contents of the <title> element are shown in the top of the browser (tab bar)

<head>
: Contains information abt the page. Often see a <head> element before <body> element

Headings
Paragraph
: To create a paragraph -> add <p> tag and closing </p> tag

Bold & Italic
: <b> <strong> <i>.. elements for bolds and italics 

Notes: 
-To add another attribute, always add a space 

W5: ID and Class Attribute 
ID Attribute
: Every HTML element can carry this attribute
: Used to uniquely identify the element from other elements 
-> No two elements have the same value for their ID Attributes
-> No numerical values

Class Attribute
: Can share the same name/value on HTML element.

ID & Class attribute
: It will only change its appearance if a CSS rule indicates it should be displayed differently.

Block elements
: Known as block level elements
Eg: <h1>, <p>, <ul>, and <li>

Inline elements
: Some elements will always appear to continue on the same line as their neighboring elements
Example: <b>, <i>, <img>...

Intro to CSS(Cascading Style Sheet)
: Allows you to create rules that specify how the content of an element should appear.
Example: Setting color background, all paragraphs should appear in gray using the Arial typeface, etc.

CSS Style rules with HTML elements
: CSS rule contains two parts; a selector and a declaration.

 

  : Colon | ; Semi-colon

W6
W7: Display Property

Block-Level Element
<div> -> Standard block level element

Inline Element
<span> -> Standard inline element

Box model in CSS

  • Padding
  • Border
  • Margin
float - left & right
overflow

Exercise 1: Web Analysis

[Task to-do] 

  • Choose 2 websites from the link provided and review/evaluate them according to the requirements. (design, layout, functionality...)
  • Write a brief report in no more than 500 words in Google Slides.
[Process]

Hunting the websites here given by the lecturer.

Chosen websites: Faster Displays + Twinbru 


Exercise 2: Web Replication 

[Task To-do]
  • Replicate two existing main pages of the website given.
  • Software: Adobe Illustrator/Photoshop 
Stock images: Pexels
Google Fonts: https://fonts.google.com/


Pre digitizing process

> Before getting into the web replication part, we must have a full screenshot of the main page of the website. 

The steps:
  • Right-click on the site and it should have an 'Inspect' option button and this tab on the right will appear. 

  • CTRL + Shift + P and another small tab will appear on top as shown below diagram. 
  • Type in "scre" and there will be a "Capture full size screenshot" option. Click on it and the full screenshot of the main page will be downloaded.
  • Proceed to the digitized process after getting the screenshot of the home page.
Digitization process
(Adobe Illustrator)

> Using guidelines for accurate measurements on the layout placement. 

Final Outcome 

Web Replication Website #1

Fig Comparison of web replica (1)

Fig Web Replication 1 (PDF)

Web Replication Website #2

Fig Comparison on web replica (2)

Fig Web Replication 2 (PDF)


Exercise 3: Create a Personal Profile Webpage

[Task To-do]
  • Create a personal webpage that includes the basic info about ourselves using HTML.

  • Things to include:
    -> HTML Structure (<!DOCTYPE html>, <html>, <head>, <body>)
    -> Page title (<title>)
    -> Header section (<h1>, <h2>)
    -> About me, My interests, your picture, contacts..
    (<p>, <ul>, <img>...)
  • Publish the final result on Netlify.
Process






Exercise 4:Creating a Recipe Card

[Task To-do]
  • Creating a recipe card using HTML and CSS.

    Things to include: 
  • HTML file "recipe.html"
  • Recipe title
  • Include necessary images
  • Ingredients list
  • Cooking instructions

    Create a CSS file: "style.css"
  • Apply CSS rules onto the recipe card.
  • Using CSS selectors
Process

Firstly, I went to ChatGpt and asked the bot to come up with a recipe for brownies and using this information to put into my recipe card contents for later.
Fig ChatGpt for the recipe


Fig Creating a CSS file on Dreamweaver




Final Outcome

Link to the site: Brownies Recipe
Reflections



Email Post

Popular Posts