08/26/2019
Ahmad Syaqiel Mohd Ashri (0338345)
Advanced TypographyExercises
Lecture Notes
Week 1 (8/26/2019)
The lecture for this week was a simple run through of how the course would go. Ranging from project 1, project 2 and finally the final project. We had explored terms used within interactive design such as a landing page. Which is the the page that a user will be beginning on.
Week 2 (9/2/2019)
For the 2nd week, the lecture was based on the difference between UI and UX. Where as UI is the presentation everything, UX is the experience of the user and the response to him/her.
Week 3 (9/10/2019)
Week 3, we were given a lecture about the web and everything about the web and how it involves interactive design such as web standards and structure.
Week 4 (9/16/2019)
Absent from class
Week 5 (9/24/2019)
Today we had learned about css and creating classes and ids.
Week 6 (10/1/2019)
We had learnt even more about css this week, specifically box models. Things such as overflow and creating divisions or <div> were discussed in class
Week 7 (10/8/2019)
No lecture due to focusing on layout exercise
Week 8 (10/15/2019)
This weeks lecture was taught my Mr Lun. It was about responsive web design and how bootstrap can help us in creating responsive web design.
Instructions
Exercises
Week 1
For our first exercise we were to look through websites and define them as good or bad websites. We had done this in a group and found our websites through the two given which were webbyawards.com and thebestdesigns.com. The three websites we defined as good are seen below as well as the bad websites based off our perception.
 |
| Fig 1: Good design website volkfi.com (Above) |
 |
| Fig 2: Good design website coachella.com (Above) |
 |
| Fig 3: Good design website constanceburke.com (Above) |
 |
| Fig 4: Bad design website dubois.com.au (Above) |
 |
| Fig 5: Bad design website littlegreenback.com (Above) |
 |
| Fig 6: Bad design website inkilas.com (Above) |
During week 2, our exercise as to make a paper prototype for a Taylor's information kiosk. The task for our kiosk was to help anyone find directions to the library. Pictures of each "screen" can be seen below as well as a video.
 |
| Fig 7: Tourist kiosk prototype 1 (Above) |
 |
| Fig 8: Tourist kiosk prototype 2.1 (Above) |
 |
| Fig 9: Tourist kiosk prototype 2.2 (Above) |
 |
| Fig 10: Tourist kiosk prototype 3.1 (Above) |
 |
| Fig 11: Tourist kiosk prototype 3.2 (Above) |
 |
| Fig 12: Tourist kiosk prototype 4.1 (Above) |
 |
| Fig 13: Tourist kiosk prototype 4.2 (Above) |
Fig 14: Tourist kiosk video (Above)
Week 4-5
During this week we were taught html code. We had done this in notepad and were to create a basic website about us with lists and links. The week after we brought the code into Dreamweaver and made the website look visually nicer. This final result is seen below.
 |
| Fig 15: My site (Above)
Week 6
From week 6 we were shown in class how to create a basic layout using css. This can be seen below. From there we were to create our own layout for a photoshop website which can also be seen below.
|
 |
| Fig 16: Layout exercise part 1 (Above) |
 |
| Fig 17: Layout exercise part 2 (Above) |
Further Reading
I had read this to understand the subject we were learning about. Within it, it covers everything from visual design to interactive design. It was interesting to understand the fundamentals of these design aspects.
Comments
Post a Comment