INTERACTIVE DESIGN - EXERCISES
See Zi Yi 0340094
Interactive Design
Exercises
LECTURE
Week 1 (15/04/2020)
On the first day of class, Mr Shamsul briefed us on the module. He went through the MIB and explained about the assignments which we will be doing for this semester. Then, he gave us a lecture on the topic: website.
Free web hosting service was also provided during the lecture:
https://www.netlify.com/
https://www.000webhost.com/
Fig. 1.0 Lecture notes 1
Week 2 (22/04/2020)
This is an introductory lecture where we learnt about the common terms used in the web, its standards, as well as HTML codes. Below are some common HTML codes:
1. body content:
<body> ... </body>
2. paragraph:
<p>... </p>
* p1, p2, p3... are inaccurate.
3. heading 1:
<h1>... </h1>
* h2, h3, h4, etc. are applicable here.
4. bold:
<b>... </b>
5. italicize:
<i>... </i>
6. ordered list (with numbers):
<ol>... </ol>
7. unordered list (bullet points):
<ul>... </ul>
8. listed item (to be placed under "ol" or "ul"):
<li>... </li>
9. link:
<a>... </a>
e.g. <a href=“http://www.imdb.com”>IMDB</a>
Below is the lecture notes in PDF file:
Fig. 1.1 Lecture notes 2
Week 3 (29/04/2020)
After understanding the basic HTML codes, we were taught about the more advanced ones. Below are the examples:
1. Image:
<img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
* What is "alt"?
The required alt attribute specifies an alternate text for an image if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
2. Link:
<a href="https://totaltriathlon.com/triathlon-terms#usat" title="USA Triathlon (USAT)" > USA Triathlon (USAT)</a>
* What is target="_blank"?
Adding this attribute enables the link to appear in a separate tab instead of the original website's tab.
Below is the lecture notes in PDF file:
Fig. 1.2 Lecture notes 3
Week 4 (06/05/2020)
For today's lecture, we learnt about CSS and how it can be applied in our HTML script. Here are some important points to take notes of:
1. CSS
Website appearance customization.
2. Internal CSS
placing CSS rules in an HTML script.
* place everything in the head section for internal CSS.
e.g. <style type="text/css">
p{...}
3. Selector
Indication which element the rule applies to.
e.g. p{}, body {}
4. Declarations
Indication of how the elements referred to in the selector should be styled.
* After each style declaration, you must use a semicolon!
e.g. p{font-family: Arial;}
5. Property
Appearance settings like colour, font, width, height and border, etc.
e.g. p{font-family: Arial; colour: yellow;}
6. Value
Specification of property.
e.g. p{font-family: Arial; colour: yellow;}
7. External CSS
Use this type of CSS if you have more than one page for your website
e.g. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
* An HTML page can use more than one CSS style sheet.
- To do this it could have an <link> element for every CSS file it uses.
- For example, one author uses one CSS to control the presentation (fonts and colours) and a second to control the layout.
Extra points:
1. Don't change the font size for headings.
2. Point size on HTML script = em (instead of pt).
3. Colour= Hex(does not have opacity option); opacity in AI= alpha in Dreamweaver.
4. To identify colours: just type “red”.
5. Use Google Fonts: Copy the link for embed (standard) > add it on the head section.
6. Use “space” separated selector (h1, h2 {...}).
7. Use {a} to differentiate linked text and normal text.
8. For links, change the colours to indicate active (corn blue), visited (corn blue to purple).
9. Use body{}: use the same typeface and colour, instead of specifying p{} or li{}.
Fig. 1.2 Lecture notes 4
Week 5 (13/05/2020)
Today, we learnt more about setting the appearance of the website.
Here are a few points I have taken down on the topic of overflow:
- To avoid overflowing of text: use the min-height/ max-height properties/ overflow property.
- Hidden: control the length of text; scroll: not recommended because you're having a scroll box under the main scroll box(of the main website).
Another thing to note are:
- <class> can be reused multiple times but <id> can only be used once.
- <class> can be reused multiple times but <id> can only be used once.
INSTRUCTIONS
EXERCISE & TUTORIAL
TUTORIAL
Week 1 (15/04/2020)
For our first tutorial, Mr Shamsul assigned us to research on the 9 types of websites, namely:
1. Informational website
2. Corporate website
3. Portfolio website
4. E-commerce website
5. Brochure website
6. Entertainment website
7. Education website
8. Non-profit website
9. Personal website
Along with each website's target audience and purpose. Initially, we plan to explain our findings through screen sharing, but it was too time-consuming. Hence, Mr Shamsul asked us to just upload our findings in our Google Slides file on Google Classroom. He and Mr Lun will be marking and giving feedback after reviewing our work. Below are my findings.
Fig. 1.0 Tutorial 1
Week 2 (22/04/2020)
For our second tutorial, we learnt HTML by using notepad. We were required to pen down a self-introduction along with our MCO experience with a minimum of 2 paragraphs with 20-30 words.
Here is a screenshot of my website.
 |
| Fig. 1.1 Tutorial 2 |
EXERCISE 1
Week 3 (29/04/2020)
For our first exercise, we were assigned to create a website with the content and images provided by using Adobe Dreamweaver.
 |
| Fig. 1.2 Working in progress on Adobe Dreamweaver |
Once I have received feedback from Mr Lun, I compile my HTML file along with the pictures provided in a Google Drive folder and uploaded on Google Classroom.
Here is my full HTML script on Google Docs.
The images below show my HTML tags on the web.
 |
| Fig. 1.3 Exercise 1 #1 |
 |
| Fig. 1.4 Exercise 1 #2 |
 |
| Fig. 1.5 Exercise 1 #3 |
 |
| Fig. 1.6 Exercise 1 #4 |
Week 4 (06/05/2020)
For this lesson, we learnt about how to add on internal CSS in our HTML script. Having this CSS script not only allows us to edit the appearance of our website, but we can also adjust our text appearance as well, e.g. changing the choice of typeface, line height, typeface size, etc. Below is a screenshot of the amendments I made.
 |
| Fig. 1.7 Add-ons to my previous HTML script |
The images below show my HTML tags on the web.
 |
| Fig. 1.8 Exercise 1 #5 |
 |
| Fig. 1.9 Exercise 1 #6 |
 |
| Fig. 1.10 Exercise 1 #7 |
 |
| Fig. 1.11 Exercise 1 #8 |
EXERCISE 2
Week 5 (13/05/2020)
For our second exercise, we were tasked to create a layout design according to the tutorial conducted in class, which is shown in the Youtube video below:
Below is the layout Mr Shamsul which we were told to refer:
 |
| Fig. 1.12 Layout design reference |
Below are some progression shots I took while I was working on mine:
 |
| Fig. 1.13 Working in progress |
 |
| Fig. 1.14 Defining site |
 |
| Fig. 1.15 Using shortcut keys to set margin |
Here is my website.
Here is my HTML script on Google Drive.
Here is my CSS script on Google Drive.
This is how it looks like on the web:
 |
| Fig. 1.16 Header and the first section of my website layout |
 |
| Fig. 1.17 The second section with 3 asides and the footer |
For our next exercise of the week, we were tasked to create another layout of a website. Below is the Word document which was provided:
Fig. 1.18 Content
Below are some progression shots:
 |
| Fig. 1.19 HTML script #1 |
 |
| Fig. 1.20 HTML script #2 |
 |
| Fig. 1.21 CSS script #1 |
 |
| Fig. 1.22 CSS script #2 |
Below are the screenshots of my first attempt webpage by section:
 |
| Fig. 1.23 Header |
 |
| Fig. 1.24 Content 1 |
 |
| Fig. 1.25 Content 2 |
 |
| Fig. 1.26 Content 3 |
 |
| Fig. 1.27 Content 4 |
 |
| Fig. 1.28 Footer |
I showed my work to Mr Shamsul for feedback and he said I could give more line-height to my text as well as to have consistency for my head title. And I can submit it once I am done. Below is my amended version:
 |
| Fig. 1.29 Header |
 |
| Fig. 1.30 Content 1 |
 |
| Fig. 1.31 Content 2 |
 |
| Fig. 1.32 Content 3 |
 |
| Fig. 1.33 Content 4 |
 |
| Fig. 1.34 Footer |
Mr Shamsul reviewed on my layout again in class and commented on some amendments to be made. Here is my final layout design:
 |
| Fig. 1.35 Header |
 |
| Fig. 1.36 Section 1 |
 |
| Fig. 1.37 Section 2 |
 |
| Fig. 1.38 Section 3 |
 |
| Fig. 1.39 Section 4 |
 |
| Fig. 1.40 Footer |
LINK TO MY WEBPAGE: https://seeziyi0340094-interactivedesign.netlify.app/
FEEDBACK
Week 1 (15/04/2020)
No feedback.
Week 2 (22/04/2020)
No feedback.
Week 3 (29/04/2020)
Exercise 1: There's no error and it seems to be what Mr Shamsul wants.
Week 4 (06/05/2020)
Exercise 1 part 2: Everything's fine but please add line-height for better eligibility.
Week 5 (13/05/2020)
No feedback.
Week 6 (19/05/2020)
Feedback on Facebook:
"Hi, Zi Yi. Everything looks fine. But maybe you can adjust the line-height a bit. other then that, everything looks fine. Good job."
"And also the colour of the header should be consistent."
Week 6 (20/05/2020)
Overall it looks nice, but the text box should be aligned to the top of the image. Change the double arrow in the button to a single arrow as it makes my modern-looking layout looks old-fashioned, by changing button1 span:after {content: '\00BB';} to {content: '\203A';}. Add on two more buttons which say "READ MORE" to balance out the text box, so it aligns nicely with the picture.
REFLECTION
Week 1 (15/04/2020)
Experience: Today's class was a little chaotic as it's quite a huge one and also due to the poor Internet connection.
Observation: Lecture notes are very rich and sufficient in content. Lecturers are patient in providing a clear explanation as well.
Findings: I personally would opt for online classes if it wasn't for the poor Internet connection.
Week 2 (22/04/2020)
Experience: The Internat connection was quite unstable this week as well, and we had to pause the meeting several times until it can resume to normal. It wasn't a huge issue but can be quite frustrating at times.
Observation: I realized that some of our classmates are very well-versed in coding. They seem to have prior knowledge in this field of studies.
Findings: Despite coding being alien to me, I find myself enjoying it very much. At this stage of exploration, it has yet to intimidate me but I am looking forward to the challenges.
Week 3 (29/04/2020)
Experience: Coding on Adobe Dreamweaver was fun! I think it's because I am a quite systematic person when it comes to doing my work and arranging the coding lines on the script felt satisfying.
Observation: Mr Shamsul and Mr Lun are super patient when it comes to giving feedback. They are meticulous as well because they would read through everyone's script and give necessary feedback.
Findings: It takes time for me to remember the attributes when they start to pile up in my mind. Hence, I had to list them down on my notebook.
Week 4 (06/05/2020)
Experience: We finally learnt how to add some colours to our bland-looking website! We learnt to use typefaces from Google Fonts as well.
Observation: The atmosphere of this class is fairly chill and relaxing but we still learnt something from every class. The feedback session is conducted much more systematically this time around. No unnecessary waiting is needed.
Findings: I found that I am slowly improving as a design student. I would read and gauge the tone of the website to pick a suitable colour instead of just using the colours I like. I also found that trial and error is very effective in designing, cause with that, you will know what's the best for you.
Week 5 (13/05/2020)
Experience: Learning to create a landing page was very insightful, as there are so many little things to pay attention to while you create one. Now I started to appreciate designers a lot more after going through the designing process on my own.
Observation: Starting from this week, the lecturers are expecting us to equip ourselves with the basics of HTML and CSS, such as knowing the link of the image file should be coded with the right format. However, they would still be patient enough to guide us through if we have any issues with our files.
Findings: I think my colour sense has improved a little this time around because I really like how my website's appearance turns out. Aside from that, I feel that I need to really understand the science behind everything instead of just blindly following the instructions given.
Week 6 (19/05/2020)
Experience: I am so glad my layout turned out nicely! It feels as if my effort has finally paid off. I struggled really hard at first, but I am glad I invested the time and effort into learning it. Looking at the end results is really satisfying. I can't wait to do more hands-on exercise on this module.
Observation: I observed a classmate of mine's layout (Cerene's!), and it indeed looks very professional. Some of my friends have very interesting layouts too! But some of them seemed to only utilize the layout taught in last week's class.
Findings: Even though I think I did well, I still have so much to learn from my classmates and lecturers. I am also very grateful for the existence of the Internet. It's seriously where the magic happens.
Comments
Post a Comment