Interactive Design : Exercises

1.04.2022 - (Week 1 - Week 4)
Angelyn Valencia / 0349573
Interactive Design / Bachelor of Design (Hons) in Creative Media
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 differences?
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

Methods to Employ CSS

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

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)