INTERACTIVE DESIGN / LECTURE & EXERCISES

29.3.2021 -30.1.2021 (week 1 - week 4) 
Phoebie Ng / 0341172 / Bachelor of creative media

Interactive Design / Exercises

---

LECTURE NOTES

week 1 (1.4.2021)

In week 1 we were briefed about the MIB and the projects that we need to do in the next 13 weeks. 

• Project 1 and Project 2 is related
• need to subscribe to netify.com 
• will check the blog after each task is due
• every time need to upload the file, save it as index.html
• lower case only when we rename the file
• need to study on our own as well

week 2 (8.4.2021)

A website is a web document that is on the internet. One page or more, these website has a different purpose. 

Type of website

• Informational website
• Corporate website
• Portfolio website
• Brochure website
• Entertainment website
• Personal website
• Educational website
• E-commerce website
• Nonprofit website

week 3 (15.4.2021)

UI vs UX

UX designer focus on the structure and layout of content, navigation nd how users interact with them.

They produce include sitemaps, user flows, prototypes and wireframes, which focus more on the underlying structure and purpose of the software.

The visual appearance created as a separate layer that is applied over the top.

UI design focuses on 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.

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.

Anatomy of a web page

elements of a web page are like organs

vital to a properly functioning and aesthetically webpage

container, header, logo, navigation, main content, sidebar, footer

there are many ways to organize them.

Container

Container to contain page elements, 

types of container:

Liquid: expands to fill the width of the browser window.

Fixed: a specific width that does not change regardless of browser window size.

Header 

The header isn't a specific element

generally used in referring to the top section of your web page where your logo, navigation, tagline, etc. are located.

keep these elements contained within a div for easier styling, element separation, and element container.

The header would be considered a container so it had two forms to choose from. 

week 4 (22.4.2021)

Web standards

There is much variety in the ways people access the Web. 

Hardware and software issue:

A growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and others

People use a variety of operating systems, including Windows, Mac OS, and Linux.

People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.

The most important part of your website is content, and all users should be able to access it. 

Web standards are the core set of rules for developing websites. 

The World Wide Web Consortium (W3C) is responsible for creating and maintaining web standards.

---

INSTRUCTIONS

fig 1.1: Module Information Booklet

---

TASK

week 2 (8.4.2021)

Today in class, we form groups and find good and bad website from a website that was given by Mr. Shamsul. Below are the website that me and my friends found from the source. 

fig 1.1 analysis of website (10.4.2021)

week 4 (24.4.2021)

we were asked to create an HTML webpage about ourselves by using notepad. We were asked to have at least 3 headings. In between the heading, you must have at least 2 paragraphs. And in each heading, you must-have a list (unordered list/ordered list). 

fig 1.2 screenshot of HTML coding of webpage  (24.4.2021)

fig 1.3 screenshot of webpage  (24.4.2021)

week 6 (6.5.2021)

This week we were asked to create a website with html. We had learned how to tag link and insert image in our website and put it into Netlify 

fig 1.4 screenshot of Dreamweaver 6.5.2021 

fig 1.5 screenshot of the website 6.5.2021

This is the link to my website. 

week 10 (3.6.2021)

Exercise 2 Photoshop landing page

this is the link to my exercise 2

---

REFLECTION

week 1 (1.4.2021) 

Experience: no task was set this week! Woohoo! However, while Mr. Shamsul talks about the assignments and those projects that our senior did was showed, I am a little bit worry that I might not be doing well as I only did some coding to create simple Html in my secondary school, which I totally forgot how to do it. If I am not mistaken, I hate ICT class at that time, so I am a little bit nervous that I might not come out with the things that I want it to be. 

Observation: By looking at the senior's project works that Mr. Shamsul showed, I observed that some of their work are really nice and I notice that some of them might go through a hard time to come out with those beautiful work as I saw their blog, so this reminds me on I should update my blog consistently. 

Finding: I found out a new software call Adobe Dreamweaver which was introduced by Mr. Shamsul in class. Before I went into class, I never knew there will be a software that were design purposely for coding. It is the new things that I discover this week. However, this means that we need to learn another software, I hope that it will not be that hard to learn ;-; 

week 2 (8.4.2021)

Experience: This week, we were asked to find good websites and bad websites. In the breakout room, we discussed is the websites consider bad or good, it did help us interact with each other in this online class period. I did learn something from my friends that they know things that I didn't notice. 

Observation: I notice that a good website is not just about aesthetics but functionality. I notice that some of the websites just focus on the aesthetic but it's not user-friendly than some of the buttons are not functional. 

Finding: I found out that although the website looks easy to design the outlook, I think it needs a lot of effort to make it creative, for example, the good website that I found, it is really creative that catches my eyes straight away. It doesn't need to be very fancy, but whitespace is a thing that we must always take care of while doing the website. 

week 4 (24.4.2021)

Experience: This is the first time that I learn about coding after so long. I still remember I did learn about it during my secondary time. It was a nightmare for me. However, I seems forgot everything that I learnt at that time. I just hope that I can survive in this module. 

Observation: I notice that I shouldn't sleep late the night before the class because the class started at 8am, and I was so sleepy while listening to the lecture, that I need to relook at the slides to do my exercise. 

Finding: I found that the exercise is quite fun to do as we just type in our words and the website is created.