Interactive Design Exercises.

Kim Chan Hee 0334532
Bachelor of Design (Honours) in Creative Media

Lecture Notes

Week 1.

For week 1 we learned about basic website ,evaluation where it gave us basic understanding about the principles of good website and how to judge whether this is a good website or not and the factors behind it, where we were given an exercise to search and look around various websites and explore what perceived us that this is a good website.This is important because, if we do not develop an understanding of 'quality', and immediately start to create our own website we will lack of various factors and the visitors of the website would find it hard to get the contents or the features and unable to access to it and might never come back again. So, planning is very important for developing a website.

Week 2.

In week two, we learned about the difference between UI and UX. Firstly, UX say that button should physically press down when you click it. Where UX designers focus on the structure and layout of the content, navigation to make it more easier for the users to interact with. The things they produce include side maps, user flows, prototypes and wire-frames. That are more focus on underlying structures and purpose of the structure.
On the other hand, UI would be a series of buttons and how they look. UI design are more focused on anticipating what users might need to do and make sure it is easier to access, understand and use to facilitate their actions.

Week 4.
There was no lecture for week four.

Week 5.

ID attribute:

.Every Html element are allowed to carry ID attributes.
.It is used to identify the elements from other elements on the page.
.It makes it unique because no two elements have the same value for their ID attributes.
.It helps you to try out different styles and make it unique.

Class attributes:

.For example helps you to distinguish between the elements of the contents that are more important than others in paragraphs.
.The class attributes or any elements can share same value and name.

-CSS works by associating rules with Html elements and these rules govern how the content of specified elements should be displayed as.

Week 6.

CSS boxes model, helps us to set several properties that effect the appearance of these boxes , helps us to control the dimensions of the boxes, create border around the boxes and show ad hide boxes. To set the dimensions of a box, can use height and width properties , by using percentage and pixels to specify the price. Designers use pixels, because it helps accurately control the size. If use percentages, the size of the box is relative to the size of browser window,if the box is encased within
another box, it is a percentage of the size of the containing box.

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

Instructions.

Exercises.

Week 1.
For week one we were given an exercise to do in class where we were divided into groups and each group was to find 4 good websites and five bad websites, and must do a presentation about why we chose this websites as good or bad. Where for our group we divided into two teams one for searching good websites and the other for searching the bad websites. My role was to find a good website where I found a website from the 'best website', which below is the link for the website.

https://airtifact.heythemers.com/

The reasons I chose this website is because of the design and organization. The purpose of this website is to promote different kinds of brands. Where it consist of minimalist theme design with simple structures that makes the products look more standout, due to the white background.

The font and the font size makes the person to slide down to see the products.

Week 2.
We were given an exercise in class divided into groups we were to design a user interface using papers for Taylor University Information kiosk. Where we chose new students as our target audience, and made a scenario of the student trying to find where is the location of the library in the university. We first did an idea sketch and made it .

Below are the video taken for the

Exercise 3.
For our exercise 3 we were to create our own web page by using the codes using the notepad . The things we were supposed to do were to add Headline, and write a paragraph of 200 words about myself and add each two paragraphs for three sections, including the list.