INTERACTIVE DESIGN - EXERCISES
27/8/19 - 1/10/19 (Week 1 - Week 6)
Neoh Kar Yan (0339338)
Interactive Design
Exercises
LECTURE NOTES
Lecture 1: Briefing
27/8/19 (Week 1)
On the first day of class, Mr. Shamsul gave us a brief introduction about the module. He went through the MIB with us and explained briefly on the assignments and projects that we'll be doing throughout the semester.
After class, we discussed some of the good and bad traits of a web design.
Traits of a good website:
- Interactive
- Effective navigation
- User-friendly
- Consistency
- Responsive
- Clear call to action
- Mobile compability
- Good contrast
- Fast load time
- Well planned information layout
- Good use of colour scheme
Traits of a bad website:
- Misalignment
- Unresponsive
- Too much information
- Use of too many different typefaces
- Too much unnecessary animations
Lecture 2: UI vs UX
3/9/19 (Week 2)
3/9/19 (Week 2)
Mr. Shamsul gave us a lecture about UI and UX, what each of them is about.
Lecture 3: The Web
10/9/19 (Week 3)
Mr. Shamsul gave us a lecture about the web. We learned and understood the web standards, how the web works and the structure of a web page. We also learned about some tags and elements of HTML. He then introduced our first project, which is to design a landing page.
Lecture 4: HTML
17/9/19 (Week 4)
This week we learned about HTML and how to apply the elements we learned from last week to create a HTML website using notepad.
Lecture 5: Extra Markup & Cascading Style Sheet (CSS)
24/9/19 (Week 5)
Lecture 6: CSS Boxes Model
1/10/19 (Week 6)
Lecture 7: -
8/10/19 (Week 7)
There was no lecture today as we focused on working on our layout exercise.
Lecture 8: Responsive Web Design
There was no lecture today as we focused on working on our layout exercise.
Lecture 8: Responsive Web Design
15/10/19 (Week 8)
INSTRUCTIONS
27/8/19 (Week 1)
We were divided into 4 groups and were told to evaluate 3 good websites and 3 bad websites from https://www.webbyawards.com/ and https://www.thebestdesigns.com/. We were to present on the purpose of the website, the target audience and the pros and cons. We were to fill up on the necessary details in the google sheets given.
The good websites we picked are:
Bad Websites:
3/9/19 (Week 2)
We were to design a user interface design for Taylor's University's information kiosk. Firstly, we were required to select a specific target audience and consider their problems and needs. The goal of this exercise is to help users to access Taylor's University. We were divided into 4 groups for this exercise.
Target audience: New students at Taylor's University
Scenario: You are a new student who is trying to find her way to the library. You stumble upon an ipad directory in front of Taylor's University roundabout.
Here is the final outcome of our user interface design.
17/9/19 (Week 4)
For this week, we were introduced to the basics of HTML. We learned how to use basic HTML elements such as title, headings, paragraphs, and lists. For this week's exercise, we had to write 4 sections of our chosen topics, with at least one picture in every section and a list. I decided to write on myself, my singing journey, my hobby in baking and my dog.
 |
| Fig1.1 https://griflan.com/ |
 |
| Fig1.2 https://volkfi.com/?gclid=Cj0KCQjwho7rBRDxARIsAJ5nhFpGe5zF- |
 |
| Fig1.3 https://www.ifly50.com/en_my/46 |
Bad Websites:
 |
| Fig1.4 https://50-jahre-hitparade.ch/ |
 |
| Fig1.5 http://puttertje.mauritshuis.nl/en |
 |
| Fig 1.6 http://www.jeremyholmesstudio.com/ |
3/9/19 (Week 2)
We were to design a user interface design for Taylor's University's information kiosk. Firstly, we were required to select a specific target audience and consider their problems and needs. The goal of this exercise is to help users to access Taylor's University. We were divided into 4 groups for this exercise.
Target audience: New students at Taylor's University
Scenario: You are a new student who is trying to find her way to the library. You stumble upon an ipad directory in front of Taylor's University roundabout.
 |
| Fig 2.1 Initial sketches #1 |
 |
| Fig 2.2 Initial sketches #2 |
 |
| Fig 2.3 Initial sketches #3 |
Here is the final outcome of our user interface design.
 |
| Fig.2.4 Final Outcome of interface design |
17/9/19 (Week 4)
For this week, we were introduced to the basics of HTML. We learned how to use basic HTML elements such as title, headings, paragraphs, and lists. For this week's exercise, we had to write 4 sections of our chosen topics, with at least one picture in every section and a list. I decided to write on myself, my singing journey, my hobby in baking and my dog.
 |
| Fig 3.1 HTML in notepad |
 |
| Fig 3.2 HTML Site |
24/9/19 (Week 5)
This week, we got to experience using Adobe Dreamweaver. After learning about CSS and HTML, we got to add in additional elements into our site.
 |
| Fig 4.1 Process of coding in Dreamweaver |
 |
| Fig 4.2 Final Outcome of HTML Site #1 |
 |
| Fig 4.3 Final Outcome of HTML Site #2 |
 |
| Fig 4.4 Final Outcome of HTML Site #3 |
 |
| Fig 4.5 Final Outcome of HTML Site #4 |
 |
| Fig 4.6 Final Outcome of HTML Site #5 |
1/10/19 (Week 6)
This week we learned how to create a layout using the codes that we learned in our previous classes.
 |
| Fig 5.1 Process of coding #1 |
 |
| Fig 5.2 Process of coding #2 |
 |
| Fig 5.3 Outcome of page #1 |
 |
| Fig 5.4 Outcome of page #2 |
We are then required to come up with a website layout on our own using what we learned previously. Mr. Shamsul uploaded a file that includes the instructions as well as the contents to include in the layout we'll be creating.
 |
| Fig 5.5 HTML Codes |
 |
| Fig 5.6 CSS Codes |
Here is the link to my website:
 |
| Fig 5.7 Outcome of layout #1 |
 |
| Fig 5.8 Outcome of layout #2 |
 |
| Fig 5.9 Outcome of layout #3 |
 |
| Fig 5.10 Outcome of layout #4 |
 |
| Fig 5.11 Outcome of layout #5 |
FURTHER READING
https://blog.teamtreehouse.com/10-user-interface-design-fundamentals
27/8/19 - 3/9/19 (Week 1 - Week 2)
This article was provided in the lecture slides and I went to read up about it. This article talks about the ten fundamentals when getting started on a new interface. I found this very accurate and informative on having the right mindset to designing something new. It speaks about how we should know our user, the target audience. We should learn about how our customer's mind works then work backwards to compete with the others. Secondly, we should pay attention to patterns so that users feel at home, to stay consistent to increase efficiency, to use visual hierarchy to increase clarity, include elements which provide feedback, create designs that tolerate error and more.
2. Top 10 Guidelines For Homepage Usability by Jakob Nielsen
https://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
10/9/19 - 17/9/19 (Week 3 - Week 4)
This website talks about the importance of a homepage. It is the most important page in a website and gets more page vies than other pages. It has a great impact for companies and their business as customers will mostly check them online first before approaching in real life. There are some ways to increase homepage usability :
1. Include a one sentence tagline (summarising what your company does)
2. Write a window title with good visibility in search engines
3. Group all corporate information in one distinct area (detailed information about the company)
4. Emphasize the site's top
5. Include a search input box (users can directly find what they need)
6. Show examples of real site content/links (begin with the most important keyword)
7. Offer easy access to recent homepage features
8. Don't over format critical content
9. Use simple but meaningful graphics
3. A Brief History of HTML by Jeffrey Veen
https://www.wired.com/1997/04/a-brief-history-of-html/
24/9/19 - 31/9/19 (Week 5 - Week 6)
For this week, I read about a brief history HTML.
Tim Bernes Lee, which is the creator of the world wide web, was his first elementary browsing and authoring system for the web when he first created a quick small hypertext system that could serve his purpose. He thought a about a bunch of different hypertext language and let it do its work. It was a system that could work on any platform and browser.
The problem with the html system was the simplicity of Berners-Lees language. Since it was text-based, you could use any editor or word processor to crate or convert documents for the web and html is something thats really easy to master. Because of HTML, everybody started to publish websites of their own.
As more and more content was uploaded to the web, creators thought that the HTML should be improved. So developers started to include and create new features to add to their browsers. If the community like it, it stayed, if not they were removed.
HTML then continued to grow more and more with new tags like <background>, <font> and others.
Comments
Post a Comment