INTERACTIVE DESIGN - EXERCISES
04.04.19 -
(Week 1 - Week X)
Feryn Juliesta Sulia (0336407)
Interactive Design
Exercises
LECTURES
Lecture 1: Module Briefing/Web Design Evaluation
04.04.19 (Week 1)
For this module very first class, Mr. Shamsul introduced us to the big picture of what are we going to do in this class. He told us that we would need Adobe Dreamwaver for this module as we will work with coding.
We were divided into groups to discuss and categorised 6 good websites and 6 bad websites from webbyawards and thebestdesigns.
Lecture 2:
11.04.19 (Week 2)
We were informed to bring A3 paper for this class. This time we were divided into groups to design a landing page for Taylor's University kiosk. After that we need to present our design and let other group experienced our interface.
Lecture 3: Web Standards
18.04.19 (Week 3)
18.04.19 (Week 3)
INSTRUCTION
EXERCISES
Exercise 1: Web Evaluation
Class group exercise surveying the possibilities:
https://docs.google.com/spreadsheets/d/1RSPLpyTTfpBE7qLU3lbgp_KIz_l-anqtb50O0vnVa8k/edit#gid=1908573744
Exercise 2: User Interface - Information Kiosk
This exercise require us to design an interface of an information kiosk for Taylor's University. We were working in a group and each group have to present their scenario after they done, it'll be tested by other group and they will give the presenting group a feedback.
We decided to create a kiosk to informed about Syopz.
Exercise 3: HTML Exercise
This week, we started to work on coding. We were guided by Mr. Shamsul to create a html page using TextEdit on Mac and NotePad on Windows. At the end of the web standards slides, there are some basic coding that would help us doing this exercise.
Exercise 4: HTML & CSS Exercise
Class group exercise surveying the possibilities:
https://docs.google.com/spreadsheets/d/1RSPLpyTTfpBE7qLU3lbgp_KIz_l-anqtb50O0vnVa8k/edit#gid=1908573744
Exercise 2: User Interface - Information Kiosk
This exercise require us to design an interface of an information kiosk for Taylor's University. We were working in a group and each group have to present their scenario after they done, it'll be tested by other group and they will give the presenting group a feedback.
We decided to create a kiosk to informed about Syopz.
 |
| Fig 1.1 Information kiosk interface |
Exercise 3: HTML Exercise
This week, we started to work on coding. We were guided by Mr. Shamsul to create a html page using TextEdit on Mac and NotePad on Windows. At the end of the web standards slides, there are some basic coding that would help us doing this exercise.
 |
| Fig 1.2 Coding on TextEdit |
 |
| Fig 1.3 Coding Outcome |
Exercise 4: HTML & CSS Exercise
 |
| Fig 1.4 Coding on TextEdit |
 |
| Fig 1.5 Coding Outcome |
Then, we add style to our html file through css style sheet in dreamweaver.
 |
| Fig 1.6 CSS style sheet added to previous html exercise |
Exercise 5: HTML & CSS Document Development
 |
| Fig 1.7 HTML & CSS Container and Section |
Then, we were given this layout exercise with this given content to put inside the designed layout:
 |
| Fig 1.8 Attempt |
 |
| Fig 1.9 A Href Attributes |
 |
| Fig 1.10 Final Outcome |
 |
| Fig 1.11 Another A Href Attribute |
FEEDBACKS
Week 2
For our interface design, Mr. Shamsul commented that we shouldn't put Syopz logo because we were doing an information kiosk for Taylor's University, and he added that we should have made the keyboard page as we have the search button and require people to type their destination.
Week 3
Mr. Shamsul said I need to type more than 1 paragraph.
Week 4
He commented on my project one that it is not there yet, I have no alignment and the title font size is too big. But, the call to action is clear.
After fixing my landing page and asks for feedback from facebook, he said it looks like a real website and it's good.
Week 5
Mr. Shamsul commented on my 4th exercise that I typed too little but it's nice to put a background colour on it. He suggested me to put a button that allows reader to back to top of the page.
Week 6
No feedback
Week 7
Mr. Shamsul told me to give more space to the left and the right side so that the content would aligned more to the inside, also he told me to change some of my right alignment to left alignment
After asking for another feedback, he told me to adjust the container size because I put it too big so that we have to scroll right and left to see the entire website. Also to adjust line height and change some background so that the content could be more legible.
These interconnections were called hyperlinks and it was a grand vision of Berners Lee for a system that could link information through a 'web' of interconnections between documents across different computers. The hyperlink acted as a way of managing and sharing information among individual nodes, documents, and machines,
Tim Berners-Lee developed the HTTP which would essentially allow a user to click on one of these hyperlinks to easily;y move from one hypertext document to another using an interpreter program that is called a web browser, the early web browser that he wrote was called world wide web.
For our interface design, Mr. Shamsul commented that we shouldn't put Syopz logo because we were doing an information kiosk for Taylor's University, and he added that we should have made the keyboard page as we have the search button and require people to type their destination.
Week 3
Mr. Shamsul said I need to type more than 1 paragraph.
Week 4
He commented on my project one that it is not there yet, I have no alignment and the title font size is too big. But, the call to action is clear.
After fixing my landing page and asks for feedback from facebook, he said it looks like a real website and it's good.
Week 5
Mr. Shamsul commented on my 4th exercise that I typed too little but it's nice to put a background colour on it. He suggested me to put a button that allows reader to back to top of the page.
Week 6
No feedback
Week 7
Mr. Shamsul told me to give more space to the left and the right side so that the content would aligned more to the inside, also he told me to change some of my right alignment to left alignment
After asking for another feedback, he told me to adjust the container size because I put it too big so that we have to scroll right and left to see the entire website. Also to adjust line height and change some background so that the content could be more legible.
REFLECTIONS
Experiences
Week 1
This week, I got new understanding about which website has a good and bad interface.
Week 2
Week 3
Week 4
Week 5
This week, I experienced html coding that a bit more complicated than we did last week. I feel confused at first but enjoy it as soon as I understand it.
Week 4
Week 5
This week, I experienced html coding that a bit more complicated than we did last week. I feel confused at first but enjoy it as soon as I understand it.
Observations
Week 1
I realise there's still many websites that unappealing and uninformative out there. But, I also saw so many great websites both in design and its information.
Week 2
Week 3
Week 4
Week 5
I saw many of my classmates already experienced in this html lesson as they came out with great outcome
Week 4
Week 5
I saw many of my classmates already experienced in this html lesson as they came out with great outcome
Findings
Week 1
I found what makes website is a good one is its legibility and a comfortable looking interface.
Week 2
Week 3
Week 4
Week 5
I found that 6 hours class everyday is too much.
Week 4
Week 5
I found that 6 hours class everyday is too much.
FURTHER READINGS
Web Design Blueprints – LaGrone, Benjamin
(Chapter 1: Introduction to Responsive Web Design)
This book states that responsive web design is designing a website to optimise for multiple different viewpoints. This book is discussing the following learning sections to build a responsive website, such as responsive web design basics, the user agent, the media query, responsive images with css, responsive images with srcset, responsive video, responsive typography, responsive layout, responsive menu with css and javascript.
I learned that every responsive site we create will depend on viewport meta tag. This tag will instructs your browser to render the webpage scale and size in specific ways.
Multimedia Web Design and Development: Using Languages to Build Dynamic Web Pages – Richardson, Theodor This, Charles
(Chapter 1: Introduction to the World Wide Web)
The internet is a global interconnection of networks made up of hardware devices, such as personal computers and servers, which supports communication between different computing devices using an addressing scheme known as internet protocol. The world wide web is a service that runs on the internet to provide access to documents, audio, and video, and allows the interconnection of these documents through the use of hyperlinks.
Tim Berners-Lee developed the HTTP which would essentially allow a user to click on one of these hyperlinks to easily;y move from one hypertext document to another using an interpreter program that is called a web browser, the early web browser that he wrote was called world wide web.
Comments
Post a Comment