Interactive Design - Exercises

30.03.2022 - 11.05.2022 ( Week 1 - Week 7 )

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Interactive Design
Exercises

---

LECTURES

Week 1 -  What is a Website

• What is a Website?
  It is a web document on the internet, it has one page or more and it has an intended purpose.
  
  
• Different types of website
  There are many different types of websites on the internet:
  
• Informational website
• Corporate website
• Portfolio website
• Brochure website
• Entertainment website
• Personal website
• Educational website
• E-commerce website
• Nonprofit website

Week 2 - Web Design and New Media

In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor. Today, there is much more variety in the way people access the Web. Many people do it on their cell phone or another pocket mobile device. Many people do this on a tablet computer with a touchscreen interface instead of a keyboard and mouse. Some people access the web through an audible interface (they talk to the computer, or they listen to the computer talk to them, or both).

Web Standards - Hardware and Software Issue

• Variety of browsers that people can choose from, including 
• Microsoft Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
• Safari
• etc
• Variety of operating systems, including 
• Windows
• Mac OS
• Linux
• Variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.
• With the diversity in the way people access the web, there's a very high probability that your website will look different to many of your visitors than it does to you.
  
• Despite these differences, the most important part of your website is its content, and all users should be able to access that.
• The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.
• Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access your site.

Week 3 - Extra Markup

Adding Image in HTML

• The tag <img> is used to add an image in HTML
• Img tag is a single sided element which does not have a closing tag like other HTML element
• The 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://stockimages.anylink.com">
• Alt attribute is added to described the image
• <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>
• Alternatively, you could also specify the width and height by adding those attributes
• <img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>

Image Format for Web
Three common image formats for Web

• 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
• JPEG format usually used for photos on the Web
• It is saved using lossy compression
• 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 color images that need to be in small size
• It is small in size but not suitable for photos
• PNG (Portable Network Graphics)
• It contained a bitmap of indexed colors and uses lossless compression
• It also allows full range of color and better compression
• The most used format on the Web
• Support image with transparent

Extra Markup
ID attribute :

• Every HTML element can carry the ID attribute
• It is used to uniquely identify the element from other elements on the page
• It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
• Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page
• Eg: you might want to assign one paragraph within the page a different style from all of the other paragraphs

Class attribute : 

• Every HTML element can also carry a class attribute.
• Sometimes you will want a way to identify several elements as being different from the other elements on the page
• For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements
• The class attribute on any elements can share the same value or name

ID and Class attribute :

• By default, using these attributes does not affect the presentation of an element.
• It will only change their appearance if there is a CSS rule that indicates it should be displayed differently

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>

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>

Week 4 - UI vs UX

What are the difference?

UX would say that button should physically press down when you click it.

UX Designer

• UX Designers focus on the structure and layout of content, navigation and how users interact with them.
• The types of deliverables they produce include site- maps, user flows, prototypes and wireframes, which are more focussed on the underlying structure and purpose of the software.
• The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.

The UI would be a series of buttons and how they look

User Interface Design

• 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.
• UI brings together concepts from interaction design, visual design, and information architecture (IA).

Designing for the USER

Successful user interface design improves product. In fact, in some ways the UI is the product, according to Jakob Nielsen, User Advocate and Principal of the Nielsen Norman Group

“If people can’t use a product, it might as well not exist,”

This concept is especially true in a world where every marketplace-from books to electronics-is highly competitive

Golden Rules of Interface Design

Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface, no matter what their medium:

• Ease of Learning
• Efficiency of Use
• Memorability
• Minimize Errors
• Satisfy the User

Week 4 - Introduction to CSS

Cascading Style Sheet (CSS)

CSS allows you to create rules that specify how the content of an element should appear. Example, 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 works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.

A CSS rule contains two parts: a selector and a declaration

CSS Style Rules with HTML Elements

Figure 1.1 CSS Style Rules with HTML Elements

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

Figure 1.2 CSS Properties Affect how Elements are Displayed

Method to Employ CSS

1. Using External CSS
   <link>
• The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page
• It is an empty element and it lives inside the <head> element
• 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
• An HTML page can use more than one CSS style sheet.
• To do this it could have a <link> element for every CSS file it uses
• For example, one authors use one CSS to control the presentation (fonts and colors) and a second to control the layout
2. Using Internal CSS
   <style>
• You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page
• The <style> element should use the type attribute to indicate that the styles are specified in CSS
• The value should be text/css
• When 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)
  
  

---

INSTRUCTIONS

Exercise 1 :
We are required to create a web document based on the content given. We need to follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). Firstly, create the document using Text Edit or Note Pad. Then, we upload our file to Netlify.

This is the screenshoot :

Figure 2.1 Exercise One Screenshoot

Exercise 2 :
We are required to create a single html page that contains the content given. We should include images for required sections (use all the images provided). 

This is the screenshoot :

Figure 2.2 Exercise Two Screenshoot

Layout Exercise :
We are required to create a single web page based on the content given in the link. Ww must follow the layout as in the reference given. We can use an external CSS file to create the layout as shown in class.

I find this part quite challenging as I need to make the layout looks properly in its place. I need to adjust the margin and padding. I find it very tricky and it took me quite some time to finish this part.

Figure 2.3 Layout Exercise Challenging Part

This is the screenshoot :

Figure 2.4 Layout Exercise Screenshoot

---

REFLECTIONS

Interactive design is a module that I really look forward to this semester. I'm excited to try coding and make a website. The exercises given are very interesting and I enjoy doing them. Mr. Samsul also gave a very clear explanation even though I often missed the tutorial sessions.

When I downloaded Visual Studio and started working on the exercise, I felt different. In the beginning, I felt that the exercise given was very exciting to do.