Interactive Design/ Exercises

INTERACTIVE DESIGN / EXERCISES
1.4.2021 -03.06.2021 ( Week 1 - Week 10 )
Yu Dawei / 0344780 / BDCM
Interactive Design
Exercises

---

LECTURES

Week 1 / Introduction & Briefing
This was our first class in Interactive Design. We met Mr Shamsul online in the first 2 semesters already, while this was our first online meeting Mr Lun. We were then briefed about what to expect in this module, regarding assessment plans and topics that will be covered. 

Week 2 / Website

This week, the lecturers let us find good websites and bad looking websites. My teammates are Aisyah, Shin Tung, and Xin Yee. These were the websites we found.

Week 3 / UI & UX, Anatomy of a Web Page

This week, lecturers taught us about the difference between UI & UX. 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.

UI Designer

• 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).

Users have become familiar with interface elements acting in a certain

way, be consistent and predictable in the choices and the layout design.

Doing so will help with task completion, efficiency, and satisfaction.

Interface elements include but 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

Week 4 / Web Standards

This week, lecturers taught us about web standards. 

• To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
  
  
• By enclosing words in the tags <b> and </b> we can make characters appear bold The <b> element also represents a section of text that would be presented in a visually different way (for example key word in a paragraph) although the use of <b> element does not imply any additional meaning.

• By enclosing words in the tags <i> and </i> we can make characters appear italic. The <i> element also represents a section of text that would be said in a different way from surrounding content- such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicised.
  
  
• <ol>
  The ordered list is created with the <ol> element
• <li>
  Each item in the list is placed between and opening<li> tag and a closing </li> tag (the li stands for list item.) Browser indent list by default.

• The unordered list is created with the <ul> element
  <ul>
  <li>
• Each item in the lis is placed between and opening
  <li> tag and a closing </li> tag (the li stands for list item.)
  Browser indent list by default

Week 6 / 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">

---

INSTRUCTIONS

---

Week 3/ Self info page

This week, Mr Shamsul and Mr Lun gave us a simple exercise which is create a page about our hobbies and information using notebook on PC.

Week 6 / HTML Exercise

Today, we Mr Shamsul taught us how to edit code using Dreamweaver. He gave us a word document that has information and images that we're going to use for this exercise. 

Here is the link to my final html page for this exercise: https://nostalgic-northcutt-4ab72b.netlify.app/

Week 7: Cascading Style Sheet

This week, the lecturers taught us about the CSS(Cascading Style Sheet). Mr Shamsul taught us how to change the texts color, change the font size and styles, change the background color of the website.

Week 9: Boxes in CSS 

At the beginning of this section on CSS, you saw how CSS treats each HTML element as if it lives in its own box

• You can set several properties that effect the appearance of these boxes

• We can control the dimensions of the boxes

• Create border around the boxes

• Show ad hide boxes

Box Dimensions-Width, Height

• By default a box is sized just big enough to hold its contents

• To set your own dimensions for a box you can use the height and width properties

• The most popular ways to specify the size of a box are to use pixels(px) or percentage (%)

• Traditionally, pixel have been the most popular method because they allow designers to accurately control their size

• When you use percentages, the size of the box is relative to the size of the browser window or, if the box is encased within another box, it is a percentage of the size of the containing box

Limiting Width [min-width, max-width]

• Some page designs expand and shrink to fit the size of the user’s screen

• In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide

• These are very helpful properties to ensure that the contents of pages are legible

Limiting Height [min-height, max-height]

• In the same way that you might want to limit the width of a box on a page, you may also want to limit the height of it

• This is achieved using the min-height and max-height properties

• If the box is not big enough to hold the content, and the content expands outside the box it can look very messy

• To control what happens when there is not enough space for the content of the box, you can use the overflow property

Overflowing Content [overflow]

• The overflow property tells the browser what to do is the content contained within a box is larger than the box itself

• It can have one of the two values:

• 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

• The overflow property is particularly handy because some browsers allows users to adjust the size to the text to appear as large or small as they want

• If the text is set too large then the page can become an unreadable mess

• Hiding the overflow on such boxes helps prevent items overlapping on the page

Border, Margin & Padding BORDER MARGIN PADDING

Every box has a border (even if it is not visible or is specified to be 0 px wide). The border separates the edge of one box from another. Margins sit outside the edge of

the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.

The Display Property

• Display is CSS's most important property for controlling layout.

• Every element has a default display value depending on what type of element it is.

• The default for most elements is usually block or inline.

• A block element is often called a block-level element.

• An inline element is always just called an inline element.

• <div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.

• Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.

• <span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.

• The a element is the most common inline element, since you use them for links.

• Every element has a default display type.

• You can always override this. Though it wouldn't make sense to make an inline div, you can use this to customize the display of elements that have particular semantics.

• A common example is making inline li elements for horizontal menus.

Week 10: Responsive Web Design

This week, we learned about bootstrap through the link: https://getbootstrap.com. Now I learned how to make navigation bar in the HTML.

---

FEEDBACK

Week 4
In the html exercise, we need to remember the starting tag and the closing tag, otherwise the code would be error.

---

REFLECTIONS

Experience:
Interactive Design was a interesting subject, it is more interesting than other subjects during this semester. I 've learned so many things from Mr. Shamsul and Mr Lun, such as how to use Adobe Dreamweaver and so many other techniques in this software.  Because of the corona virus, I still cannot come to Malaysia and learn the lesson face to face with the lecturers, so It is new for me to learn things through the online learning system. I can feel it, the online class is way different with the face to face learning, I love Mr Shamsul's class, it was fun.

Observations:
Interactive Design is a important class. In this subject, we can create our own web pages, it is fun to make website by ourselves, how fascinating it is.

Findings:
I've found out that Adobe Dreamweaver is a very useful software and now I know how powerful that it can be into my lecturer's hands. It is a very interesting learning. The lecturer in this class gives me feedbacks that I can improve my works to make them better. I've learn a lot in this class.