INTERACTIVE DESIGN / LECTURES & EXERCISES

03.29.2022 - ?.?.2022 (Week 1 - Week 4)

Devina Angeline Wiratama / 0350824

Interactive Design / Bachelor of Design (Hons) in Creative Media

Lectures and Exercises

Jump link

W1 -
W2 -
ok
Interactive Design
Home

Lectures

W1 - The web and how it works

Week 1 / 03.29.2022

In our first week, we only have an introduction and a short explanation about MIB. Mr Shamsul brief us about our exercises and projects.

This week, we learnt about the meaning of the web in a short explanation.

Exercise

Next because there is a problem in the class, so we will not do the activities group but we will do it as an individual. We need to see websites from https://www.awwwards.com/; https://www.webbyawards.com/; and be web critics. We need to choose 3 good and 3 bad websites and explain the reasons. Here is my task.

Lectures

W2 - Web Design and Media

Week 2 / 04.05.2022

Mr Shamsul tell us more about the web.

Why Web Standards?

To make the internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.
When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.
Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites

How the WebWorks

Connect to the web via ISP, and the domain name or web address is typed in to visit the site. eg: www.google.com, www.bbc.co.uk
The computer connects to the DNS servers.
The unique number that the DNS server returns to your computer allows your browser to contact the webserver that hosts the website you requested.
The web server then sends the page you requested back to your web browser.

HTML Describes the Structure of Pages

The HTML code is made up of characters that live inside angled brackets <>. These are called HTML elements
Elements are usually made up of two tags: an opening tag and a closing tag

HTML Code

Must be English-US, not British
lowercase
<> usually closed with </> (not all element)
(space) : separate values
Can use more than 1 attribute in 1 HTML

Basic format: <element> info </element>

Other format: <p attribute name="any element"> info </p>

Text Format: <element></element>

<b> : bold

<i> : italic

<u> : underline

<strike> : strike through

Headings

HTML has six levels of headings:

<h1> main headings
<h2> subheadings
...<h6>

Fig. 1.1 / Headings, Week 2 (04.05.2022)

Numbers

<ol> ordered list

<li> list item

Fig. 1.2 / Numbers, Week 2 (04.05.2022)

Bullets

<ul> unordered list

<li> list item

Fig. 1.3 / Bullets, Week 2 (04.05.2022)

Nested

Another list <ul> and <li>

Fig. 1.4 / Nested, Week 2 (04.05.2022)

Links

<a> links not specify

<a href> links specify

Fig. 1.5 / Links, Week 2 (04.05.2022)

Exercise

Instruction:

Create a web document based on the content given.
Please follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). For a start, you need to create the document using Text Edit or Note Pad as shown in class. Remember to name the file as index.html and save the file in a folder name Exercise One.
After you have completed the task, you are required to upload the web document to a web hosting (Netlify). I will demonstrate on how to upload the file in class next week (Week 3).

I used Astropad and started with filling the head, title, and body. After I finished all, I compared it with the example.

Fig. 1.6 - 1.7 / Progress, Week 2 (04.05.2022)

Here is my HTML Code Preview

Lectures

W3 - Extra Markup

Week 3 / 04.12.2022

This week, we learn how to add images in HTML and Extra Markup (ID attributes, class attributes, Inline elements, and block elements).

Image in HTML

Image only: <img src=“...">
With attribute: <img src=“..." alt="...">
Specify the width and height: <img src=“..." alt="..." width="..." height="...">

The image format for Web

JPEG (Joint Photographic Expert Group)
Most common image format, highly compatible, small size, little loss of quality.
GIF (Graphics Interchange Format)
Excellent choice for logo, small size, not suitable for photos.
PNG (Portable Network Graphics)
Lossless compression, save the image over and over without losing any data, support a max of 265 colours, ability to be animated.

ID and Class attribute

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
ex:
<a href="#about">About</a>
<id="about"> as anchor

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 paragraphs the that contain information that is more important than others and want to distinguish between these elements
The class attribute on any element can share the same value or name
ex:
<a class="col-lg-4">

Block elements

Some elements will always appear to start on a new line in the browser window.

Ex: <h1>, <p>, <ul> and <li>

Inline elements

Some elements will always appear to continue on the same line as their neighbouring elements

Ex: <b>, <i>, <em>, <a> and <img>

Next, Mr Shamsul teaches us how to upload our tasks in Netlify.

Fig. 2.1 / Netlify, Week 3 (04.12.2022)

Exercise

Mr Shamsul wanted us to put images in our website.
In Notepad.

Fig. 2.2 / Notepad Image, Week 3 (04.12.2022)

In Dreamweaver

1. Window>Files

Fig. 2.3 / Dreamweaver Image 1, Week 3 (04.12.2022)

2. Insert>image

Fig. 2.4 / Dreamweaver Image 2, Week 3 (04.12.2022)

3. Window>Properties>Drag the image

From Properties, we also can add links, titles, etc in there.

Fig. 2.5 / Properties, Week 3 (04.12.2022)

How to save images from Photoshop.

Export>Save for Web (can adjust gif, jpeg, etc)

Fig. 2.6 / Save Web in PS, Week 3 (04.12.2022)

Next, Mr Shamsul wants us to put 6 images of each heading and put ID attributes. Here is the result.

Fig. 2.7 - 2.11 / Add 6 Images, Week 3 (04.12.2022)

In addition, Mr Shamsul taught us how to add CSS scroll behaviour. This is still new, so it only works on chrome, google, not safari, etc.

Fig. 2.8 / CSS Scroll, Week 3 (04.12.2022)

Instruction:

Download the content in the link. You are required to create a single Html page that contains the content given. You should also include images for required sections (use all the images provided). In each main section, you need to include an id attribute that will be later used as an anchor to be linked from the navigation (in the first part of the content).
After completing the task, upload it to Netlify and submit the link in Google Classroom. Complete the task by next week (Week 4).

I used Dreamweaver and started with filling the head, title, body, listed, and italic or bold text.

Fig. 2.9 / Dreamweaver, Week 3 (04.18.2022)

Then, I put the ID Attribute.

Fig. 2.10 / ID Attribute, Week 3 (04.18.2022)

After that, I tried to edit the CSS, the type font and change the colour.

Fig. 2.11 / CSS Font and Colour, Week 3 (04.18.2022)

Then I tried to see it first, is it ok or not.

Fig. 2.12 / Try#1, Week 3 (04.18.2022)

Last but not least, I put the images.

Fig. 2.13 / Put Images, Week 3 (04.18.2022)

Then, I try to see it again and inspect the website.

Fig. 2.14 / Try#2, Week 3 (04.18.2022)

Fig. 2.15 / Compare, Week 3 (04.18.2022)

Last, I upload it on Netlify.

Lectures

W4 - Introduce CSS

Week 4 / 04.19.2022

It's Public Holiday!

UI vs UX

abcde

UX Designer (User Experience)

: Focus on the structure and layout of content, navigation and how users interact with them. The types of deliverables they produce include sitemaps, user flows, prototypes and wireframes, which are more focused on the underlying structure and purpose of the software. UX would say that button should be physically pressed down when you click it.

UI Designer (User Interface)

: Focus on the way the functionality is displayed and the fine detail of how users interact with the interface, UI designer works on the visual comps and functioning front-end code. 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). UI would be a series of buttons and how they look.

Elements for interface include (However they are not limited to):

Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
Containers: accordion

Golden Rules of Interface Design

There are five usability attributes that UI designers should pay attention to: