INTERACTIVE DESIGN - EXERCISES
04.04.19 - 23.05.19 (Week 1 - Week 8)
Catherine Starlie (0336261)
Interactive Design
Exercises
LECTURES
Lecture 1: Briefing / Web Design Evolution
04.04.19 (Week 1)
We had our briefing about what to do on this module. Mr. Shamsul also introduced Adobe Dreamwaver which will be used for this module.
Lecture 2: UI & UX Design
11.04.19 (Week 2)
Lecture 3: HTML Code
25.04.19 (Week 4)
We learned about HTML for this week.
Lecture 4: CSS Extra Markup
02.04.19 (Week 5)
We learned about CSS for this week.
Lecture 5: Working with CSS in HTML
09.05.19 (Week 6)
For this week, we learned to include CSS in our HTML. By learning it, we applied many styles on our HTML such as font, color, background image, and so on.
Lecture 6:
16.05.19 (Week 7)
There's no lecture for today.
INSTRUCTIONS
EXERCISES
Web Evaluation
04.04.19 (Week 1)
For our first class, we were divided into groups and we needed to evaluate 6 good websites and 6 bad websites from https://www.thebestdesigns.com and https://www.webbyawards.com .
User Interface
11.04.19 (Week 2)
This week, we were told to design kiosk for Taylor's University. We also needed to set our target audience and a scenario to navigate their way.
Our group is decided with Syopz where the new student wanted to go to Maybank and the new student also needed to go to a restaurant to eat.
HTML Coding
Catherine Starlie (0336261)
Interactive Design
Exercises
LECTURES
Lecture 1: Briefing / Web Design Evolution
04.04.19 (Week 1)
We had our briefing about what to do on this module. Mr. Shamsul also introduced Adobe Dreamwaver which will be used for this module.
Lecture 2: UI & UX Design
11.04.19 (Week 2)
Lecture 3: HTML Code
25.04.19 (Week 4)
We learned about HTML for this week.
Lecture 4: CSS Extra Markup
02.04.19 (Week 5)
We learned about CSS for this week.
Lecture 5: Working with CSS in HTML
09.05.19 (Week 6)
For this week, we learned to include CSS in our HTML. By learning it, we applied many styles on our HTML such as font, color, background image, and so on.
Lecture 6:
16.05.19 (Week 7)
There's no lecture for today.
INSTRUCTIONS
EXERCISES
Web Evaluation
04.04.19 (Week 1)
For our first class, we were divided into groups and we needed to evaluate 6 good websites and 6 bad websites from https://www.thebestdesigns.com and https://www.webbyawards.com .
User Interface
11.04.19 (Week 2)
This week, we were told to design kiosk for Taylor's University. We also needed to set our target audience and a scenario to navigate their way.
Our group is decided with Syopz where the new student wanted to go to Maybank and the new student also needed to go to a restaurant to eat.
 |
| Fig 2.1 Our Design |
25.04.19 - 09.05.19 (Week 4 - Week 6)
We tried our own basic code on textEdit. We tried typing heading, leading, body, paragraphs, lists, images, and hyperlinks.
 |
| Fig 3.1 HTML Coding in textEdit |
 |
| Fig 3.2 Outcome |
The next week, we tried to do another HTML coding but this time, we needed to come out with at least 4 paragraphs.
I tried to add a gif but it seems like it could not loop by itself unless we reloaded the page so I removed it.
On week 6, we continued with our previous HTML file by applying CSS on it. I also tried some other features like buttons, highlighting some words, the characteristic of the link, and so on.
 |
| Fig 3.3 Another HTML Coding in textEdit |
 |
| Fig 3.4 Browser Display Part 1 |
 |
| Fig 3.5 Browser Display Part 2 |
 |
| Fig 3.6 Browser Display Part 3 |
On week 6, we continued with our previous HTML file by applying CSS on it. I also tried some other features like buttons, highlighting some words, the characteristic of the link, and so on.
 |
| Fig 3.7.1 Continuing HTML Coding in Dw |
 |
| Fig 3.7.2 Continuing HTML Coding in Dw |
 |
| Fig 3.8.1 Browser Display |
 |
| FIg 3.8.2 Browser Display |
 |
| FIg 3.8.3 Browser Display |
We also tried scroll-behaviour but it couldn't be seen or it's became error when we tried to open it using Safari. The reason why is because HTML still considering that Safari is an old site.
Link: https://opaline-relocation.000webhostapp.com/
HTML & CSS Development
This week we learned how to use header, body, section, aside, and footer. But at first, we needed to create a separate CSS first then attached it to the HTML.
After that, we were told to do our own website by using the given content from the lecturer.
I tried to changed some things again after I tried to ask about my website but I forgot which one I changed so here is the final one.
Link: https://cathlayoutexercise.000webhostapp.com/
FEEDBACK
11.04.19 (Week 2)
When designing an interface, we also needed to think from the user's perspective when they used the websites / products / applications. We needed to remember that we had to design an easy yet convenient for the users.
09.05.19 (Week 6)
I tried to ask how to take off the underline on each list after I applied the inline element which was button and he said I need to put the button > the href.
16.05.19 (Week 7)
Mr. Shamsul said that I could change the second section by without using background colour.
23.05.19 (Week 8)
Mr. Shamsul told me that the logo that following when the audience is scrolling is not really necessary, changed the font to another modern one. As for the second section, if the middle and the right side didn't have anything to show then don't put the line that long. And for the footer, the image to the text have a long distance.
REFLECTIONS
EXPERIENCES
04.04.19 (Week 1)
When we searched for some good and bad websites, there are many websites with different layouts with such a creative design, some websites could tell us the theme by just looking at it.
11.04.19 (Week 2)
When it came to design something (in this case was the kiosk), there were so many ideas from different people and it's kind of cool when they could think different ideas from the usual one.
25.04.19 (Week 4)
It's kind of fun for my first HTML coding exercise.
02.05.19 (Week 5)
It's cool to see how we could add images and colors into the HTML.
09.05.19 (Week 6)
I learned something new about HTML which was CSS.
16.05.19 (Week 7)
I had some hard time to understand margin and padding, class and id.
23.05.19 (Week 8)
There are some different ways to design a website.
OBSERVATIONS
04.04.19 (Week 1)
All of the good and bad websites from us were only opinions which could mean differently for other people.
11.04.19 (Week 2)
There're so many different kind of layouts that were designed from each group and it's great how they could think or see it like that.
25.04.19 (Week 4)
Some people took this exercise to try something more.
02.05.19 (Week 5)
Everyone had different things to write and post for their HTML exercise, it depended on their preference.
09.05.19 (Week 6)
Everyone had different style and references so they putted something different.
16.05.19 (Week 7)
I observed how a single thing on CSS could change to some of the id.
23.05.19 (Week 8)
I observed how difference my websites than the others which somehow inspired me.
FINDINGS
04.04.19 (Week 1)
There were many kinds to determine a good or bad website, like the aesthetics, the size of the fonts, colors, and so on.
11.04.19 (Week 2)
Maybe we are not really experienced it before but some websites also have their own errors.
25.04.19 (Week 4)
After seeing the outcome, I felt like it's too basic and simple and I wondered how long did it take to create an awesome website.
02.05.19 (Week 5)
Still wondering how an awesome or complicated website was made and how long did it take.
09.05.19 (Week 6)
I didn't know that a layout needed to be divided first into section, aside, footer, and etc.
16.05.19 (Week 7)
I found out that the settings that we made on CSS kind of played an important role on the website.
23.05.19 (Week 8)
I found out that everyone has their own references to use the CSS and HTML whatever they liked for the websites.
FURTHER READINGS
International Journal of Industrial Ergonomics by (Editor-in-Chief) A.Chan
There are two most popular methods for usability evaluation techniques are user testing and heuristic analysis. User testing commonly relies on experience and comments of the users and usually conducted in a scenario while heuristic analysis relies on the expertise and knowledge of human factors engineers where they would evaluate the website based on a set of heuristics. But at the past, heuristic analysis found more issues rather than user testing.
Reference List: Chan, A. (2009). International Journal of Industrial Ergonomics. Page 621-622
Link: https://opaline-relocation.000webhostapp.com/
HTML & CSS Development
This week we learned how to use header, body, section, aside, and footer. But at first, we needed to create a separate CSS first then attached it to the HTML.
 |
| Fig 4.1 CSS Codes |
 |
| Fig 4.2 HTML Codes |
 |
| Fig 4.3 Browser Display |
Fig 5.1 Embedded PDF of Content Given
 |
| Fig 5.2.1 First Attempt |
 |
| Fig 5.2.2 First Attempt |
Fig 5.2 Embedded PDF of HTML
Fig 5.3 Embedded PDF of CSS
 |
| Fig 5.4 Browser Display |
FEEDBACK
11.04.19 (Week 2)
When designing an interface, we also needed to think from the user's perspective when they used the websites / products / applications. We needed to remember that we had to design an easy yet convenient for the users.
09.05.19 (Week 6)
I tried to ask how to take off the underline on each list after I applied the inline element which was button and he said I need to put the button > the href.
16.05.19 (Week 7)
Mr. Shamsul said that I could change the second section by without using background colour.
23.05.19 (Week 8)
Mr. Shamsul told me that the logo that following when the audience is scrolling is not really necessary, changed the font to another modern one. As for the second section, if the middle and the right side didn't have anything to show then don't put the line that long. And for the footer, the image to the text have a long distance.
REFLECTIONS
EXPERIENCES
04.04.19 (Week 1)
When we searched for some good and bad websites, there are many websites with different layouts with such a creative design, some websites could tell us the theme by just looking at it.
11.04.19 (Week 2)
When it came to design something (in this case was the kiosk), there were so many ideas from different people and it's kind of cool when they could think different ideas from the usual one.
25.04.19 (Week 4)
It's kind of fun for my first HTML coding exercise.
02.05.19 (Week 5)
It's cool to see how we could add images and colors into the HTML.
09.05.19 (Week 6)
I learned something new about HTML which was CSS.
16.05.19 (Week 7)
I had some hard time to understand margin and padding, class and id.
23.05.19 (Week 8)
There are some different ways to design a website.
OBSERVATIONS
04.04.19 (Week 1)
All of the good and bad websites from us were only opinions which could mean differently for other people.
11.04.19 (Week 2)
There're so many different kind of layouts that were designed from each group and it's great how they could think or see it like that.
25.04.19 (Week 4)
Some people took this exercise to try something more.
02.05.19 (Week 5)
Everyone had different things to write and post for their HTML exercise, it depended on their preference.
09.05.19 (Week 6)
Everyone had different style and references so they putted something different.
16.05.19 (Week 7)
I observed how a single thing on CSS could change to some of the id.
23.05.19 (Week 8)
I observed how difference my websites than the others which somehow inspired me.
FINDINGS
04.04.19 (Week 1)
There were many kinds to determine a good or bad website, like the aesthetics, the size of the fonts, colors, and so on.
11.04.19 (Week 2)
Maybe we are not really experienced it before but some websites also have their own errors.
25.04.19 (Week 4)
After seeing the outcome, I felt like it's too basic and simple and I wondered how long did it take to create an awesome website.
02.05.19 (Week 5)
Still wondering how an awesome or complicated website was made and how long did it take.
09.05.19 (Week 6)
I didn't know that a layout needed to be divided first into section, aside, footer, and etc.
16.05.19 (Week 7)
I found out that the settings that we made on CSS kind of played an important role on the website.
23.05.19 (Week 8)
I found out that everyone has their own references to use the CSS and HTML whatever they liked for the websites.
FURTHER READINGS
International Journal of Industrial Ergonomics by (Editor-in-Chief) A.Chan
There are two most popular methods for usability evaluation techniques are user testing and heuristic analysis. User testing commonly relies on experience and comments of the users and usually conducted in a scenario while heuristic analysis relies on the expertise and knowledge of human factors engineers where they would evaluate the website based on a set of heuristics. But at the past, heuristic analysis found more issues rather than user testing.
Reference List: Chan, A. (2009). International Journal of Industrial Ergonomics. Page 621-622
Comments
Post a Comment