Interactive Design / Exercises
28/3/2022 - 10/5/2022 / Week 1 - Week 7
Nurul Adlina Rizal / 0345429 / Bachelor of Design in Creative Media
Interactive Design
Exercises
LECTURES
Week 1:
What is a website?
- Web document in the internet
- one page or more
- with intended purpose
Types of Websites
1. Informational Website
2. Corporate Website
- Maxis
- Petronas
3. Portfolio Website
4. Brochure Website
5. Entertainment Website
- Youtube
- Netflix
6. Personal Website
7. Educational Website
8. E-commerce Website
9. Nonprofit Website
Week 2:
The Web
Web Design and New Media
Web Standards
- accessed the Web using a keyboard, mouse and monitor
- variety of ways now
- phones, other pocket mobile devices
- audible interfaces, speech
Hardware and software issue:
- growing variety of browsers
- using a variety of operating system (Windows, Mac OS and Linux)
- variety of screen resolutions from 640 x 480 px to 1680 x 1050 px and beyond
- high probability that your website will look different
- BUT most important part is CONTENT
- develop according to web standards
- central organization who is responsible for creating and maintaining the standard - World Wide Web Consortium (W3C)
- standard markup languages : HTML & CSS
Why Web Standards?
- make internet a better place for both developers and visitors
- ensure that all browsers will display your website properly
How the Web Works
- web server hosting that site could be anywhere in the world
- your browser will first connect to a Domain Name System (DNS) server
1. Connect to the web via an ISP (Internet Service Provider). Type a domain name/web address into your browser.
2. Your computer contacts a network of servers called DNS servers. They act like a phonebook, they tell your computer the IP address associated with the domain name. Every device on the web has a unique IP address.
3. The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested. Web server is a computer connected to the web, set up especially to send web pages to user.
4. Web server sends the page you requested back to your web browser.
Structure of a Web Page
- important in helping readers understand the messages and to navigate around the document
How Pages use Structure
- each story have headline, body copy and images
HTML Describes the Structure of Pages
- made up of characters that live inside angled brackets <>
- HTML elements
- elements are made up of two tags: an opening tag and a closing tag
- element tells the browser something about the information between the opening and closing tags
 |
| Fig 1.0: html elements (5/4/2022) |
 |
| Fig 1.1: Closing Tag (5/4/2022) |
 |
| Fig 1.2: Opening Tag (5/4/2022) |
- attributes provide additional information about the contents of an element
- appear on the opening tag of an element
- made up of two parts: a name and a value, separated by an equal sign
 |
| Fig 1.3: Attributes (5/4/2022) |
- can have multiple values within one attribute
- to separate them use space
- can have two attributes in one tag
example: <a></a>
Body, Head, Title
<body>
- shown inside the main browser window
<head>
- before the body
- usually find the <title> element
<title>
- shown in the top of the browser (tab bar)
HEADINGS
<h1></h1> main headings
<h2></h2> subheadings
and so on..
PARAGRAPHS
<p></p>
BOLD & ITALIC
<b></b>
<i></i>
LIST
Ordered list
- numbered
<ol> </ol>
Unordered list
- begin with a bullet point
<ul> </ul>
<li> </li> (stands for list item)
Nested List
- put a second list inside an <li> element to create a sub-list or a nested list
- browsers display nested lists indented further than the parent list
LINKS
common:
- links from one website to another
- links that open in a new browser window (tab)
- links to one page to another on the same website
- links from part of a web page to another part of the same page
<a> user can click anything between the opening tag and the closing tag </a>
specify which page to link using the href attribute
 |
| Fig 1.4: Writing Links (5/4/2022) |
EXTRA ATTRIBUTES
title="what shows when you hover"
target="_blank" (opens link to a new tab)
<br/> is line break
Week 3:
Extra Markup
Adding Image in HTML
- tag <img> is used
- does not have a closing tag like other HTML elements
- tag is considered empty until you add an attribute
- <img src="url">
- src attributes specify the location of the image
- <img src="img_flower.jpeg">
- <img src="http://blahblah.com">
- alt=""
- width="" height=""
put it in the same folder > rename it to make it easier
Image Formats for Web
- JPEG, GIF, PNG (common image formats)
JPEG
- most common image format
- highly compatible and small size
- very little loss of quality
- using lossy compression
GIF
- lossless compression
- can save the image over and over again without losing any data
- excellent choice for logo
PNG
- lossless compression
- a bitmap of indexed colors
- dull range of color
- support image with transparent
- logo suitable too
ID and Class Attribute
Extra Markup
ID Attribute
- every html element can carry the ID attribute
- can be used to link to a specific area in your website
- unique
- don't use the same name for two elements
- allows you to style it differently
Class Attribute
- every HTML element can carry a class attribute
ID and Class Attribute
- does not affect the presentation of and element
- only change when there is a CSS rule
images must be 72 dpi
save for web
Display
Block Elements
- always appear to start on a new line
- ex: <h1>, <p>, <ul> and <li>
Inline Elements
- appear to continue on the same line as their neighboring elements
- ex: <b>, <i>, <em>, <a> and <img>
Week 4:
UI vs UX
UX Designers
- UX designers focus on the the structure and layout of content, navigation and how users interact with them.
- site-maps, user flows, prototypes and wireframes
- focused on the underlying structure and purpose of the software
UI Design
- focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand and use to facilitate those actions
Web Apps: can open on all devices
Native Apps: built for a specific platform such as iPhone or Android
Interface elements
Input Controls: buttons, checkboxes, toggles
Navigational Components: breadcrumb, slider, search field
Informational Components: tooltips, icons, progress bar
Content: accordian
- focus on the way the functionality is displayed and the fine detail of how users interact with the interface
Common Characteristics
- couple of standards that identify effective design across the board
- identify who the user is
- design must be as broad or narrow
- listen to your users and observe them interacting with your design
- design's interface must achieve its mission - communicating information
- first function then aesthetic
Golden Rules of Interface Design
- ease of learning
- efficiency of use
- memorability
- minimize errors
- satisfy the user
Introduction to CSS
- allows you to create rules that specify how the content of an element should appear
- CSS works by associating rules with HTML elements
- two parts: a selector and a declaration
selector
- all the html elements that you are selecting to change the rules of
- can apply to more than one element by separating the element names with commas
declarations
- indicate how the elements referred to in the selector should be styled
- split into two parts (property and value) which are separated by a colon
- semi-colon to separate a different declaration
- sit inside curly brackets
 |
| Fig 1.5: Selector and Declaration (9/5/2022) |
CSS Properties Affect How Elements are Display
Property
- indicate the aspects of the element you want to change
- ex: color, font, width, height
Values
- specify the settings you want to use for the chosen properties
 |
| Fig 1.6: Property and Values (9/5/2022) |
Method to Employ CSS
Using External CSS
<link>
- empty element and it lives inside the <head> element
3 attributes
- href
- type
- rel
- can use more than one CSS style sheet
Using Internal CSS
<style>
- in the <head> section
- value should be text/css
when building a site with more than one page, you should use an external CSS style sheet because:
- allow all pages to use the same style rules
- keeps the content separate from how the page looks
- means you can change the styles used across all pages by altering just one file
Week 5:
CSS
bold [font-weight]
- normal-text (appear at normal weight)
- bold-text (appear bold)
italic [font-style]
- normal-text to appear in normal style
- italic-text appear italic
- oblique-text appear oblique
UPPERCASE and lowercase [text-transform]
- uppercase-text
- lowercase-text
- capitalise-first (first letter of each word to appear capitalised)
Underline & Strike [text-decoration]
- none (removes any decoration already applied to the text
ex:
text-decoration: none;
- underline (adds a line underneath)
- overline (adds line over the top of the text)
- line-through (adds a line through words)
indenting text [text-indent]
- to indent the first line of text within an element
- it can take negative value
drop shadow [text-shadow]
- it can take three lengths and color for the drop shadow
- first indicate how far to the left or right
- second indicate how far to the left or right the shadow fall
- third value is optional and specifies the amount of blue should be applied
- fourth value is the color of the drop shadow
CSS Boxes Model
- use pixel to specify the size of the box
- limiting width [min-width, max-width]
- limiting height [min-height, max-height]
overflowing content [overflow]
- tells the browser what to do if the content contained within a box is larger than the box itself
- hidden (hides any extra content that does not fit in the box)
- scroll (adds a scrollbar to the box so that users can scroll to see the missing content)
Border, Margin & Padding
Border
- every box has a border
- separates the edge of one box from another
Margin
- sit outside the edge of the border
- to create a gap between the borders of two adjacent boxes
Padding
- the space between the border of a box and any content contained within it
- can increase the readability of its content
 |
| Fig 1.7: Borders, Margins and Padding (10/5/2022) |
The Display Property
- most important CSS property
- default is usually block or inline
- block is often called a block-level element
- inline element is called an inline element
Block-level Element
- <div> is the standard block-level element
- starts on a new line and stretches out to the left and right as far as it can
others: p and form
Inline Element
- <span>
- can wrap some text inside a paragraph without disrupting the flow of that paragraph
Week 6: -
Week 7: -
INSTRUCTIONS
Exercises
Basic Site Evaluation
 |
| Fig 1.8: Basic Site Evaluation Excel Table (5/4/2022) |
Link to Doc:
https://docs.google.com/spreadsheets/d/1kjblKw2HL_o1aHH8fvoGKLjxGZ0Ye79A/edit?usp=sharing&ouid=116319354803156060120&rtpof=true&sd=true
In this exercise, we looked at three good and three bad websites based on our preferences and user experience with each site. We also had to list down each websites' pros and cons.
In this exercise, we looked at three good and three bad websites based on our preferences and user experience with each site. We also had to list down each websites' pros and cons.
HTML and CSS Document Development
Exercise 1
Based on this document,
 |
| Fig 1.9: Word Document Reference (12/4/2022) |
The Code
 |
| Fig 2.0: The Lines of Coding (12/4/2022) |
FINAL
Link: https://exercise-1-nuruladlina.netlify.app/
 |
| Fig 2.1: A screenshot of my webpage (12/4/2022) |
Exercise 2
Based on the document given, we made a site about VUW (Vision for the Unequal World).
 |
| Fig 2.2: Coding for the site (15/4/2022) |
FINAL
 |
| Fig 2.3: Screenshot of the Final Site (15/4/2022) |
CSS Layout
Layout Exercise
Based on the document we were given, we have to make a site based on Effective Visual Communication for Graphical User Interfaces. We started to use CSS here.
FINAL
 |
| Fig 2.4: Screenshot of the Final Site (21/5/2022) |
FEEDBACKS
Week 1
General Feedback: Set up your e-portfolio according to Mr Vinod's
tutorial.
Specific Feedback: -
Week 2
General Feedback: -
Specific Feedback: -
Week 3
General Feedback: Make sure to name your file index.html
Specific Feedback: -
Week 4
General Feedback: -
Specific Feedback: -
Week 5
General Feedback: -
Specific Feedback: -
REFLECTIONS
Experience
Learning about CSS and HTML was really fun. There was a lot of theory and things needed to learn before we could build our on website. Classes were full of knowledge and the things learnt were useful to our future projects. I was able to learn from my other classmates questions and the problems they were having in their code. Physical class were great too since I was able to get feedback directly from Mr Shamsul.
Observation
I observed that I was able to pick up the rules of code in html pretty easily. However, when we started learning CSS, it got more difficult. Despite the difficulties in trying to replicate the layout sample given by Mr Shamsul, I quite enjoyed creating sites and being able to manipulate certain elements of the code to make it look the way I wanted.
I observed that classes felt a bit longer each day due to feedback sessions taking a lot of time and having to wait your turn. Especially for coding where it gets complicated and require detailed attention to make sure everything is correct and the way we want it to look.
Findings
I found that the basics of UI/UX is very interesting and that they are many possibilities to how you can make your site look instead of depending on sites like Wix or Squarespace. I also gained a new interest on UI/UX and appreciation for how sites and applications are made.
Comments
Post a Comment