Interactive Design - Exercises
Chan Qian Hui (0334447)
Interactive Design
Exercises
LECTURE NOTES
Lecture 1: Introduction to Interactive Design
27.08.19 (Week 1)
For our first lecture, Mr. Shamsul introduced us to our module, interactive design and what sort of exercises and assignment we will face in the following weeks. He also briefed us about the software and framework we are going to use throughout this module.
Lecture 2: User Interface Design
03.09.19 (Week 2)
For this class, we learnt about the differences between User Interface (UI) and User Experience (UX).
INSTRUCTIONS
EXERCISE
Week 1 : Understanding Good and Bad websitesFor our first exercise, we were divided into teams and tasked to search 3 good websites and 3 bad websites. We were to also analyze what makes them good or bad, what is the purpose of the website and the target audience. We were only allowed to choose from 2 sources which are : https://www.thebestdesigns.com/ and https://www.webbyawards.com/
Below are the websites we chosen and analyzed.
3 Good websites :
 |
| Fig 1.0 https://griflan.com/ |
 |
| Fig 1.1 https://volkfi.com/?gclid=Cj0KCQjwho7rBRDxARIsAJ5nhFpGe5zF-PjeG3OGHyXc3kOOYjoElZ0SdeLEp_avqJILgFmONabGYBYaAigvEALw_wcB |
 |
| Fig 1.2 https://www.ifly50.com/en_my/46 |
3 Bad Websites :
 |
| Fig 1.3 https://50-jahre-hitparade.ch/ |
 |
| Fig 1.4 http://puttertje.mauritshuis.nl/en |
 |
| Fig 1.5 http://www.jeremyholmesstudio.com/ |
Mr Shamsul said that the websites we chose were really good, we considered a lot of factors such as the call-to-action button, the user experience and some interesting plus points of the website. We also had solid arguments for the bad websites and overall we made good choices.
Week 2 : Taylor's University Interactive Information Kiosk
For this week, we were split into teams and tasked to design an information kiosk for Taylor's University. We need to choose our target audience from either visitor, parents or new students. The goal if the Interactive Info Kiosk is to inform the user on how to access Taylor's University.
The scenario we have chosen is : You are a new student who is trying to find her way to the library. You stumble upon a ipad directory in front of Taylor's roundabout.
Initial sketches and information gathered :
 |
| Fig 1.6 information discussed |
 |
| Fig 1.7 information discussed |
 |
| Fig 1.8 Initial sketches |
FEEDBACK :
Mr Shamsul said that the layout is good. The information in the facilities page can be changed into a drop down instead of listing it out because it's very cramped. The buttons are very clear which is good. The navigation was also good with the buttons showing the floors at the side.
Week 4 : Introduction to HTML Using Notepad
In this week's class, we were introduced to the basics of HTML by trying it out in Notepad. This exercise aims to familiarize us with the HTML basic structure and code tags.
For this week's exercise, we were required to create a HTML website about ourselves with 4 sections which includes images, navigation list, back to top button, ordered or unordered list, title and paragraph.
 |
| Fig 2.0 Process of HTML coding using notepad |
 |
| Fig 2.1 Outcome of HTML in notepad exercise |
FEEDBACK :
Mr Shamsul said that I should keep the content to the left side instead of center aligned because it is quite hard to read.
Week 5 : Adding Style
After learning how to use HTML to create our own website, this week we learn about adding style in to our website using the basic codes of CSS. Since we are learning the basics of the code, we started learning how to code in Adobe Dreamweaver. Below is my completed about me website exercise.
 |
| Fig 3.0 Process of adding style using CSS in Dreamweaver |
 |
| Fig 3.1 Final About Me Website |
 |
| Fig 3.2 Final About Me Website |
 |
| Fig 3.3 Final About Me Website |
 |
| Fig 3.4 Final About Me Website |
FEEDBACK :
Mr Shamsul reminded me to include a back-to-top button in each section and everything else looks fine.
Week 6 : Dreamweaver exercise
For this week's class, we started learning on basics of layouts in HTML and CSS using Adobe Dreamweaver.how to use create columns and categorize our content for our website into header, container, navigation, class-aside and footer. We also learn to categorize code into class and id.
 |
| Fig 4.0 HTML of layout exercise |
 |
| Fig 4.1 CSS of layout exercise |
 |
| Fig 4.2 CSS of layout exercise |
 |
| Fig 4.3 Final Layout Exercise |
After then, we were tasked to replicate or create a similar landing page based on the references and samples given by Mr Shamsul using HTML and CSS. Below are the content given by Mr Shamsul.
 |
| Fig 5.0 process of HTML coding |
 |
| Fig 5.1 process of HTML coding |
 |
| Fig 5.2 process of CSS coding |
 |
| Fig 5.3 process of CSS coding |
Screenshots of my completed website exercise :
 |
| Fig 5.4 Final outcome of website exercise |
 |
| Fig 5.5 Final outcome of website exercise |
 |
| Fig 5.6 Final outcome of website exercise |
 |
| Fig 5.7 Final outcome of website exercise |
 |
| Fig 5.8 Final outcome of website exercise |
Mr Shamsul said that my layout looks good and my buttons are clear and obvious which is a really good thing.
FURTHER READINGS
HTML and CSS: Design and Build Websites
This book is really simple to read especially for beginners who have no knowledge. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach. This book in a way that makes them accessible to everyone hobbyists, students, and professionals and it’s full-color throughout, Utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. It boasts a unique structure that allows you to progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.
Comments
Post a Comment