Exercises
Soo Wen Yi (0334653)
Interactive Design _ Exercises
LECTURES_
Lecture 01 _27 Aug 2019 (week 01)
We were briefed by Mr Shamsul and Mr Lun, then the softwares that we can use for this class is Bootstrap, Bracket or Adobe Dreamweaver. Mr Shamsul said that we should avoid using a crack version of Adobe Dreamweaver as they can have missing information. After all groups presented we went through all the qualities that make up a good or a bad website.
Good:
- consistency/cohesive (colour, typeface, layout)
- clear/good contrast
- user friendly
- interactive
- load fast
- hamburger button/menu
- misalignment
- no information
- too much information
- not responsive
- too much advertisement
In the end I've learnt that no website is perfectly good or terribly bad because there are aspects of some good and bad elements in all the websites that has been presented by our classmates and the ones that I have gone through.
Lecture 02 _
3 Sept 2017 (week 02)
For this week we started out watching a video by Vox, titled "It's not you. Bad doors are everywhere.". And we talked about UI vs UX, and here's some notes I've took during the lecture.
4 process of Human-centered design
1.observation
2.idea generation
3.prototyping
4.testing (goes back to 1.)
UI
-buttons and how they look
UX
- structure & layout of content, navigation & how user interact with them
Lecture 04 _
24 Sept 2019 (week 05)
Some notes I took during lecture:
-id attribute, to create layout each one is unique
-class attribute, to create group of elements that needed to have the same style
CSS
-selector, the HTML tag
-block element & inline element can change the look for layout
-a different document
-different style of writing compare to HTML
-declaration (property/values) indicates to that specific selector in the text will have this style applied to them
Example of a CSS tag:
p {property:value; property:value; property:value;}
h1, h2, h3, p {property:value; property:value;}
body {background-color:#000000;}
id attribute uses # example #note1
class attribute uses . example .notes
#navi>li means the <li> within the tag #navi
Lecture 05_
1 Oct 2019 (week 06)
Lecture 02 _
3 Sept 2017 (week 02)
For this week we started out watching a video by Vox, titled "It's not you. Bad doors are everywhere.". And we talked about UI vs UX, and here's some notes I've took during the lecture.
4 process of Human-centered design
1.observation
2.idea generation
3.prototyping
4.testing (goes back to 1.)
UI
-buttons and how they look
UX
- structure & layout of content, navigation & how user interact with them
Lecture 04 _
24 Sept 2019 (week 05)
Some notes I took during lecture:
-id attribute, to create layout each one is unique
-class attribute, to create group of elements that needed to have the same style
CSS
-selector, the HTML tag
-block element & inline element can change the look for layout
-a different document
-different style of writing compare to HTML
-declaration (property/values) indicates to that specific selector in the text will have this style applied to them
Example of a CSS tag:
p {property:value; property:value; property:value;}
h1, h2, h3, p {property:value; property:value;}
body {background-color:#000000;}
id attribute uses # example #note1
class attribute uses . example .notes
#navi>li means the <li> within the tag #navi
Lecture 05_
1 Oct 2019 (week 06)
Notes taken during lecture:
Box = container
-pixel: fixed size
-percentage: changes/respond to the view port
-min-width="400px" means it cannot go smaller than 400px
-same goes to max-width
-use overflow property to ensure text fit inside the box when downsized/up sized
-border, the box outline
-margin, the space outside of the border, for creating a space between boxes
-padding, the space inside the border, for creating space between content inside the box and the border of the box
to remove a bullet point:
#navi {list-style: none;}
to make a <ul> into an in line navigation:
#navi>li {width:100px; background:#FFFFFF; padding:20px; display:inline-block;}
or
#navi>li {width:100px; background:#FFFFFF; padding:20px; float:left;}
with float, the content will wrap around to the specified side.
<div>
-generic/blank HTML element
-don't have any effect, its use to create layout
-example <div id="note1">
<span>
-also generic/blank HTML element
-for inline elements
linking CSS file to HTML file
<link href="filename" rel="stylesheet" type="text/css">
-min-width="400px" means it cannot go smaller than 400px
-same goes to max-width
-use overflow property to ensure text fit inside the box when downsized/up sized
-border, the box outline
-margin, the space outside of the border, for creating a space between boxes
-padding, the space inside the border, for creating space between content inside the box and the border of the box
to remove a bullet point:
#navi {list-style: none;}
to make a <ul> into an in line navigation:
#navi>li {width:100px; background:#FFFFFF; padding:20px; display:inline-block;}
or
#navi>li {width:100px; background:#FFFFFF; padding:20px; float:left;}
with float, the content will wrap around to the specified side.
<div>
-generic/blank HTML element
-don't have any effect, its use to create layout
-example <div id="note1">
<span>
-also generic/blank HTML element
-for inline elements
linking CSS file to HTML file
<link href="filename" rel="stylesheet" type="text/css">
INSTRUCTIONS_
EXERCISES_
Week 01Exercise 01
We were split into 4 groups and each group had to present 3 good websites and 3 bad websites. We were only allowed to search for the websites through The Webby Awards and The Best Designs (the websites that are listed on these 2 sites).
 | |
| Fig. 1.1: https://www.webbyawards.com/ |
 |
| Fig. 1.2: https://www.thebestdesigns.com/ |
At the first glace, The Webby Awards seems to have good design elements and The Best Designs have quite a simple but boring layout. But after trying to search for websites, I learnt that The Webby Awards is pretty hard to navigate around since there's no clear labeling as where are the websites which gave me a hard time to figure the website itself out. As for The Best Designs, I actually prefer this much simpler layout as it is clear and easy to navigate. Here's the list of good and bad websites from our group.
GOOD
 |
| Fig.1.3: http://jovaconstruction.com/ |
 |
| Fig. 1.4: https://loveiko.com/ |
 |
| Fig. 1.5: https://merch.gunsberg.in/ |
BAD
 |
| Fig. 1.6: https://www.thisisbeyond.com/ |
 |
| Fig. 1.7: http://www.studiorotate.com/ |
 |
| Fig. 1.8: http://3kvc.com/ |
Those are the websites that our group has gathered, and the following is the PDF version of the excel sheet that we were required to complete.
Exercise 02
For this exercise we were split into 5 groups to make a website prototype, a kiosk on campus. Our target audiences can be parents, visitors, new students or all of the above. Our group has 2 tasks first its to find the directory to the Grand Hall, second its to find the directory to Family Mart.
 |
| Fig. 2.1: our group working on the prototype, photograph credit to Mr Loh |
 |
| Fig. 2.2: Prototype for task 1 |
 |
| Fig. 2.3: prototype for task 2 |
pls post the videos here
Week 04
Exercise 03
For this exercise we have to create a basic site with html on notepad. First we followed step by step with what Mr Shamsul is showing in class.
 |
| Fig. 3.1: screenshot of process of class exercise |
 |
| Fig. 3.2: screenshot of process on attaching an image |
 |
| Fig. 3.3: screenshot of process on how to set the image width (if adjusted on photoshop before attaching, there's no need of adding the width) |
 |
| Fig. 3.4: screenshot of process on how to add a link that opens on a new tab |
That's what we did in class, and we have to create a similar site with 4 sections and 2 paragraphs in each section. We can write about whatever we want. Here's the html file and the site that I've screenshotted.
 |
| Fig. 3.5: screenshot 1 of html file |
 |
| Fig. 3.6: screenshot 2 of html file |
 |
| Fig. 3.7: screenshot 3 of html file |
 |
| Fig. 3.8: screenshot 4 of html file |
 |
| Fig. 3.9: screenshot 1 of site |
 |
| Fig. 3.10: screenshot 2 of site |
 |
| Fig. 3.11: screenshot 3 of site |
 |
| Fig. 3.12:screenshot 4 of site |
Week 05
Continue Exercise 03
Using last week's files we learnt how to change and add a font by linking to Google Fonts.
 |
| Fig. 3.13: highlighted area are some changes we made to change the colour and font |
 |
| Fig. 3.14: seen changes with the blue heading and sans-serif font |
 |
| Fig. 3.15: method to link a Google Font |
 |
| Fig. 3.16: pasted link of Google Font |
 |
| Fig. 3.17: pasted font name and style from Google Font |
 |
| Fig. 3.18: adding a 'back to top' button |
 |
| Fig. 3.19: screenshot of site |
https://id-htmlwenyi.000webhostapp.com/week%205%20html/index%20exercise%20css.html#top
Week 06
Exercise 04
Today we followed Mr Lun step by step on how to create HTML file with linked CSS file.
 |
| Fig. 4.1: screenshot of the linked CSS file |
 |
| Fig. 4.2: logo replaced by an emoji |
 |
| Fig. 4.3: screenshot of inserted emoji |
 |
| Fig. 4.4: highlighted area shows that the sections are responsive |
 |
| Fig. 4.5: screenshot of part of the HTML |
 |
| Fig. 4.6: screenshot of part of the CSS |
 |
| Fig. 4.7: screenshot of the final outcome |
Exercise 05
We were given a folder with images and document file to create a layout on our own through the rest of the week.
 |
| Fig. 5.1: files given |
 |
| Fig. 5.2: layout pg.1 |
 |
| Fig. 5.3: layout pg.2 |
 |
| Fig. 5.4: layout pg.3 |
After that, I changed all the colours so that I would look cohesive and hide all the boxes.
 |
| Fig. 5.5: refined layout pg.1 |
 |
| Fig. 5.6: refined layout pg.2 |
 |
| Fig. 5.7: refined layout pg.3 |
Week 07
Continue exercise 05
After getting the first feedback from Mr Shamsul and Mr Lun, this is what I have.
 |
| Fig. 5.8: 2nd refined layout pg. 1 (hovered over the articles button) |
 |
| Fig. 5.8: 2nd refined layout pg. 2 |
 |
| Fig. 5.9: 2nd refined layout pg.3 (hovered over list) |
After receiving feedback, I refined it and added all the links and this is the final layout.
 |
| Fig. 5.10: a part of the HTML |
 |
| Fig. 5.11: a part of the CSS |
 |
| Fig. 5.12: final layout pg.1 |
 |
| Fig. 5.13: final layout pg.2 |
 |
| Fig. 5.14: final layout pg.3 |
 |
| Fig. 5.15: final layout pg.4 |
Here's the link to view this exercise:
https://id-htmlwenyi.000webhostapp.com/week%207%20layout/refined%20new%20week7.html
FEEDBACK_
Week 01
Mr Shamsul mentioned that our list is ok, some of the good websites we chose had too long of a loading time because of the animation and image size.
Week 02
Transition not really smooth because he wanted to do the task, he doesn't know what to do. Must give the user options, if one option is not working, have to give the user an error to inform the user did something wrong. User feedback: the landing page was too much options and distracting, its good but the main focus should've been the search bar. For international students there's no language options. Overall can be improved.
Week 04
no feedback
Week 05
no feedback only approve
Week 06
no feedback only approve
Week 07
I showed them my refined layout they said it looks good for now, Mr Shamsul said to increase my line height and list margin height as it was too close. And change the dark gray to just black since it doesn't blend and the images doesn't pop out enough because its not black, overall its ok but can be improved. Mr Lun said that I probably know my layout (it shows on my exercise) which is good. After refining Mr Shamsul walked past and said that the box for the list is too wide compared to how I treated the same type of box at the top. After showing Mr Shamsul my 2nd refined layout, he mentioned that the layout can still be improved.
Mr Shamsul mentioned that our list is ok, some of the good websites we chose had too long of a loading time because of the animation and image size.
Week 02
Transition not really smooth because he wanted to do the task, he doesn't know what to do. Must give the user options, if one option is not working, have to give the user an error to inform the user did something wrong. User feedback: the landing page was too much options and distracting, its good but the main focus should've been the search bar. For international students there's no language options. Overall can be improved.
Week 04
no feedback
Week 05
no feedback only approve
Week 06
no feedback only approve
Week 07
I showed them my refined layout they said it looks good for now, Mr Shamsul said to increase my line height and list margin height as it was too close. And change the dark gray to just black since it doesn't blend and the images doesn't pop out enough because its not black, overall its ok but can be improved. Mr Lun said that I probably know my layout (it shows on my exercise) which is good. After refining Mr Shamsul walked past and said that the box for the list is too wide compared to how I treated the same type of box at the top. After showing Mr Shamsul my 2nd refined layout, he mentioned that the layout can still be improved.
Comments
Post a Comment