Interactive Design - Exercises
Abigail Bea Chong Ka Yee (0333966)
Interactive Design
Exercises
LECTURE NOTES
Lecture 1: Introduction to Interactive Design
27.8.19 (Week 1)
For our first class, Mr Shamsul showed us our module booklet information whilst and told us about the apps we could use which were Bootstrap, Brackets or Adobe Dreamweaver. He also mentioned that we should use the original version for Dreamweaver instead of the crack version to prevent the app from crashing.
Lecture 2: UI vs UX design
3.9.19 (Week 2)
Mr Shamsul gave us a lecture about the difference between UI vs UX design.
Lecture 3: The Web
10.9.19 (Week 3)
Today Mr Shamsul gave us a lecture about the web. He also introduced our first project, where we would have to create a landing page.
Lecture 4: No lecture
17.9.19 (Week 4)
Mr Shamsul told us about how to use the basics of HTML using notepad from the elements we learned last week.
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: No lecture
8.10.19 (Week 7)
We didn't have lecture today since we only focused on our layout exercise.
Lecture 8: Responsive Web Design
15.10.19 (Week 8)
Lecture 9: No lecture
22.10.19 (Week 9)
INSTRUCTIONS
EXERCISE
Analysing good and bad websites | Week 1 | 27.08.19
We were divided into several groups to evaluate whether a website was good or bad from https://www.webbyawards.com/ and https://www.thebestdesigns.com/ based on their purpose, layout, functionally and accessibility. Thus since we did not have a lot of time instead of doing 6 different websites each we only did 3. We were also asked to list the pros and cons and a brief explanation. These are the 3 good websites:
 |
| Fig 1.1 https://volkfi.com |
 |
| Fig 1.2 https://www.coachella.com |
 |
| Fig 1.3 https://constanceburke.com/ |
And 3 bad websites:
 |
| Fig 1.4 http://dubois.com.au/ |
 |
| Fig 1.5 https://littlegreenback.com/privacy |
 |
| Fig 1.6 https://inkilas.com/ |
Basic Interface Design | Week 2 | 3.08.19
For this week's exercise, we were put into groups of 5 to create a User Interface for Taylor's University Interactive Information Kiosk. Our target audiences were parents, visitors and new students. The goal of the interactive Kiosk is to inform the user of how to access Taylor's University. The target task that we chose was to find out how to get to Taylor's Library. Here are the photos of the prototype we made together.
 |
| Fig 2.1 Sketches #1 |
 |
| Fig 2.2 Sketches #2 |
 |
| Fig 2.3 Final Outcome of prototype #1 |
 |
| Fig 2.4 Final Outcome of prototype #2 |
 |
| Fig 2.5 Final Outcome of prototype #3 |
 |
| Fig 2.6 Final Outcome of prototype #4 |
 |
| Fig 2.7 Final Outcome of prototype #5 |
 |
| Fig 2.8 Final Outcome of prototype #6 |
 |
| Fig 2.9 Final Outcome of prototype #7 |
HTML Document Development | Week 4 | 17.9.19
For this exercise, Mr Shamsul guided us on how to make a website using HTML with our notepad (or TextEdit for Mac users). The objective of this exercise was to make us familiar with using HTML and how it works with using elements like head, headings, paragraphs, and lists. We were then asked to write 4 sections of our chosen topics about ourselves, with at least one image in every section, lists and a link. I chose to write about myself, my interests, my pets, and my favourite kpop songs.
 | |
|
 |
| Fig 4.2 HTML in notepad #2 |
 | |
|
 |
| Fig 4.4 Result #2 |
 |
| Fig 4.5 Result #3 |
 |
| Fig 4.6 Result #4 |
HTML & CSS Document Development | Week 5 | 24.9.19
For this week, we continued with the website we made in notepad but we were asked to open it in Adobe Dreamweaver. From there we had to add additional elements of HTML and CSS that we learned from the lecture.
 |
| Fig 5.1 A screenshot of CSS in dreamweaver |
 |
| Fig 5.2 The final result after adding CSS |
Here's a link to the website: https://eager-khorana-20f92c.netlify.com/
Layout Exercise | Week 6 | 1.10.19
Today we were guided by our lecturers to design a layout exercise.
 |
| Fig 6.1 HTML codes |
 |
| Fig 6.2 CSS codes |
 |
| Fig 6.3 Outcome of the website |
Website Layout Exercise | Week 7 | 8.10.19
This week we had to design a layout for Photoshop using CSS we learned from last week with HTML. Then we had our lecturers came around and take a look at our coding and layout.
 |
| Fig 7.1 HTML codes |
 |
| Fig 7.2 CSS codes |
The link to the website https://dazzling-kilby-c90e63.netlify.com/
 |
| Fig 7.3 Outcome of layout #1 |
 |
| Fig 7.4 Outcome of layout #2 |
 |
| Fig 7.5 Outcome of layout #3 |
FURTHER READING
8 Principles of Good Website Design by Sujay Pawar
 |
This article allowed me to get some insides into designing a good website. The point that got me thinking was simple is the best and that an over-designed website may not work. Hence putting too many elements on the page may lead to distracting visitors from the main purpose of the website. Simplicity always works in an effective web page design. Moreover, clean and fresh design of the website not only makes the website appealing but also help the user to navigate from one page to another seamlessly. Lastly, we should keep the design as simple as possible so that the visitors can feel it easy-to-use and can find their ways easily.
Comments
Post a Comment