Interactive Design Exercises
Interactive Design Exercise
27.08.19 - 01.10.19 ( Week 1 - Week 6)
Yap Wei Xuan (0338916)
Interactive Design
Exercises
LECTURE NOTES
27.08.19 (Week1)
For our first class, Mr Shumsul gave us a briefing of our module and also a rough brief of our exercises and project.After that, we were separate to 4 groups to find out the bad and good website from the link he gave us, and we need to present it.
03.09.19 (Week 2)
Today class, Mr Shamsul introduce us about what is UI and UX and also the "Bad doors"
17.09.19 ( Week 4 )
Today, Mr Shamsul taught us the basic of the HTML,and also how to use those elements to create a website using notepad.
24.09.19 ( Week 5 )
01.10.19 ( Week 6 )
08.10.19 ( Week 7 )
No lecture for today
INTRODUCTION
EXERCISES
27.08.19 (Week 1)
Exercise 1 : Good website & bad website
We were going to chose and present about the good and bad website by groups. We have to choose 3 good website and 3 bad website from the link that Mr Shamsul gave us. After that, we have to present our chosen website and tell why it is good and bad
In our group we have Yip, Syaqiel, Qaezie, Gordon, Rahaf, Alizeh, Kelly, Abby, Arrisa and me.
These are the good website that we choose :
FEEDBACK: The Second Website cannot consider a good website, because the fonts are not consistent.
03.09.19 ( Week2 )
Exercise 2: user interface design for Taylor's University's information kiosk
We were separate to groups for today exercise. In my group, there are Qian Hui, Karyan, Wan Min, Ava and Chan Hee.
We have to design a user interface design for Taylor's University's information kiosk.We were required to do it with the paper and then have a prototype testing, which means others group will testing ours.
First of all, we have to select target audience and the goal is to guide them access Taylor's University.
Our group chooses the new students of Taylor's as our target audience and the scenario is a new student decide to fo to the library.
The progression of our group:
Here is the final outcome for our design.
FEEDBACK: Mr Shamsul say that our group did a great job as it is easy to use and clearly tell the users which floors are they now.
17.09.19 - 24.09.19 (Week4-Week5)
Exercise 3 : HTML
Fot today class, we were introduced to the basic of HTML, we did know html before because we need to do our e-portfolio that includes HTML but is not into the basic HTML yet. Mr Shamsul taught us to create a website using notepad. We were required to create 4 sections of our chosen topic and within at least one image and one link.
01.10.19 (Week6 - Week7)
27.08.19 - 01.10.19 ( Week 1 - Week 6)
Yap Wei Xuan (0338916)
Interactive Design
Exercises
LECTURE NOTES
27.08.19 (Week1)
For our first class, Mr Shumsul gave us a briefing of our module and also a rough brief of our exercises and project.After that, we were separate to 4 groups to find out the bad and good website from the link he gave us, and we need to present it.
03.09.19 (Week 2)
Today class, Mr Shamsul introduce us about what is UI and UX and also the "Bad doors"
17.09.19 ( Week 4 )
Today, Mr Shamsul taught us the basic of the HTML,and also how to use those elements to create a website using notepad.
24.09.19 ( Week 5 )
01.10.19 ( Week 6 )
08.10.19 ( Week 7 )
No lecture for today
INTRODUCTION
EXERCISES
27.08.19 (Week 1)
Exercise 1 : Good website & bad website
We were going to chose and present about the good and bad website by groups. We have to choose 3 good website and 3 bad website from the link that Mr Shamsul gave us. After that, we have to present our chosen website and tell why it is good and bad
In our group we have Yip, Syaqiel, Qaezie, Gordon, Rahaf, Alizeh, Kelly, Abby, Arrisa and me.
These are the good website that we choose :
 |
| https://www.coachella.com/ |
 |
| https://constanceburke.com |
 |
| https://volkfi.com |
 |
| https://littlegreenback.com |
 |
| http://dubois.com.au/ |
 |
| https://inkilas.com |
FEEDBACK: The Second Website cannot consider a good website, because the fonts are not consistent.
03.09.19 ( Week2 )
Exercise 2: user interface design for Taylor's University's information kiosk
We were separate to groups for today exercise. In my group, there are Qian Hui, Karyan, Wan Min, Ava and Chan Hee.
We have to design a user interface design for Taylor's University's information kiosk.We were required to do it with the paper and then have a prototype testing, which means others group will testing ours.
First of all, we have to select target audience and the goal is to guide them access Taylor's University.
Our group chooses the new students of Taylor's as our target audience and the scenario is a new student decide to fo to the library.
The progression of our group:
 |
| Fig 2.1 Teamwork |
 |
| Fig 2.2 creating menu bar |
 |
| Fig 2.3 Main button |
 |
| FIg 2.4 rough sketch |
 |
| Fig 2.5 final sketch |
Here is the final outcome for our design.
 |
| Fig 2.6 |
 |
| Fig 2.7 |
 |
| Fig 2.8 |
 |
| Fig 2.9 |
 |
| Fig 2.10 |
 |
| Fig 2.11 |
FEEDBACK: Mr Shamsul say that our group did a great job as it is easy to use and clearly tell the users which floors are they now.
17.09.19 - 24.09.19 (Week4-Week5)
Exercise 3 : HTML
Fot today class, we were introduced to the basic of HTML, we did know html before because we need to do our e-portfolio that includes HTML but is not into the basic HTML yet. Mr Shamsul taught us to create a website using notepad. We were required to create 4 sections of our chosen topic and within at least one image and one link.
 |
| Fig 3.1 Notepad |
After that, we were told to use Adobe Dreamweaver to create a beautiful decoration.
This is the outcome of the website:
 |
| Fig 3.2 Outcome1 |
 |
| Fig 3.3 Outcome2 |
 |
| Fig 3.4 Outcome3 |
 |
| Fig3.5 Outcome4 |
Exercise 4: Layout Exercise
Today class, Mr Lun taught us how to create a layout using Adobe Dreamweaver. He told us how to put emoji and also using the container and box to create layout. Then we were required to do the rest of the layout.
Here is the outcome:
These are the final outcome of it.
FURTHER READING
10 examples for good user experience by Laura Fluga
From the example and the explanation that have written we know what is a good user experience is.
For example, good design is invisible—meaning the user doesn’t notice the design while they are using it. Users only need to focus on the task at hand.
One of the example :Nes Thermostat
 |
| Fig 4.1 Layout 1 |
 |
| Fig 4.2 Layout 2 |
After that, we were required to create a photoshop website layout using the information that sir gave. Mr Shamsul also gave us some examples as references. Here is the process of it.
 |
| Fig 4.3 Process |
 |
| Fig4.4 Final outcome 1 |
 |
| Fig 4.5 Final Outcome 2 |
 |
| Fig 4.6 Final Outcome 3 |
 |
| Fig 4.7 Final Outcome 4 |
 |
| Fig 4.8 Final Outcome 5 |
FURTHER READING
10 examples for good user experience by Laura Fluga
 |
| Fig 5.0 10 examples for good UX |
From the example and the explanation that have written we know what is a good user experience is.
For example, good design is invisible—meaning the user doesn’t notice the design while they are using it. Users only need to focus on the task at hand.
One of the example :Nes Thermostat
 |
| Fig 5.1 Nest Thermostat |
- Nest using learning algorithms to allow their thermostat to set itself without being programmed by the user.
- Invisible : the design is literally unseen by the user.
- Smart technology is great in principle, but only work sometimes, users need to have override control.
Comments
Post a Comment