Exercises
30/08/18 - 18/10/18 (Week 1 - Week 8)
Ng Jia Jin (0331589)
Interactive Design
Exercises
For our second interactive design class, Mr Shamsul gave us a brief exercise to introduce interactive design to us. He gave us 2 websites that consists of various websites for different purposes. After that, we need to choose 6 websites that we consider as good websites and 6 bad websites that we consider as bad websites. The reason for this exercise is to let us know that what consist in a good website and bad website so that we will not make any similar mistakes when we're going to create our own website in the future.
My group wrote down the good & bad websites on a google sheets and provided reasons to it. We also determined what is the purpose of the websites that we found.
After the class, Mr Lun concluded the class by giving a recap of what did we learn today in class. He pointed out some points that makes a good web design such as:
For our third class interactive design class, Mr Shamsul gave us a brief about UX and UI interface. He talked about the differences between UI and UX, the importance of having a good web interface. Here are the slides:
After the brief, we need to roughly design a kiosk for our university. We need to design a university kiosk for our university and our target audience are newcomers and parents that have never been to our university. Since we consider them as newcomers, we decided to put mostly icons so that they can recognize it at first glance. Here is the slides that we designed for our university's kiosk.
For our next exercise, we need to create a simple HTML file of ourselves. Mr Shamsul asked us to prepare a resume of ours before the next class starts. Our resume should include our personal information, education background, work experience if we have any and also our own personal goals and personality.
Extra Markup / Cascading Style Sheet (CSS)
We had another lecture session this week which is about Cascading Style Sheet (CSS). From what I understand from this lecture session, CSS is used to basically enhance the overall style of a website. For example, we can change the color of our website background, the font that we want to use for our website and the overall aesthetic look of the website.
After learning about CSS, we need to create a simple HTML file by using the contents from our resume. First, we need to type out our resume in Adobe Dreamweaver before changing the fonts and the style of it with CSS. After typing out my resume on Adobe Dreamweaver.
After creating the borders, we then need to preview it on Google Chrome so that we know how will it look like on web browsers.
Before ending the class, Mr Lun told us that he will upload a sample CSS file on Google Classroom so that we can have a rough idea oh how the whole lecture is all about. After that, I tried to use the Mr Lun's CSS example and only changed a few things.
18/10/2018 (Week 8)
After thinking for a bit, I decided which layout to choose from and then start coding the information given by Mr Shamsul. After that, I went on to include photos that are included in the file. After I included all the information that were given, I then include a CSS file so that I can change the typeface for the titles and the information.
After finalizing everything, here is the final layout for this exercise.
4/10/2018 (Week 6)
I find that learning HTML is fun especially when you think of the possibilities to change your colors and the layout of your website with CSS and HTML. Besides, i also find out that HTML should always use together with CSS of one wants to enhance their website aesthetic look.
11/10/2018 (Week 7)
Through all the HTML and CSS exercises, it might be complicated at first but at the end of the day, it's always satisfying to see your own website with the layout that you want.
18/10/2018 (Week 8)
I find coding on Dreamweaver a bit dry and also too much for me but thankfully as I'm learning, I'm slowly getting better and also memorizing all the basic and some important codes throughout the process. Along the way, I can also learn some codes from the internet if I'm at home or outside from the class.
Further Readings
20/9/2018
Web Design DeMystified
Web Design DeMystified is published by McGraw-Hill and the author of the book is Wendy Willard. This book is a book that introduces the basic web design rules such as HTML and CSS. The book mainly focus on the basic coding for web design and also teaches us how to design a visually pleasing web design. They also introduce the fonts that are commonly used in web design which is very useful because you get the idea of what fonts are commonly used in web design.
In my opinion, I think this book is very suitable for web design students like me and also some amateur web designers because of the information given in the book. Besides that, they also give a lot of web design examples so that we can have an idea of what web design is all about.
Ng Jia Jin (0331589)
Interactive Design
Exercises
Instructions
Module Information Booklet for Interactive Design:
Lecture Notes
Lecture 1
30/8/2018 (Week 1)
To start off our first lesson for Interactive Design, our lecturer, Mr Shamsul gave us a brief lecture of what do we need to expect for Interactive Design. After giving us the program brief, he talked about web design & new media. He also asked us about the differences between web UX and web UI.
Web UX: Web UX basically handles the technical part of the website. It will handles how the whole website will interact with the user
Web UI: Web UI handles the user's experience, the design of a website and the overall aesthetic look of the website
Lecture 2
6/9/2018 (Week 2)For our second interactive design class, Mr Shamsul gave us a brief exercise to introduce interactive design to us. He gave us 2 websites that consists of various websites for different purposes. After that, we need to choose 6 websites that we consider as good websites and 6 bad websites that we consider as bad websites. The reason for this exercise is to let us know that what consist in a good website and bad website so that we will not make any similar mistakes when we're going to create our own website in the future.
My group wrote down the good & bad websites on a google sheets and provided reasons to it. We also determined what is the purpose of the websites that we found.
After the class, Mr Lun concluded the class by giving a recap of what did we learn today in class. He pointed out some points that makes a good web design such as:
- Fast Loading Time
- Mobile Compatibility
- Well planned information layout
- Good use of color scheme
- Well formatted content
- Effective Navigation
- Browser consistency
- Easily accessible to users
Lecture 3
13/9/2018 (Week 3)For our third class interactive design class, Mr Shamsul gave us a brief about UX and UI interface. He talked about the differences between UI and UX, the importance of having a good web interface. Here are the slides:
After the brief, we need to roughly design a kiosk for our university. We need to design a university kiosk for our university and our target audience are newcomers and parents that have never been to our university. Since we consider them as newcomers, we decided to put mostly icons so that they can recognize it at first glance. Here is the slides that we designed for our university's kiosk.
Lecture 4
27/9/2018 (Week 5)
For this week's Interactive Design lecture, Mr Shamsul started off by talking about the hardware and software of the web. He also talked about how the web works in this world. We also learned about web standards.
What is web standards?
Web standards are the core set of rules for developing a website. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access the sites.
Why web standards?
To make the internet a better place, for both developers and visitors, it is important that both browsers and web developers follow the Wed Standards.
After learning about web standards, we the proceeded to learn about some basic HTML coding.
Basic HTML codes:
What is web standards?
Web standards are the core set of rules for developing a website. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access the sites.
Why web standards?
To make the internet a better place, for both developers and visitors, it is important that both browsers and web developers follow the Wed Standards.
After learning about web standards, we the proceeded to learn about some basic HTML coding.
Basic HTML codes:
- main headings: <h1>
- subheadings: <h2>
- further subheadings: <h3>
- opening: <p>
- to make a text bold: <b>, </b>
- to make the italic: <i>, </i>
After learning some basic HTML codes, Mr Shamsul asked us to try it out ourselves. We need to type it out on notepad in order to make it work on the web. The whole point of this exercise is to let us experience what coding looks like. For me, I think this exercise is essential because it sets a foundation for me to know what is like to code more complicated coding in the future.
 |
| Fig 1.0: Coding in Notepad |
 |
| Fig 1.1: What is Like in Google Chrome |
For our next exercise, we need to create a simple HTML file of ourselves. Mr Shamsul asked us to prepare a resume of ours before the next class starts. Our resume should include our personal information, education background, work experience if we have any and also our own personal goals and personality.
Lecture 5
4/10/2018 (Week 6)
Website Development Process
Website Development Process
For this week's lecture, we learned about the planning phase before creating a good webpage. Mr Shamsul advised us that every time when we want to design a website, we should sketch out the layout first as an overall plan for the website. This is because we will have a rough idea on what our website will look like.
So what are the planning process?
1- Gathering Information: Purpose, Main Goals and Target Audience
2- Planning Phase: Sitemap and Wireframe Creation
3- Development Phase: Page Layouts
4- Final Phase: Testing Review and Launch
So what are the planning process?
1- Gathering Information: Purpose, Main Goals and Target Audience
2- Planning Phase: Sitemap and Wireframe Creation
3- Development Phase: Page Layouts
4- Final Phase: Testing Review and Launch
Extra Markup / Cascading Style Sheet (CSS)
We had another lecture session this week which is about Cascading Style Sheet (CSS). From what I understand from this lecture session, CSS is used to basically enhance the overall style of a website. For example, we can change the color of our website background, the font that we want to use for our website and the overall aesthetic look of the website.
After learning about CSS, we need to create a simple HTML file by using the contents from our resume. First, we need to type out our resume in Adobe Dreamweaver before changing the fonts and the style of it with CSS. After typing out my resume on Adobe Dreamweaver.
 |
| Fig 1.2: Coding process on Adobe Dreamweaver #1 |
 |
| Fig 1.3: Previewing My Resume on Google Chrome |
Full PDF file of My Resume
Lecture 7
11/10/2018 (Week 7)
For this week's lecture session, it is also about CSS but for this week, we learned about CSS boxes model instead. The boxes model will effect the visual appearance of the borders of the website. It can be used to control the dimensions such as the width or height of the borders. There is a width and height property code that will allow us to control the dimensions of the boxes that we created at the website. Besides that, we also learn about border, padding and margin that are all in the boxes.
After giving us a lecture session about creating boxes in CSS. Mr Shamsul asked us to try it out ourselves. Before doing anything, we first need to create a CSS file and then embed it to out HTML file.
 |
| Fig 1.4: Coding Process on Dreamweaver #1 |
 |
| Fig 1.5: Coding Process on Dreamweaver #2 |
After creating the borders, we then need to preview it on Google Chrome so that we know how will it look like on web browsers.
 |
| Fig 1.6: Preview on Google Chrome |
Before ending the class, Mr Lun told us that he will upload a sample CSS file on Google Classroom so that we can have a rough idea oh how the whole lecture is all about. After that, I tried to use the Mr Lun's CSS example and only changed a few things.
 |
| Fig 1.7: Sample CSS file given by Mr Lun |
 |
| Fig 1.8: Previewing on Google Chrome #1 |
 |
| Fig 1.9: Process on Adobe Dreamweaver |
18/10/2018 (Week 8)
This week, Mr Shamsul and Mr Lun gave us a new exercise that requires us to use HTML ans CSS for the exercise. They then upload a file to Google Drive that contains a list of instructions and also some pictures that we need for the exercise.
Here are the list of information that we need:
Here are the list of information that we need:
Before proceeding to coding, I sketched out some sketches for the website that I'm thinking to create.
After thinking for a bit, I decided which layout to choose from and then start coding the information given by Mr Shamsul. After that, I went on to include photos that are included in the file. After I included all the information that were given, I then include a CSS file so that I can change the typeface for the titles and the information.
 |
| Fig 2.0: Coding Process at Dreamweaver |
 |
| Fig 2.1: Coding Process at Dreamweaver |
 |
| Fig 2.2: Coding Process at Dreamweaver |
 |
| Fig 2.3: Coding Process at Dreamweaver |
 |
| Fig 2.4: CSS file |
 |
| Fig 2.5: CSS file |
After finalizing everything, here is the final layout for this exercise.
 |
| Fig 2.6: Final Layout Design #1 |
 |
| Fig 2.7: Final Layout Design #2 |
 |
| Fig 2.8: Final Layout Design #3 |
Feedback
8/9/2018 (Week 2)
General Feedback: After all our presentation of evaluating good & bad websites, Mr Shamsul told us that we need to start to learn about the basics call outs in the web design & coding industry such as hamburger menu, footer and parallax scrolling.
13/9/2018 (Week 3)
General Feedback: Mr Shamsul stated that when it comes to designing an information kiosk and our target audiences are people from all ages, it's better to include more visuals such as images instead of long sentences of words because it lets people to understand better that way. If we are going to use icons to represent something, make sure that it's easily recognizable.
Specific Feedback: For our group, Mr Shamsul said that our overall information kiosk is good and the navigation is nice and clear. Our only problem is that we need to include our university's name Taylor's University instead of just the university's logo at the main menu.
4/10/2018 (Week 6)
General Feedback: For our resume, we need to make sure that we have enough information to it. Information such as our own personality and personal goals should be included in our resume as well. Besides, we should also save all of our HTML files and any images used within one file to avoid complicating the system.
Specific Feedback: Mr Shamsul told me that I should add my own personality and my own personal goal to my resume.
11/10/2018 (Week 7)
There's no feedback this week as we only have exercises to complete.
18/10/2018 (Week 8)
Mr Shamsul said that my layout looks decent and simple but he recommended me to look at some of my classmates' one ask he felt that I can learn more from theirs.
4/10/2018 (Week 6)
General Feedback: For our resume, we need to make sure that we have enough information to it. Information such as our own personality and personal goals should be included in our resume as well. Besides, we should also save all of our HTML files and any images used within one file to avoid complicating the system.
Specific Feedback: Mr Shamsul told me that I should add my own personality and my own personal goal to my resume.
11/10/2018 (Week 7)
There's no feedback this week as we only have exercises to complete.
18/10/2018 (Week 8)
Mr Shamsul said that my layout looks decent and simple but he recommended me to look at some of my classmates' one ask he felt that I can learn more from theirs.
Reflection
30/8/2018 (Week 1)
After learning about web UI and web UX and the introduction to web design, we got to have a look on the codes and coding projects that we need to go through throughout the semester and I have to say that this class already look very technical and stressful.
8/9/2018 (Week 2)
For this week's exercise, we need to evaluate 6 good websites and 6 bad ones based on its layout, information and overall design. I think it's a useful exercise because we kind of get to know what a good and what a bad website looks like.
13/9/2018 (Week 3)
For this week, we get to design an information kiosk for our university. It was a pretty good experience because we all get to learn how is it to design a kiosk/website.
4/10/2018 (Week 6)
We get to touch on Adobe Dreamweaver rather than Notepad and it was quite confusing at first. But, after some time, I kind of able to code the basic HTML coding.
11/10/2018 (Week 7)
In this class, I learned about CSS which to enhance the overall look of the website that I'm going to create. I find it quite interesting because I'm able to change the font that I want and also the color of the background.
18/10/2018 (Week 8)
In this class, we had an exercise which is given to us in Word Document. We need to code it in Dreamweaver and also to style it with CSS so that we can get prepared for our next project.
4/10/2018 (Week 6)
We get to touch on Adobe Dreamweaver rather than Notepad and it was quite confusing at first. But, after some time, I kind of able to code the basic HTML coding.
11/10/2018 (Week 7)
In this class, I learned about CSS which to enhance the overall look of the website that I'm going to create. I find it quite interesting because I'm able to change the font that I want and also the color of the background.
18/10/2018 (Week 8)
In this class, we had an exercise which is given to us in Word Document. We need to code it in Dreamweaver and also to style it with CSS so that we can get prepared for our next project.
Observation
30/8/2018 (Week 1)
One thing I noticed from today's lecture is that the road to complete this module is not going to be easy because of all the coding codes.
8/9/2018 (Week 2)
From all the websites that we determined that are bad and good, I noticed that every bad website has a thing in common, which is their website navigation. It's so hard to navigate and the information are just everywhere at the website.
13/9/2018 (Week 3)
For this week's exercise which is to design an information kiosk for our university, I observed that it's very important to include more visuals elements rather than long sentences because it's easier to navigate through the whole kiosk.
4/10/2018 (Week 6)
This week, we started to really explore Adobe Dreamweaver and I observed that it's easier to use Adobe Dreamweaver compare to using Notepad.
11/10/2018 (Week 7)
I observed that it's quite complicated to do all the HTML and CSS codes together. It's just very confusing and you really need to understand fully in order to make it work.
18/10/2018 (Week 8)
I think the hardest part for me is always the start of a new project because I tend to get very lost to create for example a navigation bar. But, as the project goes I will get better and also learn at the same time.
4/10/2018 (Week 6)
This week, we started to really explore Adobe Dreamweaver and I observed that it's easier to use Adobe Dreamweaver compare to using Notepad.
11/10/2018 (Week 7)
I observed that it's quite complicated to do all the HTML and CSS codes together. It's just very confusing and you really need to understand fully in order to make it work.
18/10/2018 (Week 8)
I think the hardest part for me is always the start of a new project because I tend to get very lost to create for example a navigation bar. But, as the project goes I will get better and also learn at the same time.
Findings
30/8/2018 (Week 1)
I find that designing a user friendly website is actually not an easy task at all because of all the coding codes needed to compile with each other.
8/9/2018 (Week 2)
From what I learned from this class, I find that no matter how nice is a website design, if a user can't navigate through it at ease, the website will always be considered as a bad website for me.
13/9/2018 (Week 3)
I find out that for every web designer, navigation of a website at ease should always be their priority when it comes to designing a website. Without a user friendly website, a user will just quit half way without bothering to see any other information.
4/10/2018 (Week 6)
I find that learning HTML is fun especially when you think of the possibilities to change your colors and the layout of your website with CSS and HTML. Besides, i also find out that HTML should always use together with CSS of one wants to enhance their website aesthetic look.
11/10/2018 (Week 7)
Through all the HTML and CSS exercises, it might be complicated at first but at the end of the day, it's always satisfying to see your own website with the layout that you want.
18/10/2018 (Week 8)
I find coding on Dreamweaver a bit dry and also too much for me but thankfully as I'm learning, I'm slowly getting better and also memorizing all the basic and some important codes throughout the process. Along the way, I can also learn some codes from the internet if I'm at home or outside from the class.
Further Readings
20/9/2018
Web Design DeMystified
Web Design DeMystified is published by McGraw-Hill and the author of the book is Wendy Willard. This book is a book that introduces the basic web design rules such as HTML and CSS. The book mainly focus on the basic coding for web design and also teaches us how to design a visually pleasing web design. They also introduce the fonts that are commonly used in web design which is very useful because you get the idea of what fonts are commonly used in web design.
In my opinion, I think this book is very suitable for web design students like me and also some amateur web designers because of the information given in the book. Besides that, they also give a lot of web design examples so that we can have an idea of what web design is all about.
Not complete
ReplyDeleteThere's no feedback and reflection in your post. Please complete it by today
ReplyDelete